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

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

   

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

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

作成したレイヤーをグループ毎複製して、記事一覧を完成させます。



この動画で学べること

・フォルダの複製と配置
・記事の中身の変更方法



フォルダを複製して5つの記事を配置させよう

前回作成した一つ目の記事のフォルダを複製していきましょう。
フォルダを選択し、Altを押しながらドラッグでコピーしましょう。
移動ツールに切り替えて、フォルダの位置を移動させます。
このとき、Shiftを押しながら移動させると、左右にずれることなく、移動させることができます。
30pxの余白をとりながら、この方法で5記事分作成しましょう。



記事の中身を変更して記事一覧を完成させよう

次に、それぞれの記事の中身を変更していきます。
ダウンロードしたフォルダからドラッグ&ドロップで画像をカンバス上にもってきて、クリッピングマスクをかけて切り抜きをします。
また、カテゴリタグの文字と背景の色も変更します。
カテゴリ名の長さに応じで、10pxの余白をとり、背景の大きさを調整すれば、記事一覧の完成です。