Photoshopの使い方〜基本設定から写真加工の方法まで〜【初心者向け】

こんにちは、LIGブログ編集部です。

写真のレタッチや合成、グラフィックデザインができるPhotoshop。使えるようになると便利ですが、初心者の方のなかには他のツールとの違いがわからなかったり、初期設定の方法がわからない方もいるかと思います。

この記事では、「Photoshopって何？」というところから、ダウンロードしたPhotoshopを写真加工やWebに適した環境に設定し、実際に写真加工するところまで説明します。

※この記事は2022年6月に編集部が情報を更新しました

Photoshopとは？

Photoshopとは、アドビが販売をしている写真編集をメインとしたとした有料の画像加工ソフトのことです。

利用にあたっては、まずPhotoshopのライセンス契約をおこないます。学割や法人契約、年間契約といった料金体系の違いや、Adobeの他のソフトも一緒に使えるセットなどもあるので、自分に適したプランで契約をするようにしましょう。

ちなみに7日間の無料体験もできるので、最初はこちらを試してみるのもいいかもしれません。

参考：写真、画像、デザインエディター | Adobe Photoshop

Photoshopでできること

Photoshopでは、主に以下のような作業を行うことができます。

• 写真加工・編集
• デザイン
• Web制作（デザイン制作）

その中でもメインとなるのは、やはり「写真加工・編集」です。編集部でも、撮った写真の色調整・サイズ調整・合成などはPhotoshopでおこなっています。

PhotoshopとIllustratorの違い

初心者だと混同してしまうことも多いのが、PhotoshopとIllustratorという2つのソフト。両者の機能や用途の違いを把握して、適材適所で利用していきましょう。

ビットマップ画像とベクター画像の違い

Photoshopはビットマップ画像と呼ばれる、ドット絵のような小さな四角形の集まりで画像を表現します。拡大すると、ドットの集合体であることがハッキリわかるようになります。

一方、Illustratorはベクター画像と呼ばれる、点座標や線の方程式で画像を表現します。ビットマップ画像と違い、拡大しても粗くなることはありません。

特性の違い

大ざっぱに言えば、写真の編集・加工に向いているのがPhotoshop、イラストやロゴなどの作成に向いているのがIllustratorです。

たとえば、写真を使ったポスターを作成する場合であれば、一般的には……

1. Illustratorでロゴを作成
2. Photoshopで写真の編集・加工
3. Illustratorでテキストなどを配置

というように、それぞれのソフトの特性を活かしながら作成されます。

GitHubからAmazon ECRへイメージを自動登録する方法を解説します
▲テキストとイラストのデザインはIllustrator向き

【顧客事例】バズ記事でCV3倍増！AI電話番「マヤイ」の記事広告秘話
▲写真がメインデザインはPhotoshop向き

まとめると、下記の通りです。

また、職種によってどちらのソフトを主に使用するかという違いもあります。

Photoshopを主に使用する職種例

• Webデザイナー
• フォトグラファー
• グラフィックデザイナー
• 水彩画や油絵のような塗り重ねて書くテイストのイラストレーター

Illustratorを主に使用する職種例

• DTPデザイナー
• キャラクターなどのイラストレーター
• ロゴ制作

もちろんこれらは一般的な例であって、両方使えることが必須！ という場合もたくさんあります。

Photoshopで作成する場合の注意点

Photoshopはビットマップ画像となるので、あまり拡大してしまうとギザギザの画像になってしまいます。そのため、何かを作成するときは原寸大で作成することを強くおすすめします。

指定サイズよりも小さく作ってしまった場合、拡大されて粗い画像となってしまうので、サイズには注意してください。

Photoshopのワークスペースの名称

Photoshopで作業をするとき、記事で使い方を検索したり、他のデザイナーとやりとりすることがあると思います。その際ワークスペースの名称がわかるとスムーズにやりとりできると思いますので、ご紹介します！

①メニューバー

新規のドキュメントを作成、保存する際に使います。カラーも変更できます。

②ツールバー

「移動ツール」や「選択ツール」などのツールが選択できます。

③オプションバー

ツールパネルの詳細な設定をすることができます。

画像を補正したり、文字を打ったりと各種ツールがここにあります。一番使用頻度が高いです。

④ドキュメントウィンドウ

作業中の画像、アートボードが表示される部分です。

⑤パネル

メニューバーを補完していて、使用頻度の高いパネルを常に表示しておくことができます。

▼詳しい内容はこちらの記事をご覧ください

Photoshopのワークスペースとは？おすすめのパネル表示設定も紹介

えびちゃん

2021.09.21

22

Photoshopをダウンロードしたら環境を整えよう

おすすめ初期設定の操作方法をお伝えします。

※以下、Macをベースとした記載となっております。Windowsの方は“メニューバーから「Photoshop」を”という部分を“メニューバーから「編集」を”に置き換えて操作いただければ大丈夫だと思います。

単位の設定

まずは画像のサイズを決める際に必要な「単位」の設定から始めましょう。

Photoshopには、mm、inch、pointなど複数の単位があり、初期設定では「mm」になっています。Webの世界では基本的に「pixel」でサイズを表すので、変更しておきましょう。

1. 「環境設定」⇒「単位・定規…」を選択

メニューバーから「Photoshop」を選択し、「環境設定」⇒「単位・定規…」を選択します。

2. まとめて「pixel」に設定

単位の設定が必要なところをまとめて「pixel」に設定しておきましょう。

これで、「画像は横幅600pxにしてください」など言われても大丈夫ですね。

ガイド（定規）の設定

物体が並行に配置されているか、左右対称になっているか、目でなんとなく確認しただけではズレていることが多いですよね。

そんなときはガイド（定規）を使うようにしましょう。細かい設定はしていなくても使える機能ですが、自分が使いやすい環境にあらかじめ設定しておくことで、作業を効率化できます。

1. 「環境設定」⇒「ガイド・グリッド・スライス」を選択

メニューバーから「Photoshop」を選択し、「環境設定」⇒「ガイド・グリッド・スライス」を選択します。

2. 「グリッド線」「分割数」を「10pixel」に設定

100px四方あたりを、どれくらいの間隔で分割するかを設定します。また、グリッド線は画像の上に重なって表示されるため、線は見えやすい色に変更しておきましょう。

10pixelに設定した場合、上記の間隔でグリッド線が表示されます。グリッド線は「command」+「＠」で表示・非表示を切り替えられますので、邪魔になってもすぐに非表示にできます。

「自動選択」でレイヤーを選択する設定

Photoshopには「レイヤー」という概念があります。

透明のフィルムのようなものを重ねて、その1枚1枚に絵を書いたり、写真を載せたりしていくイメージになります。

下の図でいえば、見た目は「背景＋猫＋テキスト（下町ぶらり）」という画像ですが、実際は「背景」「猫」「テキスト（下町ぶらり）」の3つのレイヤーが重なっていることになります。

 
次に、各レイヤーをそれぞれ動かすことができるよう「レイヤーの選択」を設定しておきましょう。

1. 「移動ツール」を選択

ツールパネルの一番上にある矢印「移動ツール」を選択します。

2. 「自動選択」にチェックを入れ「レイヤー」を選択

画面上部ツールオプションバーに「自動選択」というチェックボックスがあるのでチェックを入れ、「自動選択」の隣のプルダウンを「レイヤー」に設定します。

こうすることで、「移動ツール」を使う際にレイヤーごとの選択ができるようになります。今は画面上の変化はありませんが、実際の作業をするときに役に立つ設定です。

プレビューアイコン・拡張子の設定

Photoshopで保存したファイルをわかりやすく管理できるよう、こちらも最初に設定しておきましょう。

1. 「環境設定」⇒「ファイル管理」を選択

メニューバーから「Photoshop」を選択し、「環境設定」⇒「ファイル管理」を選択します。

2. 「プレビュー画像」を「必ず保存」に設定

「ファイルの保存オプション」という囲いの中の「プレビュー画像」を「必ず保存」に設定します。このように設定しておくことで、画像のアイコン表示が以下のようになります。

保存した画像をイメージ画像で探すことができるようになり、とても便利です。

レイヤーサムネイルの設定

デフォルトのレイヤーパネルの表示が、全体に対するサムネイルが表示されるようになっているため、パッと見てなんの要素なのかがわかりづらくなっています。

1. レイヤーのパネルオプションを開く

レイヤーパネル右上のメニューから「パネルオプション」を開きます。

2. 「レイヤー範囲のみ」を選択

オプションの真ん中あたりにある「サムネイルの内容」項目で、「レイヤー範囲のみ」を選択します。

これで、要素そのものがサムネイルとして表示されるようになりました。

コピーしたレイヤー名の設定

レイヤーを複製すると、元となったレイヤー名のあとに「〜のコピー」と入ってしまいます。まったく気にならないという方は大丈夫ですが、わたしは気になってしまう質なので、同じ性質をお持ちの方は設定することをおすすめします！

1. レイヤーのパネルオプションを開く

レイヤーパネル右上のメニューから「パネルオプション」を開きます。

2. 「コピーを追加」のチェックをはずす

オプションの下部にある「コピーしたレイヤーとグループに「コピー」を追加」のチェックをはずします。

これで、元となったレイヤー名で複製されるようになりました。

バウンディングボックスを表示させる

こちらはPhotoshopでデザインを行う際に便利な設定です。

デフォルトではバウンディングボックスが非表示になっていて、メニューバーの「編集」から「自由変形」を選択しないと、要素の変形ができません。

1. 変形させたい要素を選択する

ツールバー「選択ツール」を使って、変形させたい要素を選択します。

2. 「バウンディングボックスを表示」をチェック

オプションバーの左側にある「バウンディングボックスを表示」にチェックをいれます。

バウンディングボックスとは？

バウンディングボックスとは、要素を囲む四角のことで、要素の四隅にある小さい四角をドラッグして画像やシェイプなどを変形させることができます。

よく使うパネルを表示させる

こちらもデザインを行う方向けの設定です。

「フォントの修正をしたいのにパネルが見当たらない……！」という事態にならないように、あらかじめ使用頻度の高そうなパネルは表示させておきましょう。

メニューバーの「ウィンドウ」で、表示させたいパネルをクリックします。パネル名の前にレ点が入っていたら、現在表示されているという状態です。

使用頻度の高い下記のパネルを表示させておくのがおすすめです。

写真加工の手順

1. レイヤーを複製

念のため、元の写真は保存しておくようにしましょう。レイヤー上で右クリックをして、「レイヤーを複製」を選択します。

2. サイズ・画角を調整する

サイズを調整します。写真が傾いていたらこのときに修正します。

3. 明るさを調整する

明るさを調整します。明るさの調整は、メニューバーの「イメージ」⇒「色調補正」⇒「明るさ・コントラスト」からおこないます。

明るさとコントラストをバランスよく調整しましょう。

4. 色みを調整する

色味を調整します。メニューバーの「イメージ」⇒「色調補正」⇒「色相・彩度」を使います。

赤、青、緑といった色みの違いを表す「色相」、色の鮮やかさの違いを表す「彩度」、明るさの違いを表す「明度」をバランスよく調整します。

画角の調整方法や、明るさ・色みの調整方法などの細かなやり方は、以下の記事で解説しています。合わせてご覧ください。

画角調整・色調調整の方法を詳しくみる

5. 写真を切り抜く

続いて、フォトショップでとてもよく使う写真を切り抜く方法を紹介します。

選択範囲→「選択とマスク」ツールをクリック

「被写体を選択」をクリック

以下のように被写体が選択されます。

境界線部分など、細かい部分はブラシツールで調整します。最後に右下にある「出力先」を「レイヤーマスク」に選択して完了です。

境界線の調整方法や、背景と馴染ませる方法などを詳しく知りたい人はこちらの記事をご覧ください。

Photoshopで写真を切り抜く方法！合成や背景と馴染ませる方法も紹介【初心者向け】

おまめ

2022.03.14

2184

6. 加工する：画像をぼかす

「フィルター」→「ぼかし」から好みのぼかし方法をクリックします。

ぼかし方のコツや、背景にぼかしをかける方法についてはこちらの記事で紹介しています。合わせてご覧ください。

Photoshopでぼかしを簡単に入れる方法【初心者向け】

ぱんちゃん

2022.01.13

20

Photoshopに関する記事まとめ

最後までお付き合いいただきありがとうございました。

他にもPhotoshopに関する記事をご紹介しますので、併せてぜひご覧ください。

【超初心者向け】Photoshopでの画像加工のやり方

Photoshop初心者向け！写真加工や編集を行うための必須機能20選・前編

LIGブログ編集部

2015.08.12

712

Photoshop初心者向け！写真加工や編集を行うための必須機能20選・後編

LIGブログ編集部

2014.08.20

127

初心者向けPhotoshopのテクニック集「ショートカット」「カスタマイズ」など

LIGブログ編集部

2022.08.01

53

自動でできるPhotoshopのお手軽HDR合成方法

姐さん

2013.03.25

424

【初心者向け】Photoshopでの画像の補正・加工のテクニック

Photoshopデザイントーンにあった人物写真加工の仕方〜ひよっこデザイナーえびちゃんが学んだこと#1〜

えびちゃん

2021.01.04

45

Photoshopで簡単にできる、絶対バレない顔の加工方法！【初心者向け】

おみど

2018.12.27

43

【中級者向け】Photoshopを使った写真の補正・加工で個性を出すテクニック

Photoshopでヴィジュアル系メイクを施す方法

arisan

2018.08.06

42

ポーズを自由に変えられる！ Photoshopのパペットワープの便利な使い方

杉原ミシェル

2021.01.02

137

PhotoshopとIllustratorで画像をポリゴン風に加工する方法

姐さん

2014.12.12

359

Photoshopのパペットワープで自由自在に写真加工する方法

姐さん

2021.03.23

220

Photoshopで斜めになった写真を補正する方法

姐さん

2013.04.26

133

Photoshopで人物を綺麗に可愛くサギる方法

はやち

2012.08.07

187

Photoshopで女性を別人に変えるアイメイクを施す方法

はやち

2012.02.07

22

【中級者向け】Photoshopのプロが教えるレタッチ・エフェクト・切り抜きテクニック

Photoshop&Illustratorでネオンサイン風ロゴを作る方法

ナガレダ

2020.06.25

75

LIGブログで1,000個も作ってきたアイキャッチのPSDデータを大放出中（1）社員編

佐藤タカアキ

2015.09.29

263

LIGブログで1,000個も作ってきたアイキャッチのPSDデータを大放出中（2）アニメーション編

佐藤タカアキ

2015.10.22

169

Photoshopを使ってシネマグラフを作る方法

姐さん

2015.09.29

452

Photoshopで“水しぶき”などの背景が透けた画像をカンタンに切り抜く方法

藤田

2014.12.08

438

Photoshopのハイパスフィルターを使った凄技レタッチを解説

姐さん

2021.03.11

542

Photoshopでカッコいいグランジ風ロゴを簡単に作る方法

はやち

2014.02.12

163

Photoshop CCを使ってよりリアルで美しくシャドウを作る方法

モモコ

2013.12.27

176

Photoshopの3D機能でロングシャドウエフェクトを簡単に作る方法

王

2013.10.28

202

Photoshopで簡単にギザギザしたアイテムを作る方法

姐さん

2013.08.27

290

Photoshopで簡単でキレイに物体を増減させる方法

はやち

2013.05.28

232

Photoshopでシームレスでオシャレな斜めストライプをサクッと作る方法

姐さん

2012.10.03

97

Photoshopで継ぎ目のないマーブル模様・柄を作る方法

姐さん

2012.08.06

50

Photoshopのお悩み解決・お役立ちテクニック

Photoshopが重いときの対処法7選【決定版】

まいまい

2020.08.11

119

【初心者向け】ひと手間でデザインの物足りなさを解消する方法まとめ

ナガレダ

2020.08.10

507

デザインがしっくりこないときに試すこと10選【新米デザイナー向け】

Jona

2018.07.23

1478

Photoshopの効率化におすすめのショートカットキー一覧とカスタム方法【2022年最新】

王

2022.05.13

1262

これはよく使うやつ！Web制作が捗るPhotoshopのプラグイン3選

トミー

2017.05.05

444