WEB制作の学習帳

WEB制作を様々な視点から学ぶブログ

CSSスプライト用画像の制作1

Illustrator

 Ctrl + Nで新規作成(IllustratorでのWeb制作用環境設定参照)f:id:s19biz:20150707182154p:plain

f:id:s19biz:20150707182356p:plain

定規を出して必ず左角をX:0 Y:0にしておく

f:id:s19biz:20150707182500p:plain

 

(このブログではあくまでもIllustratorでの線の扱いに気をつけてもらうため塗りと線で作っているが授業でアピアランスで制作していく方法を教える)

 

800px X 60pxで塗り：白　線：黒の長方形作成

f:id:s19biz:20150707182512p:plain

線の位置を内側に設定

f:id:s19biz:20150707182610p:plain

内側に線だけでサイズ内に収まるがIllustrator CS5以下ではピクセルグリッドがズレるのでパスのアウトラインを取る

f:id:s19biz:20150707182708p:plain

定規の開始点に合わせる

f:id:s19biz:20150707182916p:plain

長方形ツールで160 x 60(px)で長方形を作成

f:id:s19biz:20150707183048p:plain

線の位置：内側

パスのアウトラインを作成

 

整列ツールで左角に合わせる

移動させてコピー

f:id:s19biz:20150707183251p:plain

f:id:s19biz:20150707183325p:plain

f:id:s19biz:20150707183349p:plain

テキスト作成

f:id:s19biz:20150707183419p:plain

メニューバー→ウインドウ→書式→OpenType

プロポーショナルメトリクスにチェック

f:id:s19biz:20150707183457p:plain

f:id:s19biz:20150707183703p:plain

整列ツールで長方形中央に配置

f:id:s19biz:20150707183809p:plain

移動してコピー

f:id:s19biz:20150707183852p:plain

f:id:s19biz:20150707183929p:plain

文字を打ち替え

f:id:s19biz:20150707183941p:plain

幅：1px　高さ：1pxの長方形を作成

f:id:s19biz:20150707184004p:plain

f:id:s19biz:20150707184224p:plain

移動してコピー。この時、両端を残し中4本を上揃え

f:id:s19biz:20150707184438p:plain 

右端が必ず1px大きくなってることに気付く。両端の1pxの長方形は削除。

f:id:s19biz:20150707184735p:plain

5つの長方形を選択して削除

f:id:s19biz:20150707184926p:plain