creatersnest101

まずはこれを知っておこう!これからphotoshopを使う人のための超基本テクニック


はじめに

写真の加工や画像の作成に使われる定番アプリケーションのPhotoshop。
多彩な機能を持つため、難しいのでは、と敬遠してしまっている人もいるかも
知れませんが、やはり画像を扱う場合、またWeb制作などの場面でも避けては
通れません。そこで初めてPhotoshopを使う人にも分かる基本的な使い方や
テクニックをご紹介します。

ファイルを開く/新規作成

まずはPhotoshopで編集する、または作成する画像の準備をします。

デジタルデータを開く:
デジタルカメラで撮影しPCに取り込んだデータやPDFなどのドキュメントファイル、
WEB用素材などを開く場合は、[ファイル]→[開く](Ctrl+O)で保存先から
ファイルを指定するか、保存先を開きPhotoshop上にドラッグすると開きます。

アナログデータを読み込む:
カタログやプリントされた写真などのアナログデータをスキャナなどを用いて
読み込む場合、[ファイル]→[読み込み]→使用デバイスを選択します。
(スキャナなどのデバイスのメーカーが提供している TWAIN ソフトウェアを
インストール、Photoshop TWAIN プラグインをダウンロードしてから行ってください)

新規で作成する:
既存の画像の編集ではなく、1から自分で作成をする場合は
[ファイル]→[新規](Ctrl+N)で作成します。

カンバスカラーとは・・・

作成時のカンバスの色を「白」「背景色」「透明」から選ぶことが出来ます。
「白」は白い紙の上に、「背景色」は背景色の紙の上に絵や文字を書いていくのと
同じような感覚ですが、「透明」の場合、背景がない状態で作成が出来、重ね合わせる
と下の画を透過させることができます。new_create

画像のサイズ・解像度を変更する

開いた画像、作成中の画像の大きさを変更します。

画像全体を拡大、または縮小する
[イメージ]→[画像解像度](Alt+Ctrl+I)で数値を変更すると縦横の比率が等倍で
画像サイズが変更します。

拡張、または切り取って画像のサイズを変更する
[イメージ]→[カンバスサイズ](Alt+Ctrl+C)で数値を小さくすると切り取り、
大きくすると拡張されます。拡張した部分の色は「カンバス拡張カラー」で指定
できます。

※この方法での切り取りは右寄せ、左寄せなど基準の位置は指定できますが、
画像の中の一部を切り抜く方法には向いていません。部分的な切り抜きは
ツールボックスの「切り抜きツール」で行います。

reduction

範囲を選択する

加工の対象となる範囲を選択します。
範囲の選択は背景を切り抜く、一部だけを塗りつぶす、境界線を引く・・など様々な
加工を行う際の基本となります。

選択の方法と種類:
範囲の選択にはツールボックスの選択ツールを使います。
選択したい形や内容に合わせてツールを使い分けましょう。

画面全体を選択するときは・・・ツールボックスの長方形選択ツールなどで画面全体を
ドラッグし範囲を選択することもできますが、[選択範囲]→[すべてを選択](Ctrl+A)
でも行うことが出来ます。

tool_choice

画面のトーン・色合いを調整する

画面の明暗やコントラストを調整します。

画面のトーン・色合いを調整する:
[イメージ]→[色調補正]→[レベル補正](Ctrl+L)で調整します。
ヒストグラムという山型の分布が表示されますが、左ほど暗く、右は明るいことを示します。
右側のスライダーを左に動かすことで画面が明るくなります。
また、左側のスライダーを右に動かすことでコントラストが高くなります。
下部の出力レベルは右を動かすことで画面を黒く(暗く)、左を動かすことで白く(明るく)
します。

level_correct

ブラシで描画する

ツールボックスのブラシを使い、フリーハンドで絵や文字を書いたり、色を塗ります。
アナログで絵や字を書くのと同様にマウスやペンタブなどでドラッグした内容がそのまま
描画されます。

ブラシを調整する
サイズや形状の調整はオプションバーで行います。
さらに詳細の調整を行いたい場合は、[ウインドウ]→[ブラシ]のブラシパネルで調整
します。

「モード」と「不透明度」・・・
オプションバーにある「モード」や「不透明度」を使うことで描画の幅はグッと広がります。
「モード」は同じ色であっても適用される結果が違います。
また「不透明度」は同じ色で数字が小さいほど色を薄く、大きいほど濃く(100%が元の色)
描画できます。色を重ねる、除く、濃淡や陰影をつけるなど用途は様々です。

tool_brush_co

描画色を作る

ブラシや塗りつぶしなどの色を作成します。

描画色・背景色を作る
ツールボックスで「描画色」と「背景色」を作ります。
(左が描画色・右が背景色/右上の矢印で入れ替え)
カラーをクリックしカラーピッカーを起動させ自由に色を作ることが出来ます。

tool_colorpick

消しゴムで消し去る

描画の不要な部分をツールボックスの「消しゴム」で消し去ります。

不要な部分を消す
ツールボックスで「消しゴムツール」を選択し、ブラシでドラッグします。
レイヤーの最下層の場合はドラッグした範囲が背景色となりますので、地の色と
背景色が合っているかを確認してください。
またレイヤーで使用した場合、直下にあるレイヤーが透過されます。

「背景消しゴムツール」と「マジック消しゴムツール」・・・
背景のように同じ色を除去する際にはこれらを使うと便利です。
「背景消しゴムツール」は消しゴムブラシ内にある+部分の色を除去して
ドラッグした範囲を透過、「マジック消しゴムツール」はクリックした箇所と
同じ色の範囲を透過しますので除去したい範囲によって使い分けます。

tool_eraser

描画をぼかす・シャープにする

描画をぼかしたり、逆にくっきりシャープにします。

描画の一部をぼかす・シャープにする
ツールボックスの「ぼかしツール」「シャープツール」を選択し、ブラシで
ドラッグします。

画面全体をぼかす・シャープにする
[フィルター]→[ぼかし]または[シャープ]で効果の種類を選択します。

tool_sharp

「ぼかしツール」と「指先ツール」の違い・・・
「ぼかしツール」はドラッグした範囲の輪郭をぼんやりとさせますが、描画内容自体を
変えるものではありません。「指先ツール」はドラッグした部分が指でこすったように
にじんだり、色が伸び、なじむので色や形など描画の内容自体が変わります。

レイヤーを作成する

レイヤーとは英語で「層」(重なっているもの)を意味するように、画像処理では積み
重ねることが出来るシートのようなものです。
レイヤーは独立して操作ができ、他のレイヤーに影響を与えないので複雑な合成を行う
ことが出来ます。

img_layer

新規レイヤーを作成する
[レイヤー]→[新規](Shift+Ctrl+N)で作成します。描画モードや不透明度を変える
ことで、レイヤーの重なり方を調整できます。

レイヤーの重なり順とは・・・
例えばお盆の上に皿があり、皿の上に食べ物があるようにレイヤーは本来上にあるべき
ものが上にあることで適切な効果を得ることが出来ますが、絵と文字のように重ねる
内容によってどちらが上にも有り得るレイヤーもあります。
この重なり順は[ウインドウ]→[レイヤー]でレイヤーパネルを表示することで確認
出来ます。順番を入れ替えたいウィンドウをドラッグすることで任意の位置に変更でき、
不要なレイヤはーパネル右下部のごみ箱をクリックして削除することもできます。

選択範囲・アクティブレイヤーを変形する・回転させる

選択した範囲、またはアクティブレイヤー(選択した編集中のレイヤー)のみを
変形したり、回転させます。

選択範囲・アクティブレイヤーを変形する・回転させる
[編集]→[変形]で行いたい操作を選択します。ドラッグで変形したい形、または角度に
調整したらオプションバーの○をクリックして確定します。
幅を50%に、角度を30度などオプションバーに数値を入れて行うこともできます。

画像自体を回転させるときは・・・
[イメージ]→[画像の回転]で任意の角度に回転すると、すべてのレイヤーがまとめて
回転します。

img_roll

単色・グラデーションで塗りつぶす

色を塗る際、ブラシでドラッグした範囲ではなく広範囲を単一に、またはグラデーションで
塗りつぶします。

選択範囲、アクティブレイヤーを単一色で塗りつぶす
[編集]→[塗りつぶし]で塗りつぶします。この方法で塗りつぶすと範囲やレイヤーに均一に
色を塗った状態になります。

選択範囲、アクティブレイヤーをグラデーションで塗りつぶす
ツールボックスの[グラデーションツール]をクリックし、オプションバーで色や塗り方を
設定して塗りつぶします。この方法で塗りつぶすと範囲やレイヤーをグラデーションカラー
で塗った状態になります。

塗りつぶしレイヤーで塗りつぶす
[レイヤー]→[新規塗りつぶしレイヤー]で単一色の場合[べた塗り]、グラデーションの場合
[グラデーション]で塗りつぶします。この方法で塗りつぶすと、塗りつぶした色のフィルムを
掛けた状態になります。

color_gradation

文字を書く(フォント)

画像に文字を書きます。

フォントを指定し文字を書く
ツールボックスの[文字]ツールを選択し、テキストを書きたい位置をクリックします。
縦書き、横書きは文字ツールを右クリックで選択できます。書体、太字、大きさ、アンチエイリアス
(線の滑らかさ)、文字色などはオプションバーで調整できますが、行間や文字と文字のスペース
など、より詳細の設定は[ウィンドウ]→[文字]で文字パネルを開き設定します。
書いたテキストはレイヤーとなります。

font_panel

レイヤーとしての文字・・・
書いた文字はレイヤーとなっていますので、[レイヤー]→[レイヤースタイル]で加工を行うことが
出来ます。文字の塗りをグラデーションにしたり、境界線で囲うなどテキストへのアイキャッチを
強めたり、読みやすくしたり、効果や用途は様々です。

シェイプを作成する

シェイプで図形を描画します。矩形やライン、楕円などをレイヤーで作成することができ、
ベクターデータ(点とそれを結ぶ線の数値を元にした画像形式)のため、拡大・縮小で劣化しない
ので変形を自在に行えます。

vector_bitmap

シェイプを作成する
ツールボックスの[長方形ツール][角丸長方形ツール][楕円形ツール][多角形ツール][ラインツール] [カスタムシェイプツール]から描画したいシェイプを選び作成します。

自分でシェイプを作成するには・・・
ツールボックスに既存のシェイプでは描画できない形をシェイプのように拡大・縮小したい場合は
ツールボックスの[ペンツール]を使用します。
ペンツールでオプションバーで[シェイプ]を選択し、作成した内容がそのままシェイプレイヤーと
なります。

レイヤーのラスタライズ・結合/画像を統合する

シェイプの項目でベクターデータのため自由に拡大、縮小が出来るという話をしましたが、
これはフォントも同様で文字やシェイプとしての編集をそれまでの操作に関わりなく何度でも
行うことが出来ます。ただ、このベクターデータはブラシのように不要な部分を消したり、
エッジを柔らかくしたりといったような画像として加工をすることが出来ません。
このような加工をするには「ラスタライズ」を行い、ビットマップデータ(点の集合体)に変換
することが必要です。
ほかのレイヤーと結合をする際にもベクターデータは「ラスタライズ」されます。

また、レイヤーは複数の層になっていますので層と層をくっつける状態がレイヤーの結合、
すべてのレイヤーを確定し、一枚の画像にすることが統合です。

join_integration

ラスタライズを行う
[レイヤー]→[ラスタライズ]でラスタライズを行う内容を選択します。
ラスタライズを行うとビットマップデータのレイヤーとなります。

レイヤーの結合を行う

[ウィンドウ]→[レイヤー]でレイヤーパネルを表示し、結合を行いたいレイヤーを
Shiftを押しながら選択し、右クリック→[レイヤーの結合]を選択します。

画像の統合を行う
[レイヤー]→[画像を統合]ですべてのレイヤーが確定し、画像が統合されます。
画像の統合を行う際に非表示にしていたレイヤーは表示されずに確定します。
また、透明部分は下層のレイヤーを透過して確定されますが、下層に色がない場合
「白」になります。

画像を保存する

作成した、または編集したデータを保存します。

継続して編集可能な状態での保存
[ファイル]→[保存]※上書き保存(Ctrl+S)、または[別名で保存](Shift+Ctrl+S)で
ファイル形式をPSDで保存します。レイヤー情報などをそのまま残して保存しますので
引き続き編集を行うことが出来ます。
ただし、Photoshopの編集機能を維持したファイルなので、Adobeのアプリケーションや
対応したソフトがインストールされていない環境では開くことが出来ません。

Web用に保存
画像をWeb上にアップロードする際にはファイルのサイズがあまりに大きくなりすぎない
よう考慮する必要がありますが、色やエッジなどを保持しなければなりません。
Webで使用される主な画像形式で最適化して保存をします。
[ファイル]→[Web用に保存](Alt+Shift+Ctrl+S)でWeb用に保存ダイアログを表示します。
画像形式や画質をプレビューとそのファイルサイズを見ながら調整し、[OK]で保存できます。

ファイル形式とは・・・
Web 用のファイルは 4 種類の形式から選択できます。
内容によって適するファイル形式を選択します。

JPEGは24 ビットカラーをサポートし、明るさや色を保持できるためほとんどの写真に適した
形式です。ただし、透明部分を透過したまま保存できないため、透明部分を有する写真は
同じ24ビットカラーをサポートし、透明部分を透過して保存できるPNG-24で保存します。
(PNG-24はJPEGよりも重いため用途を留意する必要があります)
GIF、PNG-8はインデックスカラー256色での表示のためべた塗り、ロゴやテキストなど色が
単調で鮮明な画像に適しています。またアニメーションの書き出しはGIFを使用します。

savedate_forweb

最後に

いかがでしたか?
ご紹介した使い方やテクニックはとても基本的なので、何度か使えば覚えらそうですよね。
多数ある機能はこれらの複合、応用として覚えていくことが出来るものも多いので、
まずはこれらの基本をマスターするところからはじめましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Articleスマホ用サイトも簡単に作れる!レスポンシブの無料テンプレート30選