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

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

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

今回使う2つの元画像

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

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

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

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

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

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

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

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

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

ソーシャルリアクション

この特集の記事

• Web素材作りを自動化！使えるPhotoshopアクション
• Photoshopブラシでデザイン！Webサイトの背景を作ろう
• Webデザインにすぐ使えるPhotoshopグラデ339選
• ロゴデザインに役立つPhotoshopのカスタムシェイプ
• 古いPhotoshopで最新ブラシを使うチュートリアル
• Photoshopブラシで質感のあるWebサイトへ
• この特集の一覧へ

この記事の編集者は以下の記事をオススメしています

• 古いPhotoshopで最新ブラシを使うチュートリアル

• ロゴデザインに役立つPhotoshopのカスタムシェイプ

• Webデザインにすぐ使えるPhotoshopグラデ339選

• Photoshopブラシで質感のあるWebサイトへ

• Photoshopブラシでデザイン！Webサイトの背景を作ろう

ソーシャルランキング

1. 「フォーマル特化」で年商50倍！子ども服通販に意外な穴 154

2. 「デザイナーのためのiPhoneアプリUI/UX設計」本日発売 146

3. Amazonメニューの「使いやすさ」を検証する方法 138

4. スライドショーで学ぶEdge Animateの使い方 124

5. JWSDA、Webディレクション検定を開始 88

6. 日本のスマホサイトは2年間でこんなに変わった 2763

7. 遅すぎる日本のスマホサイトの原因を探る 2138

8. スマホ対応の新潮流「レスポンシブWebデザイン」とは？ 1975

9. レスポンシブWebデザインとは 1760

10. 「自宅でコードを書くプログラマー」は優秀か？ 1677

11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出

最新記事

• Xbox Oneは家庭に1台のマシンになるか？　スペックをチェック

  

• 4系統入力に対応するUSBビデオキャプチャーが登場

  

• 前面にアクリル窓を配置したLian-Li製PCケースが販売開始

  

• MSIがキーボード市場へ参入！　赤軸採用モデルを2機種投入

  

• これは駄肉ではなく神肉！　魔王のサンプルが早くも展示開始