Webデザインから画像を書き出す【イラストレーター入門講座】

Web制作では、デザインを元にコーディングを行ってWebページを作ります。
コーディングをするためには、ページで使う画像をそれぞれ用意しておく必要があります。

作ったデザインから、必要なパーツを画像として書き出してみましょう。
今回書き出す画像は、ファーストビューとバナーの２枚です。

イラストレーターでの画像の書き出し方法

1.書き出す画像をピックアップする

書き出しには「アセットの書き出し」というパネルを使います。
ウィンドウから、パネルを表示させて下さい。

ファーストビューの画像・長方形・文字の３つを選択します。
その状態で右クリックして「グループ」を選択。
グループ化されるので、アセットの書き出しパネルにドラッグします。

そうすると、枠の中に画像が入ります。

ここは書き出し待ちリストのようなものです。
同じ様にバナー部分もグループ化して、アセットパネルに追加してみましょう。

これで２枚の画像が、書き出しのスタンバイ状態になりました。

2.ファイル名と書き出す形式を決める

画像の名前が分かりにくいので、分かるように変更しておきましょう。
「アセット 2」などの部分をクリックすると、打ち替えることができます。

[shift]キーを押しながらクリックして、２つの画像を選択。
書き出し設定を1x-PNGに設定して下さい。

3.書き出しを実行する

書き出しのボタンをクリックします。

ファイルを保存場所を聞かれます。
わかりやすい場所を指定して「フォルダーの選択」をクリック。

書き出しが実行されます。
保存先に指定した場所を見てみると、新しいフォルダーが出来ています。
中に、書き出した２枚の画像が入っていれば完了です。

これでWebデザイン/コーディングのためのIllustrator基本操作は完了です！
このデザインを元にコーディングを行うと、Webサイトが完成します。