Free Adobe Photoshop Website Designing Video Tutorial - Path and Direct Selection Tool

In this Free Photoshop Website Designing Video Tutorial, we will show you how to use "Path Selection Tool" and "Direct Selection Tool". "Path Selection Tool" is used to select path and vector objects by clicking on them. Your anchor points will also get highlighted after selecting this. If you want to modify your selection using anchor points then click on the anchor points with "Direct Selection Tool". In web designing these tools are very helpful. For example: if you want to make some curves in your website and after creating them you want to modify them then using Direct Selection Tool you can perform this function. You can also change its position using Path Selection Tool.

We suggest that you first view our "Path Selection Tool and Direct Selection Tool Video Tutorial" to understand this visually and more easily however we have also given steps, tips and options given in the tool options bar of path selection tool and direct selection tool. Press A to select path selection tool and shift + A to toggle between Path Selection and Direct Selection Tool.

Functions of different Photoshop Path Selection Tool and Direct Selection Tool:

Path Selection Tool: You can select and move any closed path or shape components using this tool. When you select your path then your anchor points will get highlighted
Direct Selection Tool: Direct Selection Tool is used for editing paths or shape components. You can hold your anchor point and then modify (move, expand or reduce) the shape of your path using direction lines. This will display all the anchor points including any direction lines and direction points if you select any path using “Direct Selection Tool”.

Steps for using Path Selection and Direct Selection Tool
Path Selection and Direction Selection Tool options given in the Tool Options Bar
Helpful Website Designing Photoshop tips for Path and Direct Selection Tool

Click "Play" button to see Website Design Path Selection Tool and Direct Selection Tool Video Tutorial

Steps

Select File > New.
Make any path using pen tool or any shape tool (rectangle tool, rounded rectangle tool). Now we will select and modify this using "Path Selection Tool" and "Direct Selection Tool".
Select Direct Selection Tool from the toolbar.
Click on the path or shape you want to modify. When you click, your anchor points including direction lines and direction points will get highlighted meaning it gets selected. Now, drag any direction line to change its shape according to your requirement.
If you want to change the position of the shape or path then select Path Selection Tool and click either on it or inside it. Click and drag to move your selected shape or path. You can also move this using arrow keys.
Now, if you want to delete your selection press delete or backspace from your keyboard.

How to copy path components between two files:

File > Open, to open both the files.
Select "Path Selection Tool" from the toolbar, to select the path component of the source file you want to copy.
Do any of the following, to copy path components:

a) Drag the path from the source file to the destination file. The path is copied in the path palette.

b) In the path palette select path name of the source image. To copy the path, choose Edit > Copy. Now, choose Edit > Paste in the destination image.

Helpful Website Designing Photoshop Path Selection Tool and Direct Selection Tool Tips

Move your direction points or direction lines to the multiples of 45° by holding down Shift key while dragging your mouse.
To select more than 1 segment or anchor points press Shift key from the keyboard while selecting.
Alt + Click will select the entire path or path component when the direct selection tool is selected.
The hidden part of the path is still available if you move any part of a path beyond the canvas boundaries.
To show or hide the selected path component, select View > Show > Target Path.

Path Selection Tool options given in the Tool Options Bar:

When you select "Path Selection Tool" related tool options appear in the Tool Options Bar. These options are described below:

Show Bounding Box: When selected, display the bounding box around the selected object. Click and drag the handles for resizing and rotating your object. The moment you start resizing your image your path selection tool option bar changes to the transform options bar.
Shape Area Options: There are three options available:

Add to Shape Area: This will add the path area to overlapping path areas.
Subtract from Shape Area: This will remove or subtract path area from overlapping path areas.
Intersect Shape Areas: This will restrict the area of selection to the intersection of the overlapping path areas and selected path areas.
Exclude overlapping Shape Areas: This will exclude the overlap area.
Align Options: Select any alignment options from the tool options bar and align your components. These options are: Align Top Edges, Align Vertical Centers, Align Bottom Edges, Align Left Edges, Align Horizontal Centers, Align Right Edges.
Distribute Options: To distribute, select three components and then select any distribute option from the tool options bar. These options include: Distribute Top Edges, Distribute Vertical Centers, Distribute Bottom Edges, Distribute Left Edges, Distribute Horizontal Centers, Distribute Right Edges.

Note: There are no options available for Direct Selection Tool.