3回目｜4月25日(月)の授業復習ノート
本日のポイント
第三回目授業の学習項目です。授業で作成した書類をもう一度開いて、必ず復習しましょう。
■イラストに色を塗ったり、影の部分を作る方法
・効果メニュー→パスの変形
・オブジェクトメニュー→アピアランスの分割
・オブジェクトメニュー→パス→パスのアウトライン
・書式メニュー→文字のアウトライン
・クローズパスとオープンパス
■データを目的に合わせて加工してみよう
・線と効果も拡大縮小
・整列パネル
・線と効果も拡大縮小
・コピーの繰り返し
・整列パネル
■Web用に書き出し
・いろいろな単位「mmとピクセル」
・web用に書き出し
第三回目授業の宿題 オリジナルスタンプの製作
今の気持ちを表したイラストをもとにLINEのスタンプを作ってみよう
表情やメッセージをシンプルなイラストに置き換えて、
日常会話コミュニケーションで使いやすいスタンプのための画像をIllustratorを使って作成しなさい。
テーマは自由です。
スタンプの内容は前回の宿題のバリエーションでもいいし、新しいアイデアで作成しなおしてもよい。
仕上がった作品は、LINEに投稿できるように、「.png」に書き出します。
作品が仕上がったら、Google Classroom、3回目の宿題提出ボックスの中に提出してください。
・画像の大きさ幅370px 高さ320px
・カラー形式：RGB
・ファイル名と保存形式：自分の学籍番号と名前とナンバー（作品の通し番号）.png
・数量：3点
・背景は透明にすること
・締め切り G1、G２ともに４月２７日（水）23時59分
採点のポイント（合計5point）
描かれた画像のパーツが縮小されても何を描いたかがわかる（線の性質の理解）→1point
線の太さに統一感・ルール決めがされている（線の性質の理解）→1point
書かれた文字が縮小されても読める（フォントの理解）→1point
背景が透明の「.png」画像が書き出されている（手順の理解）→１point
仕事がきれいで丁寧（愛情がこもっている）→1point
3-01/変形のためのツール
バウンディングボックスで拡大縮小、回転などの変形を行うことを学びましたが、ツールボックスには「変形のための専門ツール」が用意されています。
■拡大縮小ツール・回転ツール・リフレクトツール
バウンディングボックスをつかんでドラッグする変形は、つかんだ点と反対側の点が変形の支点になりました。しかし、中心を別の点にして変形したいときには、変形の専門ツールを使用します。
オブジェクトを選択して、変形ツールに持ちかえると、選択されたオブジェクトの中心に「的」マークが出ます。これが「変形の中心」です。
道具を持ち替えて、一回目のクリックで、変形の中心を変えることができます。
変形専門ツールを持っているときにはバウンディングボックスは現れませんから、図形の点か線、色が塗られた部分をつかんで、ドラッグして、変形をします。
変形の専門ツールには便利な使用法がもう一つあります。数値で指定の大きさを入力する変形です。
3-02/リフレクトツールで左右逆転
3-03/自由変形ツール
■自由変形ツール
まず最初に選択ツールで変形したいオブジェクトを選択します。
つぎに自由変形ツールに持ち替えます。
バウンディングボックスの角を掴むとわかりやすいです。
⓪普通にドラッグすると拡大縮小。
①ctrlキーを押しながらドラッグすると、一つの角だけが引っ張られるように変形します。
②ctrl＋alt（command＋option）キーを押しながら引っ張ると、引っ張った角と反対側の角が同時に動きます。
③ctrl＋alt＋shift（command＋option＋shift）キーを押しながら引っ張ると、辺に沿って変形します。
台形をつくることができます。
この機能は遠近感の表現などに使用できますので、練習しておいてください。
3-04/LINEのスタンプ用にWEB用に新規ドキュメントを開く
今週の課題はLINEのスタンプ。PCやスマホなど、device用の画像です。
メニュー「新規ドキュメント」を開き、プロファイルに「WEB」を選択しましょう。
単位が自動的に「ピクセル」、カラーモードがRGB、画像解像度の欄が72ppiになります。
新規書類が開けたら別名保存をしましょう。
保存場所は「Lesson」フォルダーの中今日の日付のフォルダーを作りその中に。
名前は「自分の学籍番号＋名前.ai」で。
この書類に直接作品を書いてもよいです。
先週の作品をコピペしてもよいです。
先週の作品をコピペした人は、枠の大きさに合うように、拡大縮小をします（必ずshiftキーを押しましょう！）
3-05/印刷用とWEB用は単位が違う
1,2回目の提出課題は印刷用のドキュメントでした。
今週はスマホやPCのモニター用の画像を作成します。
・Illustratorはグラフィックデザインや機械、建物の設計、洋服のデザインやパターンの作成など、紙や布やその他の基材に出力する用の「印刷原稿」と、Webや映像など、モニターで表示する場合用の2通りの原稿を扱うことができます。
印刷用の原稿とモニター用の原稿は、二つは大きく分けて3箇所、注意しなければならない点があります。
①単位
「mm ミリメートル」と「px ピクセル」
②画像解像度
「300ppi」と「72ppi」
③色の表示方法
「CMYK」と「RGB」
単位は、「環境設定」で変更することができます。
・Winは「ファイルメニュー」の中
・Macは「Illustratorメニュー」の中にあります。
カラーはファイルメニューの中の「ドキュメントのカラーモード」で変更できます。
クリエーターは皆、任された仕事の内容によって、単位とカラーを使い分けていますが、初心者は、長さの単位が間違っていないかどうか？だけ、しっかりチェックしましょう。
（色や画像解像度はコピペのたびにソフトがペースト先の書類に勝手に合わせてくれます。）
3-06/オープンパスとクローズパス
線を描くときに気をつけることが2点あります。
線には2種類あるということ。それは、
①オープンパス
②クローズパス
です。
単純なことだけど、この2種類は使い方が違います。
・クローズパスには線の内側に塗り色が設定できます。
つまり、囲まれたところが何かの形になるということです。
・オープンパスは線のみを表現したいときに使用します。囲まれた部分ができません。
したがって、オープンパスを描くとき、塗り色は「なし」にします。（ときどき例外もあるけど）
ものを描くときはどちらの線になるのかをしっかり意識して仕事をすすめましょう。
オープンパスの描き方【ペンツール】
・線の色と太さを選びます。
・塗り色は「なし」にしましょう。
①ペンツールで白地をクリック
②終点をクリック
③ctrlキーを押すと、キーを押している間だけ、カーソルが選択ツールに変わります。白地をクリックすると、描いたばかりの線に設定された選択が解除されます。
ちょっとカーブしたオープンパスの描き方【ペンツール】
①ペンツールで始点をクリックするが、クリックしたボタンを離さない。
②クリックを外さないで、ちょっと斜めにドラッグすると、アンカーポイントからハンドルが伸びる。
③マウスをいったん離す。
④終点をクリック。
⑤クリックしたボタンは離さないで、ちょっとドラッグする。
⑥終点からもハンドルが伸びて、カーブの形が調整できる。
⑦きれいなカーブになったところで、マウスを離す。
⑧選択がかかったままになっているので、Ctrlキーを押して、白地をクリック。
3-07/ペンツールを使わないオープンパスの作り方
ペンツールは重要なツールですが、これが使えないかというとそんなことはありません。
たとえば、参考の画像のような、手をふりふりしている動線のような、単純な形を書くのであれば、鉛筆ツールを使用してもよいです。
鉛筆ツールはツールボックスの長方形ツールの下、ブラシツールの次あたりにあります。
持ってドキュメント上をドラッグするだけで、線が描けます。
線なので「塗り色」は「なし」にしましょう。
線は「パス」なので、形の編集ができます。
白矢印でクリックすると、アンカーポイントが現れます。
ペンツールの裏にある「アンカーポイントツール」でハンドルの先を動かして、カーブを編集してみましょう。
もしも長さを編集したいときは、ペンツールの裏にある「アンカーポイントの追加ツール」でパスの上をクリックし、アンカーポイント一つ追加します。
そのあとに、マイナスがついた「アンカーポイントの削除ツール」でいらないアンカーポイントをクリックし、不要なパスを消去します。
3-08/切れている線と線のつなぎ方
「パスの連結」の方法をまとめておきます。
①つなぎたいパスの先端と先端を選択します。
「ダイレクト選択ツール（白矢印）」で二つの点を囲むようにドラッグするか、Shiftキーを押して追加しながら選択します。
②オブジェクトメニュー「パス」「平均」
③「平均」というパネルがひらきます。
横方向（x軸）だけを揃えるのか、縦方向（y軸）だけを揃えるのか、それとも縦横両方揃えるのか？と聞いてきます。
状況に応じて使い分けますが、今回は2点を1点に集合させるので、「2軸とも」を選びます。
④重なった点の選択をはずさないようにします。
⑤オブジェクトメニュー「パス」「連結」
これで線は繋がっています。
次に形を整えます。
⑥「アンカーポイントツール」で形をなおすポイントから、線の流れる方向にそーってそーっとドラッグすると、
ドラッグした方向と、反対方向にハンドルが伸びます。
カーブの形がきれいに修正できました。
3-09/線の先端は大切！
作りたいイメージにあった線の太さと先端、曲がり角の状態を選択することは、大切です。
一つの作品の中に、いろいろな線の設定を混ぜないでください。
線の状態を同じに整えると、作品全体に統一感がでます。
3-10/拡大縮小には2種類ある！
拡大縮小をするときに気をつけなくてはならないことがあります。
線の太さもいっしょに拡大縮小するか？
それとも、線の太さはキープしたまま拡大縮小するか？ということです。
Illustratorでは、線幅をキープする、しないが選べます。
場合によって使い分けます。
設定は「オブジェクトメニュー」→「拡大縮小」のパネルを開き、「線幅・効果も拡大縮小」のチェックを入り切りします。
3-11/Web用に書き出し
作品ができたら、まず「.ai」ファイルを上書き保存します。
その上で、「ファイルメニュー」「Web用に保存」を選択します。
ファイル形式を「png」に、「透明」にチェックを入れて、Lessonフォルダーの本日のファイルに保存します。
元のデータを使用する環境に合わせて、ファイル形式を変えて保存することを「書き出し」と言います。
3-12/フォントのアウトライン頼みます！！
「.ai」データを提出したり、人にあげたりするときに、「フォントのアウトライン」をしてくれないと、文字化けが起こります。
フォントを打ったとき、「.ai」の書類の上に存在するのは、
・打った文字の字形
・文字の位置
・フォントの種類や大きさ、行間、字間などの名前や数値
などの情報がファイル上にあるだけです。
文字そのもののファイルはIllustratorのアプリとは別の場所に格納されていて、フォントを打った場所にはフォントファイルから形を投影しているようなしくみになっています。
つまり、フォントは円や四角などのオブジェクトとは別のデータです。
書類を他のパソコンへ受け渡しする際、渡した先のパソコンに指定したフォントのファイルがないと、「文字化け」がおこります。または「別のフォントに置き換わる」ということがおきます。
フォントの種類を選ぶことはもちろん、文字の間の隙間や行間もデザインの大切な要素ですので、フォントの置きかわりはさけなくてはなりません。
①出来上がったデータはいったん上書き保存。
②もう一回別名保存。いままでのファイル名の後ろに「_out」などをつけるとわかりやすいです。
③フォントの部分を選択して、「右クリック」→「フォントのアウトライン化」を実行します。
フォントはアウトライン化するとカビが生えたみたい。
拡大してみると、アンカーポイントが生まれ、「パスデータ」になっているのが確認できます。
※2回目の宿題、ほとんどの方が「フォントのアウトライン化」をせずに提出しているので、米澤、困っております。
それなので、フォントのアウトライン化したうえで、もう一度再提出をお願いします。
・ファイル名に「_out」をつけた名前でもういっかい別名保存
・フォントをアウトライン化する
・Classroomのフォントのアウトライン化提出ボックスにもう一度提出する。