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

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

   

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

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

前回のバナー作成の続きでバナーを作っていきましょう。
配置した画像にグラデーションマスクをかけ、テキストを入力していきます。



この動画で学べること

・写真を使ったバナーを作成する方法



写真にグラデーションのレイヤーマスクをかけよう

前回の続きで、バナーの作成をしていきます。
まず、写真にグラデーションのレイヤーマスクをかけましょう。
「ご予約・お問い合せ」のレイヤー選択状態で、レイヤーパネルの下のレイヤーマスクを追加をしてください。
チャンネルパネルに移動し、「ご予約・お問い合せマスク」を表示にした状態にして、グラデーションをかけていきます。
グラデーションツールに切り替えて、オプションバーから色が白黒になっていることを確認し、カンバス上でドラッグします。
ピンク色になった部分が、グラデーションのかかるところです。画像にグラデーションがかかれば大丈夫なので、OKを押してください。
チャンネルパネルの「ご予約・お問い合せマスク」を非表示に戻して、グラデーションの完成です。




テキストを入力し、黄金比率を使って配置しよう

次にテキストツールに切り替え、文字を入力していきます。
このとき、文字にクリッピングマスクがかからないように気をつけてください。
文字の入力ができたら、オプションバーから一度入力の確定をして、スタイルの変更をし、移動ツールを使って、文字をバナーに配置します。
今回は黄金比選択ツールを使って計算し、文字を配置させる位置を決めましょう。



これで、一つ目のバナーの完成です。