Tabs

iPhone&Androidのアプリ制作・デザイン

*

【PhotoShop#001】アプリのアイコンを一撃で生成

      2016/07/04


1024x1024pxのアイコンさえあれば、一撃ですべてのアイコンを生成することが可能だ。

準備するもの
iTunesArtwork.png(サイズ:1024x1024px)

これを画面のようにレイヤーにセットスクリーンショット 2016-01-21 5.50.38
そのレイヤーを選択した状態でPhotoShopメニューの

ファイル > 生成 > 画像アセット

にチェックを入れる。スクリーンショット 2016-01-21 5.57.03

レイヤー名を次のように変更してください(コピペでOK)
※レイヤー名は英数字256文字までの制限がある為、名称を簡略化

iOSの場合

5.9%Icon-60.png,11.7%Icon-60@2x.png,17.6%Icon-60@3x.png,7.4%Icon-76.png,14.84%Icon-76@2x.png,22.26%Icon-76@3x.png,16.3%Icon-iPadPro@2x.png,2.83%Icon-29.png,5.66%Icon-29@2x.png,8.5%Icon-29@3x.png,3.9%Icon-40.png,7.8%Icon-40@2x.png,11.7%Icon-40@3x.png

Androidの場合

36x36Icon-36.png,48x48Icon-48.png,72x72Icon-72.png,96x96Icon-96.png,144x144Icon-144.png,192x192Icon-192.png,512x512Icon-512.png

 

レイヤー名を変更したら、残す作業はファイルの保存のみ。「Web書き出し」みたいな作業は必要がなく、ただただファイル保存すればOK。

便利ネー!

ファイル > 保存 すると、PSDデータと同じ階層に「(PSDファイルの名称)-assets」というファルダが生成され、その中にアイコンがずらりと並んでいる。

iconSS

PSDファイルを保存する度にそれぞれのアイコンは自動的に上書き保存されるので、「画像アセット」のオンオフで切り替えるべし。

おわりに

PhotoShopがめまぐるしく進化しているので、こういったTipsを書くのが怖かった。「は?もっと簡単にやる方法あるんだけど何言っちゃってくれちゃってるの?」「説明下手すぎ」と言われるかもしれないという恐怖。

でも今年からそうやって怯えるのはやめにした。叱られたり罵られながら成長できることの方が大きい。

文章を書くのが苦手な私にとって、たどたどしくヨチヨチ歩きしながら、こうやって文章を書く練習にもなる。

叱咤激励、よろしくおねがいいたしまする。


 - PhotoShop

  関連記事

diary
デザイン・レイアウト

プログラミングの技術ばかり書き溜めていると肩こっちゃうよーとなるので、自分の得意 …