TREND 特集：Photoshopで始めるカンタンWebデザイン ― 第5回

ElementsでもOK！だんだん透明になるフォトショ画像の作り方 (1/2)

　Webサイトのデザインでよく見かける、上のような画像。2つの画像がじょじょに透明になって重なっている。ちょうど、動画でクロスフェード（フェードイン／フェードアウト）している途中のようなこの「溶かし込み合成」画像も、Photoshopならもちろん簡単に作れる。

　とはいえ、中には「あれ？　そういえばどうやって作るんだっけ？」という方も意外にいるはず。ヘッダー画像やバナー画像など、Webデザインのさまざまな用途に多用する超定番の加工方法だけに、改めて基本のやり方を押さえておこう（以降、解説はPhotoshop CS3をもとにしている）。

よく見るアレもレイヤーマスクですぐできる

今回使う2つの元画像

　はじめに、重ね合わせたい画像を2つ用意する。作業上、画像は2つとも同じサイズにしておくとスムーズだ。2つの画像は、別々のレイヤーに分けて重ねておこう。（下の画面）。先に開いておいた画像ファイルに、もう片方の画像をコピペすれば別々のレイヤーになる。

まずはこの状態からスタート

　次に、上位エレイヤーの画像（ここではレイヤー1）を選び、レイヤーパレットの下部にある「レイヤーマスクを追加」のアイコンをクリックする。これでレイヤー1にレイヤーマスクが追加され、レイヤーパレットの表示が変わった。

（左）「レイヤーマスクを追加」をクリック。（右）レイヤー1がの表示が変わった

　ここまできたらできたも同然。そのままグラデーションツールを選び、画像上で適当にグラデーションをかけよう。グラデーションの種類は「線形」「黒・白」を選べばOKだ。

　この方法は以上で完成だ。グラデーションのかけ具合を適当に調整して好みの画像に仕上げよう。

　せっかくなので、ここで作った画像をもとに、架空のWebサイトのタイトルロゴも作ってみた。といっても、文字を載せて調整しただけだ。

試作したサイトのタイトルロゴ

（次ページ）レイヤーマスクがないElementsでも作る場合は？