読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

ベクターで作る

ベクターデータの特徴

  • ブラウザ上でパスなどの数値情報をもとに描画するため表示サイズを問わずにスムーズなグラフィックが表示可能

Illustratorの特徴

  • Illustratorは、ベクター画像の描画基本とするドローイングソフトです
  • 基本的にはベクターのアウトラインデータとして保存されます(埋め込み画像などを除く)
ベクター形式のデータ
  • ベクター画像は、アンカーポイント(点)とその間を結ぶセグメント(線)で構成された「パス」によって成り立っています
  • ベクター画像のデータは、各点の座標や線の軌跡、色などに関する数値情報のみで成り立っています
  • そのために拡大・縮小や変形などを繰り返し行なっても劣化が起こらず、画像が大きくなったとしてもデータサイズはほとんど変化しません
ベクター画像とWebデザイン
  • 拡大しても劣化しないことから、マルチデバイス対応に適している
  • SVG形式の画像の必要性
  • データが軽い
  • 数値で管理できる
  • アピアランスによる装飾ができる
  • 色の管理がしやすい(スウォッチ
  • シンボルが使いまわせる

制作準備

  • Webデザインを制作するための環境設定を整える
カラー設定
  • 「Web・インターネット用-日本」を選択
  • 「sRGB」を選択

環境設定の単位



新規ドキュメント作成
  • ドキュメントプロファイルは「Web」
  • [プレビューモード]を「ピクセル」に変更
  • [新規オブジェクトをピクセルグリッドに整合]はオフ
  • アピアランス]パネルメニューの[新規アートに基本アピアランスを適用]のチェックをはずしておく
  • [新規オブジェクトをピクセルグリッドに整合]はオフに
  • [線の位置]を「内側」にして作業
  • [プレビュー境界を使用]にチェックする
  • キー入力を「0.5ピクセル」に
  • アートボードの座標に注意(左上が基点)


[新規オブジェクトをピクセルグリッドに整合]はオフ
  • [新規ピクセルグリッドを整合]をオンにしているとき、1ピクセルの線のオブジェクトを描くと、ピクセルグリッドでなく、ピクセルグリッドの中心に吸着する
  • そのため、実際の大きさは1ピクセル(=0.5+0.5)大きくなってしまう
  • [線の位置]を内側(外側)にして作業しても、次に描くときには「中央」に戻ってしまう
  • 複数オブジェクトの整列を行うと、エッジがにじむ。または、見た目の通りに整列されない
  • [新規オブジェクトをピクセルグリッドに整合]がオンのまま描画すると、パスと描画のズレが生じる
  • アートボードごとに分けて制作しているとき、個別の書き出しでは問題ないのに、アートボード書き出しするとエッジがにじむことがある
  • 「線を内側に揃える」を選択するとオブジェクトと実際の境界線がずれて見える

ピクセルプレビュー
  • [表示]メニューの[ピクセルプレビュー]にチェックを付ける


線の位置
  • 「線を内側に揃える」を選択


アピアランス


アートボード

  • パレットのアイコンをダブルクリックすると編集画面を表示できる
  • 左上が基点


作業上の注意点
  • ピクセルの数値に小数点が表示されないよう注意する
  • 定規のガイドは使用しない(ドロップ&ドラッグでは、小数点が入ってしまう)
  • 定規のガイドには不具合があるため、ガイドの代わりにオブジェクトを配置したレイヤーを用意し、レイヤー自体をロックしておく(スマートガイドを表示した場合、ロックしているオブジェクトにもスナップします)
  • Web画像のアンカーポイントは「上下左右」が垂直・水平に並んでいることが理想的です
  • 「線幅と効果を拡大縮小」のチェックを外す

校正設定
  • [表示]メニューの[校正設定]→[インターネット標準RGB(sRGB)]をクリックしておく


長方形を描く

  • 幅・高さの数値は、左上が基点


楕円形を描く

  • 幅・高さの数値は、左上が基点