今回はPhotoshopで画像を重ねる方法について紹介します。
画像を重ねるテクニックはWebデザインのプロでもよく使う基本です。
特にバナー画像やアイキャッチ画像をつくるときに便利。やり方自体はとても簡単です。
基本的なやり方と一緒に、知っていると表現の幅がアップする応用テクニックも紹介したいと思います。
初心者の方向けに分かりやすく解説していきますね。
スポンサーリンク
目次
Photoshopで画像を重ねるメリットとは？
画像を重ねるメリットは次のとおりです。
１枚の画像でたくさんの画像を見せられる
少ないスペースでも大丈夫
１枚の画像でたくさんの画像を見せられる
１枚ずつ別々にサイトに画像を載せるとその分ページが長くなってしまいます。
それよりも１枚の画像の中に複数の画像を配置することで１度にたくさんの情報を伝えることができます。
バナー画像やアイキャッチ画像のように１瞬で目を引く画像を作りたいときに役立ちます。
少ないスペースでも大丈夫
画像を重ねることで少ないスペースでも複数の画像を見せることができます。
重なった部分は見えなくなりますが、画像の全部が見えなくても何の写真か伝われば問題ありません。
無理やり載せようと画像を小さくするよりも重ねて入れちゃったほうが伝わりやすい場合もあります。
Photoshopで画像を重ねる方法
では画像を重ねる方法についてみていきましょう。とっても簡単です。
まず画像を配置したい背景画像を開きます。背景を白くしたい場合は新規ドキュメントを開きます。
次に配置したい画像を開きます。
配置したい画像の大きさを変更します。
『メニューバー』から『イメージ』→『画像解像度』を選択。
『幅と高さ』を任意の数字に設定します。Webデザインの場合は単位は『pixel』にしておくとやりやすいです。
次に背景画像にそれぞれの画像を配置していきます。
『ツールバー』から『移動ツール』を選びます。配置したい画像をドラッグして背景画像へ移動します。
『レイヤーパネル』を確認すると配置した画像のレイヤーが作成されます。
残りの画像も同じように配置していきます。
画像を重ねる時に理解しておく大切なことがありまして、『レイヤーが上の画像が、重ねた時に上にくる』という点。
下の画像をみてください。
右下の画像が上に乗るように重なっています。
レイヤーパネルをみると右下の画像（レイヤー２）が上にきていますよね？
あとは移動ツールを選択して移動したい画像レイヤーを選んで好きな位置に動かして完成です。
バランスや見栄えなど考えて、いろいろ動かしながら感覚的に配置していきましょう。
Photoshopで画像を重ねる際の応用テクニック
画像を重ねる際に知っておくと便利なテクニックを紹介します。
画像に境界線をつける
画像に境界線をつけると印象が変わります。
『レイヤースタイルの追加』から『境界線』を選びましょう。
白い境界線をつけてみました。
ドロップシャドウをつける
ドロップシャドウで画像に影をつけるのもよくやります。
『レイヤースタイルの追加』から『ドロップシャドウ』を選びます。
ドロップシャドウについてはこちらの記事で詳しく紹介しています。
光彩をつける
光彩は対象物のまわりに薄い光をつける機能です。文字や画像につけることで引きつける効果があります。
『レイヤースタイルの追加』から『光彩（外側）』を選びます。
今回は分かりやすいようにちょっと強めにつけてみました。（光彩の色＝白、描画モード＝スクリーン）
画像を重ねる以外にも便利な方法
今回は画像を重ねることで１枚の画像の中に複数の画像を配置する方法を紹介しました。
重ねる以外にも、画像をつなぎ合わせたり、グラデーションで重ねたりする方法も便利です。
画像をつなぎ合わせる方法
上の画像のようにぴったりと結合させる方法です。
詳しくはこちらの記事をご覧ください。
グラデーションで画像をつなぎ合わせる方法
画像同士をグラデーションでつなぎ合わせることで自然に溶け込ませることができます。
グラデーションで画像をつなぎ合わせる方法についてはこちらの記事をご覧ください。
まとめ
Photoshopで画像を重ねる方法について紹介しました。
たくさんの画像を１枚の中で魅力的に配置することで、画像を見た人の関心をグッと引きつけることができます。
バナー画像やアイキャッチ画像の作成に使える便利なテクニックです。簡単ですのでぜひ試してみてください。
境界線やドロップシャドウなどのレイヤースタイルを加えると、さらに表現の幅が拡がりますよ！
今日はこのへんで。
それではまた！
