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/