4回目｜4月28日(木)29日（金）の授業復習ノート
テーマ
とにかくPhotoshopを使ってみよう
本日の素材ダウンロード（kiso_ps01.zip）
授業に出てきたキーワード
Photoshopの基本動作
・各部の名称
・ツールボックス
・コントロールパネル
・拡大縮小、スクロール、タブなど
ワークエリアの操作
・ドキュメントの作り方
・ビットマップ（ラスター）画像の特徴
・カラーモード（RGB）
・新規ドキュメントの設定
・保存 保存形式(Photoshop形式)
・ヒストリーパネルを使用する
・ブラシツール
・レイヤーパネル
などを実際に使用して、Illustratorとの違いを確かめる
Illustratorと使用感が違うポイント
・描画色と背景色
・選択範囲の作成・解除
・単位！ピクセル
・アンチエイリアス（アウトラインが「きざきざ」＆「ぼかし」）
4回目の宿題：ドット絵を描き、gifアニメを描き出す
小さな画面にドット絵をデザインする。
レイヤーを増やし、動きをつける。
・画像の大きさ：幅20px 高さ20px
・カラー形式：RGB
・ファイル名と保存形式：「自分の学籍番号と名前01.gif」
・いったん、「自分の学籍番号と名前01.psd」で保存する。
・タイムラインで動きをつけ、「.gif」を描き出す。
・数量：１点以上。
・提出：Google Classroom4回目の宿題ボックス
04-01/光の粒をタイルに置き換えたビットマップ
Photoshopで扱う画像をビットマップ「Bitmap」画像といいます。
写真やイラストなど、微妙な色の階調を表現するのが得意な画像です。
ビットマップ画像は、画面をタイルのような細かいマス目に分けて、1枚1枚のマスに色を指定して表現しています。
ビットマップ画像を大きく拡大すると、モザイクのような正方形の集合であることが確認できます。
曲線も、ひとますひとますを四角を塗り分ける表現です。四角のつなぎ合わせてカーブを作ろうというのですから、そのままだと、どうしてもじゃぎじゃぎした感じになってしまいます。
このじゃぎじゃぎ感をふせぐため、Photoshopには「アンチエイリアス」という機能が働いています。
アンチエイリアスは線と地色の中間の色を自動的に何段階か作り、濃い部分と背景色の境にうすく敷き、じゃぎじゃぎした感じをソフトに見せる効果です。
（この効果は入れたり切ったりできます。用途によって、オンにしたりオフにしたりして使用します。）
Illlustratorで扱ったベクター「Vector」画像は別の成り立ちでできている画像です。
ベクター画像は点と点を結ぶパス（線）に色や効果をつけたものです。ですから、どんなに拡大しても、線のアウトラインはじゃぎじゃぎになることがありません。それから、アウトラインの内側の塗りは、ムラのないフラットな表現です。
ムラなくくっきり見せなくてはならないロゴマークやフォントは、ベクターデータで製作したほうが美しく、使いやすいのです。
また、面積によって、データ量が大きくなりません（アンカーポイントの数や効果の複雑さでデータ量は増えます）。
このため、精度が求められる精密さが要求される印刷の版下データなどはベクター画像が適しています。
Webや映像、印刷など、 いろいろな仕事現場では、素材画像をつくるときも完成データを作るときも、ビットマップ画像とベクター画像を必要に応じて使い分けています。
それぞれの良さを理解した上で、使いやすいデータを作れるようになってくださいね。
04-02/Photoshopの使い道
Photoshopとはどんなソフトなのでしょうか？
いろんな機能が満載のPhotoshop。
いろんな仕事人がPhotoshopがなくてはならない毎日を送っています。
それぞれの仕事をする人がいろんな考えを持っておられると思いますが、
わたしの考えは次のようなものです。↓
代表格を3つ挙げるとしたら、
①描画（紙やキャンバスに絵を描くのと同じようにお絵描きをする。「ドローイング」）
②修正と加工（もとの写真の色や形をより美しく修正、または加工。「レタッチ」といいます）
③合成（あるものとあるものをくっつけて新クリエイト。「コラージュ」といいます） この3つにつきるかなあと思います。
初めてのPhotoshopの授業である本日は、描画の練習を体験してみましょう。
04-03/イラレとフォトショの違い
Photoshopのインターフェイスはイラストレータとよく似ています。
よく似ているからこそ、間違えやすい点がいくつかあります。重要な違い4点を先に紹介しましょう。
①選択ツール
Illustratorはパスをクリックして選択しました。
でもPhotoshopは「選択範囲を先に作って」切り取ったり、加工をしたりします。
イラレのように、点の一個目、線の一本目からクリエイトするツールではなく、「素材から加工したい部分を選んで変更する」という使い方をします。
Photoshopの選択の方法は一つではありません。
写真からある色だけを取り出したり、写真の一部分の形を選ぶために、いろんなクリエーターが自分のお気に入りの方法を持っています。
「どれだけ自然に見えるように綺麗に選べるか？」という技を持っているかどうかは、仕事の質そのものです。
選択範囲を作る有名なティップスだけで、ざっと100種類以上の方法があります。
ここがIllustratorとまったく違います。
②移動のためのツールが選択ツールと別にある
ツールボックスの一番上にあるのが移動ツール。
「レイヤー」を選択したり、「レイヤー」を移動するために使用します。
イラレの選択ツールと同じ動作はこのツールで行います。
③レイヤーパネル
Illustratorは何かを描くと、1つのものにつき1枚、なにもしなくてもレイヤーが生成されました。
ところがPhotoshopは違います。
自分で新規レイヤーを作り、新しいレイヤーに加筆をしていかなくては、上書きされてしまいます。
アナログの紙と同じ使用感です。
紙にいったん絵の具が吸い込まれてしまうと、もう、元の色にもどりません。
レイヤーの順番や名前のつけ方、管理も重要な仕事のキーポイントとなります。
効果や加工の作業結果もレイヤーとして残すことができます。
また、レイヤーに簡単にマスクを作ることもできます。
複雑な合成を手早く行う機能が満載されています。
④パスは「マスク」のためだけに
Illustratorはパスを作成するためのソフトといっていいでしょう。
作成したパスに色をつけたり、線を変えたり、パス自体の形を変えたりして、新しいクリエイトをしました。
Photoshopでパスは何かを選んだり、効果をかける範囲を作るための影の存在となります。
パスは、たった一つの目的だけに使用されます。
それは「マスク」のため。「マスク」とは「かくす」機能です。
パスは選択範囲を作るためのものと決まっているため、Photoshopでは「クローズパス」のみが使用されます。
パスが格納される場所もレイヤーパネルではありません。
レイヤーからは見えない場所に「パスパネル」という、パス専用のパネルがあり、そこに格納されます。
Illustratorで「選択ツール」と呼ばれていた、黒矢印、白矢印ツールも、Photoshopでは、「パス選択ツール」「コンポーネントパス選択ツール」という長ったらしい名前になっていて、ツールボックス内での位置も違います。
04-04/選択範囲と塗りつぶし
「azarashi01psd」を開き、lessonフォルダーの中に今日の日付のフォルダーを作り、別名保存しましょう。
アザラシのイラストに水玉の背景をつけてみます。
絵のある部分を「キャンバス」といいます。
このドキュメントの背景は透明なので、チェックになっています。
①新規レイヤーを作り、一番下の階層にセットします。レイヤーに名前を「背景」とつけましょう。
②楕円選択ツールを持ちます。
shiftキーを押しながらドラッグすると、「正円」の選択範囲がつくれます。
びっくりするかもしれませんが、この点々で囲まれた部分がPhotoshopの「選択範囲」なのです！
選択範囲を解除するのは簡単です。
選択範囲ツールで、キャンバスの選択範囲外をクリック。
③描画色を選びます。
色はカラーピッカーから選択します。
ツールパネルの描画色（左上の色コマ）をダブルクリックすると、「カラーピッカー」が開きます。
カラーピッカーの使いかた
色は描画色と背景色の2色をキープすることができます。
この2色はキーボードのxキーを押すと入れ替わります。
ショートカット「alt＋backspace」キーで「描画色で塗りつぶし」
「ctrl＋backspace」キーで「背景色で塗りつぶし」です。
背景画像を作ってみようまとめ
04-05/Photoshopのレイヤー
レイヤーの機能もIllustratorとPhotoshopでは違いがあります。
①Illustratorはオブジェクトを何か描くと、自動的にレイヤーが追加されました。
レイヤーパネルの「新規レイヤー」ボタンを押すと、「レイヤー01」「レイヤー02」と、レイヤーが追加されましたが、これは、本当の意味の「レイヤー」そのものではありませんでした。「レイヤーフォルダー」のこともllultratorでは「レイヤー」と呼 ばれていたのです。
②Photoshopでは、自分で新規レイヤーを追加しないかぎり、選択されたレイヤー上にずっと加筆されます。
これは、紙に、どんどん書き込みをしていく状態と同じで、もしも、何かの上に何かを描いてしまったとき、元の色よりも、後に描き入れた色のほうが優先されます。
04-06/ブラシツール
描画ツールの代表、ブラシツールを試してみましょう。
500px×500pxで新規書類を開きます。
brush.psdという名前でlessonフォルダー内の今日の日付のフォルダーに保存しましょう。
ブラシツールを持ったら、コントロールパネルで、ブラシの種類と大きさ、硬さを選んでみましょう。
コントロールパネルの流量という欄は、インクの濃さです。小さな数字を入れると薄くなります。
いろいろな大きさ、色、硬さを試してみましょう。
ブラシを選択しているときのショートカットです。
・［キーをおすと、筆先のサイズが小さくなります。
・］キーを押すと筆先は太くなります。
04-07/選択ツールと移動ツール
Photoshopでややこしいのが、選択ツールと移動ツールのちがいです。
選択ツールは、あくまでもドラッグして、囲った範囲を選択範囲にするために使用します。
選択ツールで、選択範囲の点々をドラッグすると「選択範囲の移動」になります。
ドラッグすると選択範囲が生まれます。
その選択範囲の際にカーソルを当ててドラッグすると、選択範囲を移動することができます。
移動するのは選択範囲です。
選択したあと、移動ツールに持ち替えて、ドラッグすると、選択範囲に含まれていた部分のピクセルがもろとも、移動します。
レイヤーの選択を間違えると、間違えたレイヤー上のものが移動してしまうので注意。
Photoshopで選ばなくてはならないものは二つあります。
1, レイヤー
2、選んだレイヤー上の範囲
04-08/ドット絵を描いてみよう
■20px×20pxの大きさのドット絵をデザインしましょう。
・16px×16px、72ppi、カラーモードはRGB、カンバスカラーには白を選んで新規画面を開きます。
・グリッドを表示してみましょう。
「編集」メニュー→「環境設定」→「ガイド・グリッド」
Macの人は「Photoshop」メニュー→「環境設定」→「ガイドグリッド」。
・パネルがでます。
・「グリッド線→10px」、「分割→10」とします。
・グリッド線が出ないひとは、「表示メニュー」→「グリッドを表示」にチェックを入れます。
・定規が出ていない人は出しましょう。「ビュー」メニューの「定規」
・天地、左右ともに中心にガイドを引くと作業がしやすいです。「定規」のメモリから画面の中心にむけて、マウスをドラッグ。
・別名保存→「自分の学籍番号＋名前」→保存形式「Photoshop形式」を選ぶと、拡張子が「.psd」になる。
・保存場所はlessonフォルダー内に本日の日付をつけたフォルダーを作りその中へ。
・描画色と背景色に色を選びます。
・アンチエイリアスはなしにする。アウトラインを描くには鉛筆ツールが便利です。
先端の太さを１ピクセルに設定すると、１マス１マス確実に色をつけられます。
・失敗したら、消しゴムツールでクリックすると消去できます。先の形をコントロールパレットで選ぶことができます。
・画面を400～800％に拡大すると進めやすいでしょう。
・形ができたら、着色していきましょう。細かい部分は１ピクセル１ピクセル鉛筆ツールで描いていきます。広い部分は選択ツールで選択して、塗りつぶしていきます。
（描画色で塗りつぶしは「ctrl＋delet」キー、描画色と背景色の入れ替えは「x」キー）
・こまめに画面の倍率をこまめに原寸表示にもどしながら、仕上りを確認していきましょう。
04-09/gifアニメーションの練習
ドット絵の1枚目が描けたら、レイヤーを追加して動きをつけます。
2コマ目を上のレイヤーに描いていきます。
配布した「04dot_cat.psd」を例に、レイヤーとタイムラインパネルの使用法を説明します。
まず、「04dot_cat.psd」を別名で保存しましょう。「Lesson」フォルダー内に本日の日付のフォルダーを作りその中に保存します。
新規画像やjpg画像は一番最初に開いたとき、「背景レイヤー」が1枚だけの状態になっています。
背景レイヤーにはロックがかかっており、移動も加工もできない特別なレイヤーです。
最初にロックをはずしましょう。
レイヤーパネルの「背景レイヤー」という名前をダブルクリックすると、レイヤーオプションがひらき、「レイヤー0」という名前が表示されます。OKボタンを押します。
これで普通のレイヤーになりロックが外れました。
新規レイヤーを追加して、「レイヤー0」の下に潜らせ、長方形の選択ツールで画面全体をドラッグして、選択したら、白い背景色を塗りつぶしましょう。
カラーピッカーで色を白に設定します。
「Alt＋backspace」で描画色の塗りつぶし、「Ctrllt＋backspace」で背景色の塗りつぶしです。
「レイヤー0」を新規レイヤーボタンにドラッグドロップするとレイヤーが複製されます。
複製されたレイヤーをレイヤーパネルで選択して、ツールボックスの移動ツールを持ちます。
レイヤーパネルのレイヤー名の左側に「目玉」のアイコンがあり、この「目玉ボタン」を押して、レイヤーを見せたり隠したりすることができます。
一枚ずつレイヤーを選択し、移動ツールでレイヤーの位置を動かして、動かしおわったら、目玉ボタンで見えなくして、次のレイヤーの位置を決めていきます。
こうして、レイヤーをだんだんに移動させてください。
レイヤーの準備ができたら、1コマ目の画像を表示して、2コマ目から上は非表示にします。
ここからgifアニメを作ります。
「ウィンドウ」メニューから「タイムライン」を出します。
タイムラインパネルは最初、映像データを編集するモードになっていますので、中央のボタンの右の三角ボタンを押して、「フレームアニメ」を選択します。
「フレームアニメーションを作成」ボタンを押すと、パネルにフレームが表示され、現在表示されている画像の状態が1フレーム目のサムネール（パネル上のちいさな見本の画像のこと）に入ります。
タイムラインパネルの下に、「新規フレーム」ボタンがあります。
ボタンを押しますと、「新規フレーム」ができます。
2フレーム目をクリックしたら、下から2番目のレイヤーを表示します。
2フレーム目に下から2番目のレイヤーが表示されます。
こうして、フレームを増やし、動きをつけていきましょう。
表示時間を調整し、「ループ」を選択します。
04-10/アニメーションパネル
ドット絵の1枚目が描けたら、レイヤーを追加して動きをつけます。
漫画で言う2コマ目を上のレイヤーに描いていきます。
レイヤーの準備ができたら、1コマ目の画像を表示して、2コマ目は見えなくしておきましょう。
gifアニメを作ります。
「ウィンドウ」メニューから「タイムライン」を出します。
タイムラインには、1フレーム目に表示された画像が入っています。
タイムラインパネルもパネルの下に、「新規」ボタンがあります。
ボタンを押しますと、「新規フレーム」ができます。
2フレーム目をクリックしたら、上のレイヤーの画像を表示します。
04-11/gifアニメを書き出す
いったん上書き保存した「.psd」から、gifアニメを描き出してみましょう。
「ファイル」メニュー→「web用に保存」を選択します。
※CC2015にアップグレードしている人はファイルメニュー→「書き出し」の中に「Web用に書き出し」があります。
「web用に保存」パネルの右側「プリセット」から、「gif」を選択しましょう。
ファイル名を学籍番号と名前.gif、保存先をlessonフォルダー内の今日の日付のフォルダー内にします。
.gifアニメファイルとして書き出されます。
※動きを確認するには、ブラウザーを立ちあげましょう。保存したフォルダーの中を表示して保存した「.gif」ファイルの名前をドラッグします。ブラウザーのウィンドウの中に、ドロップすると、gifファイルが開いて動きが確認できます。
書き出した「自分の学籍番号＋名前.gif」をGoogle Classroomに提出します。
お疲れさま！