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

第3回:(続き)記事ページの本文の作成方法-2

   

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

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

記事本文のアイキャッチ画像をクリッピングマスクで切り抜き、テキストボックスで本文の入力を行っていきます。



この動画で学べること

・記事の画像の作成方法
・記事のテキスト部分の作成方法



記事のアイキャッチ画像をクリッピングマスクを使って作成しよう

今回は、記事の画像部分を作成していきましょう。
記事タイトルと画像の間には28pxの余白があるので、ものさしツールで測り、ガイドを引いておきます。



ガイドが引けたら、記事の画像を切り抜きたいと思います。
まず、画像を切り抜くための長方形を作成していきましょう。
長方形ツールに切り替えて、幅650px、高さ434pxのり長方形を作成し、レイヤーの名前をマスクにします。


ダウンロードしたフォルダにある「ウェブデザイン.jpg」をドラッグ&ドロップでカンバス上に持ってきて、画像を表示させます。
そして、バウンディングボックスが表示されるのでShiftを押しながらつまみを動かして拡大し、確定してください。
マスクのレイヤーの上に画像のレイヤーがあることを確認して、右クリックから「クリッピングマスクを作成」に進んで画像の切り抜きをしましょう。







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

次に、記事のテキストを作っていきます。
画像から20pxの余白をとってガイドを引きます。
テキストツールに切り替えて、テキストボックスを作成します。
文字を入力し、スタイルの変更をしていきましょう。