Pocket

こんにちは。それからデザイン入社1年目の長島です。
さて、突然ですが新人の私はいつも時間がありません。それはなぜでしょうか…。
答えは簡単。業務スピードが遅いのです。

そんな時間に追われる新人WEB担当者の方々の助けに少しでもなることができればと思い、Photoshopでよく使用するショートカット、WEB制作において使い勝手が良いと感じたショートカットを厳選してご紹介します!

(※ MacでPhotoshopを使用することを想定しています。Windowsの方はcommandをCtrlに置き換えてください。)


ツールパネル系

移動ツール img_001
『 V 』
移動ツールです。何かを移動させたい、そんなときは迷わず『V』です。

選択ツール img_002
『 M 』
選択ツールです。私は距離を測るときによく使うので、メジャーの『M』と覚えています。

文字ツール img_003
『 T 』
文字ツールです。文字を打つときや、編集したいときに『T』を押すだけで良いので簡単です。覚え方も簡単。お気付きの通り、Textの『T』ですね!

長方形ツール img_004
『 U 』
長方形ツールです。ちなみに「 shift + U 」を押すことで長方形ツール → 角丸長方形ツール → 楕円形ツール → さらに続く…。と次々と図形を切り替えることができます!

ズームツール img_005
『 U 』
ズームツールです。画面上部のスクラブズームにチェックを入れていれば、ドラッグするだけで拡大縮小が可能になります。

gif_001
gif_002

手のひらツール img_006
『 スペースキー(押している間) 』
スペースキーを押している間は手のひらツールです。スペースキーを押しながらドラッグすることで画面内を簡単に移動できます。


テキスト編集系

文字サイズ変更
『 command + shift + ,(<) 』
『 command + shift + .(>) 』
文字サイズを変更できます。『<』『>』で覚えると感覚的に操作できます。

gif_003

トラッキング・カーニング
『 option(alt) + ← 』
『 option(alt) + → 』
文字の間を選択すればトラッキング、複数文字を選択すればカーニングが調節できます。

gif_004

文字編集から抜ける
『 command + ENTER 』
文字編集を終えたい時は、『command + ENTER』で一発です。


画像編集系

画像解像度変更
『 command + option(alt) + I 』
画像の解像度を変更できます。

カンバスサイズ変更
『 command + option(alt) + C 』
カンバスサイズを変更できます。『C』はcanvasの『C』ですよね!


レイヤー系

グループ化
『 command + G 』
複数のレイヤーを選択して『command + G』でグループ化です。グループの『G』ですね!

レイヤーの結合
『 command + E 』
複数のレイヤーを選択して『command + E』で結合です。

選択レイヤーをロック(ロック解除)
『 command + / 』
レイヤーを選択して、『command + /』でロックです。もう動かさないな、と思ったレイヤーはこのショートカットキーで動かないようにしてしまいましょう。

複数のレイヤーを非表示(表示)
『 レイヤーパネルの『目』の印をドラッグ 』
レイヤーパネル『目』の印の部分を上下にドラッグすると、複数のレイヤーを一気に非表示(表示)にすることができます。

gif_005


表示系

全ての要素を画面内に
『 手のひらツールをダブルクリック 』
デザインしたページの全体像を確認したいときは『手のひらツール』をダブルクリックです。全てのレイヤーを画面内に収まるように表示してくれます。

100%表示
『 command + 1 』
100%表示にできます。制作物は必ず100%の縮尺で見ましょう!

フルスクリーン表示
『 F 』
デザインした最後に100%表示でフルスクリーンにしてチェックします。


保存系

別名で保存
『 command + option(alt) + S 』

web用に保存
『 command + option(alt) + shift + S 』


以上がWEB制作において使い勝手が良いと感じたショートカットです!
Photoshopに慣れていない人も、ショートカットキーを覚えることでよりPhotoshopが身近になり、仕事がもっと楽しくなると思います!
たかがショートカット、されどショートカット。
塵も積もれば山となりますよ。

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。