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

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

LIGブログ編集部

LIGブログ編集部

Digital Education

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

写真や画像の合成、切り抜きといった作業ができるPhotoshopは、グラフィックデザインやWebデザインにおいて必須のツール。自由度高く編集ができて便利な一方、初心者からすると「使い方がよくわからない」と困ることもありますよね。

そこでこの記事では、初心者向けに初期設定から写真加工を行うまでのPhotoshopの使い方をわかりやすく解説します。

Photoshopを使いこなすための第一歩として、ぜひ実践してみてください！

独学でつまずいていませんか？
Photoshopの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。


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

Photoshopとは？

Adobe Photoshop（アドビ フォトショップ）とは、アドビが販売をしている写真の加工や編集に適したデザインツールです。

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

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

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

Photoshopでできること

Photoshopはビットマップ画像と呼ばれる、ドット絵のような小さな四角形の集まりで画像を表現します。そのため、細かな調整が必要な写真の加工や編集に適したツールです。

例えば、次のようなことができます。

  • 写真の色調を調整する
  • 被写体を切り抜いて背景を合成する
  • 人物写真のレタッチや加工

LIGブログ編集部でも、撮った写真の色調整・サイズ調整・合成などはPhotoshopでおこなっています。

Illustratorとの違い

図形を使ってビットマップ画像とベクター画像の違いを表す画像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を使い始める前にやるべき初期設定

Photoshopを使い始める前に、最初にやっておくべき初期設定を8つ紹介します。これを事前に設定しておくことで、作業効率がぐんとよくなりますよ。

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

単位をピクセルに統一させる

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

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

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

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

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

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

単位をpixcelにする

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

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

ガイド（定規）を表示させる

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

そんなときに役立つのがガイド（定規）です。これを設定しておけば、きれいにレイアウトをおこなうことができます。

細かい設定はしていなくても使える機能ですが、自分が使いやすい環境にあらかじめ設定しておけば、作業をより効率化できます。

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

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

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

2. 「グリッド線」「分割数」を調整する

グリッド線を10px単位にする

100px四方あたりを、どれくらいの間隔で分割するかを設定します。おすすめはグリッド線が10pixel、分割数が10です。

また、グリッド線は画像の上に重なって表示されるため、線は見えやすい色に変更しておきましょう。

 
10pixelに設定しグリッド線が表示されている状態の画像

グリッド線を10pixel、分割数を10で設定した場合、上記のようなグリッド線が表示されます。なお、このグリッド線は⌘command + ＠で表示・非表示を切り替えられますので、邪魔になってもすぐに非表示にできます。

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

レイヤー数が多い場合、わざわざレイヤーパネルから該当のオブジェクトを選択するのは時間がかかります。レイヤーの「自動選択」を設定しておけば、オブジェクトを選択するのと同時に、同レイヤーも選択することが可能です。

※レイヤーとは
レイヤーとは、オブジェクトが載った透明なシートのことです。図のようにレイヤーの1枚1枚に絵を書いたり、テキストを載せたりして一つのデザインを完成させていきます。

3枚のレイヤーが重なっていることを示す画像

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

選択ツールを「自動選択（レイヤー）」にする

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

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

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

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

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

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

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

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

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

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

「ファイルの保存オプション」というくくりの中の「プレビュー画像」を「必ず保存」に設定した画像

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

保存した画像がイメージ画像入りのアイコンで表示されている状態の画像

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

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

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

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

[サムネイルを見やすくする]パネルオプションを開く

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

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

[サムネイルを見やすくする]「レイヤー範囲のみ」を選択

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

[サムネイルを見やすくする]変更前後

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

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

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

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

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

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

[「〜のコピー」と入らないようにする]「「コピー」を追加」のチェックをはずす

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

[「〜のコピー」と入らないようにする]変更前後

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

  • ヒストリー
  • アクション
  • 属性
  • 情報
  • カラー
  • スウォッチ
  • ブラシ
  • 文字
  • 段落
  • レイヤー
  • チャンネル
  • パス

写真加工に使えるPhotoshopの基本機能と使い方【初心者向け】

いよいよPhotoshopを実際に使っていきましょう。

1. レイヤーを複製

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

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

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

3. 明るさを調整する


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

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

4. 色みを調整する

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

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

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

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

5. 写真を切り抜く

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

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

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

以下のように被写体が選択されます。
フォトショップで写真を切り抜く方法

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

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

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

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

フォトショップでぼかす方法

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

7. 画像にテキストを入れる

写真にテキストを入れる方法
Photoshopでは写真にテキストを入れることも可能です。

写真にテキストを入れる方法
テキストツールは、ツールバーのTマークをクリック、もしくはショートカットキー[T]を押すと使えるようになります。

先ほど紹介した写真の切り抜きを応用させれば、図のように被写体の背後に文字を配置させることもできます。やり方は、背面レイヤーに元画像、中間レイヤーにテキスト、前面レイヤーにレッサーパンダの切り抜き画像を配置すればOKです。

文字を縁取りにする方法も覚えておくと、デザインの幅が広がりますよ。

「ググってわからないこと」が一瞬で解決するかも？

Webデザインを効率的に学びたい、未経験からWeb業界への転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーーがマンツーマンで指導します！

▼少しでも気になる方は、ぜひ公式サイトをご覧ください！
デジタルハリウッドSTUDIO by LIG

よくある質問

Photoshopは難しいですか？

Photoshopはプロ向けのツールなだけあり、機能が無限にあるので最初は難しく感じるかもしれません。しかし基本機能さえ覚えれば、簡単な操作はすぐにできるようになります。

Photoshopは無料で使えますか？

Adobe Photoshopは7日間の無料版が用意されています。無料版も有償版も、使える機能は全く同じです。

Photoshopの上達のコツは？

とにかく実際にたくさん使ってみることです。Photoshopの使い方に関する記事を本文内でまとめているので、一つずつ実践してみてください。

Photoshopに関する記事まとめ

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

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

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

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

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

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

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

 

デザインの世界に飛び込んでみませんか？

「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。

Webクリエイタースクール「デジタルハリウッドSTUDIO by LIG」では、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と豊富な就職支援が特徴！ ぜひ一度詳細をチェックしてみてください！

デジLIG 詳細へ

とりあえず資料を請求してみる

 

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る
Digital Education

この記事のシェア数

LIGブログ編集部
LIGブログ編集部

LIGブログの企画・執筆・編集をしています。マーケティング、SEO対策、デザインに強みを持ったメンバーが、最新情報やノウハウをわかりやすくお届けします。

このメンバーの記事をもっと読む
Photoshopの使い方 | 36 articles

Recommend おすすめ記事

もっと見る
未経験からWebクリエイターを目指すならデジLIGへ
個別説明会はこちら 資料請求
Contact

Contact

お問い合わせ
Recruit

Recruit

採用情報
Blog

Blog

ブログ

Contact Us

Office

Tel

03-6240-1253

Address

2-20-11
Kojima, Taito-ku, Tokyo-to
111-0056 Japan

Google maps

Clear Skies Ahead