実践Webデザインスキル - 第8章 Lesson8

第5回:特集記事部分を作成する方法-2

   

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

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

画像を配置し、ガイドを上手く利用してタイトルを入力していきます。



この動画で学べること

・メイン記事の作成方法



特集記事の画像を配置しよう

今回は、特集記事の写真を埋め込んでいきましょう。
ダウンロードしているフォルダのメイン.jpgをドラッグ&ドロップでカンバス上にもってくる、
または、メニューバーのファイルから「埋め込みを配置」で、画像を配置させてください。
バウンディングボックスが表示されますが、今回は大きさなどの調整は必要ないので、オプションバーから確定してください。
移動ツールに切り替えて、ガイドに合わせて1pxもずれないように配置して、画像部分は完成です。




テキストボックスを使って記事タイトルを作成しよう

次に、記事のタイトルを作っていきましょう。
文字の部分には内側の余白があります。
上下左右、それぞれ20pxずつのところで、ガイドを引いておきましょう。
テキストツールに切り替えて、ガイドの内側に沿ってテキストボックスを作ります。
文字の入力とスタイルの変更をして、テキスト部分の完成です。




カテゴリの背景を作ろう

最後に、記事の右上にあるカテゴリの部分を作っていきましょう。
長方形ツールでだいたいで大丈夫なので、長方形を作成してください。
色をロゴの部分と同じオレンジ色に設定し、線は1pxの白色に設定しておきます。
次回、カテゴリのテキストをデザインしていきます。