articleList
27PNG画像による透過処理の実験 / Transparent PNG image processing experiments
26Apache インストールの注意点 / httpd-2.2.19 is Buggy software
25jQuery1.4以上のgetJsonエラーと対策/getJson's Error on jquery ver.1.4
24jQuery エラーの原因は、DivX Webプラグイン
23Lady Gaga の新曲リリースにあわせて、カウントダウンするWEBツール作りました。/ Free download countdown parts for Lady Gaga's new album.
22jQueryで上下スクロールの修正
21URIを引数からタイトルに変更しました。
20WIndows7 64bitOSへIE8-32bitの再インストール
19Illustratorで超高速WEBデザイン
18『Clear Fixの勧め』:CSS2の正しい処方![5]/ブラウザ間の表示差を無くす
17『Clear Bothのブラウザ別仕様』:CSS2の正しい処方![4]/ブラウザ間の表示差を無くす
16『Clear Bothの必要性』:CSS2の正しい処方![3]/ブラウザ間の表示差を無くす
15jQueryプラグインに挑戦^^
14jQuery実験:EASINGサンプルの応用「スライドメニュー」
13jQuery:実験-上下スクロール
12jQueryプラグインの実験-アニメのEasingサンプル
11『3ピクセルジョグ』:CSS2の正しい処方![2]/ブラウザ間の表示差を無くす
10『マージンの相殺』:CSS2の正しい処方!/ブラウザ間の表示差を無くす
9マルチポストスパム対策決定版!!
8404エラーの不明ファイルURIを取得する。
7サーバーへ連続アクセスの原因究明!!
6Movable Type3.33-ja の文字化けバグ解消。
5FireFox でGoogleMapが表示されない!!
4検索エンジン、インデックス登録にかかる時間は?
3タチの悪いウイルスにやられました。
2偶然発見しました(^^;) / MacIEをマウスでスクロール
1壊れたイラストレータファイルを復活!
digivalley0225
digivalley0225
19
Illustratorで超高速WEBデザイン [ 2010/03/19 04:21 ]
■なぜイラストレータ?
デザイン作業に優れているので、これまで、WEBデザイン時はIllustratorを使うことが多かったのですが・・・・。
スライスの書き出し時にいつも苦労していました。
ガイドを引いても情報パレットに表示されないし、スライス作成ツールはきっちり正確に切り出せないし。
CS4になっても相変わらずその不便さは解消されていません。
そこでIllustratorでWEB制作を高速に処理するにはどうしたらいいか、また本当にそんな方法が存在するのか、研究してみました。
結論!!
存在しました。
IlustratorでもFireWorks並みに高速にスライスをきりだせました。いや、もしかするとそれ以上かも^^。
ただし、CS3以降ですけど・・^^。(CS2でもなんとかなるかもね)
具体的な手順は次回!^^
デザイン作業に優れているので、これまで、WEBデザイン時はIllustratorを使うことが多かったのですが・・・・。
スライスの書き出し時にいつも苦労していました。
ガイドを引いても情報パレットに表示されないし、スライス作成ツールはきっちり正確に切り出せないし。
CS4になっても相変わらずその不便さは解消されていません。
そこでIllustratorでWEB制作を高速に処理するにはどうしたらいいか、また本当にそんな方法が存在するのか、研究してみました。
結論!!
存在しました。
IlustratorでもFireWorks並みに高速にスライスをきりだせました。いや、もしかするとそれ以上かも^^。
ただし、CS3以降ですけど・・^^。(CS2でもなんとかなるかもね)
具体的な手順は次回!^^
Illustratorで超高速WEBデザインの手順
[ 2010/09/27 08:22 ]
イラストレータでのWEBデザイン、具体的な手順です。
■まず、準備。
1. 設定
単位はピクセル、表示はピクセルビュー、ピクセルにスナップ、オブジェクトの線の設定は内側か無し、
■デザイン時の注意点
1. デザインは全て数値入力で作成
必ず座標値が整数になるように!
常識的に考えても、小数点はピクセルでは表示できませんからね。
2. メニューなどの同一サイズの大量使用は『パスメニューの段落設定』コマンドを使用。
3. ガイドを使うときはオブジェクトへスナップさせる場合に限定。
さて、以上を踏まえてデザインを進めます。
その後はいよいよスライスの切り出しです。
■スライスの作成
手順としては、スライス専用のオブジェトを作成し、必要なオブジェクトを総て選択してから『スライス作成』コマンドで一気にスライス化します。
今回は必要なオブジェクトを複製コピーして、スライス専用レイヤーへ移動しています。
1. スライス専用のレイヤー(ワイヤービューにしておく)を作成する。
2. スライス専用のオブジェクトを制作。
Illustratorの場合、『選択オブジェクトからスライス作成』コマンドで使用したオブジェクトを、その後削除したり、サイズ変更するとスライスも一緒に変更されたり削除されたりします。
そのため、スライス作成に使用するオブジェクトは専用レイヤーに保存しておきます。
3.オブジェクトを選択してからオブジェクトメニューの『スライス作成』コマンドを使用。
4.ツールパレットのスライス作成ツールは使わない。
とまあ、以上の項目を守ればAIを使って超高速でWEBデザインが可能です。
※注意:CS5のピクセルグリッドとアートボードの座標。
■まず、準備。
1. 設定
単位はピクセル、表示はピクセルビュー、ピクセルにスナップ、オブジェクトの線の設定は内側か無し、
aiWebD_01
aiWebD_03
aiWebD_05
aiWebD_12
aiWebD_04
■デザイン時の注意点
1. デザインは全て数値入力で作成
必ず座標値が整数になるように!
aiWebD_19
aiWebD_20
aiWebD_21
2. メニューなどの同一サイズの大量使用は『パスメニューの段落設定』コマンドを使用。
3. ガイドを使うときはオブジェクトへスナップさせる場合に限定。
さて、以上を踏まえてデザインを進めます。
その後はいよいよスライスの切り出しです。
■スライスの作成
手順としては、スライス専用のオブジェトを作成し、必要なオブジェクトを総て選択してから『スライス作成』コマンドで一気にスライス化します。
今回は必要なオブジェクトを複製コピーして、スライス専用レイヤーへ移動しています。
1. スライス専用のレイヤー(ワイヤービューにしておく)を作成する。
2. スライス専用のオブジェクトを制作。
Illustratorの場合、『選択オブジェクトからスライス作成』コマンドで使用したオブジェクトを、その後削除したり、サイズ変更するとスライスも一緒に変更されたり削除されたりします。
そのため、スライス作成に使用するオブジェクトは専用レイヤーに保存しておきます。
3.オブジェクトを選択してからオブジェクトメニューの『スライス作成』コマンドを使用。
4.ツールパレットのスライス作成ツールは使わない。
aiWebD_02
とまあ、以上の項目を守ればAIを使って超高速でWEBデザインが可能です。
※注意:CS5のピクセルグリッドとアートボードの座標。
aiWebD_22
最近流行のWEBサイトのロールオーバー
[ 2010/10/06 23:26 ]
このサイトもそうですが、最近はロールオーバーの切り替え画像を一枚の画像にして、切り替えはすべてCSSの背景画像のポジションで設定することが増えてます。
こんな感じで一まとめにしてもGIF画像なので容量も10kb以下と軽いです。
実際の使用画像
こんな感じで一まとめにしてもGIF画像なので容量も10kb以下と軽いです。
aiWebD_10
実際の使用画像
画像をトリミングしたときのスライス作成の注意点
[ 2011/04/09 14:54 ]
-
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 で購入! プライバシーについて
data
・・・・・・・・・・・・・・・・
■Apache サーバ ドキュメント■■アスキー デジタル用語辞典
■.htaccess実践活用術
■スタイルシート例文辞典
■Beginner's CGI
・・・・・・・・・・・・・・・・
Other Menu
prev
|
next
Date : 2010/03/19 04:21
Posted by valley | | Edit |
avater