リソース書き出し用PSDに
ベクターマスクと自動生成を使う
Webサイト制作やアプリ開発でたくさんのリソース画像を用意しますが
忙しいとついつい後回しにしがちなこれ…
・整理整頓されてない雑なレイヤー構造
・修正で再書き出しの度に手作業で単純繰り返し作業をやる
もっと忙しくなったら追加デザイナーやアシスタントが来ますよね。
その忙しい時にマニュアル作っ…るの大変だからマンツーマンでやり方説明して…
人が増える度に教える…教えなければ追加人員の学習コストがあがる…
一緒に働く人や後工程の人のことを考えて仕事をしている人は重宝されるので
最初からちゃんと作っておくといいよ！ という記事です。
① レイヤー構造の整理整頓
・レイヤーフォルダを使って整理整頓（入れ子にしすぎると逆に不便に）
・レイヤー名は短く分かりやすく
・ローカライズ予定があるならなるべく英語表記
・英語表記は正確な英単語よりメジャーな単語がおすすめ
・レイヤーの上下順と画面に並んでいる順はなるべく一致させる
② 人間が見るためのスライス領域
・書き出し領域を可視化しておく
・ベクターレイヤーで可視化するのがおすすめ
・数値でサイズをコントロールできる
・拡縮した時にエッジがボケる心配もない
③ 自動生成のためのスライス領域
・パスコンポーネント選択ツールで②のパスを選択してコピー（Ctrl+C／command+C）
・黒い矢印のツールがパスコンポーネント選択ツール
・白矢印のパスツールでもOK
・書き出したいレイヤーフォルダを選択してペースト（Ctrl+V／command+V）
④ 自動生成のためのファイル名
・レイヤーフォルダ名の末尾に拡張子をつける＝書き出されるファイル名
・詳しい書式は「Photoshop 自動生成」などで検索してください
⑤ 不要なデータがないか確認
・スマートオブジェクトが不必要に大きくてファイルサイズ巨大化はよくある
・バックアップのために残しておきたいレイヤーが多いなら別ファイルにするなど
⑥ ファイル＞生成＞自動アセット にチェックを入れる
⑦ PSDと同じ階層にフォルダが作られ
⑧ その中に自動で画像が書き出される
レイヤーを移動すると書き出し領域が崩れる問題
以下の⑩のような感じに書き出し領域が崩れることがあります
⑪ ③で設定した書き出し領域を選択
⑫ 一旦ずらす
⑬ 元の位置に戻す
