時短テクニック

【保存版】PhotoshopCC デザイン時短テクニック集

「時短」「時短」と言われますが、時短をする理由って、いったい何でしょう。 昔から、時は金なりと言いますが、それってどうして? 時間があれば余裕を持って仕事が出来ますが、時間がないと焦ってミスが増え、逆に仕事の量が増やす結果にもなりがちです。 またWeb広告の現場では、早く作業を進めることが出来ればそれだけ広告を回すことができ、売上に直結します。 今回は、私が使用している時短テクニック(PhotoshopCC版)の一部をご紹介します。 デザイン作業が短縮できれば、LPを早く修正出来たり、よりたくさんのテストを回すことが出来るなど、広告の成果にもかなり大きく影響しますよね。 もし「知らなかった!」ということがあれば、ぜひ日々の作業に取り入れてみてください!

ショートカットを使用する

ショートカットは覚えるまでは大変だけれど、使えるようになると超便利です。
便利なショートカットをいくつか、ご紹介したいと思います。

Ctrl+S 保存
Ctrl+T 画像変形
Ctrl+G グループを作成する
Ctrl+J 複製
Ctrl+E 統合
Ctrl+D 選択解除

V 移動ツール
M 定型選択(長方形選択ツール・楕円形選択ツール)
W 不定形選択(自動選択ツール・クイック選択ツール)
T 文字(横書き文字ツール・縦書き文字ツール・横書き文字マスクツール・縦書き文字マスクツール)
U シェイプ(長方形ツール・角丸長方形ツール・楕円形ツール・多角形ツールなど)

このあたりはめちゃくちゃよく使います。
アドビのサポートを見ていただいた方、ショートカットを覚えようとしたことのある人なら、一度は目にしているかもしれません、早見表。これは、とても便利です。

ショートカット早見表
https://helpx.adobe.com/jp/photoshop/how-to/use-shortcut-keys-for-efficiency-photoshop.html

また、すべての初期設定ショートカットキーはこちら⇓
https://helpx.adobe.com/jp/photoshop/using/default-keyboard-shortcuts.html

ショートカットは、自分なりにカスタマイズして使用すると、とっても便利です。
例えば、私は、スマートオブジェクトを作成する際に、F2を押したら作成できるように設定してあります。

また、既存のショートカットキーの設定では覚えにくい、使いにくいという場合は、自分なりに覚えやすいキーで再設定してしまっています。
人と話を共有する際は、初期設定のキーでないと、説明がうまく伝わらないなどという弊害が出来てしまうので、むやみやたらに変更するのは良くないですが、効率化を図るのであれば、個人設定のショートカットキーや、ウィンドウの配置は必須です。

スライスよりはアセット

WEB用に画像をカッティングする際、スライスよりはアセットが便利。
大きさ指定とかしなくても、さらっと書き出ししてくれます。
結構基本機能かなとも思うのですが、ご存じない方は是非ためしてください。

たとえば・・・

画像

こんな画像を、背景(bg.jpg)、本文(main.png)、ボタン(button.png)で切り分けたい時、手順としては次のようになる。

【手順1】
それぞれの切り分けたい画像を1フォルダに入れて、作りたいファイル名を拡張子まで込みで名前として付ける。レイヤーが複数ない場合(今回の場合、bg.jpgなどの時)は、1ファイルだけを入れるためにわざわざフォルダを作成しなくてもいい。
その場合は、その画像自体の名前に、作成したいファイル名をつけても大丈夫。

手順1

【手順2】
「ファイル>育成>画像アセット」で「画像アセット」にチェックを入れる。

手順2

【手順3】
チェックが入ってるのを確認したら、保存。
以上です。
それだけで、このように…

アセットでできたフォルダ

「PSDのファイル名-assets」というフォルダが作成され、フォルダの中には背景(bg.jpg)、本文(main.png)、ボタン(button.png)が入っているというわけです。

image-assets

ポイントは、たった二つだけ。

1.ファイル名を付けるときに、ちゃんと拡張子まで指定すること
2.画像アセットにチェックを入れていること

ね、簡単でしょう?

スマートオブジェクトを上手に使う

使いまわすボタンやランディングページなど何度も同じコンバージョンエリアが出てくるサイトなんかは、エリアごとスマートオブジェクト化!そうすることで、その部分が変更になったとき、何か所も同じような変更をすることがなく、時短が出来るというわけです。

スマートオブジェクト

たとえばボタン部の文言変更も、スマートオブジェクトにしておけば、一か所変更するだけで、他の同じパーツもすべて一度に変更できちゃう。
スマートオブジェクト最高!!!

そしてこれって、バナー作成時にも生かすことが出来ます。バナーって、同じ画像をサイズ違いでいくつも作成しますよね。基本、私は1ファイルで作成して、アセット使ってカッティングなのですが、一度スマートオブジェクトで背景とか人物とか、ファイルを組んでおくと、背景も人物もある程度いい感じのところにあらわれるので、微調整ですんじゃう場合もあります。

人物の肌を簡単選択する

人の肌の色だけ少し明るくしたり、赤みを入れたりと、調整したいことってありますよね。
その時に役に立つのが、スキントーンの選択
やり方は簡単

1.メニュー>選択範囲>色域指定
2.色域指定パネル内の「選択」にて、「スキントーン」を選択

これだけでOKです。

スキントーン

選択した後、マスクをかけて色調整するとか、そのあたりはお好みで・・・

もちろん近似色は肌でなくても検出されてしまいますし、肌であっても色が離れているものは選択されなかったりしますので、許容量の調整が必要なのはもちろんですが、最終的に「クイック選択ツール」の方がやりやすい場合もあります。ですから、「スキントーンの選択」と「クイック選択ツール」どちらを使う方がいいのかについても、試してみて、お好みで判断してください。

ブレンド機能で簡単切り抜き

単純な画像や精密さがよりスピードが要求されるような仕事の場合、便利なのがブレンド機能切り抜きたいもの自体の色がはっきりしている場合は、本当に簡単に抜けます。
ロゴ、いれこみたいんだけど、PNGファイルがないんだよーとか、そういう場合、すごく便利です。

レイヤーを選択して右クリック>レイヤー効果
ブレンド機能01

するとレイヤースタイルパネルが開き、レイヤー効果のブレンド機能の印の部分をドラックして調整することで、ロゴの白背景は綺麗に消えます。

ブレンド機能02

ちなみに、今回のブレンド条件がグレーだったので、白が消えましたが、ブルーにすれば、青が消えます。撮影の時のブルーバックと同じような感じで、特定の色彩のみを透過させる機能と思っていただけるといいかもしれません。

外部サイトを活用する

これはPhotoshopに限ったことではありませんが、便利機能をもった外部サイトは沢山あります。便利だと思ったものはとことん活用していきましょう。

Gridpx

http://www.kenjisugimoto.com/gridpx/
幅、マージン、カラム数を入れるだけで自動的に数値を出してくれるサイトです。
大変素早く計算して、見た目にもわかりやすいのでお勧め。
これで、いちいち自分で計算する必要がありません。

Gridpx

TinyPNG

https://tinypng.com/
画像圧縮してくれるサイトで、HTMLの表示が重いんだけど・・・という時に、Photoshopで一つ一つ圧縮していくよりは、断然早く、小さくしてくれます。有料になりますが、Photoshop用のプラグイン(アプリケーションの機能を拡張するための追加のプログラム)もあります。

TinyPNG

部品を使いまわす

リサイクルイメージ

これもまた、Photoshopに限ったことではありませんが、使える部品は、整理して取っておくこと。
これ、重要です。例えば、メダルのデザイン、リボンのデザイン、フリーコールのデザイン…。何度も使う可能性があるものは、必ず名前を付け、わかりやすくフォルダに整理して取っておきましょう。また、ちゃんと分類しておくことで、探しだす手間が少なくなります。

この時、ちゃんと背景が抜けた状態のPNGファイルで保存しておくと、より便利。また、使いやすいサイズに変えておくとさらに流用が便利です。
使いたいものを探している時間というのは、案外多いものです。使いたいものを短時間で探しだせるようにすることというのは、単純なようでかなりの時短テクニックです。

まとめ

時短って大切

さて、いかがでしたでしょうか。
基本的なことですので、すでにやってるよってことも多いかもしれません。けれど、中には、何それ知らなかった!ってこともあるもしれません。知ってはいたけど、実践はしていなかったことがあれば、是非、一度実践してみてください。使ってみたら、意外に使えることもあるかも。

また、今回ご紹介した以外にも、世の中には、色々なサイトや書籍に、数多くの時短テクニックが載っています。
そのどれが、最も効率がいい時短テクニックなのでしょうか。
それは、残念ながら実際に試してみないとわからない、というところです。

なぜなら、人によってあう、あわないもあるからです。どれか1つだけが「時短テクニックの正解」などということは言えないのです。

それぞれのスタイルに合わせて、参考にしていただき、より良いデザイナーライフを送っていただければ幸いです。

10月25日まで!最新の売上UPホームページ構築セミナー募集

ライバルと差別化したホームページを作り、少ないリソースで売上を最大化する具体的手法を公開!

細かいABテストや新手法でライバルに差をつける必要がないので、資金や人的リソースの限られる中小企業様に必ず身に着けていただきたい手法です。

今すぐ最新の売れるホームページ集客ノウハウを手に入れる
10月25日まで!最新の売上UPホームページ構築セミナー

関連記事一覧