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ランキング
[iPhone 4] テーマ『illumine 2 (i2HD for iPhone 4)』リリース
追記:マスクとシャドウを作ってみました(App Storeアプリ自動整形用)

i2HD for iPhone 4

 3Gや3GSの時代から人気のテーマ『illumine』の続編が、iPhone 4のRetinaディスプレイに対応した『i2HD for iPhone 4』としてリリースされました(有料、2ドル以上寄付するとダウンロード可能)。

注意
  iPhone 4、iOS 4.1で確認、要Jailbreak、WinterBoard用
  いつもどおりご利用は自己責任で

ダウンロード及び関連サイト
 ダウンロード(購入)
   taptounlock.me - i2HD Official Release Page
 サポート&アイコンリクエスト
   MacThemes Forum / [Theme] Official i2HD
 作者のdeviantARTアカウント
   kon on deviantART


特記事項
 アイコン自動整形未対応
 App Storeアプリアイコンの自動整形(オートスキニング)にはまだ対応していません。マスクは付属せず他のシャドウ等は全て透明画像です。テーマ付属のドキュメントにも「まだ適切なマスクを作れていない」旨記載されています(作者はOSオリジナルのマスク等4ファイルをリネームして無効化することを推奨していますが、それは・・・)。
 ※注:そのドキュメントの記載にもあるとおり、オリジナルを無効化する場合に「削除」は止めた方が無難です(リネームなら絶対安全かどうかは私は保証しません、やる場合は自己責任で)。以前も当ブログへのコメントや海外サイトのフォーラムにて、削除後ファイルを戻したりキャッシュを削除したり手を尽くしても復旧せず解決策が見つからなかった事例が報告されています。
 作者からこれらファイルが提供されるまでは、アイコン置換のために上記アイコンリクエストサイトから入手するか、テーマ付属のpsdで自作するか、マスク等を自作する等により対応する必要があります。
 アイコン以外のコンテンツは未収録
 現在のところアイコン以外のUI画像、アプリのスキン、サウンド等は付属していません。


 3Gと3GSではほとんど使っていなかったテーマですが、4ではしばらく使ってみようかな? 700個近くあるアイコンを個々に置換するのは御免被りたいので、マスクとシャドウを自作してみようと思います(どうせ作者が意図した物ではなくても自己満足できりゃいいんだから)。追記:試作第1弾はこちら

過去の関連記事:[iPhone 3GS] 『illumine』テーマのアイコン自作を試す

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


人気blogランキング
[iPhone 3GS] ストIV発売記念、各種テーマのキャラアイコン
 iPhone/iPod touch向け『Street Fighter IV』のリリースを記念して(?)、各種テーマ用のアイコンを作ってみました(要Jailbreak、WinterBoard用)。

ストリートファイター IV(App Store、900円)
Street Fighter IV for iPhone

 とりあえずバリエーションは主要3キャラ(リュウ、ケン、チュンリー)しかありません。
 アイコンのラベル名は英語環境「SF IV.png」、日本語環境「ストIV.png」です。

Eternal
Eternal - Street Fighter 4Eternal - Street Fighter 4Eternal - Street Fighter 4

Glass Orb Color
Glass Orb Color - Street Fighter 4Glass Orb Color - Street Fighter 4Glass Orb Color - Street Fighter 4

iElegance (iElegance PRO)
iElegance - Street Fighter 4iElegance - Street Fighter 4iElegance - Street Fighter 4

Orbz2.2 V1,V2,V3,V4
Orbz v1 - Street Fighter 4Orbz v1 - Street Fighter 4Orbz v1 - Street Fighter 4Orbz v2 - Street Fighter 4Orbz v2 - Street Fighter 4Orbz v2 - Street Fighter 4
Orbz v3 - Street Fighter 4Orbz v3 - Street Fighter 4Orbz v3 - Street Fighter 4Orbz v4 - Street Fighter 4Orbz v4 - Street Fighter 4Orbz v4 - Street Fighter 4

Time Machine 3.0
Time Machine - Street Fighter 4Time Machine - Street Fighter 4Time Machine - Street Fighter 4

illumine
illumine - Street Fighter 4illumine - Street Fighter 4illumine - Street Fighter 4
 このillumineテーマだけは使用したことがないため、デザイン的に他のアイコンと釣り合いが取れるのかイマイチ自信ありません。ごめんなさい。以前の試作に倣って再度自作チャレンジしてみました。

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


人気blogランキング
[iPhone 3GS] 『illumine』テーマのアイコン自作を試す
 iPhone/iPod touch用のテーマ『illumine』(要Jailbreak、Cydiaから入手)
 全く使ったことなかったのですが、アイコン自作方法に関して質問を受けたのを機に、興味本位でアイコン自作を試してみました。
 OrbzやGlass Orb Colorほど気軽ではないようです。それはPhotoshop(Elements不可)でないとテンプレートが利用できないかもしれないから。

■Photoshopのpsdを読めるアプリを試してみる
 (PictBear、Gimp、PaintShopProなど)

PictBear、Gimp(Ubuntu付属のやつ)
 レイヤーのグループが正常に読み取れず、ベクトルマスクやレイヤーの効果(ドロップシャドウやグラデーション)なども機能していない。
古いPaintShopPro(7, 8, 9あたり)
 エラーで読めない、または上と同じ。

■Photoshop Elements 8を試してみる
 一見正常に扱えるが、レイヤーグループが機能非対応で展開できない(編集できない)ため肝心のカラーを選択できない。ラスタライズすれば展開できるが、それでは上のアプリと同じ。



 ということで早々に諦め、最新のPhotoshop CS4を使ってみました。以下その場合の手順です。
 (Photoshopに精通はしていないため自己流です)

■アイコン自作手順
1.テンプレートを入手
 作者のサイト(下記)からテーマのzipを入手。Template.psdが含まれています。
 http://kon.deviantart.com/art/illumine-125260861

2.Photoshopでテンプレートを開く
 Template.psdを開きます。下の画像が初期の状態です。作例(見本及びレイヤースタイルの参考)として一番上にAppStoreアイコン用のレイヤーが乗っています。

Template.psd初期状態
 初期の状態

(以下、文末追記参照願います・・・)

作例 『Aera』
作例『Aera』



■雑感
 テンプレートとPhotoshopを利用すればベーシックな操作だけでオリジナルアイコンは作れます。ただしテーマ付属のアイコンはどれもマットな質感かつ、オリジナルアイコンとは異なった画像を使っているため、オリジナルアイコンのコピペだけだと違和感があるのも確かです。
 (テンプレートにあるレイヤースタイルの応用だけでなく、ベースカラーと質感を生かすための下絵造りが更なるクオリティ向上のために重要かもしれません)
 完全な調和を得るためにはそれなりに職人技(作画能力)が必要かもしれません。
 (私のスキルではゼロからの作画は無理、コピペが精一杯です)


追記
 いかんせん作例の完成度が低く、内容に自信が持てないため「作成手順」の部分は後日削除しました。
 使用していないテーマなので、今後この話題に関してアップデートすることはないと思います。

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


人気blogランキング
copyright © 2005-2011 Banco Japon de Mesa Verde all rights reserved.
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。