このページの本文へ

前へ 1 2 次へ

特集:Photoshopで始めるカンタンWebデザイン

初心者歓迎!Webデザインでよく見かけるアレのチュートリアル

ElementsでもOK!だんだん透明になるフォトショ画像の作り方

2008年10月22日 04時00分更新

小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
  • 本文印刷
Photoshop

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

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

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


Photoshop
今回使う2つの元画像

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

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

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

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

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


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

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

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

(次ページ)レイヤーマスクがないElementsでも作る場合は?

前へ 1 2 次へ

この特集の記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング