Illustratorで超高速WEBデザイン

■なぜイラストレータ?

デザイン作業に優れているので、これまで、WEBデザイン時はIllustratorを使うことが多かったのですが・・・・。
スライスの書き出し時にいつも苦労していました。
ガイドを引いても情報パレットに表示されないし、スライス作成ツールはきっちり正確に切り出せないし。
CS4になっても相変わらずその不便さは解消されていません。

そこでIllustratorでWEB制作を高速に処理するにはどうしたらいいか、また本当にそんな方法が存在するのか、研究してみました。

結論!!

存在しました。
IlustratorでもFireWorks並みに高速にスライスをきりだせました。いや、もしかするとそれ以上かも^^。
ただし、CS3以降ですけど・・^^。(CS2でもなんとかなるかもね)

具体的な手順は次回!^^

Date : 2010/03/19 04:21

Posted by valley | | 編集/Edit

Illustratorで超高速WEBデザインの手順

イラストレータでのWEBデザイン、具体的な手順です。

■まず、準備。

1. 設定
単位はピクセル、表示はピクセルビュー、ピクセルにスナップ、オブジェクトの線の設定は内側か無し、

aiWebD_01

線を使わず、幅が1PXのオブジェクトを使用する方法もある

aiWebD_03

上図をアウトラインで表示したもの。イラストレータは縦横1pxのドットでも矩形として作成できる

aiWebD_05

スマートガイドも結構便利なので私は使用してます。

aiWebD_12

スマートガイドを有効にするとこんな感じでスナップしている状況を教えてくれます。

aiWebD_04

サイトの外枠の左端の座標を0,0に設定するのも重要。
ただし、CS5からはピクセルグリッドが導入されたのでずれないようにしないと本末転倒となります。
詳しくは最下段に



■デザイン時の注意点

1. デザインは全て数値入力で作成
必ず座標値が整数になるように!

aiWebD_19

表示を「ピクセルビューにしていないと同じように見えても」

aiWebD_20

ピクセルビューで表すると左に比べて右は画像が荒くラインがぼそぼそになっています。

aiWebD_21

座標を調べると整数値になっていないためとわかります。

常識的に考えても、小数点はピクセルでは表示できませんからね。

2. メニューなどの同一サイズの大量使用は『パスメニューの段落設定』コマンドを使用。
オブジェクトメニューにある、パス/段組設定はメニュー制作に欠かせないくらい重要。このコマンドはDTPでもよく使われるコマンドで手軽に瞬時に表組みものを作成できます。これがあるからAIを使ってます。

オブジェクトメニューにある、パス/段組設定はメニュー制作に欠かせないくらい重要。
このコマンドはDTPでもよく使われるコマンドで手軽に瞬時に表組みものを作成できます。
これがあるからAIを使ってます。



3. ガイドを使うときはオブジェクトへスナップさせる場合に限定。

さて、以上を踏まえてデザインを進めます。
こんな感じでデザインが終わったら・・

こんな感じでデザインが終わったら・・


その後はいよいよスライスの切り出しです。

■スライスの作成

手順としては、スライス専用のオブジェトを作成し、必要なオブジェクトを総て選択してから『スライス作成』コマンドで一気にスライス化します。
まず、必要なオブジェクトを総て正確に作成して選択。

まず、必要なオブジェクトを総て正確に作成して選択。

その後、「オブジェクト/スライス/スライスの作成」を実行。一気にスライスを作成します。

その後、「オブジェクト/スライス/スライスの作成」を実行。
一気にスライスを作成します。


今回は必要なオブジェクトを複製コピーして、スライス専用レイヤーへ移動しています。

1. スライス専用のレイヤー(ワイヤービューにしておく)を作成する。
スライス用のオブジェクトは一番上のレイヤーにまとめる様にしています。この時オブジェクトに塗りを設定していると下のレイヤーが隠れてしまうので、このレイヤーだけをワイヤー表示にするかオブジェクトの内側へ0.1px位の線を設定します。パレットの目のアイコンをCNTRLクリックで、ビューをアウトラインへ切り替えられます。

スライス用のオブジェクトは一番上のレイヤーにまとめる様にしています。
この時オブジェクトに塗りを設定していると下のレイヤーが隠れてしまうので、このレイヤーだけをワイヤー表示にするかオブジェクトの内側へ0.1px位の線を設定します。
パレットの目のアイコンをCNTRLクリックで、ビューをアウトラインへ切り替えられます。



2. スライス専用のオブジェクトを制作。
Illustratorの場合、『選択オブジェクトからスライス作成』コマンドで使用したオブジェクトを、その後削除したり、サイズ変更するとスライスも一緒に変更されたり削除されたりします。
そのため、スライス作成に使用するオブジェクトは専用レイヤーに保存しておきます。
スライス用のオブジェクトは塗りか線の設定をしないとスライスを作成できないので必ず適当な色を設定する。(この場合は、内側へ0.1pxの線を設定しています。)

スライス用のオブジェクトは塗りか線の設定をしないとスライスを作成できないので必ず適当な色を設定する。(この場合は、内側へ0.1pxの線を設定しています。)



3.オブジェクトを選択してからオブジェクトメニューの『スライス作成』コマンドを使用。
もうひとつの「選択オブジェクトからスライス作成」コマンドは今回は使わない。

もうひとつの「選択オブジェクトからスライス作成」コマンドは今回は使わない。



4.ツールパレットのスライス作成ツールは使わない。

aiWebD_02

これは絶対使ってはだめです。


とまあ、以上の項目を守ればAIを使って超高速でWEBデザインが可能です。

※注意:CS5のピクセルグリッドとアートボードの座標。

aiWebD_22

ツールパレットのアートボードツールをWクリックすると立ち上がるウインドウ。ここの「位置」が整数値になていないと本末転倒です。よく昔のファイルなんかを開くと、この見本のように「位置」がずれたりしています。そうなってると、変形パレットでいくら整数値を入力してもスライスがキレイに切り出せません。

Date : 2010/09/27 08:22

Posted by valley | | 編集/Edit

最近流行のWEBサイトのロールオーバー

このサイトもそうですが、最近はロールオーバーの切り替え画像を一枚の画像にして、切り替えはすべてCSSの背景画像のポジションで設定することが増えてます。


こんな感じで一まとめにしてもGIF画像なので容量も10kb以下と軽いです。

aiWebD_10

オブジェクトを一まとめにして一つのスライスで切り出したいときに「選択範囲から作成」コマンドを使用します。


実際の使用画像

Date : 2010/10/06 23:26

Posted by valley | | 編集/Edit

画像をトリミングしたときのスライス作成の注意点

写真などをトリミングした時、選択ツールでオブジェクトを選択しても目的の形状を切り出せません。

slice_01

例えば、犬の写真を真ん中のwindowで切り抜きたいとする。

slice_02

マスキングするとこんな感じ。

slice_03

しかし、枠を普通に選択し、スライス作成を実行しても画像全体で作成されてしまう。
これは枠と写真がグループ化されているため。

slice_04

こういうときはダイレクト選択ツールでトリミングしたいオブジェクトの枠だけを選択し・・・。

slice_05

スライス作成を実行すると意図通りのスライスを得ることができる。

スライスの切り抜きが思ったとおりにいかない原因の大半がこれです。

Date : 2011/04/09 14:54

Posted by digivalley | | 編集/Edit