まず素材を書き出すためのツールについて
3つのアイコン素材を以下の3種類の形式で書き出すことを目標にする。
| image | name |
|---|---|
 |
icon-facebook |
 |
icon-twitter |
 |
icon-github |
形式
- 1xサイズ (48px x 48px) のPNG
- 2xサイズ (96px x 96px) のPNG
- 2xサイズのSVG
PhotoshopのGenerator機能を使った書き出し
Photoshopのアセット書き出し機能の設定で紹介した方法でPNG、SVGを一括で書き出す。
サイズ、形式ごとに書き出し先を初期設定で指定する方法がなさそうだったので今回は、
2x/icon-facebook.png, 50% 1x/icon-facebook.png, 100% svg/icon-facebook.svg
というようなレイヤー名で素材ごとに指定。
メリット
- 任意のフォルダに複数のサイズのPNGとSVGを同時に書き出せる。命名もコントロールできる。
デメリット
- Generator機能でSVGを書きだそうとすると、マスクによる矩形領域の指定が正しく認識されない。
参考: SVG export doesn't honor bounding box (layer mask) #354
まとめ
- 上記デメリットにより、CSS上で個別にアイコンの位置調整をする必要が生じて、コーディング、運用に悪影響である。
- 現状のPhotoshopはコーディング用のSVGを書き出すのには適さないので、PNGのみの書き出しに限定する。
- どうしてもSVGを使用したい箇所は、Illustratorで素材作成、書き出し?
- SVGの自動書き出しはあと半年待ってみる。
あたりが現状の解決策?
Illusratorのアートボードを使った書き出し
イラレの ファイル > 書き出し でアートボードごとにPNGやSVGを書き出す。
メリット
- SVGも意図した矩形領域で書き出すことができ、手数は多いがPNG、SVGともに意図した見え方で書き出せた。
デメリット
- PNG, SVGは同時に書き出せず、順番に書き出す必要がある。
- ファイル名がaiファイル名に依存する (アートボード名とは連動しない) のでリネームが面倒。
- リサイズ書き出しする機能がないので、1x素材はあとからPhotoshopのバッチ処理で処理。
- 丁寧に作業しないとアートボードの位置やサイズに小数点が入る恐れあり
まとめ
- ファイル点数が少ない場合は良いが、たくさんあるときは適さない。
- ロゴなど要所要所でIllustratorで素材管理・書き出しするのがベター?
- なお、書きだされたファイル名に振られる連番は、アートボードの重ね順に依存する。
課題
大量のアイコンデータをイラレで作成して、PNG、SVGで書き出し・素材管理したい場合のベストソリューションを知りたい。 → 自分でスクリプト書く?
→ [12/6追記] スクリプトを導入して、書き出しが出来ました。
イラレで作ったアイコンをアートボードごとにSVGで書き出す
Sketchを使った書き出し
Sketchにもスライスを書き出す機能があります。
メリット
- 複数のサイズ、形式を指定して、一括書き出し可能。
- たぶんサードパーティのスクリプトでもっと効率化の余地がある。
デメリット
- サイズ、形式ごとに書き出し場所を変えられない。(suffixと拡張子で区別)
- Sketchメインでデザインワークができない欠陥 がある
まとめ
あと一息でPhotoshopを捨てて、Sketchに完全移行できる日がくるかもしれない。
今回作成したサンプルファイル
使用アプリ: Photoshop CC 2015, Illustrator CC 2015, Sketch 3.4.2