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

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

   

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

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

記事の投稿日とタグをデザインするために無料のアイコンを配置し、カラーオーバーレイでデザインテイストに合うようにカスタマイズします。



この動画で学べること

・投稿日時、タグの作成方法



アイコンとテキストで投稿日時の部分を作っていこう

今回は、タイトルの下にある投稿日時やタグを作成していきましょう。
まずは、アイコンの画像を挿入します。
ダウンロードしたフォルダの「タグ.png」「タイム.png」をドラッグ&ドロップでカンバス上に持ってきましょう。
バウンディングボックスが表示されますが、大きさは後で調整するので、今はそのままで確定してください。
そして、表示させた2つのアイコンに、レイヤーにカラーオーバーレイをかけて、水色にしましょう。



次に、テキスト部分を作成するので、テキストツールに切り替えてください。
文字の入力をしたら一度確定をして、文字スタイルの変更を行います。



文字が完成したら、文字の上下にガイドを引いて、アイコンの配置をしやすくします。
アイコンのバウンディングボックスを表示させ、作成したガイドに収まるように小さくします。
アイコンから右に5pxの余白をとって文字を配置させれば、完成です。