Photoshopで簡単に背景を伸ばすテクニック

 

Webサイトのメインビジュアルや、ブログ・SNSのヘッダーで使用したい写真の背景を引き伸ばしたい事って結構あると思います。 そんな時はPhotoShopを使用して背景を引き伸ばしましょう。今回はPhotoShop(フォトショップ)で背景を簡単に伸ばすテクニックを紹介します。

使用OS:Windows10 使用アプリ:Adobe PhotoShop CC 2018


Photo by Ryan Walton on Unsplash



1

「コンテンツに応じた塗りつぶし」で背景を伸ばす方法

縦長の写真を正方形にする例になります。まずはイメージ >キャンバスサイズをクリックして、キャンバスの横幅を広げます。 次に 自動選択ツールで引き伸ばしたい箇所を選択し編集 >コンテンツに応じた塗りつぶしをクリックします。

編集画面が表示されたらプレビューを確認しながら塗りつぶし設定で調節を行い、OKボタンをクリックして完了です。

気になる箇所があったら コピースタンプツールなどでレタッチして違和感のない背景にしましょう。



2

「コンテンツに応じて拡大・縮小」で背景を伸ばす方法

被写体を保護しつつ背景を引き伸ばす方法です。まずは イメージ >キャンバスサイズをクリックして、キャンバスの横幅を広げます。次に選択範囲>被写体を選択をクリックし被写体を選択します。

被写体の選択方法は下記記事を参考にしてみてください。

Photoshopで簡単にできる画像の切り抜きテクニック

design.webclips.jp/photoshop-cutout/


次にチャンネルパネルの下部にある「選択範囲をチャンネルとして保存」をクリックしてアルファチャンネルを作成します。名前は「dog」としました。

レイヤーパネルに戻り、引き伸ばすレイヤーを選択して編集 >コンテンツに応じて拡大・縮小をクリックします。上部ツールバーにある保護から先程作成したアルファチャンネル(dog)を選択し、画像を左右に引き伸ばして完了です。

被写体に変化なく背景を引き伸ばすことができました。

背景に木や電柱・ポールなどがある場合は、太くねって不自然になるケースもありますが、アイデア次第ではキレイに背景を伸ばすことができます。以上、Photoshopで簡単に背景を伸ばすテクニックでした。



RELATED POSTS
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • Photoshopで斜めになった写真を補正する方法
  • 【無料】Photoshopの代用になる画像編集・加工ツール7選
  • PhotoShopで新聞の写真風ドットスタイルに画像を加工する
  • Photoshopで画像にモザイクやぼかしを入れる方法
PICKUP
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
  • フォントを調べる時に役に立つサービス・サイトまとめ
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • 長いURLを短くする短縮URLサービス8選
RECENT POSTS
  • Font Awesomeをラインアイコンにしたアイコンセット「Line Awesome」
  • Web制作に役立つ素材をダウンロードできる「Freebies.ByPeople」
  • アイソメトリックなイラストを作成できるオンラインツール「Explore Isobuild」
  • Googleのプログラミング学習ツール「Grasshopper」にデスクトップ版がリリース
  • イメージワードを選択するだけでフリーフォントを簡単に検索できる「モジザイ」
TAG LIST
  • Webサービス

    84

  • CSS

    58

  • jQuery

    34

  • 素材

    30

  • エフェクト

    29

  • ジェネレーター

    25

  • JavaScript

    23