Photoshop レイヤー

【効率アップ!】photoshopのレイヤー操作が早くなる小技まとめ


Photoshopの基本とも言えるレイヤー操作。
慣れるまではなかなか使いにくいかもしれません。
とはいえ、レイヤー操作を効率化することで、驚くほど生産性が向上するのも事実。
レイヤー操作の小技やショートカットはたくさんあり、覚えるのも大変ですが、早い段階から、少しずつ習得するクセをつけておくといいことあるかもしれませんね。
ここでは初歩的なレイヤー操作の小技をご紹介したいと思います。

まずは「バウンディングボックスを表示」にチェックを入れよう

バウンディングボックス

これによって、何が便利になるのか?
「バウンディングボックスを表示」にチェックを入れることにより、わざわざレイヤーパネルからレイヤーを選択することなく、直接、オブジェクトをガシッとつかむことができます。また、選択したオブジェクトを移動したり、変形することができます。
とりあえず、「バウンディングボックスを表示」にはチェックを入れておきましょう!

 

表示サイズをウィンドウに合わせてくれるショートカット

レイヤーによっては、拡大して作業する場合もあります。
「かなり大きく拡大してしまったけど、全体を見渡したい!」
そんな時、全体がウィンドウ内におさまるように表示してくれるショートカットが便利なのでご紹介します。

【Mac】Command+0
【Win】Ctrl+0

また、表示サイズを100%にしてくれるショートカットもあります。

 

表示サイズを100%にしてくれるショートカット

【Mac】Command+1
【Win】Ctrl+1

この2つのショートカットは覚えておくと便利です。

 

レイヤーパネルを表示/非表示に切り替える

ファンクションキー F7
これで、簡単にレイヤーパネルの表示/ 非表示を切り替えられます。

 

コピーしたレイヤーに「○○のコピー」と表示させない方法

レイヤーパネルの右上をクリックレイヤーパネルパネルオプションを選択し、一番下の『コピーしたレイヤーとグループに「コピー」を追加』のチェックボックスを外す。
これをすることで、
Before) 「○○のコピー」「○○のコピー2」「○○のコピー3」…
After)  「○○」「○○」「○○」…
と、レイヤーパネルがごちゃごちゃと散らかるのを防ぐことができます。
ちょっとしたことですが、作業を開始する前に設定しておくと便利ですよ。

 

新しいレイヤーを作るショートカット

【Mac】 command + shift + N
Win】 Ctrl + Shift + N

この方法ですと、レイヤーが作成される際に、新規レイヤーのダイアログボックスが表示されます。
このダイアログボックスが「邪魔だなー」と思う方は、先ほどのショートカットにAltキーを追加してくださいね。

 

レイヤーを複製するショートカット

複製したいレイヤーを選択した状態で、

【Mac】 command + J
【Win】 Ctrl + J

元のレイヤーと同じ場所にレイヤーをコピーすることができます。

 

すべてのレイヤーを選択できるショートカット

すべてのレイヤーを選択したい時に便利なショートカットです。

【Mac】Alt+Command+A
【Win】Ctrl+Alt+A

 

レイヤーの”位置だけ”をロックする方法

レイヤーをロックして使う方は多いと思いますが、レイヤーの位置だけをロックする方法もあります。
レイヤーの位置だけをロックすると、位置だけを固定したまま、レイヤー効果やマスクを適用することができ、レイヤーをロックするよりも効率的です。
方法はこちら。

Photoshop 位置ロック

ロックしたいレイヤーを選択し、ロックアイコンの左隣の十字のアイコンをクリックするだけです。

 

選択したレイヤー以外を非表示にする方法

【Mac】  option + 目玉のアイコンをクリック
【Win】 Alt + 目玉のアイコンをクリック

覚えておくと便利な小技です。

 

別のファイルの同じ位置にコピーする方法

2つのファイルを開き、並べて表示します。
2つのファイルがタブ表示になっている場合は、ウィンドウ→アレンジ→「ウィンドウを並べて表示できる適当なもの」を選択してください。
Shiftキーを押しながら、コピーしたいオブジェクトをもう一つのファイルにドラッグ!
これだけで、オブジェクトを同じ場所にコピー&ペーストすることができます。
ちょっとした小技ですが、使えます。

 

レイヤースタイルのコピー&ペーストの仕方

Photoshopでは、レイヤーにドロップシャドウをつけたり、図形に境界線をつけたりして、元のレイヤーに加工を施すことができます。
この加工のことを「レイヤースタイル」と呼びます。

レイヤースタイル

この「レイヤースタイル」はコピーして、別のレイヤーに反映させることができます。
コピーの方法は簡単です。
Altキーを押しながら、コピーする元のレイヤーの「fx」マークを、コピーしたいレイヤーの上にドラッグします。

レイヤースタイル コピー

尚、レイヤースタイルをコピーではなく、カット&ペーストすることもできます。
その場合は、Altキーを押さずに、先ほどのコピー方法で、fxマークをドラッグしてください。

描画色で塗りつぶすショートカット

オブジェクトに色を塗るとき、どのように操作していますか?
一番最初にご紹介した「バウンディングボックスの表示」にチェックを入れておくと、レイヤーパネルやツールボックスを使うことなく、ショートカットだけで、簡単にオブジェクトの色を塗ることができます。

その方法は、
1) キャンバス内で、色を塗りたいオブジェクトを選択。
2) ショートカットで色を塗ります

【Mac】Alt+Delete
【Win】Alt+Delete

これだけで描画色でパパッとオブジェクトの色を塗ることができます。
尚、背景色で塗りつぶすショートカットもあります。

 

背景色で塗りつぶすショートカット

【Mac】Ctrl+Delete
【Win】Ctrl+Delete

 

ワンクリックでクリッピングマスクをかける方法

クリッピングマスクとは、2つのレイヤーを重ねて、一方のレイヤーの透明部分をマスキングする機能です。

クリッピングマスク

これをワンクリックで処理する方法があります。
Altキー(Optionキー)を押しながら、レイヤーパネルの2つのレイヤーの間をクリック!
たったこれだけで、クリッピングマスクを作成することが出来ます。

 

ボタンを量産するときは「スマートオブジェクトに変換」で一括管理

ボタンを量産する時は、「スマートオブジェクトに変換」でボタンを管理をしておくととても便利です。

<手順>
1)元となるボタンのレイヤーを選択し、(メニュー)レイヤー→スマートオブジェクト→スマートオブジェクトに変換 を選択
2)この後、必要なだけ、ボタンを複製します。

これで何が便利かと言いますと、あとでボタンの色を変えたくなったり、レイヤー効果を変えたくなったときに、1つのボタンを編集するだけで、複製したボタンにも全て変更が反映されるのです。
もちろん、ボタン以外にも使えます。

 

「レイヤーに基づく新規スライス」が便利

スライスが決まらなくて、時間がかかってしまったことはありませんか?
「レイヤーに基づく新規スライスを選択」を使うと簡単に、且つ正確にスライスすることができます。

1)スライスで切り出したいレイヤーを選択
2)(メニュー)レイヤー→レイヤーに基づく新規スライスを選択

これで書き出しがビシッと決まるスライスを作成することが出来ます。

 

 複数のレイヤーを個々のファイルに保存する方法

ボタンやバナーなど、同じサイズの画像を1つのファイルで管理すると便利です。
画像の書き出しも、ある機能を使うことで、あっという間に書き出すことができます。

<手順>
1)(メニュー)ファイル→スクリプト→レイヤーをファイルへ書き出し
2)表示されたダイアログでファイル形式や保存先、ネーミングルールを設定して、実行

これだけで、複数の画像を一発でファイルに書き出すことができます。

 

複数のレイヤーを表示/非表示にする方法

表示/ 非表示アイコンが表示されるあたりをざーッとドラッグするだけで、複数のレイヤーを一気に表示→非表示、非表示→表示に変更することができます。

レイヤーパネル 非表示

 

非表示レイヤーや空白のレイヤーを一発で削除する方法

レイヤーパネルの右上をクリック

レイヤーパネル

パネルオプションを選択し、上から5番目の『非表示レイヤーを削除』を選択。
これで必要ないレイヤーを一発で削除することができます。

 

最後に

ショートカットや便利な機能を積極的に利用することで、レイヤー操作が格段にスピードアップます。
ここでご紹介した以外にもショートカットや小技はたくさん存在します。
少しずつでもマスターして、作業効率を上げて行きたいですね。

 

 

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticlePhotoshopで上手なハーフトーンを表現する方法