< ﾍﾟｰｼﾞ移動: 1 2 >
<画像：iPhone風ｱｲｺﾝの超簡単な作成方法2つ教えまっす〜!(若本風で)>
ｶｯｺｲｲ透明感のあるiPhoneのｱｲｺﾝ｡
iPhoneを買った当初はこの綺麗なｱｲｺﾝが並ぶHome画面を眺めているだけでも幸せになれたもの｡
なんとかこういうｱｲｺﾝを自作できないかなぁ〜とﾈｯﾄをｳﾛｳﾛしてましたら､やっぱりありました!しかも凄くｶﾝﾀﾝときたもんだ!!
ってわけで､ｶﾝﾀﾝにiPhone風ｱｲｺﾝが作れる方法2つご紹介〜♪
ﾌﾞﾗｳｻﾞ上で簡単にiPhone風ｱｲｺﾝが作れるｻｲﾄが｢iCone｣｡
真ん中に表示したい画像があれば､30秒でiPhone風ｱｲｺﾝが作れます｡
各項目をｶﾝﾀﾝに説明すると･･･｡
｢IconImage｣
- ｱｲｺﾝの真ん中に表示したい画像を選択｡
｢BaseColor｣
- そのままにｱｲｺﾝ全体のﾍﾞｰｽ色を指定｡
｢BaseAlpha｣
- ﾍﾞｰｽ色の強さを指定できまます｡1に近づけるほど色が濃くなる｡
｢BackgroundColor｣
- jpgにした際のｱｲｺﾝの背景色｡
｢BackgroundAlpha｣
- 背景色の色の強さを指定できまます｡1に近づけるほど色が濃くなる｡
｢EncodeType｣
- png形式かJPG形式を選べます｡PNGだと背景色が透過されます｡
<画像：iConeでiPhone風ｱｲｺﾝを作ってみました｡> <画像：iConeでiPhone風ｱｲｺﾝを作ってみました2>
ってことで実際に作ってみました｡
Photoshopのｼｪｲﾌﾟで透過された真ん中の画像(47x47くらいで)を作ればあっちゅうまにできちゃいます｡
｢glossy.js｣は元々ある画像をiPhone風に見せるJavascriptです｡
今あるｱｲｺﾝを1からiPhone風にすんのめんどくせｰよ!って方はおすすめです｡
ってことで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" /＞)
早速やってみました｡
< ﾍﾟｰｼﾞ移動: 1 2 >
|
|