Using Selection Tools - Images: Japanese
Hey everyone!
Next, let's work with 'Selections'.
Selections have a wide range of uses and are an incredibly versatile feature. This article focuses on the basics — how to create and work with selections, and how to use them to copy and cut out parts of an image (layer).
Open any image in Photoshop. If you're creating a new file from scratch, fill it with a solid color so things are easier to see. Then select this tool:

This is the 'Rectangular Marquee Tool'. With it selected, drag across the canvas to draw a selection. Here's an example on a gray-filled layer:

A marching-ants dotted line has appeared. That's your selection.
With the Rectangular Marquee Tool still active, right-click inside the selection. From the context menu, choose 'Layer Via Copy':

A new layer will be added in the Layers panel:

Click the eye icon on the original layer to hide it, and you'll see what's in the new layer:

Only the selected region was copied into the new layer.
Now use History to step back to the point where the selection was created. Right-click inside the selection again, and this time choose 'Layer Via Cut'. The Layers panel should look like this:

Let's look at what's in each layer:


Unlike 'Layer Via Copy', which left the original layer untouched, 'Layer Via Cut' both creates the new layer from the selection AND removes that region from the original layer.
This is one of the most useful things you can do with selections — cutting out or copying specific areas of an image. Punching out portions of an image is something you'll do often when building web assets.
Now let's look at more ways to work with selections themselves.
First, the 'Elliptical Marquee Tool'. While the Rectangular Marquee creates a rectangular selection, the Elliptical Marquee creates an oval one.
Long-press the Rectangular Marquee Tool in the toolbar to reveal other tools in the group, then select the 'Elliptical Marquee Tool':

Drag across a layer to create an elliptical selection. The behavior is nearly identical to the Rectangular Marquee Tool.

To create a perfect square or circle selection, hold 'Shift' while dragging with either the Rectangular or Elliptical Marquee Tool.
Make sure the 'Style' option in the Options Bar is set to 'Normal' for this to work.
To create a selection with a specific size, look at the Options Bar while the Rectangular or Elliptical Marquee Tool is selected:

The 'Style', 'Width', and 'Height' fields let you control the selection dimensions.
By default, 'Style' is set to 'Normal', which means dragging creates the selection at whatever size you drag. Change 'Style' to 'Fixed Size', and 'Width' and 'Height' become specifiable. Try setting both to '100px':

Now drag on the canvas. A selection exactly 100px wide and 100px tall will be created:

With the Elliptical Marquee Tool and both dimensions set to 100px, you get a perfect circle with a 100px diameter:

Setting 'Style' to 'Fixed Ratio' lets you constrain the aspect ratio. Enter values between 0.001 and 999.999 (in Photoshop CC) — no units required. For a 16:9 selection, enter the values like this:


Note that 'Fixed Ratio' constrains the shape but not the size — the selection still scales with how far you drag. Use 'Fixed Size' if you need an exact pixel size.
Now let's look at the icons at the left end of the Options Bar. These four icons control how new selections interact with existing ones:

By default, the first icon is active:

This is 'New Selection' mode. If you have a selection like this:

...and create a new one, the original disappears and only the new selection remains:

Now switch to the second icon from the left — 'Add to Selection' mode:

With this mode active, additional selections add to any existing ones. Starting with a selection:

...drag another selection in the upper right, and you get:

Both selections coexist. If the new selection overlaps the existing one, they merge into a single connected selection:

Now try the third icon — 'Subtract from Selection' mode:

This removes the area you drag from the existing selection. Starting with a selection:

Drag within the existing selection to subtract:

It can be a bit hard to visualize. Right-click the selection and choose 'Layer Via Copy' to see the result clearly:

The punched-out area is visible. The subtracted region is gone from the selection.
One thing to note: if you switch to Subtract mode while there's no existing selection, Photoshop will temporarily act as if you're in 'New Selection' mode. After you create your first selection, it switches back to Subtract mode. This behavior can be confusing at first, so keep it in mind.
The last icon is 'Intersect with Selection' mode — it keeps only the area where the new and existing selections overlap:

Create a selection:

Drag a new selection that overlaps it:

The result:

Only the overlapping area remains. This one's fairly intuitive. Like Subtract mode, if there's no existing selection when you activate Intersect mode, it temporarily behaves like 'New Selection' — keep that in mind.
Entering a value in the 'Feather' field in the Options Bar adds a soft blur to the edges of your selection:

Here's what it looks like in practice — a 10px feather applied while cutting out a solid blue layer:

Cutting out a photo with a feathered edge can create a really polished look:

With a selection active, right-clicking inside it and choosing 'Fill...' lets you fill only the selected area with a color.
'Stroke...' draws a border along the selection edge. 'Free Transform' and 'Transform Selection' let you warp and resize — 'Free Transform' transforms the image (layer) along with the selection, while 'Transform Selection' transforms only the selection outline.
All of these are very useful features.
To deselect (remove the selection), go to 'Select' in the menu bar and choose 'Deselect':

The keyboard shortcut is 'Ctrl' + 'D' (Windows) or 'command' + 'D' (macOS).
Selection history is tracked in the History panel, so if you need to undo a selection, use History.
For History, see this article.
To check the size of your current selection, the 'Info' panel is the tool for the job.
Go to 'Window' > 'Info' to open it:

Create a selection and you'll see numbers appear in the area indicated by the red arrows:

'X' is the X coordinate, 'Y' is the Y coordinate, 'W' is the width, and 'H' is the height of the selection.
When converting a Photoshop layout to HTML and CSS, you'll often need to measure the exact sizes of gaps and spacing. The combination of selections and the Info panel is perfect for this.
This was a long one, but that's everything for selections. They can be a bit tricky to get used to, but stick with it.
In the next article, we'll look at typing text in Photoshop. See you then!
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.