[写真加工/フォトレタッチ]編

Photoshopで鏡面反射の効果を付けるには

クラスメソッド株式会社
山崎 基央
福田 寅成
2009/6/30

 ずいぶん前からですが、鏡に映ったような効果をアイコンや写真に付けることが流行しています。この種の画像は、Photoshopで作られることが少なくありません。今回はレイヤのグループ化とレイヤの統合、[レイヤーマスク]を使い、昔ながらのやり方で以下のような鏡面反射画像を作ります。

図1 鏡面反射アイコン完成図の完成イメージ
図1 鏡面反射アイコン完成図の完成イメージ

まずは、基になる素材を作る

 まずは、新規レイヤを作成して四角形を描き、[レイヤースタイル]から境界線描画と塗りつぶしを行います(参考Tips:「[写真加工]Photoshopで図形を描いて色を塗るには」)。そして、作成した画像の上に文字を描画します(参考Tips:「[写真加工]Photoshopで文字列を入力するには」)。

 ここまでで、以下のような画像ができます。

図2 基になる素材(境界線と色の矩形・文字)
図2 基になる素材(境界線と色の矩形・文字)(クリックすると画像が拡大します)

 ここでレイヤを確認してみましょう。図2の右下のような状態になっていますでしょうか? 上記の画像で示したAの部分をクリックすると、フォルダの形をしたレイヤが現れます。

複数のレイヤを「グループ」にして複製するには?

 次に、以下のように矩形のレイヤと文字のレイヤを選択してください。複数レイヤの選択は、[Ctrl]キーを押しながらレイヤをクリックします。

図3 レイヤの複数選択
図3 レイヤの複数選択

 次に、選択したレイヤを[フォルダ]の上にドラッグ&ドロップします。このフォルダは「グループ」と呼びます。そのグループの上で右クリックして、[グループを複製]を選択します(ここで[新規作成]を選択すると、新しいファイルにその部分だけを切り出すことができます。ほかのファイルを開いている場合は、そのファイルに画像を複製することもできます)

 図4のようなダイアログが出てきたら、[OK]を押しましょう。

図4 グループの複製
図4 [グループを複製]

 複製されたグループを右クリックして、一番下の[グループを結合]を選択します。別々のレイヤが1つにまとめられました。

図5 [グループを結合]
図5 [グループを結合]

画像を垂直に反転するには?

 今回は鏡面反射がテーマなので、この画像を垂直方向に反転させる必要があります。図6のように、まとめたレイヤを選択したまま、[編集]→[変形]→[垂直方向に反転]を選択します。

図6 画像の垂直方向への反転
図6 画像の垂直方向への反転

 反転した画像を[移動ツール]で、以下のように移動しましょう。

図7 画像の移動
図7 画像の移動

透明なグラデーションを付けて完成

 最後に、グラデーションツールを使って、透明なマスクを作ります。[レイヤー]→[レイヤーマスク]→[すべての領域を表示]を選択します。

図8 [レイヤーマスク]
図8 [レイヤーマスク]

 さらに、マスクレイヤにフォーカスが当たっていることを確認します。

図9 マスクレイヤへのフォーカスの確認
図9 マスクレイヤへのフォーカスの確認

 気に入った反射ができるまで何度もトライしてみるといいでしょう。その際、マスクレイヤが選択されていることに注意してください。

図10 完成図
図10 完成図(クリックすると画像が拡大します)

 以上で、鏡面反射画像が作成できました。


D89 デザインTips インデックス へ

デザインハック TOPへ

TechTargetジャパン

HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

キャリアアップ

- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

ホワイトペーパーTechTargetジャパン

ソリューションFLASH

「ITmedia マーケティング」新着記事

クロス組織化する企業に欠かせない情報共有の在り方とは――セールスフォース・ドットコム
日本市場で提供が開始されたデジタルマーケティングプラットフォーム「Radian6 Buddy Med...

ロックオン、テレビ番組/CMリサーチ調査のエム・データと業務提携を開始
広告効果測定システム「アドエビス」などの運営を手掛けるロックオンは10月21日、TV番組...

SAS、新世代データ・ビジュアライゼーション・ソフト「SAS Visual Analytics」を発表
SAS Institute Japanは10月21日、同社が提供するデータ・ビジュアライゼーション・ソフト...