実践Webデザインスキル - 第3章 Lesson9

第九回:シェイプツールを使って、ページトップへを作ろう

   

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

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

シェイプツールを使って、「ページトップへ」を作っていきましょう。



この動画で学べること

・ページトップへの作成方法



シェイプツールを使って、「PAGE TOP」を作ってみよう

トップページへ飛ぶためのボタンを作成して、ユーザーが使いやすいWebサイトにしましょう。
まずは背景の長方形を作っていきます。
長方形ツールに切り替えて、幅78px、高さ20pxの長方形を作成してください。
色は、ロゴやフッターと同じ青色、線は無しにします。



次に、テキストを作っていきます。
テキストツールに切り替えて、「PAGE TOP」と入力し、文字スタイルを設定していきます。
文字が完成したら、先ほど作った四角形の上に移動させます。
移動ツールの状態で、四角形とテキストのレイヤーをショートカットキー

[Mac] command ⌘+クリック
[Windows] Ctrl +クリック

を使って複数選択し、オプションバーの「垂直方向中央揃え」と「水平方向中央揃え」をクリックすると、
四角形のど真ん中にテキストを配置することができます。



これで、PAGE TOPの完成です。