求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

下絵に沿って地図を描く

下絵に沿って地図を描く

  • 下絵をテンプレートにする
  • 線の幅と色を決める
  • 枠線に合わせて裁ち落としをするため、少しはみ出るように描画する
  • 枠線の大きさでクリッピングマスク作成
  • SVG形式で書き出す

f:id:web-0220:20190212223344j:plain

下絵を配置
  • 「ファイル」→「配置」→「テンプレート」のみにチェックを付けて選択した画像を配置

f:id:web-0220:20190213232338p:plain

レイヤー1に描画
  • クリッピングマスクをするとレイヤーがまとめられるので、不都合がなければレイヤー分けをしないで描画します
  • 必要な長方形の形状より外側まで描画する
  • 線幅は、3種類まで

f:id:web-0220:20190213234711p:plain

枠線とマスク
  • 枠線を必要な大きさに描画する
  • レイヤーをまたいでそのままの大きさを「レイヤー1」に移動コピーする(同じ大きさの長方形が、各レイヤーに配置してある状態)

f:id:web-0220:20190214000119p:plain

f:id:web-0220:20190214002436p:plain

f:id:web-0220:20190214002632p:plain

枠線でアートボード作成
  • 「オブジェクト」→「アートボード」→「選択オブジェクトに合わせる」
SVG形式で保存
  • この段階で、文字と線をアウトライン処理をしない
  • 保存するときの「SVGオプション」で、「文字:アウトラインに変換」を選択する

f:id:web-0220:20190214003947p:plain

SVG形式で保存するときのポイント

  • アンカーポイントを減らす
  • 文字をIllustratorドキュメント上でアウトライン化すると、アンカーポイントが増えます
  • 使用する大きさのアートボードにする
HTMLで表示
  • SVGをクリックする必要があれば、img要素で挿入(モーダルウィンドウの場合)
  • それ以外は、object要素で挿入