覚えて効率アップ!PhotoshopでWebデザインをする私がよく使うショートカット
Web制作でのデザインにはPhotoshopを使っています。Kanaです。
ショートカットを使ってPhotoshopを操作しているのですが、作業中、
「え、そんな便利なショートカットがあったの?」といわれることがありました。
Photoshopを使ってデザインされている方の参考になればと思い、私がよく使うショートカットをまとめました:)
ショートカットを使うと、マウスの操作が減るので、とても便利ですよ!
あくまで私がよく使うショートカットですので、同じ動作が他のショートカットで出来たり、このショートカットがあるのに、あのショートカットはない…ということがあるかもしれません。
PR
1.ファイル管理系ショートカット
新規作成 | Ctrl + N command + N | 新しいキャンバスを作成します。 |
---|---|---|
キャンバスサイズの変更 | Ctrl + Alt + C command + option + C | キャンバスサイズの変更をします。 |
上書き保存 | Ctrl + S command +S | ファイルを保存します。 |
別名を付けて保存 | Ctrl + Shift + S command + shift + S | 別名を付けて保存します。 別ファイルにしてデザインを残すことが結構あるので、よく使います。 |
ウィンドウを閉じる | Ctrl + W command + W | 現在開いているファイルを閉じます。 |
アプリケーションを終了 | Ctrl + Q command + Q | Photoshopを終了します。 |
2.基本ショートカット
コピー | Ctrl + C command + C | コピーします。 |
---|---|---|
ペースト(貼り付け) | Ctrl + V command + V | ペースト(貼り付け)します。 |
カット(切り取り) | Ctrl + X command + X | カット(切り取り)します。 |
やり直し(戻る) | Ctrl + Z command + Z | 一つ前の作業をやり直します。 |
Ctrl + Alt + Z command + option + Z | やり直し(Ctrl + Z / command + Z)よりも更に一段階、前の段階に戻ります。 | |
一段階進む | Ctrl + Shift + Z command + shift + Z | 一段階進みます。 |
3.レイヤー管理・操作系ショートカット
新規レイヤーを作成 | Ctrl + Shift + N command + shift + N | 新規レイヤーを作成します。 |
---|---|---|
レイヤーをコピー | Ctrl + J command + J | レイヤーをコピーします。 |
レイヤーをグループ化 | Ctrl + G command + G | レイヤーをグループ化します。 |
クリッピングマスク化 | Ctrl + Alt + G command + option + G | レイヤーをクリッピングマスク化します。 |
レイヤーを上へ移動 | Ctrl + ] command + ] | レイヤーを1つ上に移動します。 |
Ctrl + Shift + ] command + shift + ] | レイヤーを最前面に移動します。 グループ化されている場合は、そのグループ内での最前面になり、もう一度押すと全てのレイヤーの最前面になります。 | |
レイヤーを下へ移動 | Ctrl + [ command + [ | レイヤーを1つ下に移動します。 |
Ctrl + Shift + [ command + shift + [ | レイヤーを最背面に移動します。 グループ化されている場合は、そのグループ内での最背面になり、もう一度押すと、背景を除いた全てのレイヤーの最背面になります。 | |
レイヤーを結合 | Ctrl + E command + E | 下のレイヤーと結合します。 グループを選択した場合は、そのグループ内が結合されます。 |
不透明度を変更 | 0 〜 9 | ブラシツール・塗りつぶし・グラデーションツール以外の状態で、0〜100までの数値を入力すると、選択しているレイヤーの不透明度が変更されます。 |
レイヤースタイル | レイヤーダブルクリック | レイヤースタイル変更を表示します。 |
4.作業スペース系ショートカット
メニューの表示/非表示 | Tab | メニューの表示/非表示を切り替えます。 |
---|---|---|
スクリーンモード | F | スクリーンモードを切り替えます。 (標準スクリーンモード・メニューありフルスクリーンモード・メニューなしフルスクリーンモード) |
ガイドの表示/非表示 | Ctrl + : command + : | ガイドの表示/非表示を切り替えます。 |
エクストラの表示/非表示 | Ctrl + H command + H | エクストラの表示/非表示を切り替えます。 (エクストラとは、選択範囲の境界線・レイヤーの境界線・ガイド・スライスなどの総称です) |
5.範囲選択系ショートカット
範囲選択ツール | M | 範囲選択ツールに切り替えます。 |
---|---|---|
Shift + M | 選択範囲ツールの形(四角・楕円)を切り替えます。 | |
自由選択ツール | W | 自由選択ツールに切り替えます。 |
Shift + W | 範囲ツールの種類を切り替えます。 (自由選択ツール・クイック選択ツール) | |
選択範囲を解除 | Ctrl + D command + D | 選択範囲を解除します。 |
選択範囲を反転 | Ctrl + Shift + I command + shift + I | 選択範囲を反転します。 |
6.ブラシ系ショートカット
ブラシツール | B | ブラシツールに切り替えます。 |
---|---|---|
Shift + B | ブラシツールの種類を切り替えます。 (ブラシ・鉛筆・色の置き換えツール) | |
ブラシサイズ変更 | ] | ブラシサイズの幅を拡大します。 |
[ | ブラシサイズの幅を縮小します。 | |
不透明度を変更 | 0 〜 9 | ブラシツールを選択した状態で0〜100までの数値を入力すると、不透明度が変更されます。 |
7.ズーム系ショートカット
ズームツール | Z | ズームツールに切り替えます。 Alt / optionを押している間は拡大・縮小が逆になります。 |
---|---|---|
拡大率100% | Ctrl + Alt + 0 command + option + 0 | 拡大率を100%(ピクセル等倍)にします。 |
ズームイン | Ctrl + plus(+) command + plus(+) | ズームインします。 |
ズームアウト | Ctrl + minus(ー) command + minus(ー) | ズームアウトします。 |
8.ツール系ショートカット
スライス | C | スライスツールに切り替えます。 |
---|---|---|
Shift + C | スライスツールの種類を切り替えます。 (スライスツール・スライス選択ツール・切り抜きツール) | |
修正 | J | 修正ツールに切り替えます。 |
Shift + J | 修正ツールの種類を切り替えます。 (スポット修正ブラシ・修正ブラシ・パッチ・赤目修正) | |
消しゴム | E | 消しゴムツールに切り替えます。 |
Shift + E | 消しゴムツールの種類を切り替えます。 (消しゴム・背景消しゴム・マジック消しゴム) | |
塗りつぶし | G | 塗りつぶしツールに切り替えます。 |
Shift + G | 塗りつぶしツールの種類を切り替えます。 (塗りつぶし・グラデーション) | |
0 〜 9 | 0〜100までの数値を入力すると、不透明度が変更されます。 | |
テキスト | T | テキストツールに切り替えます。 |
Shift + T | テキストツールの種類を切り替えます。 (横書き文字・縦書き文字・横書き文字マスク・縦書き文字マスクツール) | |
Ctrl + Enter command + Enter | テキストツール状態を解除します。 テキスト入力が終わってから、テキストモードから抜ける際に使います。 | |
パス図形 | U | パス図形ツールに切り替えます。 |
Shift + U | パス図形ツールの種類を切り替えます。 (長方形・角丸長方形・楕円・多角形・ライン・カスタムシェイプツール) | |
スポイト | I | スポイトツールに切り替えます。 |
ハンド | H | ハンドツールに切り替えます。 |
自由変形 | Ctrl + T command + T | 自由変形モードに切り替えます。 |
描画色/背景色 入れ替え | X | パレットの描画色と背景色を入れ替えます。 |
パレット 黒/白 | D | パレットの描画色を黒、背景色を白にします。 |
最後に
いかがでしたでしょうか。
いざリストを作っていると、自分がどんなショートカットを使っていたか、すぐに出て来ませんね…。
Photoshopユーザの方の参考になれば幸いです。
また、Webデザインレシピのたかはしのり さんも見やすくショートカットをまとめられていました。
私が使っていないショートカットもありましたので、是非こちらもご覧ください!
効率化 – 覚えちゃえば便利な Photoshop ショートカットキーいろいろ|Webデザインレシピ
PR
あわせてこちらの記事もいかがですか?
- 関連記事が見つかりませんでした