code up

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

アイコンまとめ

よく利用するアイコン集、アイコンジェネレータ、タグの書き方など。

フリーアイコン

ICONS.PRO

アイコン集。サイズ(32px以上~256px以上)や商用利用で絞り込める。元はフランス語のサイトのようでヘルプがフランス語しかなかったりする(--;。

メールアドレスアイコン

E-Mail Icon Generator

だいぶ昔はGmail Icon Makerという名前だったが、Gmail以外にもアイコンを作れるってことで名称変更したようだ。他にはGmail Signature Generatorというサイトがあって立体的なGmailアイコンが作れたようだが、現在は閉鎖されているみたい。

ギャラリー

iPhoneアイコンジェネレータ

iPhone Style Icon Generator

Google先生によるといくつかジェネレータが出てくるが、一番オプションが多いのでいつも利用させてもらっている。

と、この記事を書いている時点でiPhone Icon Generator 2.0iPhone / iTouch icon generator - iPhone Icon, Favicon, .ico Generator(2010年8月くらいから止まってる?)は動作が確認できなかった。iPhone Icon Generator 2.0は以前使ったがオプションが少ないので、いずれにせよiPhone Style Icon Generatorでいいと思う。

iPhone Style Icon Generatorを提供しているIconJ.comは、サイトを見るとfaviconのホスティング(faviconをアップロードできないサイト向け)やアイコンギャラリー(商用利用やブログ利用は有料ライセンス)も提供している。またOnline Pic To Icon ConverterというiPhone効果を与えないアイコン生成機能も提供している(.icoは128pxまで)。

iPhone Style Icon Generatorが提供している機能;

  • 9種類のグラスリフレクション(ガラスのような反射効果)

  • 反射レベル(Level of Glass Reflection)

    Normal Middle Strong
  • 影の強さ(Icon Shadow)

    None Slightly
    (わずか)
    Strong
    (強い)
  • リサイズ、クロップ(Resize and Crop)

    Auto Resize
    縦横比は固定せずに正方形に画像を変換する
    Auto Crop
    縦横比を固定し、はみ出る分を削除する。横長だったら左右の領域が削られる
    Resize Without Transform
    Paddingのこと。縦横比を固定し、足りない部分を加える。横長だったら上下に背景が加わる(白グレーのグラデーション)
  • アイコンのサイズ(Export Icon Dimensions)

    16px(faviconなど), 24px(Androidなど), 32px(XP, Macなど), 48px(Vistaなど), 57px(iPhone), 64px(Linuxなど), 72px(iPadなど), 96px(Androidなど), 128px(XP以降用のアイコン), 256px(Vista以降用のアイコン*)から選ぶことができる。参考: The Icon Reference Chart
    * .ico形式は128pxまでしかエクスポートできない
  • 出力ファイル形式(Export File Type)

    .ico, .pngから選ぶことができる。.icoはマルチアイコンとしては出力できない
  • シャープ、コントラスト(Sharpen and Contrast)

    プラスをする毎に線がくっきりとし色が濃くなった、、、と思う。
    None +1 +2 +3

こんな感じでheadタグに書きましょう的なもの。参考: Custom Icon and Image Creation Guidelines(反射光とか)。Configuring Web Applications(linkタグの話)。

<!-- リサイズ、角丸(Rounded Corners)、ドロップシャドウ(Drop Shadow)、反射光(Reflective Shine)の視覚効果付き -->
<link rel="apple-touch-icon" href="icon.png" />
<!-- リサイズ、角丸のみ -->
<link rel="apple-touch-icon-precomposed" href="icon.png">

Pic2Icon

2012年4月12日追記: Pic2Iconもよさそう。縁は作れないけどエフェクト(セピア風)とかできる。

favicon

マルチアイコンが作れるものだけ。

FavIcon Generator - Dynamic Drive

16pxの.icoに32pxと48pxを含めたマルチアイコンの生成を行ってくれる。透過処理もバッチリ。

似たサイトとしてFavicon Generatorというサイトがあり96pxまで含めたマルチアイコンが作れるのだが、透明がどうやっても(.pngでも.gifでも)判定してもらえず、背景が白や黒になるので、使用は諦めた。

こんな感じでheadタグに書きましょう的なもの。mime-type等詳細はWikipediaで確認できる。

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

オンラインでなくてもフリーウェアを使って.pngだったり.gifファイルの.icoへの変換やマルチアイコン化は今も昔も可能。最近はオンラインしか使わないが、以前フリーウェアを使ってた頃はfavicon、お気に入りアイコンの作り方 - acky.infoが大変参考になった。

Pic2Icon

2012年4月12日追記: FavIcon Generator - Dynamic Driveがつながらないので別のを探す。Pic2Iconで48x48, 32x32, 24x24, 16x16のアイコンが作成できた。

関連記事
タグ:icon iPhone Gmail
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。