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

第8回:新着記事一覧を作成する方法-1

   

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

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

新着記事一覧の見出しを作成していきましょう。



この動画で学べること

・アイコンとテキストを使った見出しの作成方法



カラーオーバーレイを使って見出しのアイコンを作成していこう

今回は、新着記事一覧の見出しを作成します。
まずはアイコンからですが、ダウンロードしたフォルダの中に、「新着記事一覧.png」がありますので、それをドラッグ&ドロップでカンバス上にもってきましょう。
バウンディングボックスが表示されますので、だいたいの大きさに縮小しておきます。


次にアイコンにカラーオーバーレイをかけていきます。
レイヤースタイルのボックスを立ち上げ、カラーオーバーレイを選択します。
描画モードを通常、色をロゴと同じオレンジにし、OKを押してください。




テキストとアイコンを整列させて見出しを完成させよう

次にテキスト部分を作っていきましょう。
テキストツールに切り替えて、「新着記事一覧」と入力し、スタイルの変更を行っていきます。
テキストができたら移動ツールでガイドの位置に移動させ、アイコンとテキストの高さを揃えます。
アイコンから10pxの余白をとってテキストを配置すれば、見出し部分の完成です。