実践Webデザインスキル - 第8章 Lesson4

第3回:シェイプツールでヘッダーの背景を作成する方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

シェイプツールを利用して、ヘッダーの背景を作成していきます。



この動画で学べること

・ヘッダーの背景を作成する方法



長方形ツールを使ってヘッダーの背景を作成しよう

今回から、Webサイトの作成に入っていきます。
まずは、ヘッダーの背景を長方形ツールを使って作っていきましょう。
幅1440px 高さ102px、の長方形を作成し、移動ツールに切り替えて配置させます。
ヘッダーの下にあるオレンジの線も、同じように長方形ツールで作りましよう。
幅1440px、高さ3pxです。
色はカラーピッカーを立ち上げて変更しておいてください。
長方形ができたら、ズームツールで拡大し、移動ツールに切り替えて、ガイドから1pxもズレがないように配置します。




背景にレイヤースタイルをかけていこう

次に、ヘッダーにドロップシャドウをかけていきましょう。
レイヤースタイルのボックスを立ち上げ、ドロップシャドウを選択します。
以下のように設定しておいてください。


・描画モード:通常
・色:オレンジの濃い色
・角度:包括光源のチェックを外し、90°に設定
・距離:4px
・スプレッド:0
・サイズ:7px
・不透明度:25%


OKでボックスを閉じて、ヘッダー部分の背景の完成です。