あまり知られていないけど超便利！Webデザイナー向けPhotoshopのショートカットのまとめ

サイト構築 -デザイン

Post on:2015年8月10日

ドキュメントから複数のレイヤーを指定

レイヤーを選択する時、通常はレイヤーパレットからそのレイヤーを探してクリックします。レイヤー数が少なければ簡単な作業ですが、レイヤー数が多い時やフォルダを使った複雑なレイヤー構造だと大変な作業です。

ドキュメント上の要素から、そのレイヤーやフォルダを簡単に指定することができます。
この方法を使うと、複数のレイヤーが離れていてもスクロールして探す必要もありません。特に数多くのレイヤーを使用するデザイナーには大きな利益になるでしょう。

ドキュメントから複数のレイヤーを指定（フォルダ対応）: 選択ツール時、Command + Shift + アイテムをクリック

※移動ツールの「自動選択」にチェックを入れていれば「Command」は不要。
※「Shift」を除くとレイヤーを単独で選択。

フォルダではなく、個別のレイヤーを指定することもできます。

ドキュメントから複数のレイヤーを指定（個別レイヤー）: Command + Option + Shift + アイテムを右クリック

フォルダ内のレイヤーは、フォルダが閉じた状態でも選択時に開きます。

レイヤーのコンテンツを複製

レイヤーパレットを使わないレイヤーに関する便利なショートカットがもう1つあります。
たいていのPhotoshopユーザーは「Commnad+J」でレイヤーを複製できるのは知っているでしょう。これをドキュメント上で操作することができます。

レイヤーのコンテンツを複製: 選択ツール時、Option + アイテムをドラッグ
レイヤーのコンテンツを複製（フォルダ）: 選択ツール時、Command + Option + アイテムをドラッグ

新しいレイヤーは、元のレイヤーの上に作成されます。

デザインの補助となるガイドやグリッドを一括で非表示に

デザインをする時に補助となるガイド、グリッド、選択範囲の境界線、スライス、テキストベースラインなどは、個別に表示・非表示にできますが、これらをまとめてエクストラとして表示・非表示を切り換えることができます。

エクストラの表示・非表示の切り替え: Command + H

選択範囲やシェイプを正確なサイズで正確に配置

最近では制作に入る前のモックアップにもピクセルが完璧であることを要求されます。このショートカットは、ボタンやボックスを配置する時にそれらを正確に配置するのに役立ちます。

選択範囲やシェイプを正確なサイズで正確に配置: 選択範囲やシェイプを作成中、Space + ドラッグ

選択範囲だけでなく、シェイプにも利用できます。
サイズを決定する前にドラッグで自由に移動することができ、移動後にサイズを変更できます。マウスを押している間は、何回でもやり直しが可能です。

テキストの編集状態を終了

Photoshopのテキストレイヤーは非常に柔軟で使いやすいです、難点はテキストの入力を終え、編集状態を終了させる時です。ツールバー上部の終了アイコンをクリックするか、他のツールやレイヤーに切り換えるなどでしょうか。
このショートカットを使うと簡単にテキストの編集状態を終了させることができます。

テキストの編集状態を終了: Command + Enter

※Commandキーを押さないと、単に改行するだけです。

選択範囲やシェイプを描画色・背景色で塗る

選択範囲はマスクを作ったり、ピクセルを削除したり、カラーを満たしたり、さまざまなことができます。選択範囲を描画色で塗る(Option+Delete)、背景色で塗る(Command+Delete)は、よく使用していると思います。

これは選択範囲がアクティブな時に選択範囲に適用され、アクティブではない時はそのレイヤー全体が描画色・背景色で塗られます。Shiftキーを加えて操作すると、選択範囲がアクティブではない時でも透明部分以外を塗ることができます。
多くのデザイナーが知らないことは、この方法がシェイプにも利用できるということです。

レイヤーの透明部分を保持しながら、描画色で塗る: Option + Shift + Delete
レイヤーの透明部分を保持しながら、背景色で塗る: Command + Shift + Delete

レイヤー上でOption+Deleteをするとレイヤー全体が描画色で塗られますが、Option+Shift+Deleteにするとレイヤー上の要素（透明部分以外）を描画色で塗ります。その要素を指定する必要はありません。

複数のレイヤーを非表示に

これは正確にはキーボードのショートカットではありませんが、多くの時間を節約する便利な操作なので紹介します。

レイヤーの表示・非表示は小さい目のアイコンをクリックすることで切り換えることができます。その際に上下にドラッグすると複数のレイヤーを表示・非表示させることができます。

複数のレイヤーを表示・非表示に: レイヤーの小さな目のアイコンを上下にドラッグ

また、便利なショートカットとして、そのレイヤー以外の全てを非表示にすることもできます。

そのレイヤー以外の全てのレイヤーを非表示に: レイヤーの小さな目のアイコンをOption + クリック

ズームイン・ズームアウトを素早く

ズームイン・ズームアウトを使う際、ズームツールを選択してクリックしている人は少ないでしょう。多くの場合は、ズームインに(Command++)、ズームアウトに(Command+-)のショートカットを利用していると思います。しかしこの操作は両手を使うか、片手ででもポジションに無理があります。

次のショートカットを使うと、作業中の手のポジションはそのままでできます。

ズームイン・ズームアウトを素早く: Option + スクロールホイール

※環境設定で「スクロールホイールでズーム」にチェックを入れるとキーボード無しで操作できます。

マウスにホイール機能がなくても、大丈夫。

ズームイン・ズームアウトを素早く: Command + Space + 左右にドラッグ

左手はキーボード、右手はマウスのままでできるので、素早く拡大縮小ができます。

クリッピングマスクを作成・解除

画像を特定の形にする時にクリッピングマスクを使用するのは、Webデザイナーにとって理想的な方法です。通常クリッピングマスクをする時は、トップのレイヤーを右クリックし、コンテキストメニューから「クリッピングマスクを作成」を選択します。これで自動的に下のレイヤーにスナップし、それ自身をその形にクリップします。

この2つのレイヤー間を、Optionキーを押しながらカーソルを動かしてみてください。カーソルアイコンが変化するのに気がつきましたか？