Photoshopを使い倒せ!ショートカットとアクションでデザインの作業効率化を図ろう

Photoshopを使い倒せ!ショートカットとアクションでデザインの作業効率化を図ろう

Miya

Miya

こんにちは、デザイナーのみやです。
飼い猫のラブ(エサ)コールを無視していると、空気清浄機の風量をフルパワーに変えてアピってきます。この前はご丁寧にチャイルドロックまで設定してました。

ところで皆さん、Photoshop使ってますか?

ウェブサイトデザインを行う際にPhotoshopを使う方が多いと思います。何気なく使っているPhotoshopですが、ちょっとの設定で作業効率化を図ることができます。

今回はショートカットアクションを上手に使ってPhotoshopでの作業を快適にする裏技をご紹介します。

キーボードショートカット登録

02

キーボードショートカット登録方法

03

キーボードショートカットの設定は『編集』>『キーボードショートカット』または「Shift」+「option」+「command」+「k」からできます。

 

04

実際に開くとわかりますが、ここにはPhotoshopのメニューから実行できる機能がすべて記載されています。ショートカットがすでに設定されている機能についても『ショートカット』の欄に何かしら記載されているのがわかります。

 

06

『アプリケーションメニューコマンド』の欄を選択すると『ショートカット』の欄に入力用ボックスが出てきます。ここに任意のコマンドを入力して『確定』すれば、選んだ機能がキーボードショートカットで瞬時に使えるようになります。

 

07

ショートカットは任意のコマンドですが、すでに設定されているコマンドは登録することができません。カブっている場合はアラートが出ますので、自分がわかりやすいと思うコマンドをいくつか試してみましょう。

登録しておくと便利なショートカット

メニューから選択できる機能はかなりの数があります。「どれを登録したらいいかわからない……!」という方のために、参考までに登録しておくと便利な機能をいくつかピックアップしました。

レイヤーに基づく新規スライス

スライスを一つ一つ行っていては時間がかかってしまいます。そんなときはPhotoshop CS5から追加されている「レイヤーに基づく新規スライス」機能が便利です。

08

『キーボードショートカット』>『レイヤー』>『レイヤーに基づく新規スライス』にショートカットを設定します。

そうすれば、スライスしたいレイヤーを選択して設定したショートカットコマンドを実行するだけで、レイヤーの大きさに応じて自動でスライスが作成されます。

例えば↓の画像からロゴをスライスしたい場合、

09

レイヤーを選択し、先ほどのショートカットを実行すれば、

 

10

一瞬でスライスが作成できます!
シャドウなども含めてスライスしてくれるので非常に重宝します。

レイヤースタイルのコピー&ペースト

レイヤーに設定したスタイルを他のレイヤーにも適用したい場面がよく出てくると思います。その動作もショートカットコマンドを設定することができます。

11

『キーボードショートカット』>『レイヤー』>『レイヤースタイルのコピー』and『レイヤースタイルのペースト』それぞれにショートカットコマンドを設定しましょう。

アクション設定

01

アクションは一連の処理をショートカットとして登録しておける機能のことです。

『Photoshop アクション』で検索すると、よく写真加工のアクションが紹介されているのを見かけると思います。このアクションには普段のレイヤー操作なども登録しておくことが可能です。簡単に設定できますので、ぜひ活用していきましょう。

アクションの設定方法

12

『ウィンドウ』>『アクション』またはoption+F9でアクションパネルから設定可能です。

登録しておくと便利なアクション

アクションはPhotoshopに元から設定されているものもあります。「PDFとして出力」などは元からあるアクションから実行することができます。

アクションに関しても、よく使う一連の操作を登録しておくと効率化を図れます。こちらも参考までに登録しておくと便利なアクションをいくつかご紹介します。

複数のpsdを一括で書き出す

デザインチェックを依頼する場合には、書き出してjpgなりpngで確認することが多いと思います。

ヘッダーやフッターなど共通のパーツはレイヤーがリンクしていれば修正の反映は容易ですが、修正がある度にすべてのファイルを一つ一つ書き出し直すのはやはり面倒です。

アクションとバッチ処理の組み合わせで複数のpsdファイルを一括で書き出す方法がありますので、設定しておくと便利です。

13-000

まずアクションパネルの『新規作成』をクリック。
※このとき、新しいセットを作っておくと管理がしやすくなります。

 

14

任意のアクション名を入力して『記録』をクリック。そうするとアクションの記録が開始されますので、記録する操作を実行していきます。

ここで記録するのは

  1. 『レイヤー』>『スマートオブジェクト』>『変更されたすべてのコンテンツを更新』
  2. 『ファイル』>『書き出し』>『Web用に保存』

です。

 

16-000

アクションの設定は以上で完了です。

開いているすべてのファイルに同じ処理を行う場合には、バッチ処理というものを用います。

17

『ファイル』>『自動処理』>『バッチ』から実行できます。

 

18

『セット』と『アクション』に新規に作成したアクションを設定し、ソースでは『開いたファイル』を選択します。そうするだけで、アクションで設定した処理がすべてのファイルに適用され、それぞれのjpgが書き出されます。

※書き出し後に開いているpsdファイルを閉じる場合は、実行後の項目で『保存して閉じる』を選択します。

このバッチ処理を利用すれば、開いている写真をすべてモノトーンやビンテージに加工するなどの処理が一瞬で終わります。調整は必要ですが、写真のトンマナを合わせる際に便利かと思います。

まとめ

いかがでしたでしょうか?

今回はほんの一例を挙げさせていただきましたが、Photoshopも設定次第でどんどん便利に使うことができます。
よく使う機能などは職種によって様々だと思いますので、自分なりのショートカット設定を模索してみてください!

キャリアアップ
「Studio上野でWebクリエイターを目指す!」

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

ITベンチャーにてWebサイト制作やECサイト運用などを経験後、LIGに転職。コーポレートサイトや採用サイトをメインに、多くの企業のWebサイト制作にデザイナー・アートディレクターとして従事。

このメンバーの記事をもっと読む
デザイナーズコラム | 78 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL