LV.5 【初心者】Photoshopで出来ることはなにか
本記事は、初心者の管理人がPhotoshopで「こんなことができる!」「こうやったらできる!」と学んだことをまとめたものです🐧
基本操作は世に出回っていますのでこちらでは割愛します。
ちなみに私はこの本で学びましたが、基本中の基本が簡単に学べますのでおすすめです✨
🐧目次🐧
Photoshopで何ができる?
Photoshopでできること
Photoshopでできることはたくさんあります。Photoshopだけでなく、illustratorや別のアプリを使って制作をすることもありますが、会員数は600万人を超えているとのことなので、かなりのクリエイティブの現場でしようされていることがわかります。おおまかに下記のことができますが、組み合わせで様々なクリエイティブ制作ができるので可能性は無限大です∞
下記のようなこと以外にも、たくさんのことができますが一部をご紹介します。
- 写真の加工・補正
- 切り抜きや合成
- Webデザイン
- 漫画っぽい表現やいろんな技法の表現
まずはいろんなことに興味をもってやってみることが大切だと思います♪
基礎知識を入れておこう
Photoshopではビットマップ画像と呼ばれるデータを扱うことが得意です。特徴として、ピクセルで構成されていて、編集を加えると劣化しやすいことがあげられます。これは写真データなどが当てはまります。(写真を拡大したときに粒状のピクセルが見えますよね!あれのことです)
こちらの記事でも記載しているのでぜひご確認ください♪
kairi-video-editing.hatenablog.com
反対に、ベクター画像はillustratorが得意とします。ここでは詳細は割愛しますが、印刷物の制作をする際にもよく使われますね!
どちらも同じAdobe製品のため、Photoshopで作成した画像をillustratorに配置したり、それぞれをうまく組み合わせたりすることで最高のクリエイティブが作れること間違いなしです🐧✨
Photoshopのキホンツール
一からデザインする方はすでにご存じかもしれませんが、Photoshopは新規作成時にある程度カンバスサイズを基本テンプレから指定することができます。私はディレクターなので元あるデザインを流用することが多かったため、恥ずかしながら知らなかったです…。Web用だったり印刷向けだったりと最初から指定することで、デザインをよりイメージしやすいですね。
また、ワークスペースも目的に応じたセットにすると作業効率が変わります。【ウィンドウ】⇒【ワークスペース】からセットしてみましょう!
写真の補正について
写真の補正はレタッチとも呼ばれます。写真をなぜ補正するのか。それは商品や人物をより魅力的に魅せるためです。その写真が見る人にどういった印象を与えるのか、訴求したいことを伝えるためにはどうしたらよいかを考えてそれに見合った補正をすることがとても大切です。
補正のいろいろ
いくつか補正の特徴をご紹介します。
明るさを補正
色調補正パネルを操作します。レイヤーパネルに色調補正レイヤーが付き、何度も明るさ調整をし直すことができます。イメージメニューからも色調補正が可能ですが、これは後から編集しなおすことができないという特徴があります。
色見補正
室内照明によって料理がおいしくなさそうに見えちゃったりすることありますよね…そんなとき、【レンズフィルター】を活用すれば簡単に補正ができます!ちなみにこの照明の影響でおいしくなさそうに見えることを「色被り」しているといいます。この色被りは暖色系に色被りしているなら【寒色系】に。逆に寒色系に色被りしているなら【暖色系】を設定するとだいたい解消されます!もし【レンズフィルター】だけで解消しない場合は彩度や明るさなど、ほかの調整ツールも利用してみてください。
ほんのちょっと補正しただけでもこのような変化があります。まだ少しピンクがかっていますが、左の補正前と比較してもかなり見やすくなっているのがわかりますね🐧
彩度を補正
【彩度】はくすんだ写真を鮮やかにすることができます。彩度調整をすると不自然な鮮やかさになることがあるので、自然界のカラーは【自然な彩度】にすることがおすすめです✨
モノクロ変換
一言でモノクロといっても、ただ白黒に変換するだけではなく、特定の色味を暗くすることでより味のある写真にすることができます。【着色】はセピアにするなど白黒の中でも色付けをすることができます。
他にも多くの色調補正が、、!
- トーンカーブ:ポイントを移動させて色の調節を行う
- カラーバランス:諧調ごとに色の補正ができる
- カラールックアップ:あらかじめ用意されているテンプレから選べる
- 2諧調化:明るいところor暗いところのみの調整になる
- グラデーションマップ:明るいor暗いによってグラデーションをかけられる
Camera Rawフィルター
こちらは色被りや色調補正などの調整ができます。フィルター機能で補正するのでレイヤーはなく、後で編集することはできません。 一画面で、明るさ、コントラストやシャープやノイズの低減など様々な編集を行えるというのが大きな特徴となります。*1
露光量
露出量では、全体の明るさを調整するのではなく、特に明るい部分、中間部分、特に暗い部分に絞って明るさを調整することができます。*2
ポスタリゼーション
ポスタリゼーションについて、Adobe公式サイトがわかりやすく説明していたのでご紹介します。
ポスタリゼーションという用語は、かつてアーティストが写真を印刷ポスターにするために使った処理方法から由来しています。大量に印刷するには、色のバリエーションを少なくし、少ない色数で印刷する必要がありました。ポスタリゼーションを施すことで、色の数を少なくし、繊細なグラデーションを大まかな色合いにすることで、絵の具を塗ったような、またはエアブラシを使ったような効果を画像に加えることができます。
引用:ポスタリゼーションで写真にアートな効果を,ポスタリゼーションとは | 写真にアートな効果を追加 | Adobe, (2023年2月5日)
さまざまなフィルターで魅力を引き出そう
Photoshopの【フィルター】では、さまざまな効果をつけることができます。フィルターは一つの効果だけでなく重ねることもできますし、フィルター一つにとっても細かく調整することができるので、その写真にそって調整することができます。以下に少し例をご紹介します。皆さんもいろんなフィルターを触ってみてください!
- 水彩画 :水彩で描いたようなタッチ。もともと手書きのイラストや水彩画を通すと奥深いタッチになる
- 粒上フィルター:レトロな雰囲気を出すことができる
- ライブラシ :色数を少なく見せる。手書きに近いリアリズムなタッチを出せる
- スケッチ:ハーフトーンパターン:ドット上の効果を写真に持たせる(点や線)
- 二値(白黒) :画像を白と黒の2色にすることができる。描画色と背景色が白と黒に影響する。色を変えることもできる
- モザイク、パッチワーク:背景のあしらいにも使用できる
- ストローク :イラストチックにできる
フィルターごとの変化を確認できるサイトがありましたので共有します!自身の編集元の画像で試すのもよいですが、事前にイメージがわくと時短にもなるかと思います。どのフィルターがどういった効果をもたらすのか見ておくといいですね。
ちなみに、フィルターは順番によってかかる効果も変わるので入れ替えて調整してみるのもおすすめです🐧
参考:
以下は私が学習していて気になって調べたことを共有します!
シャープ
スマートシャープ:画面がくっきりと鮮明に見えるようにする
ただしピクセルの諧調表現を損なうこともあり、使用も一回までがよいでしょう。
他シャープの違いについては下記サイトがおすすめなのでシャープについてあまりわからないなという方はぜひ見てみてください🐧
参考:
ぼかし
個人的にぼかしは「ガウス」をよく使うイメージなのですが、それぞれどういった効果があるのか違いがわからなかったので調べました。やはり一般的にぼかしというの、ぼかし(ガウス)のことを指すようです。
適用範囲内のピクセルを平均化させることでぼかします。一般的に「ぼかし」と言えばこのフィルタのことを指し、最もよく使われるものです。
とのことで、下記のサイトはそれぞれのフィルターだけでなく、いろんなパターンでのぼかしが説明していてとてもわかりやすかったです!私もこれからぼかしを利用するときに見返して参考にしようと思います🐧
人物の肌補正
世の中に出回っている俳優さんの広告写真などは100%肌補正がされていると思ってよいでしょう。制作現場でも補正前との違いに驚く人もいるようです(;^ω^)【スポット修復ブラシ】を使ってニキビ跡や虫刺されを除いて、ファンデーションのような仕上がりにすることができます。
写真の合成で気にしたいこと
合成する前に考えるべきことは、合成する素材同士のコンディションをそろえてから合成するということです。切り抜きだけではなく、影など背景となじませることも考えるべきポイントとなります。
素材の切り抜き
どこまで細かく切り抜くかは背景や仕上がりの細かさによります。細かく切り抜くに越したことはないですが、仕上がりに応じて切り抜くことは意識した方がよいです。失敗談ですが私もデザイナーの切り抜きのフォローを担当していましたが、初めは程度がつかめず、アプリのクーポン画像に使用する小さいサイズかつ単色背景のものでも細かく切り抜いて時間がかかってしまっていました。拡大縮小をうまく活用しつつ、遠くから見たり近くから見て違和感がないように調節することが大切です。
選択とマスクとグローバル調整
ある程度選択繁栄を指定したら【選択とマスク】で調整しますが、境界線の調整に便利なのが【グローバル調整】です。ここでは選択範囲の境界線を調節することができます。
使用例については下記サイトが初心者にもわかりやすかったため、実際に切り抜きをする際に気になる方はぜひご確認ください!個人的には境界線は気持ち内側に入っていたの方がきれいに切り抜ける印象があるので、様子を見つつエッジをマイナスにして調整するのがおすすめです🐧
上級者向けにはPhotoshopのいろんな機能を利用して調節することも検討したいですね。下記はより自然に切り抜けるテクニックが画像付きでわかりやすく記載されていたので、グローバル調整でも切り抜きに違和感が出てしまう場合にはぜひ見てみてください!
複数のアプリを使い分けよう
Photoshopでも苦手とするものがあります。レスポンシブデザインを作成することや、余白部分の数値をとるといったデザインを作成するのは苦手です。パーツなどデザインが必要なものはPhotoshopで作成して、AdobeXDでLPをデザインするといった作成も現場では見てきました。特にXDは同時編集のしやすさというのもかなり魅力的なので、複数人で違うページの作業を進めたり、指示書の作成にも有効です。すべてをPhotoshopで作成しようとするのではなく、より効率が良いものを取り入れて作成をするとよいですね。
覚えておきたいショートカット
私が新たにPhotoshop内のショートカットで覚えたものを記載します。※Photoshop以外でもよく使うショートカットはPhotoshopでも使えることが多い(コピーなど)ので割愛します。
- Ctrl+Alt+R:選択とマスク
- Ctrl+J :レイヤーを複製
- Alt+Delete :描画色で塗りつぶし
- Ctrl+Delete:背景色で塗りつぶし
覚えておきたい用語・検索したこと置き場
ここでは私が実際に作業するときに必要そうなものを収集したサイトや用語を残しますので、気になる方いらっしゃればぜひご覧くださいm(__)m
- 包括光源:レイヤー効果で影をつける際にチェックをつけるかどうか選択できます。Photoshopでは基本的に同じ方向から影が入るようになっているため、独立した影をつけたい場合は「包括光源」のチェックを外す必要があります。
■Photoshop 影のつけ方
Photoshopで切り抜き画像に影をつけてなじませる方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
■人物の影のつけ方
影のつけ方のポイントがパターン別に記載しているので、簡単な影のつけ方からマネできそうです。
Photoshop 簡単な影の作り方3パターン + リアルな影など – パソコン生活サポート Pasonal
■Photoshop合成 コツ
画像を合成するときのコツと、違和感なく合成するコツが例を用いて書いているのでとてもわかりやすいです
〈Photoshop 合成〉画像と画像を違和感なく合成するテクニック | DESIGN TREKKER
■再度「選択とマスク」を実行
選択範囲を作成して選択とマスク画面に遷移して、OKにしたけどもう一度調整したい!と思ったときに使えます。最初はどこにあるかわからなくて焦りました…(;^ω^)
レイヤーマスクを選択するなどしてメニューから「選択とマスク」を実行すると、再び「選択とマスク」の操作画面に入ります。
選択範囲を微調整して、出力先にレイヤーマスクを選んでOKをクリックすることで、現在のレイヤーマスクに調整を加えることができます。
引用:Photoshopの「選択とマスク」の使い方 境界が複雑なものを切り抜く時に使う | カラーマネジメント実践ブログ 〜フォトレタッチの現場から〜
■photoshop カラーピッカー 画面外
もし私と同じように初心者でこのやり方を知らない人がいたら、色を選ぶ時短になるので絶対覚えてほしいです!「カラーピッカーってPhotoshopの中でしか色を持ってこれないのかな?色が欲しいサイトがあるけど、一度キャプチャをとって保存して、Photoshopに入れてからとらないといけないのかな」と超初心者なので思いました。でもさすがPhotoshop。そんなことはもちろん対応済みでした。これで参考にしたい色があっても簡単にもってこれます🐧
Photoshop スポイトツールで画面外から色を選択 - 北の国ウェブ工房
■photoshop テキスト 一部 効果
テキストを入力したとき、一部だけに効果を充てたい。レイヤーを分けるのが面倒くさい。そう思ったのですがそこは分けるのがセオリーだそうで。どうしたら簡単になるのかなと思っていたところ、テキストを分解するプラグインがあるようです!作業効率化のためにぜひ検討したいですね!
【神ツール】テキストを一瞬で分割するPhotoshopスクリプト - マルクリ道場
■反対色 検索
カラーコードを入れるだけで簡単に反対色と補色を知ることができる便利なサイトです。
PhotoshopでWebデザインを作成するとしたら
考えたいこと
Webデザインを作成するときに大前提として考えたいのは、コーディングをして完成であるということです。ただ見た目がよいデザインをするのではなく、きちんとコーディングができる状態のデザインをする必要があります。一つのカラムがどれくらいなのか、余白がどれくらいなのかを頭に入れながら作業をしたり、計算がしやすい、キリがよい数値に設定することも大切です。
アートボードについて
アートボードはPC/SPでわかれていたり、バナーのデザインなど、複数のサイズのものを作成するときに便利です。高さを伸ばしたいときには【切り抜きツール】を用いて縦を伸ばすやり方が便利です。背景は【レイヤー】の背景をべた塗りするとよいでしょう。(背景に装飾をつける場合は例外です)
ガイドについて
一からWebデザインをしたことがないので簡単な上部と横から引っ張るガイドしか知らなかったのですが、Webデザインを作成するときには便利な【新規ガイドレイアウトを作成】というものがあります。これはマージンや幅を指定することができ、ガイドをロックすることで常に意識したデザインをすることができるので便利です🐧
スマートオブジェクトの特徴
スマートオブジェクトにはたくさんの利点があります。動画編集においても、サムネイルを作成する際に役立つことがあると思いますのでご紹介します。
- 非破壊編集:画像の縮小・拡大に便利。画像は通常、小さくして元の大きさに戻すとぼやけます。しかし、スマートオブジェクト化しておけば画像を縮小して元にもどしてもぼやけることがありません。画像を大きくしたり小さくしたりする場合はスマートオブジェクト化することをおすすめします。※ただし元の画像より大きくするとぼやけてしまうため、スマートオブジェクト化する際は元画像の状態(MAX)でかけるようにしましょう。
- リンク設置:リンクで埋め込んだ元のPSDを編集すると、編集した内容が反映されるようになります。※元のフォルダの階層構造が変わるとリンクが切れてしまうため、注意しましょう。元に戻すとリンクも戻ります!
- 複製:シェイプと文字の組み合わせ(シェイプで作った図形の上に文字を乗せたものを一つのオブジェクト化する)もスマートオブジェクト化できます。こちらも一つのレイヤーとして扱うため、複製やリンク設置のように一か所を修正したらすべて反映されるといったデザインもできます。複数同じ要素があり、変更する可能性があるようなものはあらかじめスマートオブジェクト化しておくと後々時短につながります
- スマートフィルター:フィルターを何重にもかけることができたり、解除したりすることができます。マスクにたいしてかかるので背景だけフィルターをかけてぼかしたり…などの使い方もできます。
活用しよう!レイヤー検索
私は実務で使用していなかったのですが、今回勉強してはじめて使い方を知りました。レイヤーの検索窓で該当のレイヤー名で検索して絞ると、ほしいレイヤーだけが表示されるようになり、すべてのレイヤーに対して同じレイヤー効果をつけたいといった場合に【レイヤースタイルをコピー】すると一気に同じ効果を与えることができます。これは時短につながりますね☆彡ただしこれには後から編集がしやすいように、レイヤー名のつけ方にも規則性を持たせることを意識しておく必要があります。いざ検索しても、検索で出てこなくて探すことになれば結局手間なのでそれは避けたいですね。
まとめ
今回はPhotoshopの裏技や便利なツール、いざというときに役立つサイトなどをご紹介しました。私もまだまだ勉強中ですが、活用できるものを取り入れながら本格的にサムネイルの作成などに生かせたらいいなと思っています!
本日の学習部屋はここまで!お疲れさまでした🐧
次回はillustratorです。Photoshopより触ったことがないので不安ですが頑張ります(*^-^*)
*1:hoconiwa
Photoshopの画像加工が楽になる!Camera Rawフィルターを使った色調補正の方法|haconiwa|「世の中のクリエイティブを見つける、届ける」WEBマガジン
2023年2月2日確認
*2:Photoshopで写真をレタッチする方法,Photoshopで写真をレタッチする方法 | UX MILK,(2023年2月5日)
*3:【photoshop】選択とマスクで選択範囲を仕上げる,【Photoshop】”選択とマスク”で選択範囲を仕上げる | すきまのスキマ(2023年2月5日)