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

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

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

①テキスト

②写真

③枠

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

仕上げ

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

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

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

お試しあれ。