WEBデザイン
Adobe Photoshop -基礎編-
INDEX
目次

0. できるようになること

Adobe Photoshopは写真家、グラフィックデザイナーなどの「画像のプロ」に編集ソフトとして愛用され、WEB制作の分野でも愛用されています！

以下、Adobe Photoshopを用いて行うことができます！

==

  • 写真編集
  • 写真レタッチ・加工・合成
  • グラフィックデザイン
  • 文字・イラスト・シェイプ
  • 広告デザイン

==

1. 学習のポイント

  • Adobe Photoshopは、直感的に操作することが可能であるため、「まずは気楽に試してみる」という精神が大切です。
  • Adobe Photoshopは Adobe社の製品のため、将来的に他のAdobe製品（IllustratorやAdobe XD等）を操作する上でも活きてくるので、Adobe製品を将来的に操作していきたいという人はぜひ操作に慣れておきましょう！
  • Adobe公式サイトでは、基本操作をマスターするためのチュートリアルや無料のオンライン講座が非常に充実しているため、それらを用いて学習を進めていくのが最も効率的です。

2. Adobe Photoshop 導入編

a. Adobe Photoshopの概要

Adobe Photoshopとは、Adobe（アドビ）社が提供するビットマップ画像編集アプリケーションソフトウェアです。

Adobe社は他にも、IllustratorやXDなど様々なアプリケーションをサブスク型で提供しており、Photoshop以外のAdobe製品との互換性の高さから、案件獲得の現場でPhotoshopでの納品を指定される場合もあります。

Adobe Photoshopの料金体制

価格とプラン

価格とプラン
Adobe Photoshop は7日間の体験後、月額2,728円（税込）でご利用できます。（Illustratorですでに体験を利用した方は利用できない場合がございます。）

Adobe社のコンテンツは比較的料金は高いですが、高品質です。

もし、Adobe製品の案件を多くこなしたいという方は、「Creative Cloud」がおすすめです！

「Creative Cloud」コンプリートプランは

==

  • Photoshop、Illustrator、Premiere Proをはじめ、20以上のクリエイティブアプリが使い放題
  • 20,000以上のフォント、100GBのストレージなどのサービスも追加料金なく利用可能

==

と様々なメリットがあります！

一方で、料金は月々6,480円（税込）と高いので、Photoshopの操作方法を短期的に学びたいという方は7日間の無料体験を利用いただくか、
Adobe Photoshopは、希望者向けの追加課題となっているため、料金は自己負担となります。 ですので、無料体験期間を利用して一気に操作方法を身につけるのがオススメです！

b.実際の案件を見てみよう

(4347)

via www.lancers.jp
WEBデザイン・Youtubeなどのサムネイル作成などの中にはAdobe Photoshopは用いなければできない案件は存在します。

また、Crowdworksなどでは「Adobe Photoshopで」と指定されている案件もたくさんあります。
ポイント
  • Adobe Photoshop指定の案件が獲得できるようになる。
  • FigmaとPhotoshopなど複数スキルを使えるとその分幅広い案件が獲得可能になる。

c. 今後の学習の進め方

  • まずこのページでは、Adobe公式サイトのチュートリアルを用いて基本的な操作方法を身につけていただきます。
  • その後、さらに踏み込んだ操作方法について Adobe Photoshop -実践編- で学んでいただきます。
手を動かして学習し、最後までやり切ることで、確実に現場レベルのスキルが身に付きます！始めたからにはやり切りましょう！

3. Adobe Photoshop　初級編

a. まずはログインしてみましょう！

Adobe Photoshop無料体験の始め方

Adobe Photoshopでは無料体験があるのでまずは上記ページに沿って無料体験を始めましょう！

Illustratorですでに無料体験を使用している場合には使用できない場合がありますが、その場合には課金する必要があります。（手順は上記のページと同様に進めることが可能です。）

Adobe Photoshopを学習する場合の料金は受講生様本人にご負担いただいております。ご了承いただけますと幸いです。

b. 使用する教材

Adobe公式ページで掲載されているチュートリアル、及び無料のオンライン講座動画を使用いたします。

Adobe Photoshop自体、操作が直感的でわかりやすいため、基本的な操作方法を網羅的かつ順序立てて説明している公式教材が学習を進める上で最も効率的です。

必ず各動画、各セクションごとに実際にPhotoshopを操作しながら学習を進めましょう。手を動かすことで操作方法が体に染み付きます！

c.Adobe Photoshopの基本動作を用いて広告バナーを制作してみよう！

以下の動画を見て、実際に手を動かして、広告バナーを制作してみてください！

この動画によって、「Adobe Photoshopによってどのように作品を作るのか」を理解することができます。

以下のページから視聴可能な動画の4つのポイントを抜粋し、確認チェックを用意しています！

必ず手を動かしながら動画を見て、このページで復習しましょう！

始め方

始め方

Step1：Photoshopで何を作るのか、ゴールを決めましょう！

Photoshopでできることが5つありました。まずはそれを思い出してみましょう！

【確認】Photoshopでできることとは？
  • 写真編集
  • 写真レタッチ・加工。合成
  • グラフィックデザイン
  • 文字・イラスト・シェイプ
  • 広告デザイン

Step2：「新規ファイル」または「開く」で作業を始めましょう！

「新規ファイル」または「開く」のいずれかは”何をするか”によって決まります！

下の図を参考にしてください！
役割
新規ファイル
  • グラフィックデザイン
  • 文字、イラスト、シェイプの単体デザイン
  • 広告デザイン
開く
  • 写真編集
  • 写真レタッチ、合成、加工
※SNSで投稿する場合は除く
おすすめの解像度
  • WEB用：72~96ppi
  • 印刷用：300ppi
モニター用の選択すべきカラーモード
RGBカラー
印刷用の選択すべきカラーモード
CMYKカラー

Step3：作業を始める準備ができたら作業を始めましょう！

以下の素材を使い、手順に沿って広告バナーを制作してください！

素材画像

┗ 作成の際に必要となるので、ダウンロードしましょう。（クリックでダウンロードできます。）

素材画像

作業を始めるまでの手順を説明してみましょう！
  1. 画像をドラッグして、「Enter」を押す
  2. 「クイック選択ツール」で切り抜く
  3. 「移動ツール」を選択して、ドラッグして移動させる
  4. 「横書き文字ツール」で文字を入れて、右上の丸ボタンを押す

Step4：完成品の「保存」と「書き出し」をしてみましょう。

基本的に「保存」と「書き出し」両方しておきましょう！！
保存の手順
  1. ファイルから保存を押す
  2. コンピューターかクラウドに保存するか決める
  3. OKを押して完了✨
書き出しの手順
  1. 1.ファイルから書き出し形式を選択
  2. 2.形式をJPGにして、画質を決定
  3. 3.OKを押して完了✨

b. 画面の見方と役割を覚えよう

以下の動画を見て、画面上のどの場所で何ができるのか、またPhotoshopの基本的な操作について学習できます！こちらも同様に、”必ず” 手を動かしながら学習を進めましょう！

始め方　＃2

始め方　＃2

動画内で使用する写真素材

以下、動画の復習としてポイントをまとめているので、手を動かしながら動画を見終えたら復習として活用してください！

画面の見方と役割を把握しよう

要確認！抑えるべき５つのセクション！
抑えるべき５つのセクションまとめ
役割
ドキュメントウィンドウ
写真を配置したり、透明のキャンバス上で編集や描画を行うための作業スペース。
ツールバー
ツールと呼ばれるものが並び、キャンバスに手を加えるための機能がここに格納されている場所。
オプションバー
ツールバーで選んだツールの設定が細かくできるもの。
パネル
キャンバスに対して何か変更を加えたり、レイヤーと呼ばれる写真や紙のようなものの重なり合いが見れる場所。
メニューバー
キャンバスに対して何か変更を加えたり、レイヤーと呼ばれる写真や紙のようなものの重なり合いが見れる場所。
具体例で言うと、キャンバスに対して変更を加えたり、レイヤーの管理を行ったりする際に使用します。

c. レイヤーとレイヤーマスクについて学習し、使いこなそう！

「レイヤーとレイヤーマスクとは？」

となる方も多いと思います。実はレイヤーとレイヤーマスクはPhotoshop固有の言葉であり、この二つの機能によって実現できることの幅がとても広がります！

以下の動画を見ながら実際に手を動かして、レイヤーとレイヤーマスクをマスターしましょう✊

始め方　＃３

始め方　＃３

以下、動画の復習ポイントです。復習にご利用ください。

レイヤーとレイヤーマスクについて

複雑な画像編集をする際、レイヤーとレイヤーマスクは必須なので必ず押さえておきましょう！

＜レイヤーとレイヤーマスクについてまとめ＞
説明
メリット
注意点
レイヤー
層という意味。その層を何枚も重ねて作品を作り上げる
  • やり直しが効く
  • １枚のレイヤーのみに反映できる
  • レイヤーを選択しているか
  • レイヤーの順番
レイヤーマスク
レイヤーに直接手を加えずに、レイヤーを覆って使うことができたり、そのレイヤーの一部を見えるようにしたり、見えなくしたりすることができる機能。
白と黒を用いる。
  • やり直しが効く
  • 切り抜きや一部だけ反映させたい時に便利
  • 選択しているか
  • 白または黒で塗っているか

4.Adobe Photoshopの基本動作を復習しよう！

基本動作は反復練習によって定着します。少しでも不安な操作を無くす意味でも、ぜひ取り組んでみましょう！

a.使用教材①

動画教材①

動画教材①

練習用の素材

上記の動画教材、画像を使い、実際に手を動かして復習してみてください！

短く動画が区切られているので、ポイントごとに復習しやすいと思います。

また、この動画で新たに身につけることが出来るスキルもあるのでそちらもcheckしてください！
復習すべきスキルの確認
  • Photoshopの画面構成について
  • レイヤーについて
  • 保存の仕方について
新たに覚えるスキル
  • レベル補正
  • トーンカーブ
  • 色彩・彩度
  • 解像度
  • PhotoshopについてのTIPS

b. 使用教材②

動画教材②

動画教材②
上記の動画教材を参照してください！※ 今回は手を動かさなくて結構です。

今回はPhotoshopの最大の特徴とも言えるレイヤー・レイヤーマスクについてより高度なスキルまで解説しています。

Photoshopによってどのようなことが出来るのか、しっかり確認しておきましょう！
復習すべきスキルの確認
  • レイヤーマスクについて
  • 文字入力
  • 写真の合成の仕方
新たに覚えるべきスキル
  • 修復ブラシツール
  • マスクとは
  • レイヤーに関する高度なスキル

c. 使用教材③

これまでは動画を見て、基本操作についてインプットしてきたと思います！

以下の教材はショートカットキーについて詳しく書いているものです！
ショートカットキーは作業の生産性を上げるために有効活用しましょう！

ショートカットキーについて簡単に解説しているものなので、手を動かさず読んで復習しましょう！

「ここ、不安だな。。。」

「あんまり覚えてないな。。」

と感じた場所は再び動画に戻って復習しましょう！

使用教材③

使用教材③
┗ ショートカットキー紹介がメインとなっています！

5.Adobe Photoshop　基本的スキル

「もっとこだわったデザインを作成したい！」

「もっと資料のデザインをあげたい！」

という方向けにさまざまなスキルについてのチュートリアルが用意されていますので、それぞれのご紹介をします！！

※ 必須ではないですが、たくさんのスキルを身につけていた方がデザインの幅は広がります！

写真の空を置き換える方法

写真の空を置き換える方法
写真に写る機会が多い空。このスキルを活用する機会はたくさんあると思います。

たとえ、撮影された際の天気が良くなくても、このスキルを活用して写真の雰囲気にあった空に設定しましょう！

ポートレイトを思い通りに調整

ポートレイトを思い通りに調整
iPhoneなどのスマートフォンにもポートレートモードが搭載されるようになり、このスキルの需要は高まってきています。

ぜひマスターしましょう。

画像の解像度を上げる方法

画像の解像度を上げる方法
Photoshopの「スーパー解像度」を使⽤すると、元の画質を保持しながら、画像の解像度を縦横それぞれ2倍、総面積4倍まで拡大することができます！！

Adobe Photoshopならではの機能で写真を美しく仕上げましょう。

写真の不要な人や物の消し方と構図を変える方法

写真の不要な人や物の消し方と構図を変える方法
「写真を見返してみると余計なものが写っている…」
「これが写っていなければいい写真なのに…」

そんなことよくありませんか？

このスキルを用いれば、一発で解決できちゃいます！

無料素材で制作効率アップ

無料素材で制作効率アップ
Adobeにも写真素材があるので広告などを作る際はぜひご活用ください！

画像を自由な形に変形

画像を自由な形に変形
Adobe Photoshopのワープツールを使用すると、画像の特定の領域を直感的に変形させることができます！！

このスキルによってデザインの幅がかなり広がるので、確認しておきましょう！！
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH