初心者でもできるイラストレーター使い方講座 Webデザインカンプを作る
5.フッター部の作成
フッター部分を作成します。
長方形ツールを選択し、作成していたフッター用のガイドに合わせて長方形を作成します。
塗りは、#C20D23、線は無しです。
ヘッダーに配置していたロゴをコピーして貼り付けます。
Command(Ctrl)+shift+Gをクリックしてグループ化を解除し、それぞれの要素の塗りを白に設定します。
文字ツールを選択しCopyrightを入力します。フォント、文字色は以下を設定します。
・フォント：小塚ゴシックPr6N
・フォントサイズ：13pt
・文字色：白
これで、イタリアンレストランのWebサイト デザインカンプの完成です。
6.スマホ用レイアウトの作成
最近のWebサイトはほぼスマホ用のレイアウトに対応しています。
ということで、スマホ用のデザインカンプも作成しておきます。
アートボードパネルから、新規アートボードをクリックします。
オプションメニューから「アートボードオプション」を選択します。
幅：650px、高さ：3000pxに設定して、OKをクリックします。
これで、スマホ用のアートボードが作成されました。
先ほど作成したデザインカンプの各要素を新規アートボードへコピーしていきます。
要素は、縮小して微調整しましょう。
いろいろとスマホ用でレイアウトを変えてもよいのですが、今回は簡略化するため、メニュー項目の横並びを縦並びに変えた程度にとどめています。
以上スマホ用レイアウトの作成方法でした。
7.素材をエクスポート
デザインカンプが完成したので、最後に作成した素材をエクスポートする方法をご紹介します。
やり方はいろいろあるのですが、今回は素材用のアートボードを作成してエクスポートする方法をご紹介します。
まず、デザインカンプから素材として使うものを選びましょう。
今回は、以下の赤枠の部分を素材として使うことにします。
次に、素材にしたい要素をアートボードの外にコピーしていきます。
アートボードツールを選択し、コピーした素材のサイズに合わせて、ドラッグしながら新規でアートボードを作成していきます。
最後に「ファイル」メニューの「書き出し」→「書き出し形式」を選択します。
保存先の場所を設定します。
また今回、素材として背景が透明の素材もあるので、ファイル形式は「PING」を選択します。
アートボードに作成にチェックを入れ、アートボードの範囲を設定し、書き出しをクリックします。
解像度、アンチエイリアスを選択し、OKをクリックしましょう。
以上で、設定した保存先に素材データがエクスポートされます。
最後に
以上、イラストレーターを使って、Webデザインカンプを作成する方法をご紹介しました。
今回作成したデザインカンプから実際にHTML&CSSで実装する方法についても近日中に公開予定ですので、お楽しみに！！
それでは！
スポンサーリンク
