WEBデザインをするときに便利なPhotoshopアクションとキーボードショートカットの使い方

Photoshopを使って効率的にWEBデザインができるようになる、便利なアクションの使い方やキーボードショートカットの設定を紹介します。

WEBデザインをするときによく使う項目

普段WEBデザインするときによく使う項目はアクションを作成したりキーボードショートカットを割り当てたりして可能な限り効率よく作業が進められるようにしています。

任意のファイル形式で保存（アクション）
画像にウォーターマークを挿入（アクション）
整列（ショートカットキー割り当て）
レイヤー名の変更（ショートカットキー割り当て）
レイヤーのラスタライズ（ショートカットキー割り当て）
スマートオブジェクトに変換（ショートカットキー割り当て）

便利なPhotoshopアクション

Photoshopアクションとは？

Photoshopアクションとは、一連の作業をビデオ録画のように記録しておいて、後から好きなタイミングで再生できるようにする機能のことです。
繰り返しよく使う作業手順をアクションに登録しておけば、作業効率を上げることができます。

任意のファイル形式で保存するアクション

例えば、WEBデザインの確認用はJPEG80で保存、ブログで使用するアイキャッチ画像はJPEG40で保存など、複数の書き出し設定を使い分ける必要がある場合はアクションに登録してショートカットキーを割り当てています。

ただし、1つのPSDファイル内でパーツごとに書き出し設定をするなら「アセット書き出し」、PNGで書き出しのみ・JPEG80で書き出しのみと決まった形式での書き出ししかしない場合は「クイック書き出し」を利用しています。
クイック書き出しのファイル形式は「環境設定」→「書き出し」のところからPNG/JPEG/GIF/SVG 任意の設定に変更可能です。

画像にウォーターマーク（透かし）を自動でいれるアクション

WEBサイトやブログで使用する画像に透かしをいれるのも、Photoshopアクションを使えばショートカットキーで一発保存が可能です。
アクションに登録しておけば複数のファイルを一気に処理することも可能なので、枚数が多ければかなりの時短になります。
メニューの「ウィンドウ」→「アクション」でアクションパネルを開き、アクションを1度記録すれば、その後は全て自動化できます。
写真をリサイズ→透かしを配置→JPEGで書き出し保存→写真を閉じるをアクション登録して使用しています。

Photoshop アクションを使うメリット

複数ファイルにもバッチ処理を使えばいっきに処理可能
ドロップレットでファインダーからも簡単に動かせる
ショートカットキーが割り当てられる

2回以上繰り返し同じ作業をするならアクション登録を！

キーボードショートカットを設定している項目

ファンクションキーでオブジェクトの整列

メニューの「編集」→「キーボードショートカット」から設定。
ファンクションキーをあまり使っていないので、F7〜F12に整列を割り当てています。

通常、Photoshopでオブジェクトを整列する時はオブジェクトを選択した後にオプションバーの整列ボタンをクリックするか、レイヤーメニューから整列→上端などを選ばなければいけません。
どちらも大した手数ではありませんが、頻繁に使うならキーボード1つ押すだけで整列ができた方が作業効率が上がります。
ショートカットキーを覚えるまではキーボードに整列アイコンマークを描いたマスキングテープを貼っていました。

レイヤー名の変更

アセット書き出しやレイヤー管理のため、全てのレイヤーに名前をつけてPSDファイルを作成しています。
そのためレイヤー名を変更するメニューにもショートカットキーを設定。F2にレイヤー名の変更を割り当てています。

レイヤーパネル上でダブルクリックしなくても、オブジェクトを選択した状態でF2を押すだけで名称変更が可能になります。

レイヤーのラスタライズ・スマートオブジェクトに変換

スマートオブジェクトは便利なんですが、スマートオブジェクトの解除というメニューがないため、「レイヤーのラスタライズ」を使って編集することがあります。
他にも写真を配置した時(スマートオブジェクトでの配置設定にしているため)やシェイプを加工編集する際に使用するので、F3にレイヤーのラスタライズを割り当て。

スマートオブジェクトに変換、スマートオブジェクトの複製にも同様にショートカットキーを設定しています。

まとめ

どれもちょっとしたことですが、キーボード操作だけで処理ができると効率よくデザインを進めることができます。
Photoshopにあるほとんどのメニューは個別にショートカットキーを割り当てられますし、アクション登録も1度記録してしまえば自動化できます。
アクションとショートカットキーをうまく利用して効率よく作業ができるようにカスタマイズしてみてください。