基金訓練(Webデザイン・プログラミング科)の48日目に行ってまいりました。
本日は、Adobe Illustrator CS4の実習です。
本日の内容は下記のとおりです。
Flash作成の準備
1.地図の作成
GoogleMapの等の地図をトレースしてイラスト地図を作成する。
元図の読み込み
- 元になる画像ファイルをイラストレーターで開く。
背景の作成
- 新規レイヤーを作成する。
- 長方形ツールなどを使って背景を薄い灰色などにする。
道路の作成
- 道路の中心線をペンツールを使って書く。(塗りなし、線黒色)
(複数のパスで書いてOK) - すべての線の太さを、道路の幅まで太くする。
- すべての線を選択して、
オブジェクトメニュー→パス→パスのアウトライン
で、外形のパスを作る。 - パスファインダパネルで合体をクリックする。
※最初の中心線のパスは、コピーして残しておくと、後で修正が楽。
線路の作成
- 新規レイヤーを作成する。
- 線路の中心線をペンツールを使って書く。(塗りなし、線黒色)
- 線の太さを、線路の幅まで太くする。(例.12pt)
- 線を選択して、Ctrl+C→Ctrl+F で、前面コピーする。
- 前面コピーした線の太さを細く(例.10px)し、線色を白にする。
- 白くした線を、線パネルを使って破線にする。
※最初の中心線のパスは、コピーして残しておくと、後で修正が楽。
ランドマークの作成
- 新規レイヤーを作成する。
- 長方形ツールなどを使って、駅や、目印になる施設を書く。
トリミングする。
- 長方形ツールで、マスク用の長方形を書く。
(最前面に新規レイヤーを作成して、そこに書く。) - 元図以外のすべてのパーツを選択し、
オブジェクトメニュー→オブジェクト→クリッピングマスク
を、クリックする。
※クリッピングマスクをすると選択したパーツはすべて、もとのレイヤーから消えてしまうので、マスクしたいパーツをすべてコピーしてから、コピーしたパーツでクリッピングマスクを実行したほうがよい。
flash用に、画像を変換する。
- 新規レイヤーを作成する。
- スライスツールを使って、必要なパーツを長方形で囲む。
- ファイルメニュー→Webおよびデバイス用に保存で、画像を保存する。(PNG-24)
※保存ウインドウの設定→その他 で、「画像をフォルダに保存する」のチェックをはずしておかないと、新しいフォルダを作ってそこに保存されてしまう。
今日のポイント
Webデザインで参考になるサイト
- Webデザインで参考になるサイトのリンク集サイト
いけてるサイト ドットコム - フォント集サイト
dafont.com - HTML採点サイト
Another HTML-lint gateway
実習で使用している教本