- WEBデザイン&WEBプログラミング -sei2の日記- - http://blog1.dd-company.com -

基金訓練に行ってきました。(49日目)


基金訓練(Webデザイン・プログラミング科)の49日目に行ってまいりました。
本日は、Adobe Illustrator CS4の実習です。

本日の内容は下記のとおりです。

Flash作成の準備

1.昨日作った地図の上を歩くキャラクターの作成

正面から見たキャラクター

  • 正面を向いて直立しているキャラクタを描く。
  • 先に描いた絵をコピペして、右足を前に出しているキャラクターを描く。
  • 右足を前に出しているキャラクターをリフレクトツールでコピーして左足を前に出しているキャラクターを描く。

背面から見たキャラクター

  • 正面の絵を3個ともコピペして、背面用に修正する。

左側面から見たキャラクター

  • 直立しているキャラクターの左側面を書く。(正面の絵と、体や顔、足の位置の高さを合わせる。)
  • 直立しているキャラクターをコピペして、修正し、右足、左手を前に出しているキャラクターを描く。
  • 右足、左手を前に出しているキャラクターを、リフレクトツールでコピペする。

右側面から見たキャラクター

  • 左側面のキャラクターを3個とも、リフレクトツールでコピペする。

作成した12種類の絵を等間隔に並べる。

スライスしやすくするため。

  • 長方形ツールで、正面の絵の1個をぴったり囲むような長方形を描く。
  • その長方形を選択して、パスのオフセットを使って、5px外側に長方形を描く。
  • 書いた2個の長方形を、その外側同士の長方形にくっつけて右側にその長方形をコピーする。
  • Ctrl+Dで、前回のコピーを繰り返す。(3列のマスができる。)
  • 3列のマスを、そのマスにくっつけて下側にそのマスをコピーする。
  • Ctrl+Dで、前回のコピーを2回繰り返す。(3列4行のマスができる。)
  • 作成した書くマスに、きゃらくたーのえを、1個ずつ移動して入れていく。(動かした時、体がぶれないように、各マスの中で同じ位置関係になるようにする。)

トリミングする。

  • スライスツールを選んで、左上の外側の増すに合う様に四角形で囲む。
  • 選択ツールを選んで、バウンディングボックスを表示して、マスの角に合う様に調整する。
  • そのスライス範囲を、Ctrl+Altキーを押しながら、ドラッグして右隣のますにコピーする。
  • Ctrl+Dで、前回のコピーを繰り返す。(3列のスライス範囲ができる。)
  • 3列のスライス範囲を、下側にコピーする。
  • Ctrl+Dで、前回のコピーを2回繰り返す。(3列4行のスライス範囲ができる。)

flash用に、画像を変換する。

  • スライスのために作ったますはすべて見えなくしておく。
  • ファイルメニュー→Webおよびデバイス用に保存を選ぶ。
  • プリセットをPNG-24にし、スライスしたい画像をすべて、Shiftキーを押しながらクリックして選択し、保存をクリックする。
  • 保存ウインドウの、スライスを「選択したスライス」にして、保存をクリックする。

※保存ウインドウの設定→その他 で、「画像をフォルダに保存する」のチェックをはずしておかないと、新しいフォルダを作ってそこに保存されてしまう。




実習で使用している教本