iPhone風アイコンの超簡単な作成方法2つ教えまっす~!(若本風で)

カッコイイ透明感のあるiPhoneのアイコン。
iPhoneを買った当初はこの綺麗なアイコンが並ぶHome画面を眺めているだけでも幸せになれたもの。


なんとかこういうアイコンを自作できないかなぁ~とネットをウロウロしてましたら、やっぱりありました!しかも凄くカンタンときたもんだ!!


ってわけで、カンタンにiPhone風アイコンが作れる方法2つご紹介~♪

iConeでブラウザからiPhone風アイコンを作成。

iCone

ブラウザ上で簡単にiPhone風アイコンが作れるサイトが「iCone」。


真ん中に表示したい画像があれば、30秒でiPhone風アイコンが作れます。


各項目をカンタンに説明すると・・・。

▽iConeの項目説明

「IconImage」
- アイコンの真ん中に表示したい画像を選択。

「BaseColor」
- そのままにアイコン全体のベース色を指定。

「BaseAlpha」
- ベース色の強さを指定できまます。1に近づけるほど色が濃くなる。

「BackgroundColor」
- jpgにした際のアイコンの背景色。

「BackgroundAlpha」
- 背景色の色の強さを指定できまます。1に近づけるほど色が濃くなる。

「EncodeType」
- png形式かJPG形式を選べます。PNGだと背景色が透過されます。

iConeでiPhone風アイコンを作ってみました。 iConeでiPhone風アイコンを作ってみました2
ってことで実際に作ってみました。
Photoshopのシェイプで透過された真ん中の画像(47x47くらいで)を作ればあっちゅうまにできちゃいます。


iCone

glossy.jsでアイコンを無理矢理iPhone風アイコンにする。

glossy.js

glossy.js」は元々ある画像をiPhone風に見せるJavascriptです。


今あるアイコンを1からiPhone風にすんのめんどくせーよ!って方はおすすめです。
ってことでglossy.jsの使い方↓

▽glossy.jsの使い方

1.glossy.jsをダウンロードして、glossy.jsをindex.htmlのあるフォルダにFTPなどでアップロードする。

2.iPhone風にしたいアイコンがあるページの<head>~</head>の間に<script type="text/javascript" src="glossy.js"></script>(※コピペする際全角注意)と記す。

3.あとはiPhone風にしたい画像にclass="glossy"とimgタグ内に追記するだけ。
(例:<img src="icon.png" class="glossy" />)

早速やってみました。


glossyでのiPhone風アイコンglossyでのiPhone風アイコンglossyでのiPhone風アイコンglossyでのiPhone風アイコンglossyでのiPhone風アイコンglossyでのiPhone風アイコンglossyでのiPhone風アイコン


ワンクッションほど時間がかかりますができあがりは中々です(´∀`)


glossy.js


誰でも簡単につくれちゃうのでiPhone風のアイコンを作りたいって方は、ぜひ試してみてください(・∀・)