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

第3回:記事ページの本文の作成方法-1

   

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

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

記事本文のタイトルや投稿日、カテゴリーの表記を、テキストツールを使って作成します。



この動画でまなべること

・記事の背景の作成方法
・日付とタイトルの作成方法
・カテゴリタグをトップページから持ってくる方法



記事の背景を長方形ツールで作成しよう

今回は、記事の背景を作っていきましょう。
長方形ツールに切り替えて、ガイドに合わせて大まかに長方形を作成します。
オプションバーから塗りを白色、線を1pxの薄い灰色に設定します。



テキストツールで日付とタイトルを作成しよう

次に、日付と記事タイトルを作成します。
ものさしツールに切り替えて、内側の余白となる20pxを測り、ガイドを引いておきます。
そして、テキストツールに切り替えて、日付を入力していきましょう。
文字の入力ができたら、一度文字の確定をして、スタイルを変更します。


次に、タイトル部分のテキストも作成していきます。
タイトルは2行になるので、テキストボックスを作成して文字の入力をしていきましょう。
文字が入力できたら、一度確定してスタイルを変更します。
そして、日付からタイトルまでは16pxの余白をとって配置します。



カテゴリタグをトップページから持ってこよう

次はカテゴリタグを作りましょう。
トップページで作成したものと同じなので、トップページからレイヤーを持ってきたいと思います。
トップページをPhotoshopで開き、自動選択ツールでカテゴリタグの背景とテキストのレイヤーを複数選択してください。
選択したレイヤーをつまんで記事ページのタブの部分まで持っていくと、記事ページが表示され、トップページのカテゴリタグをコピーすることができます。
そして、コピーしたレイヤーを記事の右上に配置すれば、カテゴリタグの完成です。