masaca（@masaca_dApps）です。
Webサイトのメインビジュアルやバナーを作っていて、「素材写真のサイズがもう少しあれば・・・！」というときがありますよね。
そういうときにPhotoshopを使って、横幅を伸ばしたり、サイズが足りないときの2つの対処法を紹介したいと思います。
カンタンで一度覚えたらいろんな場面でずっと使えるテクニックなので、ぜひ試して見てください。
参考用にpsdデータをダウンロード可能にしました。
masaca
「コンテンツに応じて拡大・縮小」機能をつかう
Photoshopの編集メニューから「コンテンツに応じて拡大・縮小」を使うと画像を自然に伸ばすことができます。
やりすぎると不自然になってしまうので、限度がありますがいろんな場面で使えます。
Before
このように「あと少し画像の横幅があれば、文字がおさまるのに・・・。」というときがあります。
After
「長方形選択ツール」で画像の伸ばしたい部分を選択した状態で、「編集」→「コンテンツに応じて拡大・縮小」で画像の右側部分を伸ばしました。
画像がスマートオブジェクトになっていると拡大できないので、その場合はレイヤーを右クリックして「レイヤーをラスタライズ」しておきましょう。
右側のみ選択範囲を作って、「コンテンツに応じて拡大・縮小」で右側を伸ばす。画像がスマートオブジェクトになっている場合は選択できないので注意
文字を置くスペースを確保することができました。
この画像の場合は、これ以上伸ばすと不自然になってしまいます。単純な背景ほど伸ばしても不自然になりづらいです。
「グラデーションマスク」を使って文字を置くスペースをつくる
もっと横幅を伸ばしたいというときは、写真を伸ばすことは難しいので「グラデーションマスク」を使って文字を置くスペースを作ってしまう方法で解決することができます。
「コンテンツに応じて拡大・縮小」では対応できない場合などに有効です。
Before
背景に画像と同サイズの長方形を配置しておきます。色は画像からスポイトで取るところがポイントです。
今回はこのサイズの画像にします。
背景に長方形を置いて、色は画像からスポイトでとったものにする。
画像を選択した状態でレイヤーパネルの下部にあるメニューから、「レイヤーマスクを追加」。
画像を選択して、アイコンをクリックして「レイヤーマスクを追加」。
追加したレイヤーマスクをクリックして選択する。
グラデーションが黒から白になっていることを確認してください。
黒から白のグラデーションになっていることを確認する
「レイヤーマスク」を選択して右から左へグラデーションをかけたら完成です。
After
「レイヤーマスク」を選択して右から左へグラデーションをかけると、写真との境界線がぼやけて自然な感じになりました。
はじめに配置した長方形の色を画像に馴染むようにしておく必要があるので、不自然になった場合は写真から何度かスポイトを使ってどの色なら馴染むか試すとうまくいきます。
psdデータのダウンロード
今回紹介したすべてのサンプルデータのpsdをダウンロード可能にしました。（再配布可能なpixabayの写真素材を使っています。）
Photoshopの使い方の参考にしてくださいね。
まとめ
メインビジュアルやバナーを作るとき、提供された写真素材によってはサイズが合わないことはよくあります。
そんなときは今回紹介した、「コンテンツに応じて拡大・縮小」と「グラデーションマスク」を使うことで対応できます。とても簡単なので覚えておくと便利です。
masaca
初心者デザインから脱出！写真の上の文字を見やすくするテクニック7選
コミュニティではWebデザイン勉強中のあなたにもっと役立つ情報を発信中！
SPONSORED LINK
コメントを残す