実践Webデザインスキル - 第9章 Lesson3

第6回:人気記事ランキングを作成する方法-4

   

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

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

人気記事ランキング一覧の順位を示す数字を、シェイプツールとテキストツールで作成し、レイヤーを整理します。



この動画で学べること

・ランキングの数字の作成方法



長方形ツールとテキストツールでランキングの数字を作っていこう

今回は、ランキングの数字の部分を作成していきましょう。
まずは背景の正方形を作ります。
長方形ツールに切り替え、カンバス上でクリックします。
幅:20px、高さ:20pxと指定し、正方形を作成したら、塗りを文字と同じ濃い灰色に、線を1pxの白色に設定します。
そして、画像の左上に配置してください。



次に数字を作っていきます。
テキストツールに切り替えて、「1」と入力します。一度文字の確定をして、スタイルの変更を行っていきましょう。
文字ができたら、文字と背景の四角形を整列していきましょう。
「1」のレイヤーと正方形のレイヤーを複数選択し、移動ツールに切り替えます。
オプションバーから「垂直方向中央揃え」と「水平方向中央揃え」をクリックし、整列させることができました。



これで、記事の一つ目が完成です。
次の動画ではこの記事を複製して、他の記事も作っていくので、レイヤーを整理しておきましょう。