Web制作の作業効率があがるPhotoshopショートカットキーまとめました【第一回基本編】

Web制作のデザインやパーツ作成でPhotoshopを使う場合は、よく使用ツールは決まっているのでショートカットを使って作業の効率化を図る人は多いとおもいます。

しかし初めての人はどこから覚えていいかわからないという人が多かったので、Photoshop始めたばかりの人に向けて便利なショートカットをまとめてみました。

まずは「基本編」として、photoshopを使う際にまずはここから覚えようというショートカットキーを中心に紹介します。

ショートカットキーは慣れるまでは逆に時間がかかってイライラするかもしれませんが、繰り返し行うと手が自然と動くようになりますので作業効率が上がりますので少しづつ自分がよく使うものを覚えていってみてはいかがでしょうか？

※キャプチャー画像はクリックすると拡大してみることができます。

1.まず覚えたい！ツールを選択する際に使用するキー

ツール選択

画面左にあるツールパレットですが毎回ここをクリックしていると、頻繁に切り替える作業をする際に面倒くさくなります。

このツールパレットはキーボードで選択できるようになりますので覚えるとツール選択が楽になりますのでよく使いそうなキーから覚えると便利です。

さらにツールパレットの後ろにあるツールを選びたい場合は、
Shiftキーを押しながらキーを押すと後ろのツールを選択することができます。

2.基本的なショートカット

ドキュメント画面関連

こちらはフォトショップに限らず、他のソフトにも共通で使える部分が多いと思いますがファイル関連のショートカットです。ファイルの新規作成や閉じる、ソフトの終了、ツールパレットの表示・非表示などになります。

コピー関連

こちらもメールやワードなどでも使用すると思いますがコピー＆ペーストのショートカットです。

保存関連

こちらはファイルの保存や別名で保存、Wｅｂ用に書き出しのショートカットです。

作業を戻る（取り消し）関連

イラストレーターではCtrl+Zで複数回戻ることができますが、PhotoshopはCtrl+Zでは直前の一回までしか戻りませんので、Ctrl+Alt+Zで複数回戻ることができます。
またCtrl+Shift+Zで戻しすぎた部分を取り消すことができます。

3.拡大・縮小する際に使うショートカット

細かい作業をする場合にファイルを拡大する際に虫眼鏡ツールを選択するのは面倒なので拡大・縮小系のショートカットを覚えると便利です。
方法はいくつかありますので自分の一番使いやすいやり方を使用するとよいです。

僕はCtrl+＋やctrl+-を使用してスペースキーで手のひらツールにして作業したい箇所に移動させる場合が多いです。

拡大の際のショートカット

縮小の際のショートカット

その他

拡大した画像の表示位置を変えたい場合は手のひらツールなどを使用しますが、どのツールを選択していてもスペースキーを押している間は手のひらツールになるので表示位置の移動に便利です。

またCtrl+0でファイルの全体表示、Ctrl+1で100%表示になりますので、細かい作業をしたあとに全体を見たり、原寸で見る場合に便利です。

選択範囲作成時に使うショートカット

すべてを選択と解除

選択範囲はドラックで指定した部分を選択やCtrl+Aですべてを選択ができます。またCtrl+Dで選択範囲の解除になります。

選択範囲の作成

選択範囲の追加・削除

すでに作成した選択範囲がある場合、さらにShiftキーを押しながらドラックすると既存の選択範囲に追加選択ができ、Altキーを押しながらドラックすると既存の選択範囲から重なった部分を削除されます。

選択範囲の反転

すでに選択した選択範囲の反転ができます。たとえば背景をブルーバックなどの単色で撮影した商品の選択範囲を取得したい場合に、背景の選択範囲を作成してCtrl+Shift+Iで反転してオブジェクトを選択することができます。

写真などの選択範囲を作成する際に自動選択ツールで背景側をすべて選択し選択範囲を反転させると画像側が選択できる便利なショートカットです。

レイヤーパネルから選択範囲の作成

背景レイヤー以外のレイヤーにオブジェクトがある場合は、レイヤーのサムネイルをCtrlクリックすると選択範囲を作成することができます。

選択範囲内のコピー

通常Ctrl+Cのコピーはアクティブになっているレイヤー内のオブジェクトをコピーしますが、作業中に異なるレイヤーにあるオブジェクトをコピーしたい場合に、コピーしたい範囲を選択し、Ctrl+Shift+Cでコピーすると異なるレイヤー間のオブジェクトをコピーすることができ大変便利です。

5.オブジェクト関連のショートカット

オブジェクト関連

Photoshopはアクティブになっているレイヤーが作業対象になりますが、レイヤーが多くなってくるとレイヤーパネルでアクティブにする作業が面倒になります。

そこで画面上のオブジェクトをCtrlクリックすることでクリックしたオブジェクトのレイヤーがアクティブになりますのですぐ作業ができて便利です。

レイヤーパネルからでなくてもオブジェクトを選択することができます。

6.塗りつぶしのショートカット

塗りつぶし

背景レイヤーに色を入れたり、選択範囲の塗りつぶしする際に描画色、背景色で塗りつぶしができるので覚えると便利です。

またクイックマスクで選択範囲の微調整をする際にXキーで描画色と背景色を切り替えできますのでこちらも便利です。

7.ガイド関連のショートカット

ガイド関連

Webレイアウトで使用するガイドですが、Ctrl+Rでルーラーの表示・非表示ができますので、ルーラーが出ていないと出すことができませんので、常に出しておくとよいでしょう。

ガイドは細かい部分を確認する際にみにくくなりますのでガイドを一時的に表示・非表示を切り替えるショートカットはCtrl+：になります。

また選択範囲の点滅が見にくい場合は選択範囲を一時的に非表示にするCtrl+Hが便利です。

まずは制作前の基本設定編で覚えると便利なショートカットをまとめてみました。

もしこれも覚えておくと便利だよ！というPhotoshopのショートカットがありましたら是非教えてください。

スライドシェアにもアップしてみました

こちらに実践編として作業の効率をあげるショートカット編も作成しました。

デザインワークの作業効率があがるPhotoshopショートカットキーまとめました【第二回：実作業編】

http://www.html5-memo.com/webtips/photoshop_shortcut/