制作プラス

web制作や映像制作に関する知識のアウトプット

写真にフワッとしたグラデをかけてスペースを作る方法

写真にフワッとしたグラデをかけてスペースを作る方法

こんな感じの↓バナーを作ると想定して、写真の横にふわっとした文字スペースを作る方法を紹介します。

採用情報_ba

今回は塾のコーポレートサイトで職員採用ページのリンク先へ誘導するバナーを作ると仮定しましょう。

素材をバラすとこんな感じ↓

ba_sozai

①テキスト

②写真

③枠

文字と写真と枠の3つしか要素のないシンプルなバナーです。

スポンサー リンク

①クリッピングマスクで枠内に写真を配置

ba_3

採用情報のテキストは左に配置↓

ba_2

このままだと写真と文字が被ってしまっていますので、グラデーションをかけて文字が見えやすい様にスペースを作っていきます。

対象の写真にマスクをかけ、グラデーションをかける

写真にレイヤーマスクをかけます。

写真を選択し、下のパネルからレイヤーマスクを追加をクリック。

写真の横にマスクのパネルが追加されます。

キャプチャ

マスクパネルを選択し、グラーデーションをかけます。

グラデーションはこんな感じに↓

gurade

一から作るのが面倒だと思うので下記からグラデパターンをダウンロードして、フォトショに読み込んで使用してください。

※ブラックグラデパターン

グラデーションツールで先ほどのグラデパターンを選択し、マスクパネルを選択後、左から右へグラデーションをかけていきます。

ブログ用_ba

複数回かけていき写真の左部分に見えやすい文字スペースができるまで調整してください。

グラデをかける際には、ガイドを引き、均等にかけるのがコツです。

スポンサー リンク

仕上げ

採用情報の文字と写真とのバランスを見て文字の大きさ、位置を調整して出来上がり↓

採用情報_ba

物足りない人はこれに装飾を加えてもいいかもしれません。

シンプルなバナーですが、コーポレートサイトなど固いデザインのサイトではよく見かけるバナーです。

お試しあれ。

コメントはこちら

*
*
* (公開されません)

CAPTCHA


スポンサーリンク
Return Top