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

第9回:ページネーションを作成する方法

   

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

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

テキストツールやシェイプツールを利用して、ページネーションを作成していきましょう。



この動画で学べること

・ページネーションの作成方法



ページネーションの背景を長方形ツールで作成しよう

今回は、記事一覧の下にあるページネーションを作成しましょう。
記事一覧とページネーションの間には、30pxの余白がありますので、ガイドを引いておきましょう。
続いて、ページネーションの高さである31pxのところにもガイドを引きます


長方形ツールに切り替えて、高さ31pxの長方形を作成します。
横幅は後で調整しますので、今は気にしなくて大丈夫です。
オプションバーから、塗りは白色、線は1pxの灰色に設定しておきます。



ページネーションのテキストを作成して長方形と整列させよう

続いて、テキストを作成しましょう。
テキストツールに切り替えて、「NEXT>>」と入力します。
一度文字の確定をして、スタイルの変更を行なっていきます。


文字が完成したら、先ほどの長方形とテキストを整列させましょう。
「NEXT>>」のレイヤーと長方形レイヤーを複数選択し、移動ツールに切り替えます。
オプションバーから「垂直方向中央揃え」を選択し、長方形の真ん中に配置させます。
長方形のバウンディングボックスを表示させ、10pxの余白をとったところまで横幅を調整しましょう。
これで、NEXTの完成です。
レイヤーをフォルダにまとめておきましょう。




完成したフォルダを複製して、ページネーションを作っていきましょう。