Banco Japon de Mesa Verde
最近の主な話題-iPhone-FPS-デジタル一眼-PC自作-Mac-PS3-グルメ-ファッション-etc.-
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[タグ未指定]

人気blogランキング
[iPhone 4] WIP:i2HDテーマのマスクとシャドウを試作
追記:作例2を追加

作例1適用例
マスクとシャドウで自動整形
(AppIconMask@2x.pngとAppIconShadow@2x.pngの適用例)

 前回の記事:[iPhone 4] テーマ『illumine 2 (i2HD for iPhone 4)』リリース

 前回書いたとおり、イニシャルリリースのi2HDテーマはマスクとシャドウによるApp Storeアプリアイコンの自動整形を放棄しています。今回はカスタムマスクとシャドウを試作。応急措置です。

 作業時間はおよそ2分。
 AppIconMask@2x.png→テーマ付属のpsdを利用。マスクエリアは#000000でフィル、アイコン可視エリアはpsdのレイヤにあったグレーグラデーションを適用。
 AppIconShadow@2x.png→同じくpsdを利用。ベースカラーはグレー、グロウはブルーをチョイス。

 結果(例:上の画像)は、まぁ、こんなもんでしょう。
 違和感は減りました。
 自動整形なので当然ながら、個々にカラーを変えるのは不可能です。

作例1(上の画像が適用例)

AppIconMask@2x.png
AppIconMask@2x.png

AppIconShadow@2x.png
AppIconShadow@2x.png


追記:作例2(元アイコンのカラーを表示)

AppIconMask@2x.png
AppIconMask@2x.png
補足:マスクのアイコン部分が#FFFFFFなので元アイコン画像は透過されず、オリジナルのカラーを保って表示されます。透過しないためシャドウは(#FFFFFFの箇所が)全く表示されないので作例1の物を流用。なお、元アイコンのカラーが強くなるため、錯覚によりグロウの表示がアイコン毎に不均一と感じる傾向は、作例1より強くなります。

作例2適用例
マスクとシャドウで自動整形
(AppIconMask@2x.pngとAppIconShadow@2x.pngの適用例)
スポンサーサイト

テーマ:iPhone - ジャンル:携帯電話・PHS


人気blogランキング
コメント
この記事へのコメント
素晴らしいです!
有り難く頂きました。

ちょっとアイコンが曇った感じになってしまうのが気になりましたがpsdを弄れない自分としては本当に助かりました。
2011/01/08 (Sat) 23:47:03 | URL | o #6moyDOY6[ 編集]
クリアバージョンも追加しました
こんばんは、ありがとうございます
おっしゃるとおり、ちょっと曇って不鮮明な印象になってしまいましたよね。
マットな質感を狙って半透明とグラデーションをかけたんですが、やはり自動整形の重ね合わせだけで表現するのは無理があるようです。

そこで、エッジ以外は半透明処理しない、元アイコンがクリアに見える作例2を追加しました。よかったら使ってみて下さい。
2011/01/09 (Sun) 05:16:39 | URL | bancojapon #mQop/nM.[ 編集]
おおおお
わざわざすみません・・・

しっかりアイコンも綺麗になりました。。
これでi2HDアイコンを一から拾わずに済みます・・
自動整形は本当便利で助かります。
有難う御座いました。
2011/01/09 (Sun) 19:37:56 | URL | o #6moyDOY6[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2005-2011 Banco Japon de Mesa Verde all rights reserved.
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。