実践Webデザインスキル - 第2章 Lesson5

Webサイトのメインビジュアルの作り方

   

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

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

Webサイトのメインビジュアルの作り方を説明してきます。



この動画で学べること

・Webサイトのメインビジュアルを作る方法



Webサイトのメインビジュアルの背景を作っていこう

今回は、Webサイトのメインビジュアルを作っていきたいと思います。
まずは、長方形ツールに切り替えて、ガイドに合わせて背景の四角形を作ります。
この背景に、いろいろな要素を埋め込むようにして、メインビジュアルにしていきましょう。



メニューバーのファイルから「埋め込みを配置」に進んで、画像(和の商品)を貼りつけます。
和の商品レイヤーを背景レイヤーのすぐ上に持っていき、右クリックで「グリッピングマスクを作成」進みます。
和の商品のレイヤーの背景を引き伸ばしたいのですが、スマートオブジェクトになっていて画像に編集を加えることができない状態なので、
右クリックから「レイヤーをラスタライズ」に進んで画像を編集できるようにします。



長方形選択ツールにきりかえて、和の商品のレイヤーの背景を引き伸ばしたい部分を選択します。

ショートカットキー
[Mac] command ⌘+T
[Windows] Ctrl +T

でバウンディングボックスを表示し、背景を引き伸ばしましょう。




テキストを挿入していこう

次にテキスト部分を作っていきたいと思います。

ショートカットキー
[Mac] command ⌘+R
[Windows] Ctrl +R

で定規を表示し、長さを測って余白部分のガイドを作成していきます。
テキストツールに切り替え、ガイドにそって文字を入力してください。
文字の入力を確定したら、文字のスタイルを変えていきましょう。



最後に、文字にレイヤースタイルのドロップシャドウをかけると、奥行きがでて立地に見せることができます。
少しの工夫ですが、これだけでもよいデザインになりますので、ぜひ一緒にやってみてください。