Photoshop(フォトショップ)とは?基本的な使い方を徹底解説!
![](https://web-camp.io/magazine/wp-content/uploads/2024/04/DMM-WEBCAMP-3-2.png)
デザインに携わる方なら避けて通れないのが、デザイン系ソフトウェア「Photoshop」です。
大まかな概要はわかっていても始め方がわからない、またどんなことができるのかまでは詳しく知らないという方も多いでしょう。
今回の記事ではPhotoshopの概念から購入法、基本的な使い方やできることまで詳しく紹介します。
Photoshop(フォトショップ)とは?
![](https://web-camp.io/magazine/wp-content/uploads/2024/05/DMM-WEBCAMP-15-571x300.png)
Photoshop(フォトショップ)は、Adobe社が開発・販売している画像編集ソフトウェアです。
世界中で広く使用されており、プロのデザイナーや写真家から一般ユーザーまで、多くの人々が利用しています。
Photoshopは、多機能で強力なツールセットを備えており、主に以下のような用途に使用されます。
- 画像編集(明るさ・コントラスト調整、色補正、不要な要素削除、傷やシミ修正など)
- デザイン(Webデザイン、ポスター、パンフレット、ロゴ、名刺などの作成)
- 写真レタッチ(ポートレート美化、肌トーン調整、目の赤み除去など)
- コンポジット(複数の画像を複合)
- デジタルペインティング(ブラシツールを使用したデジタル絵画作成)
Photoshopには多くのフィルター、ブラシ、エフェクトが用意されているため、創造的なプロジェクトを簡単に実現できます。
Photoshopの購入方法について
Photoshopは「Adobe Creative Cloud」のサブスクリプションサービスとして提供されています。
月額または年額の料金を支払うことで、常に最新バージョンのPhotoshopを利用できるということです。サブスクリプションには以下のプランがあります。
- 単体プラン:Photoshopのみを利用するプラン
- フォトプラン:PhotoshopとLightroom(写真管理・編集ソフト)のセット
- コンプリートプラン:Photoshopを含むAdobeの全てのクリエイティブソフトウェア(Illustrator、InDesign、Premiere Proなど)を利用できるプラン
購入手順は以下の通りです。
- Adobeアカウントを作成
- Adobe Creative Cloudにログイン
- Photoshopの希望のプランを選択
- 「購入する」をクリック
- 支払い情報を入力し、購入完了
「なんか今の仕事合わないな・・・」
「IT業界に転職してみたいなぁ・・・」
という方、DMMが運営する「WEBCAMP エンジニア転職」をご検討してみてはいかがですか?
![WEBCAMP エンジニア転職](https://web-camp.io/magazine/wp-content/uploads/2023/11/ss2-506x300.png)
「WEBCAMP エンジニア転職」では最短12週間でITエンジニアを目指すことが可能です!
WEBCAMPの卒業生は転職後に年収もUP!(例:年収250万円→500万円)
しかも今なら受講料の最大70%が給付金として支給されます。
DMM WEBCAMPは経済産業省・厚生労働省が認定した専門実践教育訓練給付金制度の対象です
Photoshopの初期設定方法
![](https://web-camp.io/magazine/wp-content/uploads/2024/05/DMM-WEBCAMP-1-1-571x300.png)
Photoshopを購入したら、最初にやっておきたい初期設定を紹介します。
PC負荷を最小限にする
「PC負荷を最小限にする」というのは、要するに「アニメーションズーム」と「フリックパン」という機能をオフにするということです。
手順は以下のとおりです。
- 環境設定を開く
- 「ツール」タブを選択
- 「アニメーションズーム」のチェックを外す
- 「フリックパンを有効にする」のチェックを外す
サイズ単位をピクセルに統一する
Photoshopの初期設定では画像データの単位が「mm」になっているので、多くの企業で一般的に使われている「Pixel」に変更します。
手順は以下のとおりです。
- 環境設定を開く
- 「単位・定規」タブを選択
- 「単位」の箇所を「Pixel」に変更
ヒストリー設定を行う
ヒストリー設定とは、いわゆるPhotoshopの編集履歴のことです。
初期設定の「残しておく履歴の量」では、PCのメモリに大きな負荷がかかるので、ここでは残す履歴の量を最小限にします。
- 環境設定を開く
- 「パフォーマンス」タブを選択
- 「ヒストリー数」を20に変更
- 「キャッシュレベル」を2に変更
ファイル管理設定を行う
こちらは「保存するファイル形式を統一する設定」です。
限定された用途でのみ使用する、ないしは異なるファイル形式を使う予定がない場合であれば設定しておきましょう。
- 環境設定を開く
- 「ファイル管理設定」タブを選択
- 「プレビュー画像」=「必ず保存」
- 「ファイル拡張子」=「小文字を使用」
- 「復元情報を次の間隔で自動保存」にチェックを入れる
レイヤーパネルの設定を行う
作業中に画面下部に表示される「レイヤーパネル」の表示形式を設定します。
作業画面にカラーや文字など多くの情報が表示できますが、PCの負荷が大きくなるうえ、人によっては「情報量が多くて集中できない」というケースもあります。
情報量の増減の設定は、以下のとおりです。
- 作業画面から画面右下「レイヤー」タブを選択
- 「レイヤーパネルのオプション」を開く
- 任意で各種チェックボックスを外して情報を非表示
>>DMM WEBCAMP Webデザインコースの詳細はこちら
PhotoshopのUI(ユーザインタフェース)の見方
![](https://web-camp.io/magazine/wp-content/uploads/2024/04/DMM-WEBCAMP-3-571x300.png)
PhotoshopのUIは、大きく以下のような区切りになっています。
引用:SEOタイムズ
真ん中にあるのが「ドキュメント」で、主にここでデザインを作成したり画像の編集を行ったりします。「キャンバス」という名称でも呼ばれます。
画面左側にあるのが「ツールバー」です。編集作業に欠かせない各種ツールはここから選択して呼び出すことができます。
画面の右側は「パネル」という名称で呼ばれています。編集中のレイヤーや選択中の色など、主に「現在の状況」が表示されています。
画面上部は「オプションバー」といって、「パネル」の補助情報が表示されています。
そして最上部の「メニューバー」は、設定メニューが網羅されています。前述で紹介した各種設定もここから行うことが可能です。
Photoshopの基本操作
![](https://web-camp.io/magazine/wp-content/uploads/2024/04/DMM-4-2-571x300.png)
ここでは、Photoshop初心者なら必ず覚えておきたい基本操作や知識を紹介します。
「レイヤー」の概念を学ぶ
Photoshopの「レイヤー」は、画像編集の基礎となる重要な概念です。
レイヤーは「透明なフィルムのようなもの」のことで、それらを重ねることでひとつの画像を完成させます。
各レイヤーに異なる画像要素やエフェクトを配置することによって、個々の要素をそれぞれに編集できるため、後の変更や調整が容易に行えるメリットがあります。
またレイヤーは順序を自由変更したり、透明度を調整したりグループ化したりすることも可能です。
デザイン業界の編集方法の常識となるので、覚えておきましょう。
画像の明るさを調整する
画像の明るさ、およびコントラストなどを調整する手順は、以下のとおりです。
- 調節したい画像を選択する
- 色調補正パネルの明るさ(コントラストアイコン)をクリックする
- 「レイヤー」「新規調整レイヤー」「明るさ・コントラスト」いずれかを選択
- スライダーで明るさやコントラストを調節
明るさやコントラストの調節は、画像編集でとくによく使う機能になります。
画像の色味を調整する
Photoshop作業でよく使われる「画像の色の濃さ・薄さの調節方法」になります。
やり方は主に2種類です。
- メニューバー「イメージ」→「色調補正」から行う
- 色調補正&調整レイヤーを活用する
メニューバーから行うやり方ですと、以下のとおりです。
- 調節したい画像を選択
- 上部メニューバーから「イメージ」を選択
- 「色調補正」を選択して調整
色調補正&調整レイヤーを活用するなら、「色調補正パネル」から必要な補正のツールアイコンをクリックするだけです。
色調とカラー修正なら「レベル補正」または「トーンカーブ」をクリック、またカラーのみの修正なら「カラーバランス」または「色相/彩度」をクリックします。
なお、カラー画像を白黒画像に変換するなら「白黒」をクリックすることで実現可能です。
「マスク」を理解する
Photoshopの「マスク」は、画像の特定部分を隠したり表示したりするためのツールです。
レイヤーマスクを使用するとレイヤーの一部が透明になり、背後にある他のレイヤーが見えるようになります。
マスクは白黒のグレースケール画像として機能し、白は完全に表示、黒は完全に隠す、グレーは半透明を表します。
これにより画像の特定部分を柔軟に編集しつつ効果を追加できるなど、細かな編集や複雑な選択範囲の調整が可能になります。
保存方法やデータ形式を覚える
Photoshop でファイルを保存する手順は、以下のとおりです。
- メニューバーから「ファイル」を選択
- 「保存」「別名で保存」「コピーを保存」いずれかを選択
- 「Creative Cloudに保存」「コンピューター上に保存」のいずれかを選択
上記の手順を踏まずとも、ショートカット「Ctrl+S」を押しても保存メニューが開くので、こちらをおすすめします。
トリミングで画像を切り取る
Photoshopにおける画像トリミング(切り取り)の方法はさまざまですが、もっとも簡単なのは「トリミングツール」を活用する方法です。
手順は以下のとおりです。
- ツールバーから「切り抜きツール」を選択
- 画像に表示された境界線をドラッグ&ドロップして編集
- 画面上部のチェックマークをクリック
境界線の編集中、メニューバーで定型サイズへの変更も可能です。
描画モードを活用する
描画モードとは、「レイヤーが他のレイヤーとどのように合成されるか」を決められる機能です。
描画モードを変更することで色や明るさの影響を調整し、さまざまな視覚効果を得ることができます。
たとえば、「乗算」モードなら画像を暗く、「スクリーン」モードなら画像を明るく、「オーバーレイ」モードであればコントラストを強調、「ソフトライト」モードなら柔らかい効果を与えます。
設定方法は以下のとおりです。
- レイヤーパネルの「レイヤー」タブを選択
- 不透明度の左隣「通常」をクリックし、プルダウンから任意のモードを選択
より詳しく知りたい方は、以下を参考にしてください。
参考:Adobe|描画モード
人物など不要な要素を削除
Photoshopでは、意図せず写り込んでしまった人物やオブジェクトを削除することも可能です。
やり方はさまざまですが、もっとも簡単な手順は以下のとおりです。
- 消したいオブジェクトをざっくりと囲む
- メニューバー「編集」から「コンテンツに応じた塗りつぶし」を選択
厳密にはオブジェクトを削除するのではなく、周囲の背景と同化して塗りつぶすといった処理になります。
シェイプツールで図形を入れる
Web広告やポスター制作では、何かと「図形」を挿入する機会は多いので、覚えておくに越したことはありません。
もっとも簡単な図形の挿入手順は以下になります。
- ツールバーから「シェイプツール」アイコンを長押し
- 任意の図形を選択
あとは図形を選択し、ガイドに沿ってドラッグ&ドロップで大きさ変更、またオプションバーで色や太さの微調整などを行います。
文字を入れる
デザイン制作では「テキスト追加」も頻繁に使うタスクなので、覚えておきましょう。
Photoshopでもっとも簡単に実装する手順は以下です。
- ツールバーから「テキストツール」アイコンを長押し
- 横書き・縦書きから任意のものを選択
- キャンバス上の任意の箇所をクリックし、テキストバーを追加
Photoshopの基本スキル1:写真補正・加工機能
![](https://web-camp.io/magazine/wp-content/uploads/2024/03/DMM-14-1-571x300.jpg)
この章では、写真補正および加工における基本スキルを紹介します。
スポット修復ブラシツール
「スポット修復ブラシツール」は、写真の不要な部分を修復できるツールです。主に人物の髪の毛やシミ、できものなどといった細かな要素を修正するときに重宝します。
手順は以下のとおりです。
- ツールバーから「スポット修復ブラシツール」を選択
- 不要な要素をドラッグ&ドロップで選択
コピースタンプツール
こちらは「画像の一部分を別の場所に複製」できるツールです。
たとえば人の顔のシワを目立たなくする用途などで重宝されており、写真の補正・加工を行うならぜひ覚えておきたい機能です。
使用手順は以下のようになります。
- ツールバーから「コピースタンプツール」を選択
- コピーしたい部分をOption(Alt)キーを押しながらクリック
- ペーストしたい箇所をクリックする
ゆがみフィルター
ゆがみフィルターは画像内の任意のオブジェクトを乱流にしたり、渦巻きに変形できたりします。
また、顔の輪郭を微調整する際にも用いられます。
使い方は以下のとおりです。
- レイヤーパネルで対象のレイヤーを選択
- 右クリックで「スマートオブジェクトに変換」する
- アプリケーションメニュー「フィルター/ゆがみ」を選択
- 任意の箇所をスライダーで調整
ただ人の顔を調整する際は、大幅に変更すると印象が大きく変わるので注意が必要です。
ぼかしフィルター
ぼかしフィルターはその名のとおり、ぼかしを加える機能です。
画像全体をぼかすことも、画像の一部を選択してぼかすことも可能です。
手順は以下のとおりです。
- ぼかしたい対象の範囲を選択する
- メニューバー「フィルター」→「ぼかし」→「ぼかし(ガウス)」
- ぼかしの程度をスライダーで調節
全体をぼかすなら、範囲ではなくキャンバスそのものを選択します。
トーンカーブ
トーンカーブはかんたんに言うと、画像の色の補正を行う機能です。
Photoshopでのトーン調整でとくに使用頻度が高いため、画像補正の基本テクニックといえます。
調節手順は以下のとおりです。
- メニューバー「レイヤー」→「新規調整レイヤー」→「トーンカーブ」
- グラフをドラッグ&ドロップしてトーン調整
なお別途レイヤーを作成して「ブラシツール」などと併用することで、部分的なトーン変更も実現可能です。
Photoshopの基本スキル2:グラフィック作成機能
![](https://web-camp.io/magazine/wp-content/uploads/2024/04/DMM-WEBCAMP-1-2-571x300.png)
ここでは、グラフィックに関する基本スキルを紹介します。
機能①文字の形で画像トリミングをする
Photoshopでは、画像を文字の形でトリミングすることも可能です。
主な手順は以下のようになります。
- 画像レイヤーと文字レイヤーをそれぞれ用意する
- メニューバー「選択範囲」→「選択範囲を読み込む」をクリック
- ダイアログボックスが出たら「OK」」
- 任意の文字が点線で表示されているのを確認
- レイヤーパネルの目のアイコンをクリック
- レイヤーパネル内「レイヤーマスクを追加」をクリック
- レイヤーパネルで「レイヤーマスクのレイヤーへのリンク」をクリック
- 画像レイヤーで画像の位置を微調整
これは具体的には、文字レイヤーにて「文字以外の部分を隠す」というロジックで実現しています。
機能②画像をポリゴン化する
Photoshopにおけるグラフィック加工技術として、カクカクしたポリゴン風の画像もよく挙げられます。
実現の手順は以下のとおりです。
- 対象となる任意の画像を選択
- ツールバーから「多角形選択ツール」を選択
- フィルターメニューから「ぼかし」→「平均」を選択
- 対象オブジェクトに対し2と3を繰り返す
根気のいる作業にはなりますが、今後のアップデートでポリゴン化専用のツールなどが登場する可能性もゼロではありません。
機能③フィルム写真風な画像を作成する
Photoshopでフィルム写真風な画像に仕上げるなら、以下の手順がもっとも効率がいいでしょう。
- 対象の画像レイヤーを選択
- レイヤーパネル下のレイヤー色調補正→「トーンカーブ」を選択
- 画像の明るい部分を全体に適応、全体を明るめにする
- カラーバランスで「中間調」「ハイライト」で微調整
全体のトーンを青白めに調整するだけで、フィルム風のノスタルジックな画像が作れます。
またフィルムカメラならではの画像の粗さも、前述した「ぼかしフィルター」を合わせれば実現することが可能です。
参考:Photoshopでノスタルジックに淡くフィルム風写真に加工する方法
機能④幻想的な背景を作成する
Photoshopで背景を幻想的にするのも、グラフィック作成系スキルとして重宝します。
実現の仕方も多岐にわたりますが、ここでは代表的な「幻想的な背景」の実装手順を紹介します。
- 背景として使いたい任意の画像を選択する
- ツールバー「描画モード」のオーバーレイでコントラストを強調
- レイヤーを新規作成し、複合用の他の背景画像を用意
- 複合用背景画像のコントラスト微調整
- ブラシツールなどで任意の箇所にカラーを追加
- レイヤーおよび色合いを微調整
たとえば「花びら」と「雲」の画像を複合し、上記の手順を行うことで、以下のような幻想的な背景画像が作成できます。
参考:Adobe|カラフルで幻想的なエフェクトを作成する方法
機能⑤3D背景を作成する
Photoshopには3D機能もあるため、「3D背景」を作成することも可能です。
ここでは、オリジナルの3D山脈の作成手順を紹介します。
- ツールパネル下部にて「描画色=黒」「背景色=白」に変更
- メニューバー「フィルター」→「描画」→「雲模様1」を適用
- 出来上がった雲模様を選択
- メニューバー「3D」→「レイヤーから新規メッシュを作成」→「深度マップ」→「平面」を選択
- メニューバー「3Dカメラを回転」で、完成した山脈オブジェクトを任意の位置に回転
- キャンバス内の太陽のようなアイコン「無限遠ライト」で光の角度を調節
参考:Photoshopの「3D機能」で山脈のような3D画像を作成する方法
Photoshopの基本スキル3:イラスト作成
![](https://web-camp.io/magazine/wp-content/uploads/2024/04/DMM-WEBCAMP-4-571x300.png)
ここでは、イラスト作成における基本スキルを紹介します。
ブラシツール
イラスト作成の基本スキルとして、ブラシツールは避けては通れないでしょう。
ブラシツールはイラスト作成において、汚れや不要な部分を消したり、余分な線や塗りつぶしの削除を行ったり、各オブジェクトの色の染色または透明度を調節できたりします。
ブラシツールはツールバーから選択したあと、キャンバス上でドラッグ&ドロップを行うだけで簡単に使用できます。
描画モード
描画モードは「レイヤーどうしの合成をどのように行うか」を調節できる機能で、イラスト作成のスキルとして不可欠です。
描画モードではじつに多種多様なエフェクトが使用可能で、たとえば明るさが際立つスクリーンモード、コントラストを全面に出したオーバーレイモードなどがあります。
設定方法は以下のとおりです。
- レイヤーパネルから「レイヤー」タブを選択
- 不透明度の左隣「通常」をクリックし、プルダウンから任意のモードを選択
レイヤースタイル
レイヤースタイルとは、レイヤーに対してさまざまな視覚効果をもたらす機能で、初心者でも簡単に使えます。
使う手順は以下のとおりです。
- レイヤーパネル下部「fx」アイコンをクリック
- 「レイヤー効果」を選択
- 任意の効果を選択して反映
また効果は全部で10種類で、以下のとおりです。
- ベベルとエンボス…ハイライトとシャドウの複合
- 境界線…レイヤーの周りを線で囲む
- シャドウ(内側)…レイヤー内側に陰影追加
- 光彩(内側)…レイヤー内側に放射状ぼかし追加
- サテン…レイヤー形状に陰影追加
- カラーオーバーレイ…レイヤーを指定色で塗色
- グラデーションオーバーレイ レイヤーをグラデーションで塗色
- パターンオーバーレイ…レイヤーをパターンで塗色
- 光彩(外側)…レイヤー外側に放射状ぼかし追加
- ドロップシャドウ…レイヤー背後に陰影追
Photoshopの基本スキル4:ポスター・WEB素材などの作成
![](https://web-camp.io/magazine/wp-content/uploads/2024/03/DMM-11-1-571x300.jpg)
この章では、ポスターおよびWeb素材の作成における基本スキルを紹介します。
メディアの融合
メディアの融合・組み合わせというのは主にレイヤー合成スキルのことで、ポスター作成において重要なスキルです。
ひとえに「レイヤーを合成する」といっても方法は多岐にわたりますが、主には以下のような種類があります。
- 描画モード(ブレンドモード)…上のレイヤーが下のレイヤーにどのように影響するか調整
- レイヤーマスク…画像や文字の特定の部分だけを表示または隠すことが可能
- クリッピングマスク…一つのレイヤーを下のレイヤー形状に基づいて表示
- スマートオブジェクト…元のデータを保持しつつ複数の編集やフィルターを適用
- 調整レイヤー…元の画像に影響を与えず色調や明るさ、コントラストなどを調節
文字入力・加工
ポスター・WEB素材の作成には、文字入力および加工のスキルは必要不可欠と言えるでしょう。
Photoshopで文字加工を行う方法にはじつにさまざまな手段があり、代表的なものを挙げると以下のとおりです。
- テキストツール…テキスト設置、フォント、サイズ、色、スタイルの設定
- 【レイヤースタイル】ドロップシャドウ…文字の背後に影追加
- 【〃】グラデーションオーバーレイ…文字にグラデーション適用
- 【〃】ストローク…文字の周囲に縁取り追加
- 【〃】ベベルとエンボス…文字に立体的な浮き彫り効果を追加
- グロー…文字の周りに輝きを追加(外側グロー、内側グロー)
- 各種フィルター…ぼかし、歪み、アート効果など、多種多様なフィルターで文字変形・加工
- ワープテキスト…アーチや波などの様々な形に文字を変形
- クリッピングマスク…文字へ画像テクスチャやデザインの取り込み
- シェイプテキスト…円形やカーブ状の文字を作成
メッセージの強調
前述で紹介した文字加工の他にも、Photoshopでメッセージを強調する方法はたくさんあります。
例えば以下のようなものが挙げられます。
- 光彩(グロー)エフェクト…文字の周りに柔らかい光の効果を加える
- 3D効果…立体感のあるテキストを生成する
- 文字ツール+シェイプツール…特定の図形の形に沿ってテキストを表示
- 文字ツール+レイヤーマスク…かすれ文字の生成
このようにPhotoshopはツールと機能の組み合わせによって、無限のパターンの文字加工を施すことが可能です。
DMM 「Webデザインコース」で「Photoshop」の使い方を学ぼう
![](https://web-camp.io/magazine/wp-content/uploads/2024/03/DMM-3-571x300.jpg)
ツールや機能の組み合わせを駆使すれば、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の高い機能性・利便性を実感してみてはいかがでしょうか。