WebのボタンをIllstratorで作成

レイヤーを分けて作ることの重要性を再確認。
あとの修正もしやすいです。


Illstratorでボタンを作成する。
※というより、Illstratorでカンプ(クライアントへ見せる、Webのイメージ。最初にWebで作って見せるのではなく、Illstratorで大体こんなページになりますと言ったようなプレゼンの為のもの)を作成することが多いので、そこからWeb用にもってくるようにするには?と言う話になる。


  1. ひとつのボタンを作成し、それを複製して、必要数のボタンを作成。(レイヤーを分けておく)
  2. 全てを選択して、Ctrl+「C」でコピー→Ctrl+「F」で前面にペースト
  3. 一番左のボタンを選び、変形パレットで全てのボタンを含むサイズに選択範囲を変更する
  4. オブジェクトメニュー→トリムエリアで選択(3.で選択範囲の変更をしたのは、オブジェクトメニューのトリムエリアは、ひとつの選択範囲にしかトリミングしない為)
  5. ファイルメニュー→書き出し→.psd形式で保存→この時、カラーモードはRGB、100%のサイズ、レイヤーの保持にチェック、アンチエイリアスにチェック→でないとグラデーションがうまく表示されない為
  6. Photoshopで開く→オブジェクトに必ず1pixlのアンチエイリアスが出るので→イメージメニュー→カンバスサイズ(Alt+Ctrl+「C」)→アンチエイリアスの出ている方向を確認し、基準点をかえて(アンチエイリアスが出ている辺の対面するところを選択)カンパスサイズを変更
  7. レイヤーのパレットを見ると、各ボタンごとにレイヤーが分かれて表示されている→利点:切り出しがしやすい、ガイドが各ボタンにスナップする


重要!!
Illstratorのデータを「Web用で保存」を絶対してはだめ!
↓なぜならば・・・
上記にもあるように、画像に必ずアンチエイリアスがかかってしまうので。

また、IllstratorでのWeb画像の作成は、線幅や文字をアウトライン化しなければならないなどの手間がかかってしまうこともあり、地図や曲線などはIllstratorで作成するほうが上手くいくが、aiでWeb画像を作らなければならない必然性はない。