カッコイイ透明感のあるiPhoneのアイコン。
iPhoneを買った当初はこの綺麗なアイコンが並ぶHome画面を眺めているだけでも幸せになれたもの。
なんとかこういうアイコンを自作できないかなぁ～とネットをウロウロしてましたら、やっぱりありました！しかも凄くカンタンときたもんだ！！
ってわけで、カンタンにiPhone風アイコンが作れる方法２つご紹介～♪
iConeでブラウザからiPhone風アイコンを作成。
ブラウザ上で簡単にiPhone風アイコンが作れるサイトが「iCone」。
真ん中に表示したい画像があれば、30秒でiPhone風アイコンが作れます。
各項目をカンタンに説明すると・・・。
「IconImage」
– アイコンの真ん中に表示したい画像を選択。
「BaseColor」
– そのままにアイコン全体のベース色を指定。
「BaseAlpha」
– ベース色の強さを指定できまます。１に近づけるほど色が濃くなる。
「BackgroundColor」
– jpgにした際のアイコンの背景色。
「BackgroundAlpha」
– 背景色の色の強さを指定できまます。１に近づけるほど色が濃くなる。
「EncodeType」
– png形式かJPG形式を選べます。PNGだと背景色が透過されます。
ってことで実際に作ってみました。
Photoshopのシェイプで透過された真ん中の画像（47×47くらいで）を作ればあっちゅうまにできちゃいます。
glossy.jsでアイコンを無理矢理iPhone風アイコンにする。
「glossy.js」は元々ある画像をiPhone風に見せるJavascriptです。
今あるアイコンを1からiPhone風にすんのめんどくせーよ！って方はおすすめです。
ってことでglossy.jsの使い方↓
１．glossy.jsをダウンロードして、glossy.jsをindex.htmlのあるフォルダにFTPなどでアップロードする。
２．iPhone風にしたいアイコンがあるページの＜head＞~＜/head＞の間に＜script type=”text/javascript” src=”glossy.js”＞＜/script＞（※コピペする際全角注意）と記す。
３．あとはiPhone風にしたい画像にclass=”glossy”とimgタグ内に追記するだけ。
（例：＜img src=”icon.png” class=”glossy” /＞）
早速やってみました。
ワンクッションほど時間がかかりますができあがりは中々です(´∀｀)
誰でも簡単につくれちゃうのでiPhone風のアイコンを作りたいって方は、ぜひ試してみてください(・∀・)