フォトショップの使い方!初心者のための25の基本スキルマスター方法

2日 11月
by TAKADA

Photoshopマスターへの道 25の必須スキルと参考サイト

画像編集ソフトとしても、グラフィックツールとしても、多くのプロが愛用するPhotoshop。充実した機能と公式サイトのバックアップ(解説動画・画像の提供)はもちろんこと、様々な方がチュートリアルや素材を公開している点も魅力ですね。

Photoshopを使うのであればぜひ知っておいて欲しい機能をギュッと凝縮、仕事レベルに必要な機能スキルを25の項目として紹介します。

Illustratorマスターになりたい方はこちらの記事を御覧ください。
イラストレーターの使い方!初心者のための25の基本スキルマスター方法

Photoshopの要素・基礎知識

Photoshopとは

Photoshopはadobe社が販売している画像編集アプリケーションソフトウェア。精度が高く高機能な写真編集機能はもちろんのこと、イラストやデザイン作成にも多用されています。

写真家、グラフィックデザイナーなどの「画像のプロ」に愛されているほか、Web制作でも標準軌なツールとして使用されています。
Web制作に関しては、下記のような場面で使用されることが多いです。

  • サイト内で使用する画像の作成・調整
  • バナーデザイン
  • ワイヤーフレーム・デザインカンプの作成

Photoshopのユーザーインターフェイスについて

画像編集ソフトを使用されたことの無い方にとって、多機能なPhotoshopの画面(ワークスペースと言います)はアイコンやメニューの多さに戸惑うのではないでしょうか。

Photoshopにある全ての機能を最初に理解・把握するのは大変です。
まずはワークスペースの名称、どんな機能がどこに配置されているのかを覚えましょう。細かい部分は使っていれば自然と覚えます。

知っていて損はないPhotoshopのワークスペースの各名称
https://01earth.jp/web-create/photoshop/photoshop-workspace/

 

②のツールパネル部分では複数のツールがグループ化されています。
各ツールの切替方法と、ツール早見表を作ってくれているサイトもあります。ツール探しに時間がかかってしまう方は、活用させていただきましょう!

【保存版】Photoshopツールバーの使い方:全ツールの説明付
https://saruwakakun.com/design/photoshop/tool

初期設定と基本操作

これから初めてPhotoshopを使う、という超初心者さんは以下の講座で学びましょう。この動画講座は24レッスンとボリュームがあり、WEBサイトデザインまで網羅しています。

目次を見ると難しそうに見えるかもしれませんが、その中の最初の3レッスンでOKです。合計しても10分以内でPhotoshopの初期設定、基本操作が分かりますよ。

WEBデザインのためのPHOTOSHOP入門講座

基本操作は分かる、何度かさわっているという方は飛ばして大丈夫です。
次に行きましょう!

Photophopレタッチ基本スキル10個

01.Photoshopを使った画像の拡大縮小・トリミング

サイトで使用する画像作りにも、バナーやカンプの制作にも必ずと言って良いほど使用するのが画像サイズの変更です。作成するサイトに合わせてトリミングだけ行うこともあります。

画像のサイズを変更する方法
https://helpx.adobe.com/jp/photoshop/using/resizing-image.html

02.Photoshopで画像の明るさを調整する

使いたい画像が暗かったり、メリハリがないというときには補正を行います。
操作がシンプルなため初心者の方は「明るさ・コントラスト」に頼りがちですが、画質が低下する・かゆいところに手が届かない…なんてデメリットも。
そんなときには細かく調整が可能なトーンカーブを活用してみましょう。

Photoshopのトーンカーブをなんとなく使っていませんか?改めて基礎や活用方法について学ぼう
https://ferret-plus.com/4050

03.Photoshopで画像の色味を調整する

明るさやコントラストが調整できたら、次は色味の調整です。
写真をきれいに見せるだけではなく、サイト内で使用する画像のトーンを統一するなどにも使います。

「色相・彩度」の基本と応用
http://shuffle.genkosha.com/software/photoshop_navi/color/8315.html

04.Photoshopのレイヤーの仕組みを理解する

Photoshopではレイヤーを重ねることで、画像の補正や合成を行っていきます。
レイヤーの仕組みと役割についてしっかりと押さえておきましょう。

【Photoshop初心者必見!】「レイヤー」についてわかりやすく解説!写真編集でよく使用する方法についてもご紹介!
https://www.luzzstudio.com/blog/photoshop-layer/

05.Photoshopのマスクを理解する

画像を部分的に隠したり、ここだけ見せたい!という場合に使用するのがマスク。画像を直接修正・編集することなく余分な箇所を隠せるので、とても重宝するツールですね。
Photoshopで用意されているマスクの種類・使い方を知って、用途に合わせて選択出来るようにしましょう。

Photoshopの4つのマスク基礎講座を解説!
https://ferret-plus.com/3466

06.Photoshopの調整レイヤーを活用する

調整レイヤーを使用すると元画像に影響を与えず、写真の調整を行うことが出来ます。トーンや色調補正はもちろんのこと、セビア調やモノクロに変換することも出来ますよ。

【Photoshop】フォトショの調整レイヤーの使い方と写真補正の方法
https://sdesignlabo.com/photoshop/ps-adjustmentlayer/

07.Photoshopの描画モードを使う

描画モードでは、レイヤーを重る際にどのような効果をもたせるかを決めることが出来ます。人によって「レイヤーの合成モード」など呼び方が違いますが、基本的には同じ機能を指しています。

描画モードを変更することで、簡単に画像の雰囲気を変更できます。
下記サイトでは描画モードの種類、それぞれの見え方が一覧としてまとめられています。

Photoshopの描画モードについて〜前編〜
https://soft-no-sosa.com/2020/07/16/drawing_mode1/

08.Photoshopで選択範囲を切り抜く

Photoshopでよく使う機能に画像の切り抜きがあります。
画像の合成にも使用しますし、ECサイトでは商品を綺麗に見せるために背景を切り抜く事もあります。Photoshopを使うなら必須と言っても良いスキル。

切り抜きには多くの方法・テクニックがあります。
まずはAdobeがお勧めしている方法から試してみると良いでしょう。

使わざるをえない!正確に、すばやく画像を切り抜ける最適なテクニック「選択とマスク」
https://helpx.adobe.com/jp/photoshop/how-to/crop-using-select-mask-tips.html

09.Photoshopの消しゴムツールを活用する

Photoshopの消しゴムツールは、なぞった部分を削除することが出来ます。

消しゴムのグループには近似色を削除してくれる「背景消しゴム」や「マジック消しゴム」もあり、画像によっては範囲選択の切り抜きよりも簡単に部分削除・透過を行うことも出来ますよ。

Photoshop背景消しゴムで簡単切り抜き【作業時間1分】
https://howtotips-webec.com/2020/07/14/photoshop-eraser/

10.Photoshopでの保存とデータ形式

Photoshopを使って作成した画像は、色々なデータ形式で保存することが出来ます。
Photoshop形式(.psd)やJPEGなどそれぞれのデータ形式を理解し、目的に応じたファイル形式で保存することも大切な基礎スキルです。

使い分けよう!Photoshop(フォトショップ)でのデータ保存
http://reaid.tokyo/photoshop_datasave/

Photoshopでの加工・デザインに役立つスキル

11.Photoshopのグラデーション機能を知る

人によって使う・使わないが分かれるグラデーション。
ふんわりとした色の表現はもちろんのこと、メタリックな質感の再現・簡単にストライプを作れるなど、意外と便利な機能です。

Photoshopのグラデーションをマスターしよう!
https://d-fount.com/photoshop-gradation/

12.Photoshopのぼかしを活用する

ぼかしは写真に写っている人の顔や商品名を見えなくするだけではなく、グラフィカルな表現にも使われています。

下記サイトではphotoshopのぼかし機能一覧を、before/after画像とともに紹介しています。初心者の方はもちろん、何となくで「ぼかし」の種類を選んでいた方もチェックしてみてください。新たな発見があるかもしれません。

フォトショップでぼかしたいを理解するため、Photoshopのぼかしを完全解説する!
http://life-is-sparks.com/2015/photoshop-blur-commentary-01.html

グラデーション機能とぼかしを併用することで、写真に奥行きを出したり、フォーカス感を高めることも出来ます。

Photoshop:画像の一部を自然にぼかす「グラデーション」と「ぼかし(レンズ)」の使い方
https://kabeto.net/2020/03/06/photoshop_gradation_and_blur_lens/

13.Photoshopのシェイプツールを活用する

photoshopでも長方形、円形、多角形などの図形を挿入することが出来ます。こうした図形ツールをまとめて「シェイプツール」と呼んでいます。

Photoshopの図形ツールの使い方 – いろいろなオブジェクトを描画してみよう
https://restart-navi.com/ps-basic-howto-shape/

カスタムシェイプを使用すると矢印や花など、様々な図形を簡単に挿入することが出来ます。photoshopで用意されているカスタムシェイプ以外に、素材として配布・販売されているものもありますし、自作も可能ですよ。
フリーのカスタムシェイプ素材もあります。

Photoshopのカスタムシェイプの使い方:素材を追加するには?
https://saruwakakun.com/design/photoshop/custom-shape

14.Photoshopのペンツールを活用する

PhotoshopでもIllustratorと同様にペンツールがあり、独自の曲線や図形を作ることが可能です。自作した図形(パス)で画像をマスクしたり、カスタムシェイプとして登録し再利用することも出来ます。

また、背景色との境界が曖昧な画像であれば、ペンツールを使用して切り抜きを行うことで綺麗に不要部分を透明化出来ます。

ペンツールの使い方-Photoshop編-
https://note.com/cicacabbage/n/n172c5824d095

15.Photoshopのパターン使用方法を知る

パターンとは繰り返し表示される画像のことです。
バナーやデザインカンプ作成時には、背景に使用する機会も多いですね。

Photoshopのパターンの使い方:塗りつぶしやスタンプの方法は?
https://saruwakakun.com/design/photoshop/pattern

写真などを素材にして、自分でパターンを作成することも出来ます。
こちらのサイトでは複数の写真を使ったパターン作成方法、写真の服の模様を作成したパターンに変更する方法が紹介されています。選択範囲の使用・描画モード変更なども入っていますので、基本スキルが実際にどう使われているのかもよく分かります。

意外と簡単!Photoshopで作る複数素材を使ったパターンと登録方法
https://design-trekker.jp/design/photoshop/how_to_make_pattern/

16.Photoshopのレイヤー効果/レイヤースタイルで簡単に

レイヤー効果(レイヤースタイル)は、呼び名通りレイヤー塗りの部分に対して効果を加えられるPhotoshopの機能。簡単にドロップシャドウや光彩などの効果を追加できます。
元画像を加工するわけではないので後々変更することも可能。

Photoshopのレイヤー効果とレイヤースタイル
https://kawai5.com/photoshop43/

17.Photoshopでテキストを加える

トップビジュアルやバナー作成時に外せないのが文字入力。
普通に文字を入力する以外に、縦書きやパスに沿った文字配置なども可能です。

Photoshopで文字の入力をする3つの基本的な方法
https://sitebk.com/photoshop/text-tool-basic/

18.Photoshopで文字をグラフィカルに表現

文字を入力したレイヤーに、レイヤー効果を使用すると、手軽に文字の装飾も出来ます。

レイヤー効果 テキストレイヤーで金文字
https://crft.jetsets.jp/adobe-photoshop/%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%E5%8A%B9%E6%9E%9C%E3%80%80%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%E3%81%A7%E9%87%91%E6%96%87%E5%AD%97/

19.Photoshopのブラシツールを使う

ブラシツールはフリーハンドで線や図形を書くことが出来ます。
ブラシを選択・設定することで様々な質感を表現できます。

初心者向け!Photoshopのブラシの使い方と設定
hhttps://saruwakakun.com/design/photoshop/brush

ブラシは好きなものを追加することも出来ます。素材配布サイトなどで配布されているほか、Adobe公式サイトでも高品質なブラシ素材が用意されていますよ。
インクがハネたような表現、画像に雪やボケを加えるなどの使用も出来ます。

Photoshopブラシで自分だけの表現を
https://www.adobe.com/jp/products/photoshop/photoshop-brushes.html

20.Photoshopのフィルターギャラリーで手軽に加工

ワンクリックでも本格的な画像加工が可能です。
細かな調整もプレビューを見ながら直感的に作業できるので、とても簡単です。

Photoshopフィルターギャラリーの使い方と効果一覧
https://ksk-h.com/photoshop-filter/

21.Photoshopの複数機能を組み合わせた表現

ここまでにご紹介した機能をある程度使えるようになると、Photoshopを使って様々な表現ができるようになります。もう初心者の域は越えていますね。

そこから先は組み合わせ・アイディア勝負。
チュートリアルを見ながら色々な表現にチャレンジしてみましょう。そうすることで画像やテキストの加工方法、自分にあった効率の良い作成順序が固まっていきますよ。

【Photoshop】文字装飾デザインの基礎 ―覚えておくべき6つの加工方法―
https://321web.link/photoshop-text/

フォトショップの写真加工が強くなる!カテゴリ別チュートリアル、作り方101個まとめ【完全版】
https://photoshopvip.net/115012

実践! お仕事スキルと手順

22.ショートカットでPhotoshop作業時間短縮

画像のレタッチや文字入れ・加工までできるようになれば、もうphotoshop初心者ではありません。より効率的に作業を行う為にもショートカットを活用していきましょう。

これで作業効率が劇的に上がる! Photoshopのショートカットキー早見表
https://helpx.adobe.com/jp/photoshop/how-to/use-shortcut-keys-for-efficiency-photoshop.html

23.Photoshopでのバナー制作の方法と手順を知る

Adobe公式チュートリアルでは様々なPhotoshopの使い方が紹介されています。
バナー作成もありますよ。

webバナーを作成する
https://helpx.adobe.com/jp/photoshop/how-to/make-banner.html

下記サイトはより実践的に、バナーデザイン(構成)を考えるところから順に作成順序と方法を紹介しています。

【Photoshop】フォトショでバナー広告を作る方法を詳しく解説
https://sdesignlabo.com/photoshop/ps-makingbanner/

24.Photoshopでトップビジュアル(ヒーロー画像)を作成する方法

サイトの顔と言えるトップビジュアル。
デザインやPhotoshopでの加工は、サイトのトンマナによって大きく変わります。ケース・バイ・ケースなので「これが正解!」というものはありません。

オーソドックスな作成方法や、作成時に気をつけたいことを紹介してくれているサイトを紹介します。

Photoshopでヘッダー画像の作成方法【初心者向け】(Photoshop CC 2018 for Mac)
https://www.ec-create.jp/photoshop-header-design-beginner/

WEBデザインでカッコいいメインビジュアルの作り方
https://www.torat.jp/key_visual/

手書き風の柔らかいデザインの場合は、写真を水彩画風・手書き風などにレタッチすることでデザインの統一性を保つことも出来ますよ。

Photoshopで簡単!画像をおしゃれな水彩画風に加工する方法
https://taitokatsumata.com/archives/1492

25.PhotoshopでLPなどのデザインカンプを作る方法

下記サイトでは白紙からデザインカンプの作成までを順に紹介されています。

PhotoshopでWebサイトのデザインをしよう
https://www.webcreatorbox.com/tech/photoshop-web-design

SKILLHUBの入門講座でも「Photoshop未経験の方でもサイトデザインを完成させられる」ようにレッスンを組んでいます。素材もご用意しているので、動画と一緒に操作していけば和菓子屋さんのサイトデザインを作ることが出来ます。

photoshopの基本操作の復習にもなりますよ。
ぜひチャレンジしてみて下さい!
WEBデザインのためのPHOTOSHOP入門講座

Web制作のプロになろう!スキルハブの無料ビデオ

無料ビデオ13講座/91レッスンが受け放題!

わかりやすい動画レッスンHTML/CSS, JS, デザイン, WordPress, Railsなどがなんと無料。 募集人数には制限があります。サインアップはお早めに。

無料申し込み期限: 3月14日 まで
募集人数: 100名(残りわずか)

今すぐ13講座を受講する(無料)




関連記事

22日 2月

未経験から20万稼げるWebデザイナーになるための... 711

未経験からWebデザイナーになりたい、副業として月20万円くらい稼ぎたい。...

×