QunC

Photoshop|画像を大量に作らないといけない時にデータセットがマジイケメン

time 2015/01/07

Photoshop|画像を大量に作らないといけない時にデータセットがマジイケメン

〆切直前にアイコンを〇〇〇個くらい新規につくらないといけなくなり
ちょっと死にたくなったけどデータセットのおかげで事なきを得たので覚え書きをして布教します

データセット?

PhotoshopでCSVデータから画像を合成してもりもり吐き出す機能。

ではやってみます

1)元のデザインのバリエーション変化する箇所を分割する&テンプレートを作る

detaset_001

こんなかんじで分割して入れ替えていくことにします

今回はレイヤーを
filename…ファイルネーム
add…発展用補助アイコン
light…ツヤ
picture…中身の絵柄
bg…ベース

に分割しました。これが変数になります

基本のテンプレートをつくる

detaset_002

レイヤーのオブジェクトの大きさがそのまま反映されるので
図のようにベタ塗りフルのほうが良い

2)分割にあわせてバリエーションパーツを作成

detaset_004

detaset_003

こんな具合

・データセットはPSDしか扱えない(CS6)すべてPSD形式にします
・ファイル名の頭文字を数字で始めない、_-~:;.?/などの記号を含まない(csvに影響します)
・なにもない空白のファイル blank.psdを作っておく

3)CSVを仕込む

detaset_005

Excelでしこしこ仕込みます。
まず一行目に1)でつくったレイヤー名を入れて
変えたい箇所に2)で分割した.psdパーツたちを記入していきます
指定したPSDが一つでもないと動かないです。空白セルはすべて埋める。
何も入れたくない場合は空白のblank.psdをいれる

Excelが完成したら.csv形式に別名で保存
.csvを直接編集すると挙動がおかしくなるので編集するときは.xlsxを変更してから.csvに変換します

4)変数を定義する

テンプレートのレイヤーとCSVの変数を関連付けます
イメージ>変数>定義

レイヤーを選んで置き換えたい変数を定義していきます
置き換え方法:フィットがリサイズに強くておすすめ

detaset_006

detaset_007

左上のタブ>データセット
右下の読み込みで作成したCSVを読み込み
うまくいけば下にレイヤーと関連付けられたファイルが表示されます

detaset_008

detaset_009

プレビューや適用を押してしまうと読み込んだオブジェクトの大きさにテンプレートが変更されてしまいます(CS6)
吐出される画像のサイズがおかしくなるのでチェックをいれないようにしましょう

ハマりポイント
[変数が無い、多すぎる]
レイヤーの変数とエクセルのセルに相違がある
だいたい定義するときにコケているので定義をチェック

[動かない、読み込まれない]
・指定したPSDが一つでもないと動かないです。空白はすべて埋める
埋まっているのに動かない場合はファイル名のミスがないかチェック
・CSVと変数用PSDは同じ階層にいれる
・リッチなエディタの場合はいらない余白情報が付いている事が多いので
プレーンテキスト系のエディタでコピペし直すと通ることがある
・CSVに使用できない文字を使っている
_-~:;.?/やファイル名の最初の文字が数字だとMacは動きません。windowsは動くっぽい。

5)書き出す

detaset_010

detaset_011
ファイルの吐き出し先のフォルダを指定して書き出し

1個だけ書き出したい場合は「すべてのデータセット」部分を
該当のファイル名を選んで出すと1個だけ書き出せる
10枚以上の複数書き出す場合はやりづらいUIなのですべて書き出しのほうがはやいと思う

detaset_012

できたあ
PSDしか書き出せないのでPNGなどにバッチで変換して終了

実際はウン百枚画像が出てくるので圧巻。イッケメェェェン!!
俺たちにできないことを平然とやってのける!そこにシビれるッ!あこがれるゥ!

メリット

人力だと厳しい大量の画像をさばけるのはもちろん

デザイン変更・仕様変更に強い
仮に属性がもう一つ増えた、減った
進化段階が増えた、減ったや
サイズの変更も
元のテンプレート1つとエクセルを修正すれば
すべて対応できるのでとってもべんり!
突然〇〇◯個追加されて死にたくなることもありません。

運用フェーズに入っても一度つくれば
常に一撃で画像が出るので工数削減が期待できる

また、書き出し速度もそこそこはやいので100枚以上の画像を何回もやり直しても平気。差し替えが予想される仮画像はデータセットで仕込んでおくと後々幸せになれそう

今回はアイコンだったけどほぼすべてのリソース系に適用できるので応用範囲が広そう

デメリット

詠唱に時間がかかる
ポケモンの技で言うとソーラービーム的な存在。発動までが遅い。

いうてもけっこうCSVのインポートでコケたり変数設定の仕込みに時間がかかるため
あと3時間しか無い!とかのときは
普通にアクション+レイヤーカンプスクリプトかましたほうがはやい。

100個以上の画像の処理にはデータセットのほうが使えるけど
50個程度なら力技で押し切れます

これ使い道他にないのかなと考えたんですが
結婚式やパーティ・勉強会なんかの席次・名札などをつくるのにすごい便利そうですね
出席者の名前のエクセルとテンプレ用意すればものの数分でできるやん
ぜひ大量の画像さばく際につかってみてください〜☆

sponsored link

down

コメントする




CAPTCHA


Profile

845

845

多摩美卒/デザイナー/Sketch/湘南住/子育て中/ハンドメイド

ものづくりをする人を応援するサービスのスタッフをやっています☺️

Categoly

Archive

sponsored link