Photoshop初心者必見!!制作の最前線でも使われているオススメ機能紹介

web

グラフィック

知ってるだけで作業時間がかなり短縮されるツールウィンドウに迫る!

mv

こんにちは。
WEBデザイナー兼中川ラボ研究員の中川です。

 

最近、夜の暗闇の中忍び寄る蚊と連日戦って連敗している中川ですが、皆さんはこの季節快適に過ごされてますでしょうか?

 

今回は、Photoshop初心者は知っておいたほうがいい「ツールウィンドウ」について、Photoshop暦9年くらい、WEB業界4年目くらいの私が紹介いたします。

ツールウィンドウってなに?

0

 

コレのことです!

各ツールウィンドウには役割があり、このウィンドウを表示しておくことにより自分の作業効率をあげることができます。

 

画面左端に出てるツールパレット(鉛筆とかパスツールが出ている欄)もこれに含まれます。

このプルダウンメニューにチェックされているものが画面に表示されるので、自分の必要なツールにはチェックを入れておきましょう!

また、不意にツールウィンドウが消えてしまった際には、この「ウィンドウ」項目をチェックすれば解決することができます。

 

プルダウンメニューを見る限りでも、かなりの量のツールがphotoshopの中にあることが伺えます。

 

ためしに展開できるだけ展開してみると……

7

こんなことになり、肝心のキャンバスを表示できなくなります!!

ツールウィンドウに表示されてなくても機能として使えるものがあるので、頻繁に使うものを少しずつ使いながら選別していきましょう。

役に立っているウィンドウランキング(中川調べ)

今まで作業していて様々な場面で多種多様なウィンドウを使用してきましたが、”WEBデザインをする際に役に立つ”という観点でご紹介いたします。

 

1位 レイヤー

グラフィック系のソフトを買う理由に「レイヤー」を使えるからと言われるほど人気の機能。

 

8

 

フォトショップのレイヤーパネルには、他のグラフィックソフトにも見られる”不透明度調整”などの機能が存在しているが、25種類を超える描画モードやマスク機能、レイヤー自体に効果を設定できる”レイヤースタイル”機能など多彩な機能を有しています。

 

さらに、レイヤーウィンドウの中にフォルダを生成することもでき、要素ごとにまとめてレイヤーを格納することも可能です。さらに色分けもでき、すっきりとしたデータを制作することができます。

細かすぎても大変な作業になりますが、このすっきりとした分かりやすいレイヤー構造が引き続きのコーディング作業に響いてきます。

 

 

また、複数オブジェクトを格納したり画像データを(元写真以下のサイズであれば)劣化させずに何度も拡大縮小することできるスマートオブジェクト機能の管理もこのウィンドウにて可能です。

スマートオブジェクトに関しては、下記引用サイトにて詳しく説明してあります。

 

スマートオブジェクト入門~直しに強いPhotoshopデータを作ろう~ 第1回:劣化知らずの「スマートオブジェクト」

https://blogs.adobe.com/creativestation/web-photoshop-smartobject-benefits-and-manipulation

 

2位 ヒストリー

 

12

“戻る”機能を可視化したこのヒストリーウィンドウは、10、20回前もCtrl+Zを押さずにボタン一つで目的の場所まで戻ることができます。

 

また、各項目の左にあるチェックボックスにチェックを入れておくと、今の状態を一時的に保存してくれます。これに「チェックしておくことにより、戻れないくらい先に進んでしまっても、そのときの状態に戻すことが可能になります。戻すときはウィンドウ内のチェックが付いているところをクリックするだけです!(チェックをはずすしてヒストリー数限界まで到達すると消えます)

ウィンドウの左下にカメラマークがあるのですが、これを押すとスナップショットを撮ることができ、同様に現状を保存することができます。

同じデザインでも、少し違うパターンを作る際にすごく役に立つ機能になります。

 

ヒストリーを残しておける数は環境設定から変更可能なので、フォトショップを導入した際には、自分のPCのスペックと相談しながら設定しましょう。

 

3位 文字

14

17

 

3位は迷いましたが、WEBデザインに文字はつきもの!頻繁に使うものとしてあげられると思います。

この文字ウィンドウは、見ての通りテキスト部分の書式を設定できます。初期設定では、このウィンドウを表示させると、上の画像の右側(段落)のようにタブで切り替わるウィンドウが付いてくる。テキスト設定関係のタブなので、ウィンドウ内に格納してあるのはありがたいですね。

 

 

4位以下はさらっと紹介します。

 

4位 情報

10

 

WEBサイト制作時に範囲選択ツールと合わせて、要素の幅を計測する際に重宝しています。

 

5位 カラー

9

 

見ての通り、色を指定したりできます。

また、スポイトツールで指定した色もここに表示されるため、色の情報(色コードなど)を知ることができます。

詳しい情報はカラーウィンドウの左上部分の四角の色が表示されている部分をクリックして開かれるカラーピッカーを開くと分かるかと思います。

 

 

 

 

6位 ナビゲーター

11

 

ナビゲーターは、現在開いているキャンパスの表示箇所の移動や拡大縮小を管理するウィンドウです。

左下、の拡大倍率をいちいち打ち変えなくても、このウィンドウの下にある、つまみを左右に動かせば拡大縮小されます。

また、ナビゲーターの赤い枠(表示部分)をドラックして動かすとキャンパスも同様に動きます。

常に制作物の全容が把握できるので、いいですね!

 

7位 ブラシ

13

 

写真のレタッチやロゴ、イラストの手直しをする際に使用します。基本的にブラシツールを選択している時にしか選択できないんですが、これをなしにブラシを使うのはもったいない!是非、いろいろと触ってみて欲しいウィンドウになります。

 

これらをあわせた、9年間の集大成が下の画面になります。

5

 

これをワークスペースとして、この配置を保存することもできます。

ワークスペースを保存する際は、[ウィンドウ]→[ワークスペース]、もしくは画面の左上のタブ(上の画像でいう、中川と書いてある箇所)から保存することができます。これをすることによって、変に崩れてしまったときや冒険していろんなものを開いてしまったときに、すぐ自分の慣れた環境に戻すことができますね!

また、WEBデザイン用、レタッチ用など、用途に分けたワークスペースを用意してもいいかもしれません。

 

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

 

Photoshopは、初めて画面を開いたときに機能が多すぎてわからない!!というような悩みをもたれる方が多くいらっしゃいます。しかし、特定の機能だけ知っていれば十分使えるものでもあります。

ワークスペースは、作業画面が圧迫されてしまう要素でもありますが、使いこなせれば作業時間をギュッと短くできるものなので是非活用してみてくださいね!

 

関連コラム