【Photoshop】デザイナー直伝！画像加工で知っておきたい基本操作

AdobeのPhotoshopで画像加工するとき様々な使い方がありますが、利便性を上げるためにデザイナーがよく使う基本的なテクニックをポイントに紹介したいと思います。

→画像素材も豊富なノーコードCMSのBiNDupを30日間トライアル

画像加工する前の環境作り

アートボードを作成

Photoshopでファイルを新規作成すると指定したサイズの「カンバス」が作成されると思いますが、私が作業する際にはまずこのカンバスを「アートボード」に変換をします。
アートボードにはカンバスとは違い、以下のような特徴があるため作業効率もよくなると思います。

• アートボードを基準にした要素の整列
• １つのファイルで複数データを同時に扱える
• 背景色の変更が簡単
• 画像の書き出しも簡単

要素の整列

PhotoshopはIllustratorに比べ要素の整列が面倒ですが、アートボードにしておくとボタン一つで上下左右中央に配置が可能です。

アートボードしておくと要素の中央寄せなどが簡単になる

複数アートボードの操作

アートボード同士で要素の移動やコピーもレイヤー操作のように行えるので並行作業が効率化できます。移動前の位置関係もキープしてくれます。

バリエーション違いの作業などに便利

背景色の変更

ベースの色をサッと変えられる。その分レイヤーも減らせるので編集データがスッキリできるのも嬉しい。

後から色みを変更したくなっても対応しやすい

→画像素材も豊富なノーコードCMSのBiNDupを30日間トライアル

元画像を複製する

加工のために取り込んだ画像は、加工を始める前に複製するなどして元画像を保存しておきましょう。
単純にレイヤーの複製でも良いですが、個人的におすすめしたい方法は「スマートオブジェクト」化です。

レイヤーパネルから要素をスマートオブジェクト化

レイヤーを選択した状態で右クリックか、レイヤーパネル右上の設定アイコンからスマートオブジェクト化が可能です。
スマートオブジェクト化されたレイヤーはレイヤーのサムネイルにも違いが出ます。

スマートオブジェクトの特徴

Photoshopは基本的にビットマップで画像編集を行います。
ビットマップとは画像を色のついた小さな点で表現したもので、グラデーションや陰影といった繊細な色の表現が得意です。点が細かければ細かいほど高解像度・高精細な画像になりますが、一度画像加工すると元に戻せない不可逆な特徴もあります。
ですがこのスマートオブジェクトにしておくと、スマートオブジェクト化される前の状態をキープしてくれるので、拡大・縮小といった加工にも強くなり編集しやすくなります。

ただの画像をサイズを50%→100%に戻した場合の変化

スマートオブジェクトでサイズを50%→100%に戻した場合の変化

画像加工は繰り返しサイズ変更することが想定されるので、あらかじめスマートオブジェクト化にしておきたいです。

→画像素材も豊富なノーコードCMSのBiNDupを30日間トライアル

色みを調整する

ノーコードCMS「BiNDup」で提供しているような素材サービスUnsplashといった高品質・高画質な写真の場合には、色み調整せずそのまま使用できる場合もありますが、基本的には色み調整を行います。
幾つか色みに関する設定はありますが、最低限よく使用する設定は以下の２つです。

• 明るさ・コントラスト
• カラーバランス

いずれもメニューの「イメージ」>「色調補正」、あるいは調整レイヤーから設定可能です。どちらも後から設定変更ができるので便利です。
個人的には乗算などとも併用しやすいので調整レイヤーをよく使用します。

画像は調整レイヤーを使用した場合。調整レイヤーはレイヤーパネルの下部から選択して追加

明るさ・コントラスト

明るさとコントラストを調整できます。
きちんとした撮影環境を用意して適切な光量で撮影できるのが望ましいですが、なかなか難しいのでこの機能を利用して調節します。
明るさは数値を上げると明るくなり、下げると暗くなります。コントラストは、ハイライトと影の差がより際立つ感じになります。また少しピンボケした写真もシャープになる効果があります。

明るさ・コントラストの効果

部分的に効果を適用

そのままの設定だと画像全体への効果になりますが、レイヤーマスクで部分的に効果をつけることも可能です。
元の写真のクオリティにもよりますが、上記を使いこなせれば多少極端な写真でも誤魔化せる場合もあります。

マスク（白いエリアに適用される）で部分的に効果を付与

カラーバランス

シアン・マゼンダ・イエロー、レッド・グリーン・ブルーの間で色味のバランスを調整できます。
全体的な調整だけでなくハイライトやシャドウの諧調ごとにも調整できるので、ハイライトの赤み、影の青みを押さえたりといった細かな調整も可能です。

カラーバランスによる色味の調整

→画像素材も豊富なノーコードCMSのBiNDupを30日間トライアル

いかがでしょうか。
今回ご紹介した方法はあくまで一例になりますが、参考になれば幸いです。
BiND CAMPでは、サムネイル画像を作るテクニックや配色アイディアなど、Web制作にまつわる様々なTIPSをご紹介しています。もっと詳しく知りたい方は資料をダウンロードしてみてください。
配色アイディアのお役立ち資料を見る