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

第7回:カテゴリー一覧を作成する方法-1

   

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

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

カテゴリ一覧背景をシェイプツールで、見出しをテキストツールを使って作成します。



この動画で学べること

・カテゴリ一覧の背景の作成方法
・見出しの作成方法



カテゴリ一覧の背景を長方形ツールで作成しよう

今回は、サイドバーのカテゴリ一覧を作成していきましょう。
まずは背景を作っていきます。
長方形ツールに切り替えて、でガイドに合わせて背景の四角形を作成します。
塗りは白、線は10pxの灰色に設定します。


四角形ができたら、ものさしツールで測りって内側の10pxの余白部分にガイドを引いておきましょう。




見出し部分のアイコンとテキストを作成していこう

次に見出しのアイコンを作っていきましょう。テキストツールで「さんかく」と入力し、変換から「▲」を選択します。
色をロゴと同じオレンジ色に変更しましょう。
バウンディングボックスを表示させ、▲を下向きにして、大きさの調節をすれば、アイコン部分の完成です。


テキストツールに切り替えて、「CATEGORY」と入力し、一度文字の確定をします。
文字のスタイルを変更して完成です。
次の動画で、正しい位置に移動させましょう。