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代でも分かったHTML5の基礎知識724 users

2. 10分でわかる！ jQuery Mobileのキホン94 users

3. iBooks AuthorでHTML5の電子書籍作ってみた76 users

4. HTML5要素のブラウザー実装状況を調べてみた38 users

5. 本店と楽天を使い分け、ブランディングを強化23 users

6. 40分で覚える！jQuery速習講座2209 users

7. 絶対見ておきたい有名企業のスマホサイトまとめ2134 users

8. もう配色には困らない！「Adobe Kuler」1681 users

9. 30分でできる！Webサイトを高速化する6大原則1494 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1214 users

最新記事

• クレバリー1号店と2号店が2月で閉店、今後は1店舗で営業続行

  

• 品薄の「Core i7-3930K」にC2ステッピングのリテール版が登場

  

• Radeon HD 7900シリーズを3連ファンにするクーラーが登場

  

• ASUSのX79マザーにゲーマー向けMicro ATXモデルが追加

  

• 編集部オススメのデジタル製品はコレだ！（1月28日～2月3日）