福井県のweb制作は有限会社ハートブレーン
13.07.01

illustratorでwebデザイン作成する際の留意点

一般的に、webデザインはphotoshopで作成するものらしいですね。

「らしい」というのは
実はNを含めたハートブレーンの面々は
誰一人疑問を提示することなく、illustratorを使用していたのです。
デザイン担当も、コード担当(Nです)も、作業はみんなillustrator。
コード担当がデザインに何の用事かというと、単にweb仕様に
自分が構成しやすいように
デザインのサイズや配置を微妙に変化させる、ってそれだけですけど。

というのも、ハートブレーンは今でこそwebや動画制作が多数を占めていますが
その昔、情報誌制作などしておりまして。
そちらが主な業務内容だったので、なじみが深いといえば、やはりillustratorだったのですよ。
(その名残が今も発行されているニュースレターです)
Nに至っては、photoshopでの画像のゆがみ修正は、カンバスの回転→角度指定しか方法を知らなかったくらいなので、全然ダメだこりゃ。

そんな昔とった杵柄(物はいいよう)なハートブレーンのweb制作ですが
徐々に覚えていった、illustratorでのwebデザイン(修正)方法を書き留めます。

(基準:illustrator CS5)

ファイル→ドキュメントのカラーモード→RGBカラー
CMYKとRGBでは、やはり色が違います。若干明暗が違うのもあれば、明らかに色の配合がおかしいのまで。
なので、最初から指定しておくと、Nが何度もやらかした
「あ、あれ…?色おかしいですね。すみません、私の色指定おかしかったのかな?」
と、人の良いデザイナーさんを混乱に陥れるのを防ぎます。

表示→ピクセルプレビュー
昨今のillustratorの拡大画像のキレイさに甘え切って
ブラウザで見てみたらあれ〜?という現象を避けるために
最初から現実を見ておきましょう、という対策。

表示→ピクセルにスナップ
1pxごとにピタリと合う便利仕様。
この存在を知って、世界が変わりました。(大げさ)
DTPデザイン時に、間違ってここにチェックを入れてしまっては「んもう!」となっていた機能ですが
グリッドレイアウトなんてものが推奨されるwebデザインにおいては、最強の味方です。

環境設定→一般→キー入力→1px
環境設定→単位→一般・線・書式・日本語オプション→ピクセル
基本、というかこの設定を忘れると、とてつもなく面倒です。
いざデザインしたページを素材に変えていく作業を……という段階で
12.9385px とかいうサイズになっていたら……ああ恐ろしい。

永遠の初心者Nの、今更すぎる覚え書きでした。

【ハートブレーン】https://blog.heart-kokoro.net/

【ハートブレーン】https://heartbrain.net
最後までご覧いただき、ありがとうございました。
よろしければ、SNSでのシェアやランキングなど、応援よろしくお願いします。


Webサイト・CGIランキング

メールでのお問合せ・お見積りはコチラ
TOP