トラブル克服&実験レポート / WebDevelopment  [WEB制作の正しい作法]  

WEB開発・CG製作でのトラブル解決と実験です。
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 digivalley0225
19

Illustratorで超高速WEBデザイン [ 2010/03/19 04:21 ]

■なぜイラストレータ?

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

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

結論!!

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

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

Date : 2010/03/19 04:21
Posted by valley | | Edit |

avater

Illustratorで超高速WEBデザインの手順
[ 2010/09/27 08:22 ]

イラストレータでの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 |

avater

最近流行のWEBサイトのロールオーバー
[ 2010/10/06 23:26 ]

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


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

aiWebD_10

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


実際の使用画像

Date : 2010/10/06 23:26
Posted by valley | | Edit |

avater

画像をトリミングしたときのスライス作成の注意点
[ 2011/04/09 14:54 ]

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

slice_01

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

slice_02

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

slice_03

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

slice_04

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

slice_05

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

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

Date : 2011/04/09 14:54
Posted by digivalley | | Edit |

avater

jQuery's LATEST NEWS.

@ RSS feeds of jQuery Official Site.

    From jQuery's Official Site.

    data

    ・・・・・・・・・・・・・・・・

    Apache サーバ ドキュメント
    アスキー デジタル用語辞典
    .htaccess実践活用術
    スタイルシート例文辞典
    Beginner's CGI

    ・・・・・・・・・・・・・・・・

    Other Menu