96's blog

WEBサイト制作科 6ヶ月コース

Illustrator07(ボタン作成)

CSS Sprite(横並び)で表示するボタンを作成

  • アンチエイリアスを避けるためピクセルプレビューをチェック。
  • 四角、グラデーション(薄い色で)、文字で一組作る。
  • 選択ツールをダブルクリックで横に距離指定してコピー。繰り返し。
  • 文字を適宜変えたらa:linkの状態が完成。
  • 距離指定のコピーで下にもう1段追加。
  • グラデーションの方向を逆にして、色付きのバーをつけたらa:hoverの状態も完成。
  • 「webおよびデバイス用に保存」の画像サイズタブで「アートボードサイズでクリップ」のチェックをはずし、JPEG・高画質で保存。

不明点

今回は幅160pxのボタンを5つ並べて800pxのサイズにしたかったが、保存の段階で801pxになってしまった。いろいろ試すも解決せず。

※7.24追記

1px大きくなる現象は、線の真ん中に描画の基準がある状態で長方形を描いたため、長方形の大きさに加えて、各辺の線の外側半分0.5pxが加わったため。今回のようなボタンを描く場合は、「線を内側に揃える」に設定してボタンの外枠を作ったあと内側を線で区切っていく形でつくる。

アートボードに変換機能

  • 1個のオブジェクトをweb用保存するには、オブジェクト→アートボードに変換が便利。
  • オブジェクトをコピー→前面ペースト→アートボードに変換をしてweb用保存すると、アートボードがオブジェクトと同じサイズなので、そのまま保存できる。
  • 変換したアートボードを解除するには、アートボードパレットを開いて削除する。

Caféのé

  • アキュートアクセントという記号。
  • HTMLでは「é」と記述する。