Photoshop未経験ディレクターが知っておきたい基礎知識。

Photoshop 未経験者がWEB画像制作のディレクションをするうえで、知っておきたい基礎知識をまとめてみました！

私もこの仕事を任せられるまで一切Photoshopを触ったことがなく不安でいっぱいでしたが少しずつ勉強しています。
今回紹介する３点は私が最初に先輩方に教えていただいた内容です。

①レイヤーについて
②アクション・バッチ処理
③psdデータからjpgデータへの変換方法

では、さっそく始めていきたいと思います！

①Photoshopのレイヤー機能

photoshop では一つの画像を構成する複数の部分を階層（レイヤー）に分けて編集するレイヤー機能があります。そのためPhotoshopでは目的の箇所だけを編集したり、階層の順番を変更したりすることができます。その際、他の部分に影響を与えずに作業が行えます。
簡単に言うと、Photoshopの画像はたくさんの要素が重なってできているデータということです。

例えば…
「コピーの視認性を上げるために背景を少しぼかしてください」と修正依頼があった場合、
背景のレイヤーを選択して他のコピーやアイコン等には影響を与えずにぼかしの修正を行うことができます。

下の画像の場合、３つの要素が重なって成り立っています。
（右下のレイヤーで要素を確認できます）

①背景
②コピー（春になったら行きたいお花畑）
③コピー（福岡県　福岡市）

②アクション・バッチ処理

アクションとは？

「カメラで撮影された写真やイラストなどを加工・修正する際に行う一連の作業工程を記録することができる機能」

例えば…
画像制作をする際、共有された商品写真の背景をなくして商品だけを切り取る工程を毎回行う場合、この一連の作業工程を保存しておける機能がアクションです。他の写真でもアクション機能を再生すれば、この工程が自動的に行われます。作業工程の間違いも起きずらく、手間も省くことができます。

バッチとは？

「まとめて処理ができる機能」

Photoshopでは、バッチ機能を使ってフォルダ内のすべてのファイルにアクション処理を行うことができます。膨大な数のファイルの処理を1つ1つ行っていたら時間も手間もかかります…。
その面倒を解消するするために、共有された画像すべてをバッチの機能を使って一気にアクション処理をやってしまうと便利です！

アクションは、それぞれどんな工程を行うかで設定が変わってきます。そのため、今回の記事では具体的な設定方法については省略させていただきます。
こんな便利な機能があるんだ！ということを知ってもらえたら嬉しいです。

③psdデータをjpgデータに変換する方法

１．ファイルから、【書き出し】→【書き出し形式】を選択

２．ファイル設定で【ファイル形式】【画質】を指定し、右下の書き出しをクリックすれば完了です。

★ショートカットキーを使えばさらに早く書き出すこともできます。
【altキー】＋【Shiftキー】＋【ctrlキー】＋【W】

そもそも、なぜphotoshop で作成した画像をjpgに変換する必要があるのでしょうか？

【理由①】

photoshopをＰＣにダウンロードしていない人は画像を見ることができない。

画像のデータはデザイナーだけが使うわけではなく、ディレクターやクライアント担当者など様々な人が確認します。しかし、全員がphotoshopを持っているわけではありません。
円滑なコミュニケーションを行うために、相手のソフトウェア環境を考えて、ディレクターとして臨機応変にデータを共有できるようになっておけると便利です！

【理由②】

ＷＥＢブラウザで問題なく画像を表示させる。

ホームページ上に作成した画像を問題なく表示させるためには、psdデータ（photoshopで作成した画像）をjpgデータに変換する必要があります。
（psdデータを画像の劣化が目立たない程度に圧縮し、ファイルサイズを小さくしたjpgデータをＷＥＢサイトで使い、psdファイルは別に保管して置くことが多いです。）

この時、画質をできるだけ下げずにデータサイズは小さく保存することが重要です！

データサイズが大きいとページ表示スピードに影響を与えてしまいます。ホームページ等のページ表示スピードが遅い場合、お客様がページ離脱をしてしまう可能性が高くなってしまいます。

今回はPhotoshop未経験者のディレクターが最低限知っておきたい３点について紹介しました。
Photoshopってたくさんの機能があるので難しそうですよね。
これから勉強を続けてPhotoshopを使いこなせるようになるために私も頑張りたいと思います。
最後までご覧いただきありがとうございました！

参考文献

株式会社ウイネット,Photoshop クイックマスター CC,平成30年10月29日
          村上徹,Webディレクション,2017年5月5日