goo

色んなRSSアイコンを作ってみました

先日紹介した新しいRSSアイコンRSS Iconですが、Feed IconsでダウンロードできるZIPアーカイブには、GIFやPNGといったラスタ画像の他に、SVGというXMLで書かれたベクタ図形のファイルも含まれています。

  1. ./default/feed-icon.svg (2005年12月31日14:38:42 1,128バイト)
    オレンジ色、128px × 128px
  2. ./grayscale/feed-icon.svg (2005年12月29日02:06:18 1,081バイト)
    グレースケール、128px × 128px

    他に、JPEG、PSD、AI、EPS、SVG、PDFもあり。

このアーカイブに含まれているSVGは、縦横が128ピクセルでオレンジ色とグレースケールの2ファイルだけでした。でも、SVGはXMLで書かれているためテキストエディタで容易に編集できるじゃないですか!それに、Firefox 1.5にドロップするだけで、SVGは表示できるし。ということで、サイズを変更したり、色々な色のRSSアイコンを作ってみました。

また、タイニーボタン(ちっちゃいバナー)メーカのサイトである80x15 Brilliant Button Makerを利用すれば、アイコンイメージのアップロードができて、アルファベットも任意の値が入力できます。既にRSSアイコンを新しくされた方もいらっしゃるようですが、もしよければミントでも使って、タイニーボタンを作ってみてください。

-Feed Icons of 13 colors (Mid私製版)
概要

オリジナルアーカイブ内のデフォルト(オレンジとグレー)のSVGをベースに、サイズを変更し11色追加してみました。
アーカイブ内には、13色・2サイズのSVGとPNGが含まれています。


オレンジバイオレットミントマゼンタブルーライム(オレンジ色ベース)、
グレーサーモンライトグリーンスレートブルースカイブルーピンクイエロー(グレースケールベース)、の13色。

サイズ

11px × 11px feed_icon_mid_11_03_mint.pngRSS Mid-Knightのようなタイニーボタン加工用)
32px × 32px feed_icon_mid_32_14_slateblue.png

フォーマット

SVG、PNG

アーカイブファイルの在処

Feed Icons 私製版(13色) - 『子供、いらない』付録SS

オリジナルの入手先

Feed Icons


-変更部分の解説

オレンジ色ベースで作った32ピクセル・ブルーRSSアイコン(feed_icon_mid_32_05_blue.svg)のSVGと変更点は、以下の通り。

32ピクセル・ブルーRSSアイコンのSVGと変更点
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32px" height="32px" id="RSSicon" viewBox="0 0 256 256">
  <defs>
    <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
      <stop offset="0.0"    stop-color="#2D70E3"/>
      <stop offset="0.1071" stop-color="#317DEA"/>
      <stop offset="0.3503" stop-color="#3795F6"/>
      <stop offset="0.5"    stop-color="#3A9EFB"/>
      <stop offset="0.7016" stop-color="#317CEA"/>
      <stop offset="0.8866" stop-color="#2B64DE"/>
      <stop offset="1.0"    stop-color="#295BD9"/>
    </linearGradient>
  </defs>
  <rect width="256" height="256" rx="55" ry="55" x="0" y="0" fill="#155DCC"/>
  <rect width="246" height="246" rx="50" ry="50" x="5" y="5" fill="#529CF4"/>
  <rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
  <circle cx="68" cy="189" r="24" fill="#FFF"/>
  <path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
  <path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
</svg>

なお、グレースケールの方が色指定箇所(stop-colorやfill)が少ないため、色合いの変更は多少容易でした。


-指定したカラーコード

本項は、資料をご覧ください。


-SVGの閲覧方法

本項は、SVGプラグインを使ってみたをご覧ください。



↑B色んなRSSアイコンを作ってみました(カラーコード) 2006年01月16日02:22
SVGプラグインを使ってみた 2006年01月17日23:21
Feed Icons(RSSアイコンの配布サイト)
Feed Icons 私製版(13色) - 『子供、いらない』付録SS 2006年01月15日22:54
80x15 Brilliant Button Maker - LucaZappa.com(アイコン画像のアップロードができるタイニーボタンメーカ、日本語は不可)
ちまちまボタンメーカー(クローン) - UnderDone(日本語が使えるタイニーボタンメーカ、画像は不可)
駅のRSSアイコンですよ - BLOG STATION 2006年01月15日22:28
RSSアイコンを作ってみよう 2006年01月14日01:02
Firefox 1.5日本語版リリース 2005年11月30日19:15

コメント ( 0 ) | Trackback ( 1 )
« 色んなRSSアイ... 色んなRSSアイ... »
 
コメント
 
コメントはありません。
コメントを投稿する
 
名前
タイトル
URL
コメント
コメント利用規約に同意の上コメント投稿を行ってください。
数字4桁を入力し、投稿ボタンを押してください。
 
この記事のトラックバック Ping-URL
 
 
・このブログへのリンクがない記事からのトラックバックは受け取らないよう設定されております
※ブログ管理者のみ、編集画面で設定の変更が可能です。
 
 
RSSアイコンを置いてみました (リアルなネタで勝負Blog)
左の下にRSSアイコンを追加してみました。注:2007年4月18日 6:54:00現在 著作権フリーの無料素材サイトを利用しています。 参考にさせてもらったサイトは以下の順序です。 Feedアイコン - RSSやXML用のオリジナルアイコンダウンロードギャラリー ≫ Feedアイコン - ...