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

第2回:記事ページのサイドバーの作成方法-1

   

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

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

サイドバーの人気記事ランキングを、すでにあるレイヤーを複製し再利用する形で作成していきます。



この動画で学べること

・人気記事ランキングを作るためのパーツを複製する方法



人気記事ランキングのパーツを複製して配置させよう

今回は、人気記事ランキングのレイヤーを再利用してサイドバーの作成をしていきたいと思います。
まずは、必要なパーツを複製していきましょう。
サイドバーのカテゴリ一覧の背景レイヤーを自動選択ツールで探し出し、Alt+ドラッグで複製します。
そして移動ツールに切り替え、複製した背景を広告から30pxの余白をとって配置します。



次にトップページで作った人気記事ランキングを自動選択ツールで探しだし、Alt+ドラッグで複製します。
移動ツールでサイドバーに移動させましょう。
内側の余白20pxをとって、複製した記事一覧を配置してください。



見出しの線を修正しよう


人気記事ランキングの見出しの下の線を、直線から点線に変更しましょう。
カテゴリ一覧の見出しの点線を自動選択ツールで探しだし、Alt+ドラッグで複製します。
人気記事ランキングの見出しの下に10pxの余白をとって配置すれば、完成です。