【Photoshopの基本操作】初心者/画像編集.Webデザイン

学び

Adobe社が開発。プロも利用する世界で最も有名な画像編集ソフトのひとつで、デザイン業界では欠かせない定番のツールです。

ひんまる
ひんまる

かなり機能が豊富!覚えるまでは根気も必要かと思いますが、やりがいもあります。

主にできること

※AIを参考にまとめました

  • 写真の補正
    (色調整、明るさ、不要物の消去など)
  • 合成や加工
    (背景を変える、複数の画像を組み合わせるなど)
  • イラストやデジタルアート制作
  • グラフィックデザイン
    (バナー、ポスター、Webデザイン、SNS画像など)
価格/年間プラン(月々払い)

3,280円/月(税込)

【例】Web一般サイズの場合

1.新規ファイルclick新規ドキュメントが
 かれる
2.上部のWebclick→左のWeb一般click
3.右のプリセット詳細を入力していく
 ●ファイル名は任意で入力
 ※文字化け防止のため、英数字、ハイフンや
  アンダーバーでの構成が望ましい
 ●単位はピクセルになっているか確認
 ●アートボードにチェック
 ●解像度→72
 ●カラーモード→RGBカラー
 ●カンバスカラーは任意のカラー
 ●右下の作成clickドキュメント作成される

※ファイル名は「20250505_banner01.psd」のように作成日とタイトルをつけるなどルールを決めるとわかりやすい

こまめに保存を心がける

初めて保存する場合

1.メニューバーファイルから別名で保存click
2.保存場所は任意(デスクトップなど)
3.右下の保存click
4.互換性を優先(M)という表示が出た場合は→OKclick

上書き保存する場合

メニューバーファイルから保存click
(ショートカットキー Mac…⌘+S Win…Ctrl+S)

1つだけの場合

レイヤーパネルのアートボード名を右clickPNGとしてクイック書き出しclick→任意の場所に保存

複数の場合

メニューバーのファイルclick書き出しclickPNGとしてクイック書き出しclick→任意の場所に保存

アートボードを選択したり形式を変えたい場合

メニューバーのファイルclick→書き出しclick→書き出し形式crick→書き出したいアートボードを選択→形式(JPGなど)選択→任意の場所に保存

作成したファイルを閉じる方法

プションバー下にあるファイル名横の×印click初のホーム画面に戻る

Photoshopを閉じる方法

Mac…左上の赤いバツ印
Win…右上のバツ印

アートボードを増やす

アートボードとは、1つのファイル内で複数の画像編集をおこなえる機能

アートボード名clickclick

レイヤーをリンク(バラバラ防止)

Shiftキーで全選択→レイヤーパネルの一番下レイヤーをリンクclick

等間隔に並べる
水平方向に分布

水平方向にしたいオブジェクト選択→オプションバーの水平方向に分布click

垂直方向に分布

垂直方向にしたいオブジェクト選択→オプションバーの垂直方向に分布click

選択ツールとは、一部分だけ調整したりマスクをかける範囲を決めたりする際の範囲指定の機能

長方形ツール、楕円形ツールなど

なげなわツール

ブラシのように線を描いて範囲を囲む

多角形選択ツール

雑誌のスクラップ風に切り抜きしたいときなどによく使われる

一度クリックをすると線がでてくる→クリックで線を固定を繰り返して範囲を囲んでいく

Photoshopが自動で選択範囲をつくる

被写体を選択
  • 被写体だと判断されたものに選択範囲がつくられる
  • たくさんの人や複数のものを同時に選択したい場合に便利

たくさんの人が写っていたり複数のものを同時に選択したい場合におすすめ

自動選択系ツール選択(3つのうちどれでもOK)→オプションバーの被写体を選択の右横の三角形ボタンからクラウド選択→オプションバーの被写体を選択click

※デバイス(高速)→読み込みが早い分あまり正確ではない

オブジェクト選択ツール

オブジェクト選択ツール選択→オプションバーの被写体を選択の右横の三角形ボタンからクラウド選択モード選択→被写体を囲むように範囲つくる

クイック選択ツール

ブラシのようにクリックをしながら選択範囲を追加したり削除したりできる

クイック選択ツール選択→オプションバーのクリックでブラシオプションを開く(●の下に数字のところ)click選択したい被写体click

細かい調整が必要な場合はオプションバーの選択範囲に追加現在の選択範囲から一部削除で調整

自動選択ツール

・色に基づいて選択範囲を作ってくれる
・単色の背景を選択したい時などにおすすめ

背景などをclick→レイヤーパネル下のレイヤーマスクclick→レイヤーマスクサムネイルを選択して選択範囲を反転(Mac…⌘+I Ctrl+I)

※選択されなかった部分はオプションバーが選択範囲に追加になっているか確認の上click

ペンツールで選択範囲をつくる方法
  • 写真がぼやけていたり自分の任意の形で読み込みたいときにおすすめ
  • パスパネルのパスを選択範囲として読み込むという機能を使う

ペンツール選択→オプションバーのツールモードを選択パス一度clickしたら少し先でclick、そのまま少し引き延ばして離すを繰り返す→パスパネル下のパスを選択範囲として読み込むclick

パスやシェイプを選択範囲に変換する方法

ペンツールや長方形ツールなどで作成したパスやシェイプから選択範囲に変換することもできる

ペンツールで囲む→パスパネルのパスを選択範囲として読み込むclick→シェイプを非表示にする

または…

シェイプで囲む
   ↓
・Mac…⌘キーを押しながら対象のパスのサムネイルclick
・Win…Ctrlを押しながら対象のパスのサムネイルclick
   ↓
選択範囲ができる→シェイプを非表示にする

長方形ツール選択→オプションバーのツールモードパス長方形描く→オプションバーの選択範囲を作成click→選択範囲を作成表示パネルが表示される→OKclick

文字を選択範囲に変換する方法

文字にも使用できる

文字を書く
  ↓
・Mac…⌘キーを押しながら対象のTのサムネイルclick
・Win…Ctrlを押しながら対象のTのサムネイルclick
  ↓
選択範囲ができる→文字を非表示にする

範囲を広く指定する場合におすすめ

メニューバーの選択範囲click選択範囲を反転click

ショートカットキー 
(Mac…Shift+⌘+i Win…Shift+Ctrl+i)

選択範囲を作るショートカットキー(Mac…⌘+J Win…Ctrl+J)

範囲を選択した状態でオプションバーの選択範囲に追加click→追加で選択したい範囲を指定

ショートカットキー Shiftキーを押しながら選択

オプションメニューの現在の選択範囲から一部削除click→選択範囲ツール(どれでも)で削除する

ショートカットキー 
Mac…optionキーを押しながら選択
Win…Altキーを押しながら選択

メニューバーの選択範囲click選択を解除click

ショートカットキー 
(Mac…⌘+D Win…Ctrl+D)

  • 選択範囲が色分けされてわかりやすくなる
  • ツールバーの下の方にある

選択範囲をつくる→ツールバーの下の方にあるクイックマスクモードで編集click

クイックマスクモードの設定方法

選択範囲やマスクの色を変更することができる

クイックマスクモードで編集(ツールバー下)Wclickクイックマスクオプションが表示される

選択範囲つくる→レイヤーの複製(Mac…⌘+J Win…Ctrl+J)

マスクは「レイヤーマスク」「クリッピングマスク」「ベクトルマスク」の3種類がある

画像の一部を非表示にしたり戻したりする

  • 拡大・縮小する際にマスクの画質が粗くなるので大幅なサイズ変更は避ける
  • レイヤーマスクをかけた状態でスマートオブジェクトに変換する
操作方法

選択ツールで選択範囲を作る→レイヤーパネル下のレイヤーマスクclick
※作成したマスクはブラシで調整できる

または…

選択ツールで選択範囲を作るclick→オプションバーの選択と作成範囲を作成または調整click→マスクを調整する画面に移動→ツールバーから選択して調整
属性パネルからも様々な調整の設定が可能

不要な部分を消す方法

レイヤーの右のレイヤーマスクWクリックブラシツールclick→ツールバーの描画色を黒に設定する→オプションバーのハード円ブラシclick→不要な部分を塗る

消した部分を戻す方法

ツールバーの描画色を設定にする→ブラシツールclick→オプションバーのハード円ブラシclick→戻したい部分を塗る

背景もでてしまうので、細かい調整をしたい場合はブラシのサイズを小さくする

好きな選択ツール選択(オブジェクト選択ツールなど)→オプションバーの選択とマスク(被写体を選択の隣)click→マスクを調整する画面になる→属性パネルで背景をわかりやすい色にする→ツールバーの選択ツールを使って調整する
※属性パネルのコントラストエッジをシフトなどでも細かい調整ができる

右の属性パネルで境界線をぼかしたり滑らかにしたり、細かい調整ができる

髪の毛など細かい部分を調整

上記の手順でツールバーの境界線調整ブラシを使用する

・作りたい形に切り抜くことができる
・テキストなどどんな種類でもマスクになる
・複数のレイヤーを一度にマスクできる

操作方法

画像を楕円形に切り抜きたい場合

楕円形ツールで円を作成(塗りあり)→切り抜きたい画像を円の上に重ねる→画像レイヤーの右側をクリック→クリッピングマスクを作成click→2つのレイヤーをリンク

ショートカットキー
Mac…option押しながらレイヤーの境界をclick(四角と矢印が出たらclick
Win…Alt押しながらレイヤーの境界をclick(四角と矢印が出たらclick)

※解除も同様

ペンツールや長方形ツールで表示したい部分を囲んでマスクを作成

  • 拡大縮小しても画質が粗くならない
  • 画像が粗いものをマスクする際にもペンツールで細かい箇所を調整しやすい
操作方法

ペンツール選択→オプションバーのパスclick→一度クリックをすると線がでてくる→クリックで線を固定を繰り返して範囲を囲んでいく→オプションバーのマスクclick

  • アンカーポイントは少なめに打った方が曲線がなめらか
  • Optionキー(Mac)またはAltキー(Windows)を押しながらハンドルをドラッグするとスムーズに曲がる

※この手順だとベクトロマスクではなくレイヤーマスクが作成される

オプションバーの選択範囲を作成click→レイヤーパネルの下にあるレイヤーマスクclick

※選択範囲を作ってしまうとレイヤーマスクしか追加できなくなる

・写真の色味を変える機能
・「レイヤー単体を変化させる」「調整レイヤーを使って変化させる」の2種類がある

・1つのレイヤーに対し色調補正する際に使用
・スマートオブジェクトに変換しないで色調補正すると元に戻せなくなる
必ずスマートオブジェクトになっていることを確認する

レイヤー選択→メニューバーのイメージから色調補正選択→色調を補正する

色調補正したい部分を選択範囲で囲む→メニューバーのイメージclick色調補正click→色調を補正する

複数のレイヤーに変化をつけたい際に使用する

調整レイヤーより下にあるレイヤー全ての色味を変化させる

レイヤーパネル下の調整レイヤーclick→色調を補正する

クリッピングマスクをすれば1つのレイヤーのみ色調補正することもできる

特定のレイヤーclick→レイヤーパネル下の調整レイヤーclick→クリッピングマスクをかける→色調補正する

選択範囲作成→レイヤーパネル下の調整レイヤーclick→色調補正する

  • 手軽に明るさやコントラストを調整できる
  • 光の量を細かく調整できる
  • 明るさやコントラストの他に、レッド、グリーン、ブルーの調整もできる
  • より細かな明るさやコントラストの調整
  • 本格的な写真加工などでよく使用される

レイヤーパネル下の調整レイヤー(真ん中)clickトーンカーブclick
下の点click上下や左右にドラッグで調整
右上の点click左右や上下にドラッグで調整
真ん中click点が増やせる→ドラッグで調整

一部分を調整

指マークclick→画像内の一部分click→色調を調整→レイヤーマスクサムネールclick→レイヤーマスク反転(Mac…⌘+i / Win…Ctri+i)→ブラシツール選択→描画色は白→ブラシで描いた部分が色調補正される

※色調を調整しなおす場合はレイヤーマスクサムネール隣のトーンカーブをクリックして戻り調整する

  • 色相・彩度・明度の調整
  • マスターをクリックして特定の色を指定すると、色味が入っているところだけの調整ができる

色合いをより細かく調節する調整

Wクリックすると再編集できる

特定の二文字の字間を調整
(ショートカットキー Win…Alt+左右の矢印キー)
※縦書きの場合でも左右の矢印キーで調整する

≪メトリクス≫
フォント内の情報に基づいて文字間を自動調整
≪オプティカル≫
Photoshopが自動で文字間を調整

選択した文字列全体の字間を調整

(ショートカットキー Win…Alt+左右の矢印キー)

縦書きにしても英語や数字は横書きになるので、縦組み中の欧文回転を使います

縦書きにしたい英語や数字を選択→文字パネルのハンバーガーメニューclick縦組み中の欧文回転click

横に並べたい数字選択→文字パネルのハンバーガーメニューclick縦中横click

段落テキスト(作成した箱の中で文章を打つ)

文字ツールを選択した状態で長方形を書くようにボックス作成→その中に文字入力

ボックスの中で均等に両端を揃える

段落パネルの両端揃えclick

  • 点と点を描き、線でつなげて図形を作成
  • 直線や曲線を自由に描画したり画像を切り抜いたりできる
ハンドルとは
  • 2つ目以降の点を打ったときにクリックしたまま右側に引っ張るとでてくる棒についてる丸(〇)
  • 引き延ばすと直線から曲線に変えられる

Shiftキーを押しながら線を引くと、90度、45度などの線が描ける

※Shiftキーを押さないと斜めの線が描ける

自動的に曲線になるので波線(ウェーブ)も簡単に描ける

※点の数を少なめに打つとなめらかに描ける

パスまたはシェイプのポイントおよびセグメントを選択して調整する

パス選択ツール選択→調整したいシェイプをclick→アンカーポイント(■)ハンドル(〇)をドラッグして調整

アンカーポイントの切り替えツールclick→アンカーポイントをclick→ハンドルを閉じて直角にできる

※直角にしたアンカーポイントを横に引っ張ると再度ハンドルがでて曲線にできる

  • レイヤーに境界線やシャドウなど様々な視覚効果を適用することができる機能
  • 文字以外に画像やシェイプにもかけることができる
操作方法

レイヤースタイルを追加したいレイヤーの右側をWclick

または

追加したいレイヤーclick→レイヤーパネルの一番下にあるfxclickレイヤー効果click

注意点
  • スタイルを選択する際、チェックボックスをクリックすると真ん中の表示が切り替わらず編集できないので必ず文字をクリックする
  • 色をつける場合→描画モードが通常になっているか確認する

ドロップシャドウ内にある機能で、ぼかし具合が調整できる

  • 直感的に線や塗を描ける
  • 部分的に色調補正、レイヤーマスクの調整、あしらい描く、スタンプのようにも使用する
  • 選択範囲の調整にも使える
ブラシサイズ変更ショートカットキー
  • 大きくする→ (右かっこ)
  • 小さくする→ (左かっこ)
透明度と流用の違い

低くすると色を薄くできる

  • 一度に出力されるインクの量
  • 動かさずに長押しするとどんどん濃くなる
  • 色を少しづつのせたい時に使う

オプションバーのツールモードがシェイプになっているか必ず確認

シェイプの角を丸くする方法
  • 長方形や三角形を書いた時に表示される丸(ライブシェイプ)をドラッグで調整
  • またはプロパティパネルから数値で調整も可

調整パネルから色んな形が作れる

多角形ツール選択アートボード上click多角形を作成が表示される

スマートオブジェクト

元の画像のデータを保持し、画質を低下させずに編集できる機能

バウンディングボックス

画像、テキスト、シェイプの範囲を囲む四角形の枠線

シェイプとは

図形を描いたり背景を作るなどのデザインで使用するパーツとして使うもの

パスとは

マスクや選択範囲の作成など別の工程をするための下準備として使われるもの

メニューバー一番上のバー
オプションバーメニューバーの下のバー
ツールバー左のバー
コンテキストタスクバー一番下のバー
パネル右のパネル
ワークスペース作業スペース全体

※コンテキストタスクバーは非表示可

Amazon

https://amzn.to/4kn0vkx
https://amzn.to/3Fw3vMx
https://amzn.to/43Lmj2i
https://amzn.to/3Hrlrso
https://amzn.to/43QpyWn

コメント

タイトルとURLをコピーしました