Photoshopでアプリパーツ作ろ
Photoshopでアプリパーツを作る際の注意事項などを書き留めておきます。
特に、今回はiOS向けに。XcodeでPDF形式がサポートされたこともあり、PDFで書き出ししておけば、1ファイルを用意するだけでよくなりました。
実際にはPDFそのものが表示されているわけではなく、Xcodeでビルドされる際に、各サイズに自動的にビットマップ化され、そのビットマップ化された画像が表示されている、という形です。
…あとの詳しいことは、エンジニアさんにお任せするとして、さっそくPhotoshopでのデザイン、パーツ制作の際の注意点を。
- x1での描き出しが必要
- パーツ一つ一つ別ファイルにレイヤー複製云々しないといけない
- アセット生成ではPDF描き出しできない(現状←期待も込めて)
あ、そもそもですが、PDFで配置できるのは、ベクターで描写されたパーツのみです^_^;
x1での描き出しが必要
iOSの画面サイズは下記のとおりです。
iPhone3G/3GS - 320 x 480
iPhone4/4S - 640 x 960 (320 x 480)
iPhone5/5c/5s - 640 x 1136 (320 x 568)
iPhone6 - 750 x 1334 (375 x 667)
iPhone6 Plus - 1080 x 1920 (540 x 960)
…実際には1242 x 2208で、ダウンサイジングされています
デザインする際の制作サイズですが、主には640 x 1136で制作されているでしょうか？
実は、PDFのパーツ配置には＠1xの画像の用意が必要になります。
パーツ一つ一つ別ファイルにレイヤー複製云々しないといけない
のですが、他の方法もご存知のかたいらっしゃったら、ぜひ教えてください。。。
ですので、デザインからパーツ描き出しのフローとしては、
640 x 1136でデザインする→320px幅に解像度を下げる→パーツを新規ドキュメントに複製(※1)→余白をトリミング(※1)→PDFで保存(※2)
という手順になります。
「ドキュメントに複製」や「余白のトリミング」についてはショートカットーキーを割り当てておくとかなり楽になりますし、※1、※2の部分はそれぞれアクション登録できるので、さらに簡略化も可能です。
(後日スクリーンショット貼り付け予定)
アセット生成ではPDF描き出しできない
(現状←期待も込めて)
Adobe Photoshop CCには、アセット生成という超絶便利な機能があります。
Android用のパーツは、これで一気に描き出します。
(誰だろう、このおにーさん…)
解像度を指定できたり、サブフォルダに配置できたり、これもとても便利なのですが、PDFでの描き出しはできません。。。
いつか対応してくれる日が来ますように…
実は色々、コツも要るんですが、それはまた後日。
