ロボット研究開発、ソフトウェア開発、コンテンツ制作配信

初心者でもできるイラストレーター使い方講座 Webデザインカンプを作る

スポンサーリンク

4.メインコンテンツ部の作成

この章では、メインコンテンツ部のデザインを作成します。

4-1.イメージ画像の作成

まずは、ヘッダー部の下にサイトのイメージ画像配置します。

メニューの「ファイル」→「配置」をクリックし、イメージ画像の素材を配置します。
今回は素材として提供している素材1.jpgを選択し、配置をクリックします。

配置した素材画像を縮小します。「変形」パネルでW(幅):427pxに変更します。
※このとき、縦横比が変わらないように、縦横比固定をクリックしておきましょう。

同じように、素材2.jpg、素材3.jpgを配置、縮小し、以下のように横並びに配置しましょう。
これでイメージ画像が完成です。

4-2.コンセプトの作成

イメージ画像の下にお店のコンセプトを紹介するセクションを追加します。

文字ツールを選択し”consept”を入力します。フォント、文字色は以下を設定します。
・フォント:Snell Roundhand[Regular]
・フォントサイズ:120pt
・文字色:#f08080
注意:PC環境によっては、指定したフォントが入っていない場合があります。その場合は似たフォントで代用してください。

文字ツールを選択し”コンセプト”を入力します。フォント、文字色は以下を設定します。
・フォント:ヒラギノ明朝ProN[W6]
・フォントサイズ:32pt
・文字色:黒

次にコンセプトに配置するアイコン画像を作りたいと思います。
イメージ画像の左端のパスタ画像を選択し、altキーを押しながらドラッグしてコピーします。

次にパスタ部分だけ切り抜きます。
楕円形ツールを選択し、パスタのお皿を覆うように円を作ります。(shiftキーを押しながらドラッグすると正円になります。)
背景の画像と円を選択して、Command(Ctrl)を押しながら7キーを押します。
これで、クリッピングマスクが適用され、パスタ部分だけ切り抜くことができます。

文字ツールを選択し”極上のイタリアン”を入力します。フォント、文字色は以下を設定します。
・フォント:ヒラギノ明朝ProN[W6]
・フォントサイズ:40pt
・文字色:#C20D23

文字のバランスを調整します。
接続詞の「の」のフォントサイズを25pt、ベースラインシフトを-6ptに設定し、パスタ画像の中央に文字を配置します。

最後にコンセプトの説明文を追加します。
文字ツールを選択し”本場イタリアで大人気の本格イタリア料理店がついに日本上陸
当店自慢のテラスで極上のイタリア料理とお酒をお楽しみください。”を入力します。フォント、文字色は以下を設定して、先ほど作成したアイコン画像の下に配置します。これで、コンセプト部分の完成です。
・フォント:ヒラギノ明朝ProN[W6]
・フォントサイズ:16pt
・文字色:黒

4-3.メニューの作成

次にメニュー部分を作成します。

文字ツールを選択し”menu”を入力します。フォント、文字色は以下を設定します。
・フォント:Snell Roundhand[Regular]
・フォントサイズ:120pt
・文字色:#95CB87

文字ツールを選択し”メニュー”を入力します。フォント、文字色は以下を設定します。
・フォント:ヒラギノ明朝ProN[W6]
・フォントサイズ:32pt
・文字色:黒

メニュー用の素材を配置します。
メニューの「ファイル」→「配置」をクリックし、素材4.jpg選択し、配置します。

配置した素材画像を縮小します。「変形」パネルでW(幅):300pxに変更します。
※このとき、縦横比が変わらないように、縦横比固定をクリックしておきましょう。
素材は、左マージン用のガイド線に沿うように配置します。

同様に、素材5.jpg,素材6.jpgを配置し、縮小しましょう。
配置した3枚の素材画像を整列します。
3枚の画像を選択した後、一番左の画像を選択しキーオブジェクトとします。
整列パネルから「垂直方向上に整列」、間隔値を50pxに設定して、「水平方向等間隔に分布」を選択します。

次に各メニュー項目を作成します。
文字ツールを選択し”パスタ”を入力します。フォント、文字色は以下を設定します。
・フォント:ヒラギノ明朝ProN[W6]
・フォントサイズ:21pt
・文字色:黒

文字ツールを選択し以下のように各メニュー項目を入力します。フォント、文字色は以下を設定します。
・フォント:ヒラギノ明朝ProN[W6]
・フォントサイズ:12pt
・文字色:黒

同様に、”ピザ”、”ドリンク”の項目を入力しましょう。
最後に、整列パネルを使って、以下のように配置を整えましょう。

メニューの背景用のボックスを設定します。
長方形ツールを選択し、メニュー部分を覆うように配置します。
塗りは、#F5FFFA、線は無しにします。

背景用ボックスを最背面に配置します。
配置した背景用ボックスを選択し、Command(Ctrl)+Shift+[(左括弧)を入力します。
※もしくは、「オブジェクト」メニュー→「重ね順」→「最背面へ」を選択します。
これで、メニュー部分が完成しました。

4-4.アクセスの作成

次にアクセス部分を作成します。

文字ツールを選択し”access”を入力します。フォント、文字色は以下を設定します。
・フォント:Snell Roundhand[Regular]
・フォントサイズ:120pt
・文字色:#7E776D

文字ツールを選択し”アクセス”を入力します。フォント、文字色は以下を設定します。
・フォント:ヒラギノ明朝ProN[W6]
・フォントサイズ:32pt
・文字色:黒

MAP用のエリアを作成します。
長方形ツールを選択し、以下のように長方形ボックスを作成します。線の色は黒、塗は無しです。

文字ツールを選択しアクセス情報を入力します。フォント、文字色は以下を設定します。
・フォント:ヒラギノ明朝ProN[W6]
・フォントサイズ:19pt
・文字色:黒

ヘッダー部に配置していた”ご予約はこちら”と電話番号の要素をコピーします。

アクセスエリアの下部中央に配置しましょう。
これで、アクセス部分が完成です。

次章でフッター部分を作り完成です!
もう少しです。がんばりましょう!!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン