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

第8回:テキストボックスを使って新着情報一覧を作成しよう-2

   

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

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

テキストボックスを使って新着情報一覧を作成していきましょう。



この動画で学べること

・入力したテキストボックスのスタイルを変更する方法
・点線のラインを引く方法



テキストボックスで文字を入力していこう

今回は、新着記事一覧のテキスト部分を作っていきましょう。
まずテキストツールに切り替えて、ガイドに沿ってテキストボックスを作って文字の入力をしていきます。
文字の編集モードの状態で、編集したい文字をドラッグで選択し、
フォントの種類、太さ、サイズ、トラッキング、行間、色などの文字スタイルを変更しましょう。




点線のラインを引く方法

では次に、文字と文字の間に点線を入れていきましょう。
ツールバーから、鉛筆ツールに切り替え、ブラシパネルでブラシの設定をしていきます。
ブラシパネルから1pxのブラシを選択し、点線にするために「間隔」を380pxに設定してください。
色は、グレーにしておきます。



ブラシのためのレイヤーが必要なので、レイヤーパネルの下にある
「新規レイヤーを作成」のアイコンをクリックしてレイヤーを追加して、ブラシで点線を書いてください。



1つ完成したら、完成したレイヤーを複製して、それぞれの位置に配置すれば、新着記事一覧の完成です。