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

第5回:お問い合わせバナーを作成する方法-2

   

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

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

前回のお問い合せバナーの作り方の続きを説明します。



この動画で学べること

・作成したシェイプやテキストを、より見やすくなるように配置する方法



シェイプやテキストを見やすく配置して、お問い合せバナーを完成させよう

前回の続きで、お問合わせバナーの作成を一緒にやっていきましょう。
「TEL」部分の背景を作るため、ツールから角丸長方形ツールに切り替えてください。
幅29px、高さ12pxの角丸長方形を作成します。
オプションバーより、塗りをクリーム色、線をなしに設定しましょう。
この角丸長方形と「TEL」のレイヤーを複数選択して移動ツール切り替え、
オプションバーの「垂直方向中央揃え」と「水平方向中央揃え」を選択して整列しましょう。
「お電話でのご予約はこちらまで」から10pxの余白をとって「TEL」を配置すれば、この部分は完成です。




最後に、「012−345−6789」の部分を見て行きましょう。
「TEL」から10pxの余白をとって「012−345−6789」を配置すると、文字がサイトの横幅のガイドからはみ出してしまうので、
文字の字間を調整していく必要があります。
「012−345−6789」のレイヤーを選択し、文字の編集モードに入ります。
ショートカットキー
[Mac] command ⌘+A
[Windows] Ctrl +A
で文字を全て編集し、トラッキングの値を今回は26pxに変更します。
ガイドに収まるように配置して、お問い合せバナーの完成です。