Photoshop:ツールメニューの使い方

Photoshop:ツールメニューの使い方

Photoshop:ツールメニューの使い方

Photoshopは基本操作の組み合わせで無限の加工ができます。

前回はWEBイメージ画像の出力に関する一通りの流れをご紹介しました。

画像を出力する基本を押さえれば、写真をそのままWEBページに掲載する手順に難しいところは無かったと思います(縦横サイズには気を付けて下さいね)。

前にも言いましたが、画像にどのような加工・および文字や要素を重ねた装飾をおこなったとしても、最終的に出力する工程は何ら変わりませんので安心して下さいね。

イメージ画像を一から作る

ではこれから、いろいろな機能を駆使して一から画像を作成する方法を紹介していきたいと思います。

「元となる写真画像をきれいに加工する作業」というよりは、WEB用のイメージ画像やリンクバナーなどを作成する事に着目した操作方法となります。

この基本操作をマスターすれば「あとは全て基本を組み合わせた応用操作」ですので、自分が理想とするレベルの高い加工・装飾作業も容易に習得していけると思います。

ツールメニューが基礎の要

Photoshopには画面左によく使うメニュー(ツールメニュー1列or2列)が並んでいます。

誰でも基本的な操作ができるようにまとめてあるのが、左側のツールメニューです。ですのでここに並んでいる操作を覚えれば、基本的な操作が習得できる事になります。

それでは上から順番に説明していきましょう。

説明しないメニューについて

ツールメニューを上から一つずつ見ていきますが、その際WEB画像の作成の際にあまり使わないと思われるメニューについては飛ばしていきます。

説明しなかったメニューは画像加工や装飾の方面で使ったり、高度な操作の際に使用するものと思っておいてください。

決して使用レベルが高いからではなく、今回はあくまでWEBイメージ画像の作成に焦点を当てているため紹介をしていないだけです。

ツールバーの右クリックについて

各項目は右クリックする事で複数の項目内から切り替えができるものがあります。右下に▼マークがついているのは全て選択可能である事を指しています。

ですので右クリックして必要に応じて目的のものを選択しましょう。

ツールメニュー紹介

Photoshop画面
Photoshop画面

移動ツール

移動ツール

これを押して、画像上の要素(レイヤーを)クリックするとハンドル(上下左右斜めに8個)が表示されます。その状態でドラッグする事で自由に移動させる事ができます。

Shiftキーを押しながらドラッグする事で上下左右を垂直・水平に移動する事が可能です。

選択ツール(長方形・楕円形)

自動選択ツール

これを押して、要素上の左上から右下などにドラッグすると長方形(或いは円形)に選択ができるようになります。

画像上の特定範囲を選択したい場合に使います。選択してコピーをしたり切り取ったりができますね。

Shiftキーを押しながら選択すると正方形(正円形)に選択する事ができます。

自動選択ツール

自動選択ツール

これを押して要素上をクリックすると、同色の範囲内をおおよそ選択してくれます。周りが別色で取り囲まれていればその内側範囲が選択されます。

選択されたエリアの色を変えたり、切り取ったりする場合に使われます。

一つ目を選択後にShiftキーを押しながら別の範囲をクリックすると同時に複数範囲を選択する事が可能です。

選択ツール

選択ツール

選択ツールには「なげなわ」・「多角形」・「マグネット」とあり、それぞれ選択の仕方が違います。

なげなわ選択

なげなわ選択は、マウスドラッグで動かした後がそのまま記録され、手書きのような感じで選択できます。丸みのある複雑な要素の選択に適しています。

多角形選択

多角形選択は各ポイントをクリックしていく事で、その間が全て直線で結ばれる選択方法です。直線の多い要素を選択しやすいです。

マグネット選択

マグネット選択は要素の縁(色の境界線部分)を少しずつクリックしながらなぞる事でその輪郭を自動選択できるツールです。

クリックとクリックの間の要素は自動判断で選択してくれます。

スポイトツール

スポイトツール

これはWEBサイト制作時によく使うツールです。要素内をクリックするとその部分の「色」が下の「描画色」のところに配色されます。

同じ色を使う必要があったりする場合にその元画像をPhotoshopに取り込み、スポイトツールで色を調べる事ができます。

キーカラーとして色を統一する場合に便利ですよね。

切り抜きツール

切り抜きツール

切り抜きツールは要素上を四角にドラッグすると選択された要素以外が黒くなります。Enterを押す事でその要素のみに切り取りしてくれる機能です。

上部に表示される「幅と高さ」を前もって指定して置けば、そのサイズ比に縮小(拡大)して切り取ってくれます。

ブラシツール

ブラシツール

要素上にブラシで線を書く事ができます。鉛筆の様に使ったり太さや色などいろいろな設定ができます。先端の形状は変える事ができ、オリジナルに作った先端を登録する事も出来ます。

塗りつぶしツール

塗りつぶしツール

要素内を特定の色で塗りつぶす事ができるツールです。塗りつぶしの際は「描画色」に設定されている色が入ります。

上で説明した「スポイトツール」で色を読み込んで、別の箇所を「塗りつぶしツール」で同じ色に塗るパターンがよくあります。

消しゴムツール

消しゴムツール

いろいろな箇所を消す際に使います。基本は選択された大きさ(丸円)の箇所をクリックして消す事ができます。

なかでも「マジック消しゴムツール」は、消去対象エリアがほぼ1色である場合などはこのツールを使うと一気に消す事が可能です。

上の許容値を自在に設定する事で消去の度合いも調整できます。

テキスト入力ツール(横書き・縦書き)

テキストツール

このツールを選択して要素上をクリックするとその部分からテキストを入力できる様になります(縦書きも可能)。

バナーを作成するときに非常によく使う機能です。

フォントはPC内にインストールされているフォントが全て使えますので、「文字ツール」内で書体や大きさなどを自由に変更する事ができます。

長方形・楕円形ツール

長方形・楕円形ツール

要素の上に長方形や楕円形などの要素を新たに作る事ができます。Shiftを押しながらで正方形(正円形)が作れます。

5角形や6角形などの多角形、直線などのライン、縁が丸くなる角丸長方形など作れる要素がたくさんあります。

カスタムシェイプツールにより前もって準備されている図形の中から利用する事も出来ます。

描画色と背景色

描画色・背景色ツール

ここは一番よく使う部分で、要素に色を塗る場合の色指定になります。

色のついた四角マスが2つ重なっており、上が「描画色」で塗りつぶしツールなどで塗る時の色であり、テキストなど入力した時の初期の色になります。

それに対して下が「背景色」となります。基本的に2色指定できる事になりますね。

描画色と背景色は右上の矢印マークを押す事で色を交換する事ができます。左下の白黒の縮小版をクリックすると白と黒の基本設定に戻せます。

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

以上がツールメニューの中で特によく使う機能です。

操作をする人によってツールメニューの中でよく使う機能は違うと思いますが、WEBページ用のイメージ画像を作成するにあたってはそんなに大きな差は無いと思います。

ツールメニューはよく使う機能をまとめたものであり、それ以外に元々上部に並んでいる「ファイル」から「ヘルプ」まで横並びのメニュー内にはもっとたくさんの機能が入っています。

これについては今回説明したツールメニューのそれぞれを補助する様々な機能が入っていると考えて下さい。

焦らずに。あとはイメージ画像を作る事で覚えるだけ

実際には何度もイメージ画像を作成する中で覚えていくものですので、今の時点で全てを頭の中に入れる必要はありません。いずれ嫌でも覚えるようになります。

重要なのは画像作成を通して上のツールメニューをどのように使うかですよね。ですので次回は何か画像バナーを作ってみたいと思います。

この記事をシェアする

一押し人気コーナー紹介

HTMLカテゴリの関連記事