Photoshopで画像を重ねる方法:こんな時に便利!【超初心者向け】

Photoshopで画像を重ねる方法:こんな時に便利!【超初心者向け】

今回はPhotoshopで画像を重ねる方法について紹介します。

画像を重ねるテクニックはWebデザインのプロでもよく使う基本です。

特にバナー画像やアイキャッチ画像をつくるときに便利。やり方自体はとても簡単です。

基本的なやり方と一緒に、知っていると表現の幅がアップする応用テクニックも紹介したいと思います。

初心者の方向けに分かりやすく解説していきますね。

スポンサーリンク



Photoshopで画像を重ねるメリットとは?

画像を重ねるメリットは次のとおりです。

 

1枚の画像でたくさんの画像を見せられる

 

少ないスペースでも大丈夫

1枚の画像でたくさんの画像を見せられる

1枚ずつ別々にサイトに画像を載せるとその分ページが長くなってしまいます。

それよりも1枚の画像の中に複数の画像を配置することで1度にたくさんの情報を伝えることができます。

バナー画像やアイキャッチ画像のように1瞬で目を引く画像を作りたいときに役立ちます。

少ないスペースでも大丈夫

画像を重ねることで少ないスペースでも複数の画像を見せることができます。

重なった部分は見えなくなりますが、画像の全部が見えなくても何の写真か伝われば問題ありません。

無理やり載せようと画像を小さくするよりも重ねて入れちゃったほうが伝わりやすい場合もあります。

Photoshopで画像を重ねる方法

では画像を重ねる方法についてみていきましょう。とっても簡単です。

まず画像を配置したい背景画像を開きます。背景を白くしたい場合は新規ドキュメントを開きます。

背景画像を開く

次に配置したい画像を開きます。

配置したい画像を開く

配置したい画像の大きさを変更します。

『メニューバー』から『イメージ』→『画像解像度』を選択。

画像の大きさを変更する

『幅と高さ』を任意の数字に設定します。Webデザインの場合は単位は『pixel』にしておくとやりやすいです。

配置する画像は大きさを揃えておくと統一感がでて見やすくなります。
画像解像度を変更する

次に背景画像にそれぞれの画像を配置していきます。

『ツールバー』から『移動ツール』を選びます。配置したい画像をドラッグして背景画像へ移動します。

ドラッグして画像を配置する

『レイヤーパネル』を確認すると配置した画像のレイヤーが作成されます。

配置した画像のレイヤーが作成される

残りの画像も同じように配置していきます。

残りの画像も配置する

画像を重ねる時に理解しておく大切なことがありまして、『レイヤーが上の画像が、重ねた時に上にくる』という点。

下の画像をみてください。

重なる順番について理解する

右下の画像が上に乗るように重なっています。

レイヤーパネルをみると右下の画像(レイヤー2)が上にきていますよね?

上のレイヤーが上に重なる
レイヤーの順序を変更することでどの画像を上に重ねるかを変えることができます。

あとは移動ツールを選択して移動したい画像レイヤーを選んで好きな位置に動かして完成です。

Photoshopで画像を重ねる方法:こんな時に便利!【超初心者向け】

バランスや見栄えなど考えて、いろいろ動かしながら感覚的に配置していきましょう。

Photoshopで画像を重ねる際の応用テクニック

画像を重ねる際に知っておくと便利なテクニックを紹介します。

画像に境界線をつける

画像に境界線をつけると印象が変わります。

『レイヤースタイルの追加』から『境界線』を選びましょう。

境界線をつける

白い境界線をつけてみました。

境界線をつける

ドロップシャドウをつける

ドロップシャドウで画像に影をつけるのもよくやります。

『レイヤースタイルの追加』から『ドロップシャドウ』を選びます。

ドロップシャドウをつける

ドロップシャドウについてはこちらの記事で詳しく紹介しています。

光彩をつける

光彩は対象物のまわりに薄い光をつける機能です。文字や画像につけることで引きつける効果があります。

『レイヤースタイルの追加』から『光彩(外側)』を選びます。

今回は分かりやすいようにちょっと強めにつけてみました。(光彩の色=白、描画モード=スクリーン)

光彩をつける

画像を重ねる以外にも便利な方法

今回は画像を重ねることで1枚の画像の中に複数の画像を配置する方法を紹介しました。

重ねる以外にも、画像をつなぎ合わせたり、グラデーションで重ねたりする方法も便利です。

画像をつなぎ合わせる方法

画像を結合する方法

上の画像のようにぴったりと結合させる方法です。

詳しくはこちらの記事をご覧ください。

グラデーションで画像をつなぎ合わせる方法

画像同士をグラデーションでつなぎ合わせることで自然に溶け込ませることができます。

画像をグラデーションでつなぎ合わせる

グラデーションで画像をつなぎ合わせる方法についてはこちらの記事をご覧ください。

まとめ

Photoshopで画像を重ねる方法について紹介しました。

たくさんの画像を1枚の中で魅力的に配置することで、画像を見た人の関心をグッと引きつけることができます。

バナー画像やアイキャッチ画像の作成に使える便利なテクニックです。簡単ですのでぜひ試してみてください。

境界線やドロップシャドウなどのレイヤースタイルを加えると、さらに表現の幅が拡がりますよ!

今日はこのへんで。

それではまた!

スポンサーリンク


ABOUTこの記事をかいた人

初めまして、妻と二人暮らしの40歳です。Photoshopで写真レタッチの仕事をメインに、3つのネットショップ運営とホームページ制作を請け負っています。 在宅で副業するならPhotoshopのスキルを習得するのが一番の近道です! 手に職をつけて「自分で稼ぐ力」を身につけましょう!そのノウハウをゼロからお教えします。