Web Design

How to stretch the background naturally while keeping the subject intact when the size of the photo material is not large enough

写真素材のサイズが足りないとき被写体はそのままに背景だけ自然に引き延ばす方法

Hi there.
I am Sato, a Web/App/UI designer.

This time, I would like to write about how to stretch the background naturally without changing the subject when the size of the photo material is not enough.
This is a method using Adobe Photoshop.

Insufficient width or height of the photo material

Everyone downloads and uses photo materials when creating visuals for websites, banners, and so on.
In such cases, don’t you often have trouble finding enough space to put the title or catch copy?
Here is an example.

Width of photo is not enough

The left side of the photo material is missing.
In such a case, you could simply select the left side of the subject and stretch it with the Transform tool, but this may result in an unnatural distortion of the background.
Therefore, I will show you how to stretch only the background naturally using Adobe Photoshop’s function.

Photoshop’s “Scale According to Content”

Many people are familiar with “fill according to content” because it is often seen in commercials.
In the same way, you can stretch it out instead of filling it out.

That is the “Stretch and shrink according to content” function.
It is in the “Edit” menu.

Scale according to content

It’s easy to use.
Let us explain.

“Scale up or down according to content” procedure

First, we will give you a brief overview of the “Scale according to content” procedure, and then we will go through it step by step.
The procedure is as follows

Select the layer of the photo you want to edit
Rasterize the photo you want to edit
Select the area you do not want to stretch
Save the selection
Click “Scale according to content” from the menu
Manipulate and stretch the bounding box

Now let’s take a closer look.

Practice

Select the photo you want to edit and rasterize

Since “Scale according to content” is not applicable to smart objects, rasterize the photo you want to edit.

Rasterize layer

Select the area you do not want to stretch with the selection tool

Select the area you do not want to stretch with the selection tool.

Create selection with lasso selection tool

If “Select Subject” is available instead of the selection tool, that is still fine, of course.
Still, “select subject” is a really handy feature!

Select Subject Create selection with 'Select subject'

Adjust the selection in “Selection and Mask” if necessary.
Basically, you don’t need to adjust it.

Selection and Mask Adjust with

Save Selection.

Click “Save Selection” from the “Selection” menu to save the selection.

Click 'Save Selection'

The name should be easy to understand and the “Selection” can be “New Channel”.

Save selection with any name

The selection saved as a new channel can be viewed from the Channels palette.

Saved selections can be viewed in channels

Once the selection is saved, the selection is deselected.

Execute “Scale according to content” .

From the menu “Edit”, click on “Scale according to content”.
By the way, the shortcut key is “command + option + shift + C”.

Click 'Scale According to Content'

A bounding box will be attached to the photo, which you can manipulate to stretch it.
When you do so, specify the selection you just saved in the “Protect” section.

Manipulate and stretch the bounding box

If the area recognized as the background in the direction you want to stretch is too small, the area you want to protect may not be adequately protected.

Hair has been stretched

In that case, you can successfully stretch the image by stretching it out a little at a time over several times.
However, be careful not to stretch too small an area too widely, as it will look unnatural.

To the right of the “Protection” section, there is an icon in the shape of a human being.
This is the “Protect Skin Tone” function. If you turn this button on, the skin tone, or skin tone area, will be automatically protected even if you do not make a selection.

Completed.

We successfully made up the missing background.

Stretched out

Heavy use in cases that cannot be handled by fill-in

In some cases, such as this one, where the width or height of the photo material is insufficient, “fill according to content” can be used, but there are quite a few cases where fill would be unnatural.

However, there are many cases in which the background can be stretched more naturally by using the “Scale according to content” option.
Please take advantage of this feature.

In this article, we introduced How to stretch the background naturally without changing the size of the subject when the size of the photo material is insufficient.
How was it?
I would be happy if it is of any help to you.
See you next time.