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

最終回:ご予約フォームを作成する方法-6

   

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

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

ご予約ページのフォームを作成する方法を解説しています。
ここでは、「送信ボタン」をシェイプツールとテキストツールで作成していきます。



この動画で学べること

・送信ボタンの作り方



シェイプツールを使って、ボタンを作成しよう

今回は、フォームの送信ボタンを作成していきます。
まずは長方形選択ツールで、見本のボタンの大きさを調べましょう。
長方形ツールに切り替え、調べた値の幅136px、高さ40pxの長方形を作ります。
オプションバーから、塗りをフッターの緑、線はなしに設定します。



次にボタンのテキスト部分を作ります。
テキストに切り替えて、「送信する」と入力します。
一度文字の入力を確定し、文字スタイルの変更を行っていきます。
テキストと長方形を整列させたいので、テキストレイヤーと長方形レイヤーを複数選択し、移動ツールに切り替えます。
オプションバーの「垂直方向中央揃え」と「水平方向中央揃え」で長方形のど真ん中に配置させましょう。
ボタンのレイヤーを、グループにしてレイヤーパネルを整理しておきます。



最後に、送信ボタンから余白10pxをとったところまで「お客様ご要望欄」の長方形を引き伸ばせば、フォームの完成です。