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

第9回:写真を使ったバナーを作成する方法-1

   

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

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

写真を使ったバナーを作成する方法をみていきましょう。



この動画で学べること

・写真を配置し、バナーの中に収まるようにクリッピングマスクを使って画像を切り抜く方法



背景の色を変更し、ドロップシャドウをかけよう

今回からは、写真を使ったバナーの作成に入りたいと思います。
まずは、サイドバーの背景の長方形を、白色に変更していきましょう。
やり方は、長方形のレイヤーのサムネイル部分をダブルクリックでカラーピッカーを立ち上げ、色を変更するのが一番簡単です。
次に、背景にレイヤースタイルをかけていきます。
新着情報の背景にかかっていたドロップシャドウと同じですので、レイヤースタイルのコピーをして作業を効率化しましょう。




バナーの画像を配置してクリッピングマスクをかけていこう

メニューバーのファイルから「埋め込みを配置」を選択し、画像を配置します。
次に画像のレイヤーをバナーの背景レイヤーの上にもっていき、右クリックで「クリッピングマスクを作成」に進みます。
これで、背景の長方形の形に画像をくり抜くことができます。