PhotoShopのテンプレート化で効率アップ!

こんにちは! 一番好きなチョコレートはジャンドゥーヤの ちゃみ です。

先週は、バレンタインでしたね、社内ではかわいい後輩たちがチョコをくれました。
私は食べる専門でしたが(ホワイトデーに期待)美味しかったです、ありがとう!

ちょこ

さて、今回は、Wordpressから離れて、Photoshopについてです!

皆さん、人様の制作した(または過去の自分が制作した)PSDなどのデザインデータに
手を焼いたことはないでしょうか?

サイトの更新をすることになってけど、
フォルダ・レイヤーがごちゃごちゃしてて、ぱっと見てどこに画像があるか分からない。。。
「自動選択」でフォルダやレイアーを探すのも手間。。。

データの保存先など気を付けている人は多いですが、
中身まで気にすることはあまりないのではないでしょうか?

私は、デザインモックを制作する時点で、サイトのコーディング構造を考えて
PSDのフォルダ管理もしています。

photoshopのレイヤーフォルダ

(参考:パステルブログ

ポイント1:Phoshopのレイヤーフォルダを管理する

レイアウトごとにフォルダを分けてあるので、そのフォルダ名をそのまま
コーディングする時の「ID・クラス名」として利用できます。

デザインを制作しながら、コーディングのID名も考えるので後々の手間が減ります。

また、修正する時に修正エリア=フォルダ名になっているので、わかりやすいです。

ポイント2:フォルダわけをしたPSDデータをテンプレート化

「ヘッダー」「フッター」といったレイアウトに沿って
フォルダわけをしたPSDデータをテンプレートとして保存しておきます。

テンプレートを用意しておけば綴りの間違いがなくなりますし、
似たような構造のサイトなら1からファイルを制作しなくて済みます。

まとめ

デザインによっては、レイヤーフォルダが前後することはあると思いますが
フォルダで分けることで、各段に探しやすく見やすくなります。
後の工程(コーディング)を考えた仕事は効率化にもつながります。

この記事をシェアする