実践Webデザインスキル - 第10章 Lesson8

最終回:フッターを作成する方法-3

   

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

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

テキストツールとシェイプツールを使って、お問い合わせフォームの送信ボタンを作成します。



この動画で学べること

・お問い合せの送信ボタンの作成方法



長方形ツールでボタンの背景を作成しよう

今回は、お問い合せの送信ボタンを作りましょう。
まず、ものさしツールで余白の10pxを測り、ガイドを引いておきます。
長方形ツールに切り替えて、ボタンの背景となる幅127px、高さ30pxの長方形を作成します。
長方形の塗りを濃い灰色、線はなしにしてください。
そして、移動ツールで先ほど引いたガイドの所に移動させます。




テキストツールでボタンの文字を作成しよう

次に、ボタンのテキストを作っていきましょう。
テキストツールで「送信する」と入力し、一度確定します。
文字スタイルを変更していきまが、文字の太さを太いものに、色を白色にしてください。



文字が完成したら、背景の長方形と整列させていきましょう。
「送信する」のレイヤーと長方形のレイヤーを複数選択し、移動ツールに切り替えます。
オプションサービスから「垂直方向中央揃え」と「水平方向中央揃え」を選択し、テキストを背景の真ん中配置させましょう。
これで、送信ボタンの完成です。





ページの背景の色をカラーオーバーレイで変更しよう

最後に、ページの背景の色を変更しましょう。
背景レイヤーにはロックがかかっていて編集ができないので、レイヤーをダブルクリックしてOKを押しましょう。
これで、通常のレイヤーにすることができます。
レイヤースタイルのカラーオーバーレイをかけ、薄い灰色にします。
これで、トップページの完成です。