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

最終回:関連記事一覧の作成方法-1

   

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

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

作業効率化のため、似たデザインのレイヤーを複製し再利用する形で関連記事の部分を作成していきましょう。



この動画で学べること

・サイドバーの人気記事ランキングを複製する方法
・背景の大きさを調整する方法



すでにあるフォルダを複製して再利用しよう

今回は、関連する記事の部分を作成していきましょう。
関連する記事の部分は、サイドバーの人気記事ランキングと似たデザインになるので、移動ツールの自動選択ツールを使って人気記事ランキングのフォルダを探し出して、
フォルダごと複製します。(複製の方法は、Alt+ドラッグです。)
フォルダを複製したら、記事本文から60pxの余白をとってガイドを引き、移動ツールを使って配置させましょう。





自由変形を使って背景の大きさを調整しよう

次に、背景の四角形が小さすぎるので、大きくしていきます。
移動ツールの自動選択ツールを使って長方形レイヤーを探し出し、ショートカットキー

[Mac] command ⌘+T
[Windows] Ctrl +T

でバウンディングボックスを表示させます。
横幅を記事本文と同じに、縦は後で微調整するのでだいたいの大きさにしておきます。