![digivalley0225](https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/s32x32/274275_100001445612951_504220858_q.jpg)
Illustratorで超高速WEBデザイン [ 2010/03/19 04:21 ]
デザイン作業に優れているので、これまで、WEBデザイン時はIllustratorを使うことが多かったのですが・・・・。
スライスの書き出し時にいつも苦労していました。
ガイドを引いても情報パレットに表示されないし、スライス作成ツールはきっちり正確に切り出せないし。
CS4になっても相変わらずその不便さは解消されていません。
そこでIllustratorでWEB制作を高速に処理するにはどうしたらいいか、また本当にそんな方法が存在するのか、研究してみました。
結論!!
存在しました。
IlustratorでもFireWorks並みに高速にスライスをきりだせました。いや、もしかするとそれ以上かも^^。
ただし、CS3以降ですけど・・^^。(CS2でもなんとかなるかもね)
具体的な手順は次回!^^
Illustratorで超高速WEBデザインの手順
[ 2010/09/27 08:22 ]
■まず、準備。
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を使ってます。
3. ガイドを使うときはオブジェクトへスナップさせる場合に限定。
さて、以上を踏まえてデザインを進めます。
こんな感じでデザインが終わったら・・
その後はいよいよスライスの切り出しです。
■スライスの作成
手順としては、スライス専用のオブジェトを作成し、必要なオブジェクトを総て選択してから『スライス作成』コマンドで一気にスライス化します。
まず、必要なオブジェクトを総て正確に作成して選択。
その後、「オブジェクト/スライス/スライスの作成」を実行。
一気にスライスを作成します。
今回は必要なオブジェクトを複製コピーして、スライス専用レイヤーへ移動しています。
1. スライス専用のレイヤー(ワイヤービューにしておく)を作成する。
スライス用のオブジェクトは一番上のレイヤーにまとめる様にしています。
この時オブジェクトに塗りを設定していると下のレイヤーが隠れてしまうので、このレイヤーだけをワイヤー表示にするかオブジェクトの内側へ0.1px位の線を設定します。
パレットの目のアイコンをCNTRLクリックで、ビューをアウトラインへ切り替えられます。
2. スライス専用のオブジェクトを制作。
Illustratorの場合、『選択オブジェクトからスライス作成』コマンドで使用したオブジェクトを、その後削除したり、サイズ変更するとスライスも一緒に変更されたり削除されたりします。
そのため、スライス作成に使用するオブジェクトは専用レイヤーに保存しておきます。
スライス用のオブジェクトは塗りか線の設定をしないとスライスを作成できないので必ず適当な色を設定する。(この場合は、内側へ0.1pxの線を設定しています。)
3.オブジェクトを選択してからオブジェクトメニューの『スライス作成』コマンドを使用。
もうひとつの「選択オブジェクトからスライス作成」コマンドは今回は使わない。
4.ツールパレットのスライス作成ツールは使わない。
aiWebD_02
これは絶対使ってはだめです。
とまあ、以上の項目を守ればAIを使って超高速でWEBデザインが可能です。
※注意:CS5のピクセルグリッドとアートボードの座標。
aiWebD_22
ツールパレットのアートボードツールをWクリックすると立ち上がるウインドウ。ここの「位置」が整数値になていないと本末転倒です。よく昔のファイルなんかを開くと、この見本のように「位置」がずれたりしています。そうなってると、変形パレットでいくら整数値を入力してもスライスがキレイに切り出せません。
最近流行のWEBサイトのロールオーバー
[ 2010/10/06 23:26 ]
こんな感じで一まとめにしてもGIF画像なので容量も10kb以下と軽いです。
aiWebD_10
オブジェクトを一まとめにして一つのスライスで切り出したいときに「選択範囲から作成」コマンドを使用します。
実際の使用画像
画像をトリミングしたときのスライス作成の注意点
[ 2011/04/09 14:54 ]
slice_01
例えば、犬の写真を真ん中のwindowで切り抜きたいとする。
slice_02
マスキングするとこんな感じ。
slice_03
しかし、枠を普通に選択し、スライス作成を実行しても画像全体で作成されてしまう。
これは枠と写真がグループ化されているため。
slice_04
こういうときはダイレクト選択ツールでトリミングしたいオブジェクトの枠だけを選択し・・・。
slice_05
スライス作成を実行すると意図通りのスライスを得ることができる。
-
Amazon.co.jp
Adobe Illustrator CS5とにかく必須 Amazon で購入!
プライバシーについて
-
Amazon.co.jp
詳解HTML&XHTML&CSS辞典私が使用している書籍の改訂版です。お勧めします。 Amazon で購入!
プライバシーについて
-
Amazon.co.jp
DOM Scripting 標準ガイドブック丁寧な解説というより、馬鹿丁寧、ある意味使い勝手悪すぎだけど、中身はとても良いです(^^;)!! Amazon で購入!
プライバシーについて
-
Amazon.co.jp
初めてのActionScript 3.0わかりやすい解説と最高のサンプルコード Amazon で購入!
プライバシーについて
-
Amazon.co.jp
詳解HTML&スタイルシート辞典使用している本です。廃本なので中古しかありませんが最高のXHTML1.0、CSS2.1の辞典。 Amazon で購入!
プライバシーについて
・・・・・・・・・・・・・・・・
■Apache サーバ ドキュメント■■アスキー デジタル用語辞典
■.htaccess実践活用術
■スタイルシート例文辞典
■Beginner's CGI
・・・・・・・・・・・・・・・・
prev
|
next
Date : 2010/03/19 04:21
Posted by valley | | Edit |
avater