特集・記事リスト 記事・特集リスト
資料ダウンロード 無料お役立ち資料
本サイトについて 本サイトについて
お問い合わせ お問い合わせ
閉じる

【Photoshop初心者向け】基本的なPhotoshopの使い方

写真や画像の編集ができるPhotoshop。Webサイトや記事に使う画像を作る時に欠かせないツールです。写真・画像加工に役立つPhotoshopの基本的な使い方を「写真編集」「写真合成」「バナー作成」に分けて解説します。

カテゴリ: Photoshop

今回はWebマーケターに役立つPhotoshopの使い方を紹介していきます。
Webサイトや記事に使う画像を作る時に役立つ画像編集の方法を以下の「写真編集」「デザイン画像」「写真合成」「バナー作成」4つに分けて紹介します。

それぞれの作り方によって使う機能が異なるので、自分が使う用途に合わせて機能を覚えるといいでしょう。

Photoshop 基本的な知識

まず、photoshopの基本的な知識から押さえていきます。

レイヤーについて

Photoshopでは、以下のようにレイヤーを重ねることで画像が作られます。

レイヤーについて

レイヤーとは簡単にいうと透明のフィルムのようなもので、レイヤーには画像を配置することができます。
このフィルムを重ねることで1つの画像が完成します。

レイヤーが重なると上記のような画像になります。透明状の部分は透けるので背景色である白が表示されます。
レイヤーは積み重ねた順に上から表示されるので、一番上に配置している背景から順に重なってレイヤーが表示されます。

Photoshop上でのレイヤーの順番はこのように並んでいます。

背景→テーブル→お皿→リンゴの順で重なっています。

ツールを表示する方法

Photoshopではツールがグループ別に収納されていて、その中の一つのツールがツールパネルに表示されています。それ以外のツールが使いたいときはツールパネルの右下にある三角のアイコンを長押しすることで隠されたアイコンを使うことができます。

間違えて操作をしてしまった時の対処法

P

hotoshopを使用していて間違った操作をしてしまった場合の対処法を紹介します。
Photoshopではヒストリー内に今まで行った手順が記録されているのでそこから作業をやり直すことができます。
またWindowの場合はcontrol+z MACの場合はcommand+zで一つ前の作業に戻すことができます。

例:間違えて消しゴムツールを使ってしまった場合

まず初めににヒストリーを表示させます。

消しゴムを使う前の手順に戻ることで、元に戻すことができました。

ヒストリーで過去の作業に戻して、再び作業を行うと、戻した時からヒストリーが新しく上書きされてしまいます。そうなるとヒストリーで過去の作業に戻る前の状態に戻ることができなくなるので注意してください。

Photoshopでできる主な4つの使い方

次はPhotoshopでできる主な使い方を5つ紹介します。今回は「写真編集」「デザイン画像」「画像合成]「バナー作成」の5つの使い方です。

写真編集での使い方

ここで紹介する「写真編集」とは、写真の色味や明るさを編集し綺麗に仕上げる事を指します。
Photoshopを使うことで写真をより美しく表現することが可能です。撮影時に、角度や明るさを間違えてしまった写真でも綺麗に復活させることが可能です。
今回は下の写真を編集していきます。

写真を切り抜いて角度を調節する

まず初めに写真を切り抜きましょう。
傾いてしまったり構図がずれてしまった写真を切り抜きツールを使うことで整えることができます。3:2や4:3など自分が指定したアスペクト比でで切り抜くことも可能です。
まず初めに切り抜きツールを選びます。

次にアスペクト比を入力しましょう。写真の場合通常3:2で使われることが多いです。

アスペクト比の設定が終わったら四角を動かして写真を切り抜きましょう。四角から外の部分は削除されます。

これで切り抜き完了です次は角度を変更しましょう。

角度を補正する

角度を変更して傾きを修正しましょう。切り抜きツールで枠の近くにカーソルを近づけることで角度を補正することが可能です。

明るさとコントラストを調整する

構図を決めたら次は明るさとコントラストを調整しましょう。
露出設定を失敗してしまった写真を調整することができます。またコントラストを上げることではっきりとした写真になります。

以下の写真が明るさとコントラストを調整した写真です。写真が暗いので明るさを上げ、1つ1つの物がしっかり映るようにコントラストも上げました。

色を調整する

色を調整しましょう。Photoshopでは色を濃くしたり、ホワイトバランスを変更することができます。

彩度を調整する

彩度を上げることで色の濃さを調節することができます。食べ物の写真等は彩度を上げると美味しそうに見えるのでよくこの機能が使われています。

カラーバランスを調整する

次にカラーバランスを調整しましょう。電球の光や曇り時の光、晴れの日の光では同じ白でも色が変わってしまいます。基本的にはカメラ内で補正をするのですが、補正していない場合はカラーバランスを調整することで目で見たような光の色に変えることができます。

カラーバランスをイエロー側に寄せたので全体的に黄色っぽい写真になりました。

不要なものを除去する

Photoshopでは不要なものを除去することが可能です。
写り込んでしまったゴミや、肌のホクロ等を取り除くことが可能です。慣れてくると誤って写り込んでしまった人や物を消すこともできるようになります。

コピースタンプツールを使って物を消す

スタンプツールを使用することで物を削除する事ができます。
スタンプツールとは消したい物の上に特定の部分をコピーして塗りつぶす機能です。
例えばホクロを消したい場合スタンプツールで持ってきた肌の部分を上から貼り付けることによって消すことができます。

今回は左下の草を消して見ました。左下の草の上にコピースタンプツールでテーブルの部分を持ってきて貼り付けるだけできます。

以上で完成です。この方法は自由度が高く、自分の求める編集を行う事ができます。

Camera Rawのフィルターを使用する

先ほどはPhtoshopに含まれる様々な機能を使い写真を加工しましたが、この方法では1つの機能で簡単に写真編集を行う事ができます。

Photoshopに内臓されている「Camera Raw」と呼ばれる機能を使用することで簡単に画像編集を行うことができます。
RAWデータをPhotoshopで開くと自動的に起動されます。またJpegなどのファイルでも使う事ができ、フィルターとして利用することができます。

Camera Rawのフィルターを使用すると一度で写真の編集を行う事が可能です。

デザイン作成での使い方

ここで紹介する「デザイン画像作成」とは画像や写真を用意せず、一からデザインを作成する事を指します。
Photoshopでは写真や画像を用意していなくてもデザイン画像を作成することができます。
今回はテキストとPhotoshopに内蔵している炎のエフェクトを使ってかっこいいロゴを作成します。

テキストを作成する

今回はネオン風テキストと使ったデザインを作成します。

最初に背景を黒に塗りつぶしましょう。レイヤーの右下にあるをクリックし「ベタ塗り」を選択します。

次にテキストを入力します。

テキストをラスタライズし、テキストレイヤーを5つに複製させます。

1番下にあるテキストを最初に編集します。編集するレイヤー以外は目のアイコンを押して非表示にします。

編集したいテキストレイヤーを選択してダブルクリックするとレイヤースタイルが表示されます。

一番下のレイヤーから編集していきます。
一枚目は以下のように設定します。


次に下から2枚目のレイヤーを編集します。



下から三枚目のレイヤーを編集します。

一番上のテキストレイヤーを編集します。

下から3番目までのレイヤーモードを乗算にし一番上のレイヤーのモードを覆い焼きリニアにします。

ネオン風テキストが完成します。次はテキストに炎を足します。テキストの下へレイヤーを追加し、ペンツールを使い炎を描きたい場所に線を引きます。

「フィルター」→「描写」→「炎」から炎のエフェクトをたすことができます。

炎の大きさ、密度、向きや色を調整する事ができます。

最後に切り取りツールで文字を切り取ります。

切り抜きをしたら完成です。

Photoshopを使用する事で素材を用意せずにデザインを作成する事ができます。今回紹介した機能はPhotoshopの機能のごくわずかのものです。
他にもPhotoshopでは様々なエフェクトや文字を使ったデザインを作成する事ができます。

また、プリセットと呼ばれるデザインのパッケージがインターネットで配布されています。それをダウンロードする事で、簡単にエフェクト使ったデザインができるので試してみてください。

画像合成での使い方

ここで紹介する「画像合成」とは異なる画像を切り抜いて素材を作成し、1つの画像に合成する事を指します。

Photoshopを使用する事で異なる画像を切り抜いて合成する事ができます。写真を合成する事で新しいデザインやコラージュ画像を作成したり、作成できるデザインの幅が広がります。
写真の切り抜きは、自動選択ツールやクイック選択ツールを使用する事で誰でも簡単にできます

画像を切り抜く

まず初めに手のひらから土と葉っぱを切り抜きます。
クイック選択ツールを選び消したい範囲を選択してからdeleteボタンを押す事で消せます。

手を修復する

次に穴が空いてしまった手をコピースタンプツールやスポット修正ツールで修復しましょう。
手のひらのしわを復元するのは難しいですが、上から物を乗せる場合は雑でも問題はありません。(今回はりんごをのせます)スポット修正ツールは自動で類似した色を復元してくれるので、慣れない方でも自然な形に復元できます。

りんごを切り抜く

次に貼り付けるりんごを切り抜きましょう。先ほど同様クイック選択ツールでりんごを切り抜きしましょう。

境界線をなじませる

りんごと背景の境界線が残ってしまっているので「フリンジ削除」の機能を使って綺麗に整えます。

フリンジ削除をする

「レイヤー」→「マッティング」→「フリンジ削除」を選択しましょう。今回は10pxを選択しました。
OKを押すと境界線が10px分削除されます。

境界をぼかす

「選択範囲」→「選択範囲を変更」→「境界をぼかす」を選択し境界線をぼかしましょう。

写真を合成する

手のひらの写真にりんごの写真を合成しましょう。
りんごのタブをドラッグし好きなとこにペーストした後に、りんごを選んで手のひらの上にドラッグ&ドロップします。

りんごの向きを整える

りんごの向きに違和感を感じるので変形ツールを使ってりんごの向きを整えます。

「編集」→「変形」→「自由な形に」を選択し、りんごのかたちを整えます。

形を整えたらEnterキーを押すと変形を終了できます。

手のひらとりんごの明るさを統一させる

手のひらとりんごの明るさに差があるので明るさを統一させます。
今回はトーンカーブを使い、りんごの明るさを手のひらの明るさに近づけます。

そのままでは全てのレイヤーに調整レイヤーの効果が適応されてしまいます。
「レイヤー」→「新規調整レイヤー」→「トーンカーブ」を選択します。すると「新規レイヤー」が表示されるので「下のレイヤーを使用してクリッピングマスクを作成」にチェックを入れOKを押します。

トーンカーブで明るさを調整します。

最後に微調整をする

トーンカーブを変更すると輪郭が目立つので、消しゴムツールを使って輪郭を整えましょう。流用、滑らかさ、直径、硬さを調整をして輪郭を揃えましょう。手のひらも穴が空いてしまっているで修復ツールで修正していきます

これで完成です。色調の違う写真を切り抜くと合成した時に違和感を感じる事があります。トーンカーブを使う事で色調を整えられて違和感を抑えることができるので活用しましょう。以上でPhotoshopを使った画像合成の紹介を終わります。

バナー作成での使い方

ここで紹介する「バナー作成」とは写真やテキストを使ってバナーで扱える画像を作成する事を指します。

デザイン機能が豊富に揃っているPhotoshopはバナーを作る事もできます。先ほど紹介した、写真編集や画像合成と一緒に覚える事で、バナー作成の幅を広げる事ができます。

画像のサイズを変える

まずはじめに作成するバナーのサイズを決めます。今回は商品広告でよく使用される250px××250pxのバナーを作成します。単位はピクセルに変更し、幅250高さ250に変更します。

画像をスマートオブジェクトにする

編集前の下準備としてスマートオブジェクトを行いましょう。Photoshopでは画像のサイズを変更すると画質が劣化してしまいます。

しかし画像をスマートオブジェクトに変更する事で、画質を劣化させる事なく画像のサイズを変更する事ができます。Photsohopで画像のサイズを変更する際にはレイヤーをスマートオブジェクトに変更してから行いましょう。

スマートオブジェクトにしたいレイヤーを右クリックしスマートオブジェクトを選ぶを押す。

フォントを書き込む

バナーに入れるフォントを記入しましょう。

テキストを調整する

調整したいテキストを選択しましょう。テキストの色や大きさ、色などを調整する事ができます。

テキストの境界線を設定する

テキストの境界線を設定する事でテキストの輪郭を表示する事ができます。境界線を設定したいテキストをダブルクリックし境界線を選んでください。

サイズを大きくしすぎると境界線が大きすぎてテキストが表示されません。
それぞれ境界線を設定しました。境界線があると文字がくっきり見えるので一目で何について書いてあるのかがわかります。

ベペルトエンポスを追加する

これだけだとテキストに立体感がないのでベベルとエンボスを設定します。
光の向き、ベベルとエンボスの範囲を変えられます。

ベベルとエンボスを入れたことによってテキストにより立体感が出ました。

レイヤーを乗算させる

レイヤーを整え、長方形ツールを使用して長方形を作成します。レイヤーの種類を乗算にすると下のレイヤーが透けて見えるようになります。

縦文字を使用しよう

レイヤーを調整し縦文字を使用しましょう。

以上で完成です。バナー画像を作る際は文字などのサイズや場所の細かな調整が必要です。
バナーに合わせた素材探しも重要なのでバナーを作成する前には手書きでもいいので絵コンテを作成しましょう。

まとめ

今回はPhotoshopを使用してできる4つの事を実践して紹介しました。
Photoshopの機能はとても多く一度では覚えるのは大変ですが、技法を覚えるとデザインの幅が広がります。
やってみたいデザインにはできるだけチャレンジして少しずつでも使い方を覚えていきましょう。


最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

無料でできるWebマーケティング11選  <MIDORIBON>

ダウンロード資料画像

Webマーケティングに取り組もうとしている方に向けて、無料で利用できるWebマーケティングに役立つツールを9つ集めました。ツールの始め方からWebマーケティングに利用するメリット、実践的な活用方法まで解説します。

コストをかけずにまずはWebマーケティングに取り組んでみたい思いの方にぴったりの一冊です。

そのままの計画で、目標達成できますか?

Webマーケティングには予想外な事態がつきものであることを私たちは理解しています。
考えて、考え抜いて設計したはずのKPIが全く達成されずに、形骸化し誰も触れない状態になっている。

サイト内でユーザーがどのような行動をとっているかを解析

自社と競合を比較し、どこが勝っていてどこが弱みなのかを浮き彫りに

ユーザーのニーズや業界動向等を調査し、状況にあった施策を提案

課題解決のポイント、目標達成のプロセスなど
Webサイトの成長につながる具体的な手段をご提示いたします

運営会社

Web制作・広告・コンサルティングのセルリア

サービス一覧
会社概要