フロントエンドのPhotoshop【知っておくべきショートカット】

photoshop フロントエンド デザイン

こんにちは、なっちる先生(@nacchi_jagariko)です。

現在フリーランスエンジニアとして活動しています。

フロントエンドに関しては、コーディングもシステム制作もディレクションもデザインも、一通り経験しています。

今回は、フロントエンドのPhotoshopシリーズとして、覚えておくべきショートカットについて紹介していきます〜。

この記事は以下のような人向けです。

Photoshopの覚えておくべきショートカットキーについて知りたい。。。

では、参りましょう〜。

スポンサーリンク

 覚えておくべきショートカットキーはこれだ!

まず、よく使うショートカットキーを紹介します。

ちなみにこちらで紹介したショートカットキーと、ショートカットキーの使い方としてのせている記事さえおさえておけば、フロントエンドで困ることはまずないです。

それ以上の仕事を頼まれたら、デザイナー側の方がやるべき仕事なので安心してください。

では、ずらっと一覧を出していきます。

どんどんいくよぉ〜

移動・変形

移動ツール「V」

自由変形「Command + T」

移動・変形のショートカットキーは基本動作なので一番使います。

以下の記事で「移動・変形」のやり方について説明しています。

フロントエンドのPhotoshop【移動・拡大・縮小】
こんにちは、なっちる先生(@nacchi_jagariko)です。 現在フリーランスエンジニアとして活動しています。 フロントエンドに関しては、コーディングもシステム制作もディレクションもデザインも、一通り経験しています。 ...

「V」が最頻出の中でも1番使うよ!

文字

文字ツール「T」

カーニング「Option + ↑→↓←」

文字についてはこのくらいです。

文字の設定を変える方法については以下の記事を参考にしてください。

フロントエンドのPhotoshop【フォントの色・太さ・大きさ・カーニング】
こんにちは、なっちる先生(@nacchi_jagariko)です。 現在フリーランスエンジニアとして活動しています。 フロントエンドに関しては、コーディングもシステム制作もディレクションもデザインも、一通り経験しています。 ...

書き出し保存

Web用に保存「Command + Option + Shift + S」

書き出し形式「Command + Option + Shift + W」

PSDデータをいじるからにはよく使わざるを得ないショートカットキーです。

用途としては、スライス画像を取り出したりする場合などです。

「Web用に保存」は詳しく画像の設定ができ、「書き出し形式」は簡略的な保存設定になります。

「Web用に保存」を使うのが妥当です。

「書き出し形式」で保存することはあまりないかな。

スライス

スライスツール「C」

レイヤーに基づくスライス「Command + Option + Shift + A」

※レイヤーに基づくスライスのショートカットキーは自分でカスタマイズしたものです。

スライスについては、以下の記事を参考にしてください。

フロントエンドのPhotoshop【画像のスライス、裏技も紹介!】
こんにちは、なっちる先生(@nacchi_jagariko)です。 現在フリーランスエンジニアとして活動しています。 フロントエンドに関しては、コーディングもシステム制作もディレクションもデザインも、一通り経験しています。 ...

簡単にスライスができる裏技とショートカットキーのカスタマイズについても言及しています。

切り取り

選択ツール「M」

選択ツールは切り取りはもちろんのこと、寸法測りに使ったりできます。

詳しくは以下の記事を参考にしてください。

フロントエンドのPhotoshop【切り取り・大きさ計測】
こんにちは、なっちる先生(@nacchi_jagariko)です。 現在フリーランスエンジニアとして活動しています。 フロントエンドに関しては、コーディングもシステム制作もディレクションもデザインも、一通り経験しています。 ...

非表示・表示

一つのレイヤーだけ表示・非表示「Option + クリック」

レイヤーの目のマーク👁の部分を「Option + クリック」すると一つのレイヤーだけ表示されるようになります。

以下の記事で画像を使って説明しています。

フロントエンドのPhotoshop【表示・非表示】
こんにちは、なっちる先生(@nacchi_jagariko)です。 現在フリーランスエンジニアとして活動しています。 フロントエンドに関しては、コーディングもシステム制作もディレクションもデザインも、一通り経験しています。 ...

グループ

レイヤーのグループ化「Command + G」

グループ化をうまく使うと、PSDデータの見栄えが良くなります。

グループは、HTML内のdivみたいな感覚だよ!

マスク

クリッピングマスクの作成「Command + Option + G」

レイヤー効果がえげつない範囲にかかっているときや、実物は切り取らずに切り取ったように見せたいときによく使います。

グループ化の方法や、マスクの付け方については以下を参考にしてください。

フロントエンドのPhotoshop【グループ化・結合・マスク】
こんにちは、なっちる先生(@nacchi_jagariko)です。 現在フリーランスエンジニアとして活動しています。 フロントエンドに関しては、コーディングもシステム制作もディレクションもデザインも、一通り経験しています。 ...
スポンサーリンク

 出番少なめだが知っておくと便利なショートカットキー

お次は、フロントエンドではあまり使うことはないけど、地味に使うときがくるかもというショートカットキーについて紹介します。

結合

レイヤーの結合「Command + E」

グループ化したものを結合したりすることが多いです。

これ一緒にしてしまいたいというときは、レイヤーの結合をするか、グループ化してスマートオブジェクトにするかになります。

スタンプツール

スタンプツール「S」

ブラシの太さ調節「[」(小さく)、「]」(大きく)

起点の選択「Option + クリック」

あるものを無かったかのようにするには最高のスタンプツールです。

結構デザイナーよりですが、使えると面白いツールになります。

詳しい使い方は以下の記事で紹介しています。

フロントエンドのPhotoshop【スタンプツールの使い方】
こんにちは、なっちる先生(@nacchi_jagariko)です。 現在フリーランスエンジニアとして活動しています。 フロントエンドに関しては、コーディングもシステム制作もディレクションもデザインも、一通り経験しています。 ...
スポンサーリンク

 言わずもがなのショートカットキー

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」はよく使いますので、そちらだけおさえておけば完璧です。

これらのショートカットキーを含めた定番のショートカットキーについては、以下の記事でも紹介しています。

作業がはかどる!ショートカットはこれだけおさえおこう!
こんにちは、なっちる先生(@nacchi_jagariko)です。 日々、ショートカットキーを駆使して、ストレスなくパソコンとともに過ごしています。 パソコンで作業する際、 あぁーーー!コピペめんどい!...

作業が捗るよぉー!

スポンサーリンク

 まとめ

 

以上、photoshopで使うショートカットキーについて紹介しました!

定番のショートカットキーに加え、

覚えることがたくさんある〜

と思ってしまう方もいるかもしれません。

しかし、実際作業していくと、手こずるのは最初くらいで、後は身体が覚えていきます。

なっちる先生自身、

photoshopってなんだ

というところから使い始めて、1ヶ月後にはフロントエンド業務はバリバリ使えていたので、全然簡単です!

楽しく数を踏んで慣れていきましょう〜!

以上で、なっちる先生の授業を終わります。

素敵なPhotoshopライフを〜!

参考

フロントエンドのPhotoshop【明るさ・色彩・トーンカーブの使い方】
こんにちは、なっちる先生(@nacchi_jagariko)です。 現在フリーランスエンジニアとして活動しています。 フロントエンドに関しては、コーディングもシステム制作もディレクションもデザインも、一通り経験しています。 ...
Photoshopで画像の色を一気に変更する方法【フロントエンド】
こんにちは、なっちる先生(@nacchi_jagariko)です。 大学中退後、プログラミング完全未経験から就職し、絶賛リモートワーク中のものです。 今回は、 あれ、png画像の色一気に変えられないかな...
デザイン
スポンサーリンク
なっちる先生をフォローする
なっちる先生
タイトルとURLをコピーしました