Webデザインが学べるコミュニティを作りました!

Webデザイン初心者でも簡単!画像の横幅を伸ばしたいときのテクニック

masaca(@masaca_dApps)です。

Webサイトのメインビジュアルやバナーを作っていて、「素材写真のサイズがもう少しあれば・・・!」というときがありますよね。

そういうときにPhotoshopを使って、横幅を伸ばしたり、サイズが足りないときの2つの対処法を紹介したいと思います。

カンタンで一度覚えたらいろんな場面でずっと使えるテクニックなので、ぜひ試して見てください。

参考用にpsdデータをダウンロード可能にしました。

masaca

Webデザインのいろんな場面で使えるテクニックだよ。

「コンテンツに応じて拡大・縮小」機能をつかう

Photoshopの編集メニューから「コンテンツに応じて拡大・縮小」を使うと画像を自然に伸ばすことができます。

やりすぎると不自然になってしまうので、限度がありますがいろんな場面で使えます。

Before

このように「あと少し画像の横幅があれば、文字がおさまるのに・・・。」というときがあります。

After

「長方形選択ツール」で画像の伸ばしたい部分を選択した状態で、「編集」→「コンテンツに応じて拡大・縮小」で画像の右側部分を伸ばしました。
画像がスマートオブジェクトになっていると拡大できないので、その場合はレイヤーを右クリックして「レイヤーをラスタライズ」しておきましょう。

右側のみ選択範囲を作って、「コンテンツに応じて拡大・縮小」で右側を伸ばす。画像がスマートオブジェクトになっている場合は選択できないので注意

文字を置くスペースを確保することができました。
この画像の場合は、これ以上伸ばすと不自然になってしまいます。単純な背景ほど伸ばしても不自然になりづらいです。

「グラデーションマスク」を使って文字を置くスペースをつくる

もっと横幅を伸ばしたいというときは、写真を伸ばすことは難しいので「グラデーションマスク」を使って文字を置くスペースを作ってしまう方法で解決することができます。

「コンテンツに応じて拡大・縮小」では対応できない場合などに有効です。

Before

背景に画像と同サイズの長方形を配置しておきます。色は画像からスポイトで取るところがポイントです。
今回はこのサイズの画像にします。

背景に長方形を置いて、色は画像からスポイトでとったものにする。

画像を選択した状態でレイヤーパネルの下部にあるメニューから、「レイヤーマスクを追加」。

画像を選択して、アイコンをクリックして「レイヤーマスクを追加」。

追加したレイヤーマスクをクリックして選択する。

グラデーションが黒から白になっていることを確認してください。

黒から白のグラデーションになっていることを確認する

「レイヤーマスク」を選択して右から左へグラデーションをかけたら完成です。

After

「レイヤーマスク」を選択して右から左へグラデーションをかけると、写真との境界線がぼやけて自然な感じになりました。

はじめに配置した長方形の色を画像に馴染むようにしておく必要があるので、不自然になった場合は写真から何度かスポイトを使ってどの色なら馴染むか試すとうまくいきます。

psdデータのダウンロード

今回紹介したすべてのサンプルデータのpsdをダウンロード可能にしました。(再配布可能なpixabayの写真素材を使っています。)
Photoshopの使い方の参考にしてくださいね。

まとめ

メインビジュアルやバナーを作るとき、提供された写真素材によってはサイズが合わないことはよくあります。

そんなときは今回紹介した、「コンテンツに応じて拡大・縮小」と「グラデーションマスク」を使うことで対応できます。とても簡単なので覚えておくと便利です。

masaca

Photoshopの便利な機能は積極的に使って時短しよう!
初心者デザインから脱出!写真の上の文字を見やすくするテクニック7選

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA