実践Webデザインスキル - 第11章 Lesson7

最終回:(続き)関連記事一覧の作成方法-2

   

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

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

複製したレイヤーの見出し部分のアイコンと、テキストの修正を行います。



この動画で学べること

・関連記事の見出しの作成方法



レイヤースタイルのコピーをしてアイコンとテキストを作成しよう

今回は、関連記事の見出し部分を作っていきましょう。
見出しのアイコンを変更したいので、アイコンのレイヤーを自動選択ツールを使って探し出します。
そして、ダウンロードしたフォルダにある「関連する記事.png」をドラッグ&ドロップでカンバス上に持ってきて、アイコンを表示させてください。
バウンディングボックスが表示されるので、王冠のアイコンと同じ高さになるように調整しましょう。



次に、表示させたアイコンの色を変更します。
王冠と同じカラーオーバーレイをかけたいので、レイヤースタイルをAltを押しながらドラッグ&ドロップで新しいアイコンにコピーしてください。
あとは、王冠のレイヤーはもう必要ないので、削除しておきましょう。



また、見出しのテキストを「この記事に関連する記事」に変更しください。




レイヤーの複製で見出しの下の点線を作成しよう

見出しの下の点線が途中で切れているので、点線のレイヤーを複製し、切れている部分に足していきましょう。
足していくと背景からはみ出してしますので、はみ出した部分を削除する必要があります。
はみ出したレイヤーを選択した状態で長方形選択ツールに切り替えます。
削除したいところを囲って選択範囲の作成をし、Deleteを押すといらない部分を消すことができました。