01. 環境構築
まずは、Photoshopをパソコンにインストールするところからガイドします。
Adobe社のCreative Cloudを契約する
Photoshopを本格的に使うにはAdobe社が提供するCreate Cloudプランに契約する必要があります。価格は変動する可能性がありますが、カリキュラム作成時は月々980円（税別）となっており、使用をやめたくなったらいつでも止められます。（年間一括払いもあります）
クレジットカードで購入する方
クレジットカードが使える方は、どのプランでも問題なく契約できます。今回は最低価格であり、かつコストパフォーマンスの良い「フォトプラン」を契約しておいてください。
- 次のURLにアクセスしてください。
Creative Cloudの価格とメンバーシッププラン - フォトプランを見つけて「購入する」ボタンをクリックします
- メールアドレスを入力して「続行」（または「支払い手続きへ」）ボタンをクリックします。
- クレジットカードを入力して、注文を確定してください。
購入後にパスワードの設定をします。これはすぐに必要になるので、覚えておいてください。
コンビニ払いや銀行振込などで購入する方
フォトプランはクレジットカード以外では契約できません。それ以外の支払い方法をご希望の場合は、Photoshop単体プランで契約します。フォトプランでもPhotoshop単体プラン（年間一括払い）でも、Photoshopの機能は全て使えるので問題ありません。
- 次のURLにアクセスしてください。
Creative Cloudの価格とメンバーシッププラン - Photoshop単体プランを見つけて「購入する」ボタンをクリックします
- メールアドレスを入力して、年間一括払いを選択してから、「支払い手続きへ」ボタンをクリックします。
（価格は変動している可能性があります） - 支払い方法を選択し、必要事項を入力して、注文を確定してください。
※ 添付画面右上の「契約」が「年間プラン（一括払い）」になっていないと、コンビニ払いや銀行振込が選択肢に現れないので、ご注意ください。
購入後にパスワードの設定をします。これはすぐに必要になるので、覚えておいてください。
Creative Cloudをダウンロードする
- こちらにアクセスします。
Creative Cloud デスクトップアプリケーションをダウンロードする方法 - リンク文字の「Creative Cloud Web サイト」をクリックすると、ダウンロードが開始されます。
- ダウンロードしたファイルをダブルクリックしてください。
- 次のような画面が開くので、インストーラーをダブルクリックしてください。（添付画像はMacのものですが、Windowsでも似たような手順となります）
- 確認のウィンドウが表示されるかもしれませんが、「開く」や「OK」のボタンをクリックしてください。
- パソコン内のファイルにアクセスする確認が表示されるかもしれませんが、「OK」をクリックしてください。
- さらにインストール許可を求められるかもしれませんが、ここもOKをクリックしてください。
- インストールが終わるのを待って、Creative Cloudにログインします。まずはメールアドレスを入れます。
- 次に購入時に指定したパスワードを入れます。
これでCreative Cloudにログインできました。もう少しでPhotoshopのインストールが完了します。
Photoshopのインストール
Creative CloudにはAdobe社の製品がすべて掲載されています。Photoshop（またはPhotoshop CC）を見つけて、インストールしてください。しばらくするとインストールが完了し、パソコンのアプリケーション一覧にPhotoshopが追加されているはずです。
インストールが完了したら、Photoshopを立ち上げてみてください。
次に、Webデザイナーが最初にやっておくと効率が良い設定を一緒に確認していきましょう。
ウェブデザイン用の設定
文字（フォント）のサイズ単位を変更しておきます。ウェブデザインをするときは、フォントのサイズは「ピクセル」という単位で表現します。しかしPhotoshopでは初期設定で「ポイント」という単位が使われています。これを直す方法は次のとおりです。（WindowsとMacで多少手順が異なります）
- Windows）画面一番上にあるメニューバーから「編集」をクリックします。次に「環境設定」を選び、さらに「単位・定規」を選択します。
Mac）一番上にあるメニューバーから「Photoshop」をクリックします。次に「環境設定」を選び、さらに「単位・定規」を選択します。
（添付画像はMacの画面です）
定規と文字の単位を「pixel」（ピクセル）に変更して、OKを押します。
02. レイヤーとはなにか
さっそくPhotoshopの実践に移りたいところですが、その前に重要な概念について学んでおきます。
それは「レイヤー」という考え方です。まずは公式サイトの解説を紹介しておきます。
Photoshop のレイヤーは、積み重ねられた透明フィルムのようなものです。
Adobe公式サイト「Photoshop レイヤーについて」（※1）
ここにあるように、レイヤーとは透明フィルムに似ています。次のイラストを見てください。1枚に見える画像でも、実際はこのように複数枚のレイヤーで構成されています。
レイヤーの重なり順を変えると次のようになります。右下の画像のコーヒーカップと時計の順番が変わっています。
重なり方を変えるだけではなく、位置や大きさなどもカンタンに変えることができます。
硬い言い方をすると、レイヤーのおかげでカメラなどのアイコンと女性の写真、それぞれの独立性を高めることができるのです。独立性が高いおかげで、他の画像を移動させずにコーヒーカップだけを移動させたり、女性の写真だけをモノクロにしたりするといった処理ができるのです。
結果的には1枚の画像になるのですが、加工作業が非常に効率的になる仕組みこそがレイヤーなのです。
Photoshopではレイヤーをたくさん作ることになります。レイヤーを重ね合わせて、様々な合成や加工を行っていくのです。
03. 準備運動
初めてPhotoshopを開くと、あまりにもたくさんのメニューやアイコンがあることに圧倒されるのではないでしょうか。最初からすべてを覚える必要はありません。使うタイミングで各機能について覚えていきましょう。プロのデザイナーでも、Photoshopの機能を100%理解している人は少ないでしょう。まずは今回作るデザインカンプで使っていく機能だけに集中していきます。
まず準備運動として初歩的なPhotoshopの使い方を一緒に見ていきましょう。
新規ファイルを作成する
次の方法で新しいファイルを作ります。
- 画面上部のメニューから「ファイル＞新規…」をクリックする
- 初期状態のサイズや色の解像度などを設定します。あとからでも変更可能です。特に高さは作業してて足りなくなったり余ったりして変更されることがよくあります。ウェブの画像のほとんどは解像度72となっています。（印刷物だと300や350が多いです）ウェブは解像度72で統一していきましょう。その他の値も添付画像と合わせておいてください。
- 無事、新しいファイルができました
画面の名称（いますぐ覚える必要はありません）
Photoshopは複雑なツールなので、画面内に様々なメニューがあります。これらが配置されている場所には名称がありますので、紹介しておきます。これは実作業には影響しないので覚える必要はありませんが、例えばメンターと会話する際などに使われることもあるので、一度目を通しておいてください。
| 色 | 正式名称 | 略称・別名 | 機能 |
| 赤 | アプリケーションバー | メニュー、メニューバー | ファイルの保存や、サイズ変更など、アイコンだけでは表現できない複雑動きをまとめてあります。 |
| 橙 | オプションバーコントロールパネル | オプション、オプションバー、オプションパネル | 現在選んでいるツールのオプションが表示されます。ツールを変更するたびに、オプションも変わります。 |
| 緑 | ツールパネル | ツール、ツールバー、ツール一覧 | 最も頻繁に使うパネルです。Photoshopのメイン機能をアイコン化して並べてあります。「初めての人に分かりやすい」のではなく「慣れたら分かりやすい」パネルです。アイコンの上にカーソルを乗せると、機能名が遅れて表示されます。 |
| 黄 | ドキュメントウィンドウ | ドキュメント | 実際に作業を施す部分です。オプションパネルとドキュメントの間にあるタブで、ドキュメントを切り替えることができます。 |
| 青 | ○○パネル（例えばレイヤーパネルなど） | レイヤーパネルならレイヤーと略すこともあります | 画面右に配置されている各種パネルになります。最も頻繁に使われるパネルはレイヤーパネルでしょう。その他にもたくさんのパネルが用意されています。タブで表示を切り替えることができます。 |
これら名称を覚えてもPhotoshopの使い方に慣れるわけではありませんので、いますぐ覚える必要はありません。パーソナルメンターとの会話で「ツールパネルで選択ツールに持ち替えてください」と言われて分からなかったとしても、「ツールパネルってどこでしたっけ？」と聞いてしまって大丈夫です。「カリキュラムに書いてあったのに覚えてない」と気にはせず、どんどん質問しましょう。
また、カリキュラム内でも便宜上これらの名称を使いますが、用語にマウスを乗せると解説が出るので都度確認できます。
※ パネルは自由に動かすことが出来るため、すべての人のツールパネルが画面左側にあるとは限りません。ただ、受講期間中はツールパネルの位置を動かさずにおくほうが学習効率が良いでしょう。
不要なパネルを閉じてみる
Photoshopの準備運動として、あまり使用頻度の高くないパネルを閉じておきます。もしすでにパネルを閉じたことがある人は飛ばしても大丈夫です。
ここでは「CCライブラリ」というパネルを閉じてみます。これは初期設定だと表示されているパネルです。（初期設定状態でない方は、すでに非表示になっている可能性があります）
もし「CCライブラリ」パネルが見つからない場合は、他のパネルでも構いません。このあと閉じたパネルを再び表示する方法も紹介しますので、何を閉じてしまっても大丈夫です。
- パネルの右上にあるメニューアイコンをクリックします。
- メニュー一覧から「閉じる」を選んでください。
- パネルが閉じられましたことを確認します。
無事、パネルを閉じることができたでしょうか。続けて「色調補正パネル」も閉じておきましょう。
再びパネルを開きたい場合は、メニューバーのウィンドウから該当のパネルを選択するだけで、自動的に配置されます。
Photoshopに慣れてくると、だんだん「自分がよく使うパネル」が限定されてきます。そういった慣れてきた人にとっては、このようなカスタマイズ機能はありがたいものです。
Photoshopは基本的に「慣れてきた人にとって使いやすい」ソフトウェアになっています。そのため慣れるまでが大変ですが、一歩ずつ理解を深めていきましょう。
ツールとレイヤーを使ってみる
デザインカンプに取り掛かる前に、カンタンな操作を経験しておきます。こちらもすでにPhotoshop利用経験がある方は飛ばしても大丈夫です。
- まずツールパネルから、長方形ツールを見つけてください。見つけたらクリックして持ち替えます。Photoshopでは、ツールを変更することをよく「持ち替える」と表現します。
- マウスカーソルをドキュメントウィンドウの上に乗せてください。すると、カーソルの外観がいつもの矢印ではなく、「十字の中央に点」があるマークに変わっていると思います。
- ドキュメントウィンドウ内の白紙の上でマウスをクリックしたまま、右下に移動してみてください。これから作る図のサイズを調整できます。
- マウスを離すと、3つのことが同時に起こります。
①ドキュメントウィンドウ内に長方形が作られました。
②さらに「プロパティ」（旧称は「属性」）という長方形ツールと関連が強いパネルが勝手に開かれました。
③同時に、レイヤーパネルにも「長方形1」という新しいレイヤーが追加されていることも確認してください。「長方形1」レイヤーのすぐ下にある「背景」レイヤーと比べると、少し色が薄くなっています。これは「長方形1」レイヤーが選択されていることを表しています。 - 長方形に色を付けてみます。まずオプションバーの「塗り」をクリックしてください。
- ミニパネルが開かれるので、①ベタ塗りを選択してから、②カラーピッカーをクリックします。
- カラーピッカーが開いたら、下部にある入力欄に0を6回入力します。「#000000」というカラーコードは、黒を意味しています。入力したら右上にある「OK」ボタンをクリックします。
- 真っ黒な長方形が完成しました。
長方形が作れましたね。
最初分かりづらいのですが、Photoshopでは「どのレイヤがー選択されているか」が非常に重要になります。
この重要さを体感するためにも、もう１つレイヤーを作っていきます。一緒に手を動かしてみてくださいね。
- まず背景レイヤーを選択してください。
- ツールパネルから、長方形ツールを見つけて、長押しします。すると、他の選択肢が出てくるので、楕円形ツールを選択します。
長押しは分かりづらいので、ツールパネル全体が写った大きめの画像を掲載しておきます。 - 長方形のときと同じように、ドキュメントウィンドウ内の白紙の上にマウスカーソルを動かして、適当なサイズの楕円を作成します。このときShiftキーを押しながらサイズを調整すると、縦と横の比率が変わらないようにできるため真円が描けます。
- マウスを離すと、円が描けます。レイヤーパネルに「楕円形1」というレイヤーが追加されていることを確認してください。
円が描けました。レイヤーパネルには、背景レイヤーと長方形1レイヤーと楕円形1レイヤーの3つのレイヤーがあると思います。
これで先述した「選択されているレイヤーが重要である」という意味を体感する準備が整いましたので、以下の手順を実施してみてください。
- 楕円形1レイヤーが選択されている状態のまま、ツールパネルから移動ツールを見つけて持ち替えてください。（一番上にあります）
- 移動ツールを選択すると、オプションバーに「自動選択」というチェックマークが現れました。デフォルトではチェックが入っていますが、チェックを外しておきます。（いつでもチェックを戻すことができます。今は理解のためにチェックをいったん外します）
- では、マウスカーソルを楕円形の上に持っていって、横や縦にドラッグして動かしてみてください。
- （注：この手順は敢えて失敗します）次に、そのまま続けて黒い長方形の上にマウスカーソルを持っていって動くか試してみてください。
おそらく長方形が動かず、楕円形が動いてしまうと思います。これは、Photoshopではツールで操作する対象が、
「マウスが乗っているレイヤー」ではなく、
「レイヤーパネルで選択されているレイヤー」だからです。
直感的にはマウスが乗っている長方形が動いてほしいところですが、長方形1レイヤーが選択されていないと、長方形1は動きません。レイヤーパネルで楕円形1レイヤーが選択されている限りは、移動対象は楕円形1なのです。 - では、レイヤーパネルで長方形1レイヤーを選択してください。そのあとに、ドキュメントウィンドウ内の長方形をドラッグして自由に動かしてみてください。
今度は動かせましたね。
このようにPhotoshopでは「どのレイヤーが選択されているのか」を常に意識して作業を行う必要があります。この感覚は最初はなくても当然ですので、作業経験を積みながら習慣化していきましょう。
最後に長方形1レイヤーと楕円形1レイヤーを削除しておきましょう。
- レイヤーパネル右下のゴミ箱をクリックすると削除できます。
ヒストリーパネルを見てみる
レイヤーを移動したり、レイヤーを削除したりすると、行動の履歴がPhotoshopに記録されます。この行動履歴を見るには、ヒストリーパネルが便利です。また、閲覧するだけではなく、作業を元に戻すこともできます。非常に強力な機能ですので、一緒に見ておきましょう。
- ヒストリーパネルのアイコンをクリックします。（閉じてしまっているかたは、メニューバーのウィンドウから「ヒストリー」を見つけてクリックしてください）
- レイヤーを削除した履歴を取り消して、元に戻したい場合は、その1つ上の行動をクリックしてください。添付画像とは行動名が異なるかもしれませんが、ためしにどの行動でもいいので、現在選択されている（ハイライトされている）行動よりも上の行動をクリックしてみてください。
- 選択した行動よりも下にあった行動名がグレーアウトされたかと思います。グレーアウトされた行動は取り消されたことを意味しています。
行動の取り消しは、ショートカットも覚えておくと便利です。
| Windows）キーボードの「Ctrlキー」と「Z」を同時に押すMac）キーボードの「commandキー」と「Z」を同時に押す |
プロパティ（属性）パネルを移動してみる
さきほど長方形や楕円形を作った際に自動的に表示された「プロパティパネル」は、レイヤーパネル同様、使用頻度の高いパネルです。この機会に見やすい場所に移動してみます。
すでにPhotoshopを自分なりにカスタマイズしている方は飛ばしても大丈夫です。Photoshopの画面が初期設定のままの方は、一緒にプロパティパネルを動かしてみましょう。
（プロパティパネルを閉じてしまった方は、メニューバーのウィンドウを選択して、パネル一覧から「プロパティ」を見つけてクリックしてください）
- 属性パネルのアイコンをドラッグして、「カラーパネル」などが配置されているエリア（タググループと呼びます）にドロップします。この際、正しい位置までドラッグすると、タググループが青い枠で囲われて表示されます。この青い枠が出ている状態でマウスを離してドロップしてください。
（すでに初期設定の状態から画面をカスタマイズしている方は、この添付画像とは異なる配置になっている可能性があります） - プロパティパネルとレイヤーパネルが見やすい状態になりました。
Photoshopが初めての方には、プロパティパネル（旧称は属性パネル）とレイヤーパネルが見やすい構成がおすすめです。後々慣れてきたら、自分なりに画面をカスタマイズしましょう。
カンバスのサイズを変更する
横幅と違って、ファイルの高さは作業が進むと変わるものです。ファイル自体の高さを変えるには、「カンバス」のサイズを変更する必要があります。
- メニューバーの「イメージ ＞ カンバスサイズ」を選択します。
- サイズを指定して、どこを基準にしてサイズを詰めたいか（または広げたいか）という基準位置を指定します。これはわかりにくいですよね。例えばカンバスの下側の減らしたいときは、基準位置を一行目のニ列目に指定します。できれば何回かカンバスサイズの変更を行って、基準位置の指定を変えるとサイズがどう変わるか体感してください。
これで準備運動は終わりです。次からはデザインカンプの制作に戻ります。