Photoshop(フォトショップ)とは？基本的な使い方を徹底解説！

デザインに携わる方なら避けて通れないのが、デザイン系ソフトウェア「Photoshop」です。

大まかな概要はわかっていても始め方がわからない、またどんなことができるのかまでは詳しく知らないという方も多いでしょう。

今回の記事ではPhotoshopの概念から購入法、基本的な使い方やできることまで詳しく紹介します。

Photoshop(フォトショップ)とは？

Photoshop（フォトショップ）は、Adobe社が開発・販売している画像編集ソフトウェアです。

世界中で広く使用されており、プロのデザイナーや写真家から一般ユーザーまで、多くの人々が利用しています。

Photoshopは、多機能で強力なツールセットを備えており、主に以下のような用途に使用されます。

Photoshopには多くのフィルター、ブラシ、エフェクトが用意されているため、創造的なプロジェクトを簡単に実現できます。

Webデザインの参考になるあしらい12選を紹介！参考企業やフリーサイト5選も解説

Photoshopの購入方法について

Photoshopは「Adobe Creative Cloud」のサブスクリプションサービスとして提供されています。

月額または年額の料金を支払うことで、常に最新バージョンのPhotoshopを利用できるということです。サブスクリプションには以下のプランがあります。

購入手順は以下の通りです。

Photoshopの初期設定方法

Photoshopを購入したら、最初にやっておきたい初期設定を紹介します。

PC負荷を最小限にする

「PC負荷を最小限にする」というのは、要するに「アニメーションズーム」と「フリックパン」という機能をオフにするということです。

手順は以下のとおりです。

サイズ単位をピクセルに統一する

Photoshopの初期設定では画像データの単位が「mm」になっているので、多くの企業で一般的に使われている「Pixel」に変更します。

手順は以下のとおりです。

ヒストリー設定を行う

ヒストリー設定とは、いわゆるPhotoshopの編集履歴のことです。

初期設定の「残しておく履歴の量」では、PCのメモリに大きな負荷がかかるので、ここでは残す履歴の量を最小限にします。

ファイル管理設定を行う

こちらは「保存するファイル形式を統一する設定」です。

限定された用途でのみ使用する、ないしは異なるファイル形式を使う予定がない場合であれば設定しておきましょう。

レイヤーパネルの設定を行う

作業中に画面下部に表示される「レイヤーパネル」の表示形式を設定します。

作業画面にカラーや文字など多くの情報が表示できますが、PCの負荷が大きくなるうえ、人によっては「情報量が多くて集中できない」というケースもあります。

情報量の増減の設定は、以下のとおりです。

＞＞DMM WEBCAMP Webデザインコースの詳細はこちら

PhotoshopのUI(ユーザインタフェース)の見方

PhotoshopのUIは、大きく以下のような区切りになっています。

引用：SEOタイムズ

真ん中にあるのが「ドキュメント」で、主にここでデザインを作成したり画像の編集を行ったりします。「キャンバス」という名称でも呼ばれます。

画面左側にあるのが「ツールバー」です。編集作業に欠かせない各種ツールはここから選択して呼び出すことができます。

画面の右側は「パネル」という名称で呼ばれています。編集中のレイヤーや選択中の色など、主に「現在の状況」が表示されています。

画面上部は「オプションバー」といって、「パネル」の補助情報が表示されています。

そして最上部の「メニューバー」は、設定メニューが網羅されています。前述で紹介した各種設定もここから行うことが可能です。

Photoshopの基本操作

ここでは、Photoshop初心者なら必ず覚えておきたい基本操作や知識を紹介します。

「レイヤー」の概念を学ぶ

Photoshopの「レイヤー」は、画像編集の基礎となる重要な概念です。

レイヤーは「透明なフィルムのようなもの」のことで、それらを重ねることでひとつの画像を完成させます。

各レイヤーに異なる画像要素やエフェクトを配置することによって、個々の要素をそれぞれに編集できるため、後の変更や調整が容易に行えるメリットがあります。

またレイヤーは順序を自由変更したり、透明度を調整したりグループ化したりすることも可能です。

デザイン業界の編集方法の常識となるので、覚えておきましょう。

画像の明るさを調整する

画像の明るさ、およびコントラストなどを調整する手順は、以下のとおりです。

明るさやコントラストの調節は、画像編集でとくによく使う機能になります。

画像の色味を調整する

Photoshop作業でよく使われる「画像の色の濃さ・薄さの調節方法」になります。

やり方は主に２種類です。

メニューバーから行うやり方ですと、以下のとおりです。

色調補正＆調整レイヤーを活用するなら、「色調補正パネル」から必要な補正のツールアイコンをクリックするだけです。

色調とカラー修正なら「レベル補正」または「トーンカーブ」をクリック、またカラーのみの修正なら「カラーバランス」または「色相／彩度」をクリックします。

なお、カラー画像を白黒画像に変換するなら「白黒」をクリックすることで実現可能です。

「マスク」を理解する

Photoshopの「マスク」は、画像の特定部分を隠したり表示したりするためのツールです。

レイヤーマスクを使用するとレイヤーの一部が透明になり、背後にある他のレイヤーが見えるようになります。

マスクは白黒のグレースケール画像として機能し、白は完全に表示、黒は完全に隠す、グレーは半透明を表します。

これにより画像の特定部分を柔軟に編集しつつ効果を追加できるなど、細かな編集や複雑な選択範囲の調整が可能になります。

保存方法やデータ形式を覚える

Photoshop でファイルを保存する手順は、以下のとおりです。

上記の手順を踏まずとも、ショートカット「Ctrl+S」を押しても保存メニューが開くので、こちらをおすすめします。

トリミングで画像を切り取る

Photoshopにおける画像トリミング（切り取り）の方法はさまざまですが、もっとも簡単なのは「トリミングツール」を活用する方法です。

手順は以下のとおりです。

境界線の編集中、メニューバーで定型サイズへの変更も可能です。

描画モードを活用する

描画モードとは、「レイヤーが他のレイヤーとどのように合成されるか」を決められる機能です。

描画モードを変更することで色や明るさの影響を調整し、さまざまな視覚効果を得ることができます。

たとえば、「乗算」モードなら画像を暗く、「スクリーン」モードなら画像を明るく、「オーバーレイ」モードであればコントラストを強調、「ソフトライト」モードなら柔らかい効果を与えます。

設定方法は以下のとおりです。

より詳しく知りたい方は、以下を参考にしてください。

参考：Adobe｜描画モード

人物など不要な要素を削除

Photoshopでは、意図せず写り込んでしまった人物やオブジェクトを削除することも可能です。

やり方はさまざまですが、もっとも簡単な手順は以下のとおりです。

厳密にはオブジェクトを削除するのではなく、周囲の背景と同化して塗りつぶすといった処理になります。

シェイプツールで図形を入れる

Web広告やポスター制作では、何かと「図形」を挿入する機会は多いので、覚えておくに越したことはありません。

もっとも簡単な図形の挿入手順は以下になります。

あとは図形を選択し、ガイドに沿ってドラッグ&ドロップで大きさ変更、またオプションバーで色や太さの微調整などを行います。

文字を入れる

デザイン制作では「テキスト追加」も頻繁に使うタスクなので、覚えておきましょう。

Photoshopでもっとも簡単に実装する手順は以下です。

CSSで実装できるデザインまとめ！コピペできるサンプルコード付き

Photoshopの基本スキル１：写真補正・加工機能

この章では、写真補正および加工における基本スキルを紹介します。

スポット修復ブラシツール

「スポット修復ブラシツール」は、写真の不要な部分を修復できるツールです。主に人物の髪の毛やシミ、できものなどといった細かな要素を修正するときに重宝します。

手順は以下のとおりです。

コピースタンプツール

こちらは「画像の一部分を別の場所に複製」できるツールです。

たとえば人の顔のシワを目立たなくする用途などで重宝されており、写真の補正・加工を行うならぜひ覚えておきたい機能です。

使用手順は以下のようになります。

ゆがみフィルター

ゆがみフィルターは画像内の任意のオブジェクトを乱流にしたり、渦巻きに変形できたりします。

また、顔の輪郭を微調整する際にも用いられます。

使い方は以下のとおりです。

ただ人の顔を調整する際は、大幅に変更すると印象が大きく変わるので注意が必要です。

ぼかしフィルター

ぼかしフィルターはその名のとおり、ぼかしを加える機能です。

画像全体をぼかすことも、画像の一部を選択してぼかすことも可能です。

手順は以下のとおりです。

全体をぼかすなら、範囲ではなくキャンバスそのものを選択します。

トーンカーブ

トーンカーブはかんたんに言うと、画像の色の補正を行う機能です。

Photoshopでのトーン調整でとくに使用頻度が高いため、画像補正の基本テクニックといえます。

調節手順は以下のとおりです。

なお別途レイヤーを作成して「ブラシツール」などと併用することで、部分的なトーン変更も実現可能です。

Photoshopの基本スキル２：グラフィック作成機能

ここでは、グラフィックに関する基本スキルを紹介します。

機能①文字の形で画像トリミングをする

Photoshopでは、画像を文字の形でトリミングすることも可能です。

主な手順は以下のようになります。

これは具体的には、文字レイヤーにて「文字以外の部分を隠す」というロジックで実現しています。

参考：Adobe｜文字を画像の形に切り抜く

機能②画像をポリゴン化する

Photoshopにおけるグラフィック加工技術として、カクカクしたポリゴン風の画像もよく挙げられます。

実現の手順は以下のとおりです。

根気のいる作業にはなりますが、今後のアップデートでポリゴン化専用のツールなどが登場する可能性もゼロではありません。

参考：Photoshopで写真を「ポリゴン」風にする

機能③フィルム写真風な画像を作成する

Photoshopでフィルム写真風な画像に仕上げるなら、以下の手順がもっとも効率がいいでしょう。

全体のトーンを青白めに調整するだけで、フィルム風のノスタルジックな画像が作れます。

またフィルムカメラならではの画像の粗さも、前述した「ぼかしフィルター」を合わせれば実現することが可能です。

参考：Photoshopでノスタルジックに淡くフィルム風写真に加工する方法

機能④幻想的な背景を作成する

Photoshopで背景を幻想的にするのも、グラフィック作成系スキルとして重宝します。

実現の仕方も多岐にわたりますが、ここでは代表的な「幻想的な背景」の実装手順を紹介します。

たとえば「花びら」と「雲」の画像を複合し、上記の手順を行うことで、以下のような幻想的な背景画像が作成できます。

参考：Adobe｜カラフルで幻想的なエフェクトを作成する方法

機能⑤3D背景を作成する

Photoshopには3D機能もあるため、「3D背景」を作成することも可能です。

ここでは、オリジナルの3D山脈の作成手順を紹介します。

参考：Photoshopの「3D機能」で山脈のような3D画像を作成する方法

Photoshopの基本スキル３：イラスト作成

ここでは、イラスト作成における基本スキルを紹介します。

ブラシツール

イラスト作成の基本スキルとして、ブラシツールは避けては通れないでしょう。

ブラシツールはイラスト作成において、汚れや不要な部分を消したり、余分な線や塗りつぶしの削除を行ったり、各オブジェクトの色の染色または透明度を調節できたりします。

ブラシツールはツールバーから選択したあと、キャンバス上でドラッグ&ドロップを行うだけで簡単に使用できます。

描画モード

描画モードは「レイヤーどうしの合成をどのように行うか」を調節できる機能で、イラスト作成のスキルとして不可欠です。

描画モードではじつに多種多様なエフェクトが使用可能で、たとえば明るさが際立つスクリーンモード、コントラストを全面に出したオーバーレイモードなどがあります。

設定方法は以下のとおりです。

レイヤースタイル

レイヤースタイルとは、レイヤーに対してさまざまな視覚効果をもたらす機能で、初心者でも簡単に使えます。

使う手順は以下のとおりです。

また効果は全部で10種類で、以下のとおりです。

Photoshopの基本スキル４：ポスター・WEB素材などの作成

この章では、ポスターおよびWeb素材の作成における基本スキルを紹介します。

メディアの融合

メディアの融合・組み合わせというのは主にレイヤー合成スキルのことで、ポスター作成において重要なスキルです。

ひとえに「レイヤーを合成する」といっても方法は多岐にわたりますが、主には以下のような種類があります。

文字入力・加工

ポスター・WEB素材の作成には、文字入力および加工のスキルは必要不可欠と言えるでしょう。

Photoshopで文字加工を行う方法にはじつにさまざまな手段があり、代表的なものを挙げると以下のとおりです。

メッセージの強調

前述で紹介した文字加工の他にも、Photoshopでメッセージを強調する方法はたくさんあります。

例えば以下のようなものが挙げられます。

このようにPhotoshopはツールと機能の組み合わせによって、無限のパターンの文字加工を施すことが可能です。

DMM 「Webデザインコース」で「Photoshop」の使い方を学ぼう

ツールや機能の組み合わせを駆使すれば、Photoshopでできることは無限です。

それゆえに、独学で習得するのは膨大な時間がかかることも否めません。

DMM WEBCAMPのWebデザインコースでは、知識ゼロから効率よくWebデザインやコーディング、SEO対策を学ぶことができます。

使用するデザインツールはPhotoshopをはじめ、同じAdobeのIllustratorやDX、またFigmaなどモダンなツール達。

現役Webデザイナー講師によるマンツーマン指導で、働きながらでも最短8週間で着実にデザインスキルを取得できます。

さらに当コースは経済産業省から「リスキリングを通じたキャリアアップ支援事業」として認定を受けているため受講料70％、最大380,800円のキャッシュバックを受けられるため大変おトクです。

少しでも安くて質の高いデザインスクールを探しているなら、ぜひDMM WEBCAMPを検討してみてはいかがでしょうか。

＞＞DMM WEBCAMP Webデザインコースの詳細はこちら

まとめ

以上、Photoshopの概要や初期設定項目、基本操作や代表的なツールについてご紹介してきました。

数あるデザインツールの中でもPhotoshopは世界的に大きなシェアを誇り、実現できることも無限にあります。

そのためPhotoshopを満足に使えるだけでも、Webデザイン関連の仕事に就職できる可能性は飛躍的に上がるでしょう。

ぜひ本記事で紹介した基本的なツールや機能を学び、Photoshopの高い機能性・利便性を実感してみてはいかがでしょうか。