こんにちは、なっちる先生（@nacchi_jagariko）です。
現在フリーランスエンジニアとして活動しています。
フロントエンドに関しては、コーディングもシステム制作もディレクションもデザインも、一通り経験しています。
今回は、フロントエンドのPhotoshopシリーズとして、覚えておくべきショートカットについて紹介していきます〜。
この記事は以下のような人向けです。
Photoshopの覚えておくべきショートカットキーについて知りたい。。。
では、参りましょう〜。
知っておくおくべきショートカットキーはこれだ！
まず、よく使うショートカットキーを紹介します。
ちなみにこちらで紹介したショートカットキーと、ショートカットキーの使い方としてのせている記事さえおさえておけば、フロントエンドで困ることはまずないです。
それ以上の仕事を頼まれたら、デザイナー側の方がやるべき仕事なので安心してください。
では、ずらっと一覧を出していきます。
どんどんいくよぉ〜
移動・変形
移動ツール「V」
自由変形「Command + T」
移動・変形のショートカットキーは基本動作なので一番使います。
以下の記事で「移動・変形」のやり方について説明しています。
「V」が最頻出の中でも１番使うよ！
文字
文字ツール「T」
カーニング「Option + ↑→↓←」
文字についてはこのくらいです。
文字の設定を変える方法については以下の記事を参考にしてください。
書き出し保存
Web用に保存「Command + Option + Shift + S」
書き出し形式「Command + Option + Shift + W」
PSDデータをいじるからにはよく使わざるを得ないショートカットキーです。
用途としては、スライス画像を取り出したりする場合などです。
「Web用に保存」は詳しく画像の設定ができ、「書き出し形式」は簡略的な保存設定になります。
「Web用に保存」を使うのが妥当です。
「書き出し形式」で保存することはあまりないかな。
スライス
スライスツール「C」
レイヤーに基づくスライス「Command + Option + Shift + A」
※レイヤーに基づくスライスのショートカットキーは自分でカスタマイズしたものです。
スライスについては、以下の記事を参考にしてください。
簡単にスライスができる裏技とショートカットキーのカスタマイズについても言及しています。
切り取り
選択ツール「M」
選択ツールは切り取りはもちろんのこと、寸法測りに使ったりできます。
詳しくは以下の記事を参考にしてください。
非表示・表示
一つのレイヤーだけ表示・非表示「Option + クリック」
レイヤーの目のマーク👁の部分を「Option + クリック」すると一つのレイヤーだけ表示されるようになります。
以下の記事で画像を使って説明しています。
グループ
レイヤーのグループ化「Command + G」
グループ化をうまく使うと、PSDデータの見栄えが良くなります。
グループは、HTML内のdivみたいな感覚だよ！
マスク
クリッピングマスクの作成「Command + Option + G」
レイヤー効果がえげつない範囲にかかっているときや、実物は切り取らずに切り取ったように見せたいときによく使います。
グループ化の方法や、マスクの付け方については以下を参考にしてください。
知っておくと便利なショートカットキー
お次は、フロントエンドではあまり使うことはないけど、地味に使うときがくるかもというショートカットキーについて紹介します。
結合
レイヤーの結合「Command + E」
グループ化したものを結合したりすることが多いです。
これ一緒にしてしまいたいというときは、レイヤーの結合をするか、グループ化してスマートオブジェクトにするかになります。
スタンプツール
スタンプツール「S」
ブラシの太さ調節「[」（小さく）、「]」（大きく）
起点の選択「Option + クリック」
あるものを無かったかのようにするには最高のスタンプツールです。
結構デザイナーよりですが、使えると面白いツールになります。
詳しい使い方は以下の記事で紹介しています。
当たり前のショートカットキー
Photoshopに限ったことではない、当たり前のショートカットキーを一応ずらっと並べておきます。
Photoshopでよく使われる当たり前のショートカットキーの一覧です。
コピー「Command + C」
ペースト「Command + V」
保存「Command + S」
別名保存「Command + Shift + S」
閉じる「Command + W」
戻る「Command + Z」
ちなみに、進むショートカットキーの「Command + Y」はphotoshopでは通用しません。
「Command + Shift + Z」にて進むことができます。
ちなみに、最新の状態に戻すショートカットキーは「Command + Option + Z」になります。
しかし、実際のところ、進む系の動作についてはphotoshopの「ヒストリー」ウィンドウにてクリックするだけで済むことが多いです。
とりあえず、戻る「Command + Z」はよく使いますので、そちらだけおさえておけば完璧です。
これらのショートカットキーを含めた定番のショートカットキーについては、以下の記事でも紹介しています。
作業が捗るよぉー！
まとめ
以上、photoshopで使うショートカットキーについて紹介しました！
定番のショートカットキーに加え、
覚えることがたくさんある〜
と思ってしまう方もいるかもしれません。
しかし、実際作業していくと、手こずるのは最初くらいで、後は身体が覚えていきます。
なっちる先生自身、
photoshopってなんだ
というところから使い始めて、1ヶ月後にはフロントエンド業務はバリバリ使えていたので、全然簡単です！
楽しく数を踏んで慣れていきましょう〜！
以上で、なっちる先生の授業を終わります。
素敵なPhotoshopライフを〜！
参考
