iOS 7にも対応!10サイズのアプリアイコンを一度に書き出せるPSDテンプレートを公開。

iOS App Icon Template CC
ついにiOS 7のリリースも明日に迫りましたね。
今回のOSアップデートでさらにアイコンサイズが増え、面倒だなぁ。。と感じていらっしゃるアプリ開発者、デザイナーも多いのではないでしょうか?

というわけで、アプリアイコン×10サイズを一括で書き出せるアイコンテンプレートを公開します。
元々は自分の仕事用に用意した物なのですが、せっかくなので公開することに。

尚、このテンプレートはPhotoshop CC 14.1以上のみの対応になります。
先日、CCのアップデートで『画像アセット』という新機能が搭載されたのですが、これによって1024pxアイコンをデザインしてPSDを保存するだけで全10サイズのpngを書き出すことが可能になったわけです。
ですので、旧バージョンには対応しようがありませんのであしからず。

ちなみに、今回のテンプレート作成にあたっては、Photoshop用ブラグインDevRocketの一機能を参考にさせて頂きました。
公開したテンプレートでは、ホーム画面用×8サイズとiTunes ArtWorkの1x, 2xサイズのみですが、DevRocketではスポットライトと検索用の各サイズも書き出せます。(ただし、DevRocketではプレビュー用のiOS 7の角丸マスクは合っていませんので注意。)
その他にも使える機能がありますので、気になった方は導入される事をオススメします!

テンプレートの使い方

このPSDファイルを見ただけでは使い方が分からない。。という方もいるかと思いますので、ざっと使い方をご紹介。
念のため、細かな注意点なども書き添えておきます。

テンプレートの構成

まずはテンプレートの構成について。
全体的には下のような形になっています。

レイヤー構成

ラベル
テキストレイヤーです。お客さんに渡す場合などはここを『アプリ名 Icon A01』などに変えて渡しています。

プレビュー
ここは基本的には触らない部分です。
主に全体のマスクとPSD右側にある背景色違いのプレビューとAppStoreプレビュー用のレイヤーが入っています。

編集用グループ
実際にデザイン作業をする箇所になります。
この中のMASTER ARTWORKレイヤーはスマートオブジェクトなので、サムネイルをダブルクリックすると、編集用のPSBファイルが開きます。
これがマスターレイヤーになっているため、これを更新することでPSD全体のすべてのアイコンに反映されるようになっています。

その下で非表示になっているMASTER ARTWORK(OLD)レイヤーはiOS 6以前向けの角丸に合わせる場合のマスターレイヤーです。(※詳細は後述)

書き出し用グループ
書き出し用グループ内のそれぞれのレイヤーグループには、マスターレイヤーをコピーしてサイズ変更したスマートオブジェクトが入っています。
ここについても書き出しの際の調整ポイントがありますので、後述します。

アイコンの作成と画像アセットを使ったPNG書き出し

前述の通り、MASTER ARTWORKレイヤーのサムネイルをダブルクリックすることでPSBが開き、編集が出来ます。
編集が終わったら、⌘SでPSBを保存し、元のテンプレート(PSD)に戻ります。

各サイズの一括書き出しを行うには、Photoshop CCの新機能『画像アセット』を利用します。
下のように [ファイル] > [画像アセット] を選択するとメニューにチェックマークが付くので、そのまま⌘+Sします。
すると元のPSDファイルと同じフォルダ内に[**-assets]というフォルダが作成され、その中に各サイズのpng画像が出力されます。
(※ 動作が重い環境などでは書き出しに失敗することがありますが、その場合にはメモリを解放するなどしてから再度書き出せばOKです)

画像アセット

ちなみに画像アセットをONにした状態では、保存する度に書き出しとファイルの上書きが毎回実行されるので、必要ない時はOFFにしておくのがオススメです。

また、編集したPSB単体をPSDとして保存することも可能です。
その場合には、[別名で保存]を選択し、ファイル形式をPhotoshopにして選択先を変更して保存すればOKです。

psbをpsdに

書き出したPNGの最適化

コレだけで完了っ!…と言いたいところですが、実はこの画像アセット、[Web用に保存]とは違う仕様のようで、書き出されたPNGファイルをプレビュー.appなどで開いて詳細を見てみるとDPIが71.98になってしまいます。。(本来は72)
まぁ、大した実害はないとは思うのですが、気になるのでその改善策をご紹介。

この対策にはImageOptimという画像最適化ツール(フリーウェア)を利用します。
使い方は、ImageOptimを開いてウィンドウに[**-assets]フォルダをドロップするだけ。
あとは良い感じにPNGの最適化とファイル容量の削減をやってくれるので一石二鳥!
これでDPIも72に修正されます。

ここまでが基本的な使い方になります。

MASTER ARTWORK.psbについて

PSB

編集用のMASTER ARTWORK.psbの構造は上のようになっています。Designグループレイヤー以下は自由に編集してもらうとして、その上にあるPreviewMaskグループを表示することで、iOS 7とiOS 6以前それぞれに合った角丸マスクをかけて確認することが出来ます。
ちなみに通常状態ではダークグレーでマスクされますが、カラーオーバーレイをオフにすることで角丸の外側が透過されたような状態で見ることも出来ます。

ただし、画像アセットを実行する際には、必ずマスクを非表示にするようにしてください。
これを表示にしたまま書き出した場合、アイコンのフチにマスクが残ってしまいますのでご注意を。

角丸にあわせたデザインをする方法

デフォルトではMASTER ARTWORKレイヤーがすべてのサイズに反映されますが、iOS 7用と旧OS用に分けてデザイン出来るようにもしてあります。
旧OS向けのデザインを別に作成するには、以下のようにしてください。

1. MASTER ARTWORK(OLD)レイヤーを編集して保存。
2. 旧OSサイズ向けの書き出しレイヤーグループを開き、copy artworkを非表示にし、copy artwork(old)を表示する。
  (旧OS向けは、Icon, Icon@2x, Icon-72, Icon-72@2xの4つ)
3. ここまでで新旧対応した状態になるので、そのまま画像アセットをONにして書き出す。

各サイズのシャープネス調整

このテンプレートでは、各サイズごとのシャープネス調整も簡単に出来るようにしています。

スマートフィルタ

アンシャープマスクは上のように、各サイズのレイヤーすべてにスマートフィルタとして設定してあるため、アンシャープマスクをダブルクリックすることで調整出来ます。
(デフォルトでは非RetinaサイズのものにはアンシャープマスクがON、RetinaサイズはOFFになっています。)

実際のアンシャープマスクのかけ具合やその必要性は、書き出しサイズやデザインによっても変わりますので、書き出された画像のボケ具合を確認しながら調整すると良いでしょう。
ただし、掛けすぎれば画質は劣化しますので、もしアンシャープマスクの調整をしても納得がいかない場合は、各サイズに合わせた縮小/調整/書き出しを手作業で行う方が良いかと。

長くなってしまいましたが、説明は以上です。

ではではみなさま、このテンプレートを使って素敵なアイコンを作ってくださいませ!

ダウンロードリンク:All in One App Icon Template for CC (use ImageAssets)
(※ ダウンロードは一番下にあります)

広告

iOS 7にも対応!10サイズのアプリアイコンを一度に書き出せるPSDテンプレートを公開。」への1件のフィードバック

  1. ピンバック: 【おはあぷ】アイコンサイズ多すぎムキー!な人、必見! | あぷまがどっとねっと

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中