特別編.07 イラストレーターでWebバナーをデザインする

それではイラストレーターでバナーをデザインしてみましょう。

画像に特化したフォトショップでバナーをデザインを作成した方がやりやすい方もいるかと思いますが、もちろんイラストレーターでも作成は可能です。

今後、楽に感じる方を選択してデザインしていきましょう。

個人的には、フォトショップで作業した方が早く仕上げられるので、オススメですが、クラウドソーシングで稀に「イラストレーターのデータで納品をお願いします」という案件もあるので、必要なシーンで使い分けをしていきましょう。

Webバナーをイラレで作る時の注意点5つ

【RGBに変換】

新規ドキュメントを作成する際にカラーモードがRGBになっているか確認しましょう。

紙媒体用のCMYKモードで作業すると色域が違うのでRGBになっているかをしっかりとチェックすることが必要となります。

CMYKは蛍光系の色は表現出来ませんので色がくすんで見えます。

【単位】

Webでの単位はピクセルになります。こちらも新規ドキュメントを作成の際、必ず確認をしましょう。

プロファイルをwebで選択すれば問題ありませんが、プリントを選択していると全てが間違った状態で始まってしまいますので十分に注意しましょう。

【アートボード】

上記の”新規オブジェクトをピクセルグリッドに整合”にチェックを入れていないと、アートボードがピクセルからズレてしまう場合があります。

そのまま書き出すとビジュアルの隅に白い線ができてしまったり、周囲の枠線が滲んでしまう場合があります。上記のウィンドウで「詳細」にある「新規オブジェクトをピクセルグリッドに整合」のチェックを必ず最初に入れておきましょう。

【画像解像度】

Webでの基本解像度は72ppiになるので、基本解像度に合わせておきましょう。

使用する画像も最終72ppiで表示されることを意識して、使用していきましょう。

【線の設定】

バナーの外周に枠線をつける場合は線幅の基準を変えておきましょう。

デフォルトでは線のセンターが基準になっていますが、線の内側に設定しおくことでオブジェクトのパスが線幅の外周にしっかり付くようになります。

【提出課題】

■サイズ

W500×H350px

■イメージ

「ザ・ダイエット」という印象のバナーデザインをお願いします。

■画像

素材・参考デザインのダウンロードはこちらから>

(画像を切り抜いて使用して下さい)

■テキスト

40代からはじめる!−5kg〜−10kg!

食べるだけで痩せて若返る!

プレミアムダイエット

運動・サプリ・プロテインなし!

無料カウンセリングはこちらから

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

完成しましたら、講師まで提出をお願いいたします。

【注意】

※全ての文字に必ずアウトラインを作成して提出しましょう

※アウトラインを作成した後、上書き保存しないように注意しましょう