Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

J. HarderPerspective Warps and Distorts with Adobe Tools: Volume 1https://doi.org/10.1007/978-1-4842-8710-1_3

3. Warping with Patterns

Jennifer Harder¹

(1)

Delta, BC, Canada

Chapter goal: Look at different ways that repeating patterns can be created and then warped.

Pattern creation is probably one of the more interesting and novel things you can do with a program like Photoshop. Patterning can be used for a variety of projects, including but not limited to

Backgrounds for websites and printed materials
Surfaces of parts of a selection of a design
Styles that can be applied to text or lettering

So, what are some tools that can be used to create patterns?

In this chapter, you’ll look at the Options panel for some tools that you should now be familiar with from the previous chapter (the Brush, Pencil, and Eraser tools) and you’ll look at how they can be used with the symmetry paint option and the Paths panel. Then you’ll do a brief review of the Pen tools , Path Selection tools , and Shape tools , and see how vector shapes can be made into a pattern. Next, you’ll take a scanned pattern and use the Offset filter and Clone Stamp tool to adjust the pattern. Then you’ll look at how the Libraries panel can be used for pattern generation. After creating the patterns, you’ll then look at how to reuse stored patterns, either for patterned backgrounds or textures in adjustment fill layers or layer styles. Lastly, you will look at how patterns can be used with some tools and then look at how to create a custom texture for the Filter Gallery, which you’ll explore in Chapter 8.

Note

You can find the projects for this chapter in the Chapter 3 folder.

File ➤ Open the blank file CH3_SymmetryPaint.psd and make an Image ➤ Duplicate as you did in Chapter 2 to practice. Refer to Figure 3-1.

This file has a blank layer for you to paint on, but you can create more if you need to while painting and testing patterns . Refer to Figure 3-2.

Figure 3-2
Create a new layer in the Layers panel to paint on

Basic Pattern Creation

The first tool we are going to use for pattern creation may not be very obvious at first. In the Tools panel for the Brush tool (B), Pencil tool (B), and Eraser tool (E), look for the symmetry paint icon (the butterfly) that is found in Options panel in the far right. Refer to Figure 3-3.

Figure 3-3
Symmetry paint options for the Brush, Pencil, and Eraser tools

As you know, the Brush and Pencil tools are for drawing and the Eraser tool is for removing parts of the painting. However, when a choice of symmetry paint is made from the dropdown menu, you can begin to create a pattern. To start, select your Brush tool from the Tools panel and first use a Brush Picker Preset of General Brushes Hard Round. Refer to Figure 3-4.

Figure 3-4
Brush Preset Picker and Hard Round Brush selected

As you progress with symmetry paint , you can alter the size, hardness, roundness, angle, or switch to a custom brush that you created in Chapter 2. Everyone’s pattern will be different.

To start using symmetry paint , just choose settings from your Brush Options panel as you did in Chapter 2. Then change your foreground color in the Tools panel using the Color Picker. When you click on the color in the Tools panel, choose a color and click OK to exit. Refer to Figure 3-5.

Figure 3-5
Options panel for Brush and changing the foreground color in the Tools panel with the Color Picker

I will keep the Painting mode on Normal and Opacity at 100%, Flow at 100%, and Smoothing at 10% with the other icon buttons for pressure disabled and for the moment paint with a black foreground (Press D), but later I’ll use my Color Picker to switch to other colors. Refer to Figure 3-5.

Then choose one of the symmetry paths. The default options are

Vertical
Horizonal
Dual Axis
Diagonal
Wavy
Circle
Spiral
Parallel Lines
Radial
Mandala

For example, if you choose the first option of Vertical, temporarily the Transform options of the Path will open. We will be looking at the Transform Options panel more in Chapter 4. I will just give a quick overview here. Refer to Figure 3-6.

Figure 3-6
Setting the Symmetry Paint Guide in the Transform Option panel

This area allows you to move, scale, and rotate the path, and you can use your mouse and bounding box handles to do that as well. You can even warp the path by switching from the warp transform options, which will be looked at more in Chapter 4, and continue to move the bounding box handles to add a curve. Refer to Figure 3-7.

Figure 3-7
Options panel in Warp settings to warp the path

In this case, just click the check to commit the default transform settings in the Options panel for now. Refer to Figure 3-8.

Figure 3-8
Click the check in the Options panel to commit the settings for the path

Then, with the vertical path, begin to paint your symmetry path on your blank Layer 1. I made a crisscross pattern that resembles a shoelace. Refer to Figure 3-9.

Figure 3-9
Brush painting vertical symmetry path

If at any point you need to alter the path from the menu, choose Transform Symmetry to enter the transform dialog options again. Refer to Figure 3-10.

Figure 3-10
Transform Symmetry path option selected

Now take a moment on the new layer to try painting some of the other symmetry paths. Just select another from the list and click the check in the Transform options to commit. Remember to show or hide the visibility of your layer to compare your results and you can rename them (double-click the name and type) to keep track of your progress. Refer to Figure 3-11.

Figure 3-11
Painting a different symmetry path on a new layer to test it

Below are my results using Horizontal, Dual Axis, Diagonal, Wavy, Circle, and Spiral . Refer to Figure 3-12.

Figure 3-12
Testing different symmetry paths with the Brush tool

You may notice at this point that while straight or wavy lines are more predictable, a closed path can be unpredictable and if you try creating a straight line (Click and then Shift+Click in a new location) you can sometimes end up with unpredictable results. You may need to practice a few times to master a closed path like a circle. I find it is just better to drag slowly along the path in single strokes. And use your History panel to go back a step if you make a mistake. Refer to Figure 3-13.

Figure 3-13
Use the History panel to undo steps as you paint with a symmetry path

Create two more blank layers, one for Radial and the other for Mandala, and paint one at a time on those layers as you select either option.

Each of these layers will ask you what segment count you want to use. Radial allows 2-12, Mandala 3-10. Choose a number and click OK and then click the check in the Options panel to commit. Refer to Figure 3-14.

Figure 3-14
Radial and Mandala Symmetry dialog boxes . Click in the Options panel to commit the transformation of the path

Radial brushes will repeat a single brush stroke around the center point or radial axis. Refer to Figure 3-15.

Figure 3-15
Radial symmetry paint with Brush tool

The mandala, while like the radial, first mirrors and then repeats a single brush stroke around the center point or radial axis . Refer to Figure 3-16.

Figure 3-16
Mandala symmetry paint with Brush tool

Note

If you are working with the paths and need to hide them temporarily, choose Hide Symmetry from the list and Show Symmetry to make visible. Refer to Figure 3-17.

Figure 3-17
Hide and show options for the symmetry paint path

The Last Used Symmetry option will return to the previous used symmetry path (in this case, radial) if you want to switch symmetry paths. I tried it with a new brush color on a duplicate layer of my Mandala pattern. Refer to Figure 3-17 and Figure 3-18.

Figure 3-18
Continue to paint on a layer with the last used symmetry path

If you need to erase part of your path in a symmetry mode, switch to your Eraser tool or Pencil tool to draw some thinner lines. I also changed to a 10-segment count rather than the default 5. Refer to Figure 3-19.

Figure 3-19
Paint with a new radial symmetry path with your Eraser or Pencil tool

You can even paint with the custom brushes you created in Chapter 2. Refer to Figure 3-20.

Figure 3-20
Paint a new symmetry path with your custom brush

When you are done using the symmetry paths, choose Symmetry Off to return to normal brush, pencil, or eraser modes. Refer to Figure 3-21.

Figure 3-21
Select the Symmetry Off option in the Options panel to return to normal paint mode

However, we will just keep it on symmetry paint for the moment as we work on the next part of the project.

Project: Create a Custom Symmetry Paint Path

After experimenting with default symmetry paint paths, you may want to create a custom path. Another way this can be done is by using the Paths panel.

Use your Brush tool again with a General Brushes of Hard Round . Refer to Figure 3-22.

Figure 3-22
Options panel for the Brush tool

To create a path, you need to make sure that you have the Paths panel visible and the Pen tool selected. Refer to Figure 3-23.

Figure 3-23
Use the Paths panel and the Pen tool to create a custom path

I talk about path creation in detail in my book Accurate Layer Selections Using Photoshop’s Selection Tools.

To create a simple open or closed path, make sure that the mode of the Pen tool is set to Path in the Options panel. Refer to Figure 3-24.

Figure 3-24
Options panel for the Pen tool set to Path mode

Then refer to the Paths panel. In your case, you may have several paths already in the Paths panel if you were experimenting with symmetry paint. Refer to Figure 3-25.

Figure 3-25
Create a new path and select it in the Paths panel

Click the Create new path button and select the Path 1 path only. Refer to Figure 3-25.

Create a new blank layer in the Layers panel and turn off the visibility of your other test layers, other than the background layer. Refer to Figure 3-26.

Figure 3-26
Create a new blank layer before you create your custom path

With the Pen tool , click out a similar closed path like I have made here, like a triangle. Then, from the Paths panel menu, choose Make Symmetry Path. Refer to Figure 3-27.

Figure 3-27
Once the path is created with the Pen tool , from the Path menu choose Make Symmetry Path

You may get a warning message saying that the symmetry path is not supported by the Pen tool or other unsupported tools and may be hidden. Click OK. Refer to Figure 3-28.

Figure 3-28
Alert message about using a symmetry path while using the Pen tool

This makes the Path 1 into a custom symmetry path . You can see that by the small butterfly symbol in the thumbnail in the lower right. Refer to Figure 3-29.

Figure 3-29
Symmetry path icon in the Paths panel

Now return to the Brush tool with symmetry paint on and try painting out the path on a new layer in a color of your choice. Refer to Figure 3-30.

Figure 3-30
Use the Brush tool to paint with the new closed symmetry path

Each path has its unique characteristics when working with symmetry paint. So, with closed paths you may need to experiment several times on a new layer or use your History panel or Edit ➤ Undo or Ctrl/CMD+Z until you feel comfortable using this new path.

Note

If you notice that more than one path is selected while you are working and that your custom path has been deselected, first click on the path you want to use. Refer to Figure 3-31.

Figure 3-31
Reselecting the custom symmetry path in the Paths panel

■ Then, choose Selected Path from the Options panel Symmetry menu so that only the currently selected Path 1 is selected. This option will also turn any selected path into a symmetry path. Refer to Figure 3-32.

Figure 3-32
Reselecting the custom symmetry path in the Paths panel and choosing the Selected Path option

■ Now click the Commit Transform check in the Options panel and then continue painting with it on a new layer. Refer to Figure 3-33.

Figure 3-33
Click the check in the Options panel to commit the transformed symmetry path

If you no longer want it to be a symmetry path, you can choose Disable Symmetry Path from the Paths menu. Refer to Figure 3-34.

Figure 3-34
Disable the custom symmetry path in the Paths panel to return it to a normal path

You can see how this is the beginning of a custom pattern layer in Photoshop.

After you are finished painting with the Brush, Pencil, or Eraser tool, select Symmetry Off from the Options menu. This returns the tools to normal mode and the paths are now disabled in the Paths panel. Refer to Figure 3-35.

Figure 3-35
Turn the symmetry mode off in the Options panel to disable all symmetry paths in the Paths panel

We will continue to look at paths later in the chapter as well as in Chapters 5 and 8.

Make sure at this point to File ➤ Save your document. You can refer to file CH3_SymmetryPaint_final.psd if you need to review the layers so far.

Defining the Custom Pattern

Make an Image ➤ Duplicate of your file so far. Make visible a layer or layers of your choice. I am using the Mandala Radial eraser pencil Layer I created. Make sure that it and the background are also visible but turn off the visibility on other pattern layers that you do not want to use as part of the pattern . Then, from the menu, choose Flatten Image. Click OK to the warning message. Refer to Figure 3-36.

Figure 3-36
Flatten the layers in a copy of your file before you define a pattern and discard hidden layers

Now use your Rectangular Marquee tool with a Style of Normal and drag a new selection around the area you want as part of the pattern. Refer to Figure 3-37.

Figure 3-37
Use the Rectangular Marquee tool to select your pattern from the background

From the main menu choose Edit ➤ Define pattern. In the Pattern Name dialog box, give the pattern a name and then click OK. I called mine Colorful Symmetry Paint. Refer to Figure 3-38.

Now the pattern is stored in the Patterns panel. There are other default patterns stored in there as well as patterns created from earlier projects. Refer to Figure 3-39.

We will use the Edit ➤ Define Pattern command a few more times again later in the chapter and then look at how they can be used with various tools.

Choose Select ➤ Deselect to deselect the pattern.

To keep the patterns organized, you can create new group folder or new pattern group. Name the folder as Ch3 Patterns. Click OK and then click and then drag the patterns into that folder so they are part of the collection. Refer to Figure 3-40.

Figure 3-40
Group Folder dialog box created for the Patterns panel and file format to save your patterns for use by others

Note

Patterns can be saved or exported by selecting the folder, and from the menu choosing Export Selected Patterns. They are saved as a .pat file and then can be imported by choosing from the menu Import Patterns. In this chapter’s project folder, I have saved the current patterns we are using if you want to use them as well. Refer to Figure 3-40.

Later, we will apply the patterns to various backgrounds.

You can close the copy of your flattened file without saving changes but save your layered .psd files for future reference.

Vector Shape Patterns

When you want to create geometric patterns with vector shapes , it should be noted that the Pen tool and Selection tools along with the paths panel can be used for a few other unusual warps and distorts for selections and masks, which I discuss in more detail in my Photoshop Selections book mentioned earlier in the chapter. For more details and resources, see Chapter 10 of that book for work in the Path mode. The Paths panel will be used again later in the chapter and then in Chapter 8 when working with certain filters to create distorted trees and flames. However, regarding to the Pen, Selection, and Shape tools, they can also be used to create vector shapes that can be part of a pattern. So, let’s take a quick review of these tools. Refer to Figure 3-41.

Figure 3-41
Tools panel collections of Pen tools, Path Selection tools, and Shape tools

While working in this section, if you need to practice, File ➤ Open CH3_SymmetryPaint.psd as it is just a blank file for you to create layers on and make an Image ➤ Duplicate of the file for practice.

Pen and Shape Tools Review

The Pen tool , besides creating paths, also can be used to create shapes and vector shape layers. After the tool presets, if your Pen tool is set on Path mode, change it now to Shape mode. Refer to Figure 3-42.

Pen Tools

There are seven related pen tools in this collection. I will briefly discuss each one with a few tips regarding shapes. Refer to Figure 3-43.

Pen Tool (P)

This tool can create paths that are open and closed as well as custom shapes. Tip: If you need to draw a straight line, Click and then Shift+Click in a new location. Refer to Figure 3-44.

Figure 3-44
Use the Pen tool to draw a straight line

Click and Click+Drag when you want to create a curve or curves in a certain direction. Refer to Figure 3-45.

Figure 3-45
Use the Pen tool to draw curves

Click again on the same point, holding down the Alt/Option+ Click point, when you want to change from a curved to a straight path and click in a new location. Or after you Alt/Option+Click, you can drag out the handle as well and change direction and then click the next point. Refer to Figure 3-46.

Figure 3-46
Use the Pen tool to draw a straight or a curved line that changes direction

To close the path, make sure the pen has a zero icon beside it when you return to the original point and then Click or Click+Drag for a curve. Refer to Figure 3-47.

Figure 3-47
Use the Pen tool to close the open path for your shape

Once the path is closed, a vector shape layer is created. You can then use the Pen tool Options panel to modify the selected shape layer. Refer to Figure 3-48.

Figure 3-48
Vector shape layer in the Layers panel

Pen Tool Options

Look at the Options panel from left to right. After the tool presets is the Mode menu. With the pen in Shape mode, as you create the shape, you can set a fill color or stroke color from colors from the Swatches panel. Refer to Figure 3-49.

Figure 3-49
Options panel for the Pen tool. Use the dropdown menu to change the swatches color for a fill or stroke of the shape

When using the Set shape fill or stroke type, besides the solid swatches found in the group folders, you can either set the stroke or fill to

No Color (square with red slash)
A gradient from the list and alter the gradient’s slider order (color and opacity stops, opacity midpoint), opacity (0-100%), style (Linear, Radial, Angle, Reflected, Diamond), angle (-180, 0, 180), reverse gradient colors, scale (1-1000%), Align with Layer, and Method (Perceptual, Linear, Classic). These gradients can be found in the Gradients panel. Refer to Figure 3-50.

Figure 3-50
Options panel for the Pen tool. Use the dropdown menu to change the gradient color for the fill or stroke of the shape

Or a pattern and alter the scale (1-1000%) and angle (-180, 0, 180). These patterns can be found in the Patterns panel. Refer to Figure 3-51.

Figure 3-51
Options panel for the Pen tool. Use the dropdown menu to change the pattern for the fill or stroke of the shape

Alternatively, you can choose a color from the Color Picker on the far right of the menu. The gear menu on the right will change options according to the type of fill or stroke chosen. Recently used items are displayed in a row depending on whether swatch, color, gradient, or pattern. Refer to Figure 3-51.

For now, set the fill and stroke back to a solid color. Refer to Figure 3-42.

Next, you can set these stroke options :

Size: 0 px - 1200 px
Shape stroke type: This menu includes various stroke options . They allow you to align the stroke and add caps and corners to the stoke. The gear menu allows you to save custom strokes. Click the More Options button and the dashed line check box if you want to create a dashed and gapped preset line. Otherwise, by default, the line will be solid. Refer to Figure 3-52 and Figure 2-53.

Figure 3-52
Stroke color, width, and style in the Options panel

Figure 3-53
Options panel with additional stroke style options for a shape from the dropdown menu

The next section allows you to alter the width and height of the shape on the layer. It can be linked to keep the scaling proportionate. Right-click a text box if you want the scaling to be in increments other than pixels. Refer to Figure 3-54.

Figure 3-54
Set the unit of increments for the shape’s width and height and link to scale proportionality

The next sections allow you work with two or more shapes that are present on the same layer. Refer to Figure 3-55.

Figure 3-55
Options panel menus for path operations, alignment, and arrangement

Otherwise, if only one, then the options are grayed. To see how this works, create a duplicate layer of the current shape (drag over the Create a new layer icon). Use the Move tool to move the shape on the layer over. Then Shift+Click and select both layers and then from the Layers menu choose Merge Shapes or Ctrl/CMD+E. You should now have two shapes on one layer. Refer to Figure 3-56.

Figure 3-56
Merge two or more shapes layers onto one layer so they share the same attributes

The path operations are New Layer, Combine Shapes, Subtract Front Shape, Intersect Shape Areas, Exclude Overlapping Shapes, and Merge Shape Components. This works similarly to the Properties Pathfinders area to create live shapes, which we’ll look at later. Refer to Figure 3-57.

Figure 3-57
Options panel for path operations : Combine, Subtract, Intersect, Exclude, and Merge Shape Components from Intersect Shape areas

Path Alignment: When two or more shapes are selected, you can align the shapes (left edges, horizontal centers, right edges, top edges, vertical centers, bottom edges) or distribute the spacing vertically or horizontally by clicking one of the options in the menu. To create and select more duplicate paths on one layer, you need to use the Path Selection tool, which we will review in the next section of this chapter. Refer to Figure 3-58.

Figure 3-58
Use path alignment on two or more selected shapes

Path arrangement: When paths overlap on a shape layer, you can change the order, bring a shape to front, forward, or send a shape backward or to the back of the stack. Refer to Figure 3-59.

Figure 3-59
Bring and send shapes when one shape is selected

Next, the gear path options allow you to adjust the guides for viewing the guide path of the shape (Thickness, Color, Rubber Band). Refer to Figure 3-60.

Figure 3-60
Path Options for the Pen tool

The next checkbox in this section, when enabled while creating the path, allows you to add or delete anchor points without selecting those tools in the menu. Just hover over an active point to delete it or over a path to add a point. See “Add Anchor, Delete Anchor, and Convert Point Tools” later in this section. Refer to Figure 3-60 and Figure 3-61.

Figure 3-61
Auto add or auto delete points rather than using those tools in the Tools panel

The last checkbox allows you to align vector shape edges to the pixel grid when drawing. To show/hide the grid, go to View ➤ Show ➤ Grid. Refer to Figure 3-62.

Figure 3-62
Align Edges check box option

Freeform Pen Tool (P)

The Freeform Pen tool is like the Pen tool. It binds to edges of selection if the magnetic option is chosen; otherwise, you can drag in a circular motion to create a path.

Freeform Pen Tool Options

The Freeform Pen basically has all of the options of the Pen tool, except for when you draw freehand or drag a path, you can choose either to move and draw as you would, like a using a Brush or Lasso tool, or enable the magnetic options to allow the points to attach and stick to edges of shapes as you draw. To close a path, make sure that you double-click when you reach the final point of the shape you are drawing. Refer to Figure 3-63.

Figure 3-63
Options panel for the Freeform Pen tool and drawing with the tool on an image with normal or magnetic settings

This tool is not relevant to the topic of this book, and I prefer to use it in Path mode so that I can see the image below for a more accurate trace, before turning it into a shape. But if you would like more details on how to use it for paths, you can refer to my Photoshop Selections book mentioned earlier the chapter. This book shows how a path can be turned into a new shape layer while in Path mode.

Content-Aware Tracing Tool (P)

Like the Pen tool, you can attempt to draw a path around a distinct shape and image with the Content-Aware Tracing tool , and while you draw, it creates a preview selection of the path before you click the next location.

Content-Aware Tracing Tool Options

In Shape mode, this tool contains many of the path panel settings already mentioned for the Pen tool. Refer to the Pen tool for more details. Refer to Figure 3-64.

Figure 3-64
Options panel for the Content-Aware Tracing tool

However, in the next section, there are additional tracing options that include creating paths from detected edges, extending currently selected paths with detected edges, and trimming traced paths.

You can then set the tracing mode for the types of edges to detect (Detailed, Normal, Simplified), the detail settings (1-100%) for edge detection, and Auto Trim, which will automatically trim selected paths and detect edges to minimize gaps with extending traced paths. It works best with shapes with distinct edges to guide you as you create the shape and preview selection. Refer to Figure 3-65.

Figure 3-65
Options panel for the Content-Aware Tracing tool’s additional options and preview of trace as you draw the shape

See the Pen tool for details on the Align Edges check box.

This tool is not relevant to the topic of this book, and I prefer to use it in Path mode so that I can see the image below for a more accurate trace, before turning it into a shape. If you would like more details on how to use it for paths, you can refer to my Photoshop Selections book mentioned earlier the chapter. This book shows how a path can be turned into a new shape layer while in Path mode.

Curvature Pen Tool (P)

Like the Pen tool, the Curvature Pen tool allows you to create curved paths around a drawing to create a closed path.

Curvature Pen Tool Options

The Curvature Pen tool has basically the same options as the Pen tool for shape creation. So refer to the Pen tool for more details. Refer to Figure 3-66.

Figure 3-66
Options panel for the Curvature Pen tool and a shape drawn with the tool

Add Anchor, Delete Anchor, and Convert Point Tools

The last three tools in this Pen collection can be used at any time with the Pen tool as well as the other three previously mentioned pen tools. Refer to Figure 3-67.

Add Anchor Point tool : Adds an anchor point to a path. Refer to Figure 3-68.

Figure 3-68
Add an anchor point to a path

Delete Anchor Point tool : Deletes an anchor point from a path. Refer to Figure 3-69.

Figure 3-69
Delete an anchor point from a path

Convert Anchor Point tool : Converts an anchor point on path from curved to straight by clicking on the point, or from straight to curved if you drag on the point to bring out two handles. Then you can create a curved-to-straight transition by dragging on a single handle. Refer to Figure 3-70.

Figure 3-70
Convert an anchor point to either straight or curved

If you find one of your anchor points is twisted while drawing, the Convert to Anchor Point tool is the best option to use to untangle it. Just click and drag in the opposite direction.

Note

The Add Anchor Point, Delete Anchor Point, and Convert Anchor Point tools do not have additional options in the Options panel. Refer to Figure 3-71.

Figure 3-71
The Options panel has no additional options for the Add Anchor, Delete Anchor, and Convert Point tools

Path Selection Tools

Once points are created for vector shapes on the layers, they can be selected and modified with the following tools:

Path Selection tool (A): Move or transform the entire path or shape
Direct Selection tool (A): Move a point or handles to distort or adjust the path. Refer to Figure 3-72.

Figure 3-72
Tools panel with Path Selection and Direct Selection tools

Path Selection Tool Options

Many of the tool options that were available with the Pen tool are available with the Path Selection tool , so you can refer to the Pen Tool for more details. I will just point out a few key differences. When you select a shape, you can choose to select All layers or All Active Layers. Then, as with the Pen tool, you can at this point modify your selected shape’s fill, stroke, stroke width, stroke type, and adjust the scale of the width and height or link to constrain proportions. Refer to Figure 3-73.

Figure 3-73
Options panel for the Path Selection tool

The next section allows you to set Path Operations, Path Alignment, and Path Arrangement, and this I find is easier to do with the Path Selection tool rather than then Pen tool. However, refer to that section for more details. Refer to Figure 3-73.

Tip

To duplicate a shape on the same layer for use with various path operations, while the path is selected, hold down the Alt/Option key and drag out a new shape. Refer to Figure 3-74.

Figure 3-74
Creating a duplicate shape with the Path Selection tool

When you want to select more than one shape, drag and draw a rectangular marquee around the items you want to select or Shift+Click on each one at a time. Then you can use the various path operations and alignment options mentioned earlier. Refer to Figure 3-75.

Figure 3-75
Selecting multiple shapes with the Path selection tool by dragging a marquee around them

The next section allows you to align vector shape edges to the pixel grid. The gear icon contains the path guide options for thickness and color. The Constrain Path Dragging, if enabled, is a legacy option for path dragging. You can keep this option unchecked. Click elsewhere on the canvas to deselect all the shapes. Refer to Figure 3-76.

Figure 3-76
Path options for the Path Selection tool

Direct Selection Tools Options

The same options as the Path Selection tool are available here when working with selected paths, except you use this tool to select individual points rather than the whole shape. Refer to Figure 3-77.

Figure 3-77
Options panel for Direct Selection tool

When you want to select more than one point, drag to draw a rectangular marquee around the items you want to select or Shift+Click on each point one at a time. Refer to Figure 3-78.

Click elsewhere on the canvas to deselect the shapes.

Figure 3-78
Selecting multiple points with the Direct Selection tool by dragging a marquee around them

Shape Tools

Shape tools allow you to create basic default or custom shapes by dragging them out on the artboard while that tool is in Shape tool mode. Refer to Figure 3-79.

Note

In this chapter, we will not be using Pixels mode because I consider these shapes to be difficult to scale and manipulate later. However, in this mode, shapes act like brushes and you can use blending modes. See “Brush Options and Blend Modes” in Chapter 2 for reference. Refer to Figure 3-80.

Figure 3-80
Options panel for a shape either set to Pixels or Shape mode

Coming back to Shape mode, let’s review the next six tools.

Rectangle tool : It creates rectangles or squares as you drag out a shape on the canvas. To create a square, hold down the Shift key as you draw, or click on the canvas to enter the Create Rectangle options dialog box for more width, height, and radii options for rounded rectangles or squares. With the link disabled, you can set a separate radii for each side. From Center, when enabled, creates the rectangle from a center point of where you clicked in the canvas. Click OK and once the rectangle is created and selected with your Path Selection tool, use the bounding box handles for further moving, scaling, and rotation. Use the live corners widgets to round the rectangle. Refer to Figure 3-81.

Figure 3-81
Create Rectangle dialog box and various created rectangles and squares that can be further transformed with the Path Selection tool when the cursor changes shape

Ellipse tool : It creates ellipse ovals or circles as you drag out a shape on the canvas. To create a circle, hold down the Shift key as you drag. Or click on the canvas to enter the Create Ellipse options dialog box for more options for width and height. From Center, when enabled, creates the ellipse from a center point of where you clicked in the canvas. Click OK and once the ellipse is created and selected with your Path Selection Tool, use the bounding box handles for further moving, scaling, and rotation. Refer to Figure 3-82.

Figure 3-82
Create an Ellipse dialog box and various created ellipses and circles that can be further transformed with the Path Selection tool

Triangle tool : It creates triangles as you drag out a shape on the canvas. Or hold down the Shift key to create an equilateral triangle. Click the canvas to enter the Create Triangle options dialog box for more options for width and height, to make the triangle equilateral, or to adjust the corner radius for a rounded triangle. From Center, when enabled, creates the triangle from a center point of where you clicked in the canvas. Click OK, and once the triangle is created and selected with your Path Selection tool, use the circle (live corners widget) to adjust the radius and the bounding box handles for further moving, scaling, and rotation. Refer to Figure 3-83.

Figure 3-83
Create a Triangle dialog box and various created triangles that can be further transformed with the Path Selection tool

Polygon tool : It create polygons with multiple sides and stars as you drag out a shape on the canvas. Hold down the Shift key for more symmetric shapes. Click the canvas to enter the Create Polygon options dialog box for more options to set width and height, make the polygon symmetrical, change number of sides (3-100), adjust the corner radius for a more rounded shape, and use the star ratio to make a star. Smooth Star Indents is only available when the star ratio is set to 99% or less. Refer to Figure 3-84.

Figure 3-84
Create a Polygon dialog box and various created polygons and stars that can be further transformed with the Path Selection tool

From Center, when enabled, creates the polygon from a center point of where you clicked in the canvas. Click OK and once the Polygon is created and selected with your Path Selection tool, use the circle (live corners widget) to adjust the radius and the bounding box handles for further moving, scaling, and rotation. Refer to Figure 3-84.

Line tool : It creates basic lines and arrowheads. Click at point 1 and then hold down the Shift key while dragging to create a straight line. There is no additional dialog box when you click on the canvas, and you must make adjustments using the Options panel, as you will see shortly. Use the Path Selection tool or Direct Selection tool to adjust the path. Refer to Figure 3-85.

Figure 3-85
Lines creates with the Line tool. Some have arrow heads

Custom Shape tool: It’s a collection of custom shapes that are stored in the Window ➤ Shapes panel. Hold down the Shift key as you drag if you want a proportionate shape. For additional shapes, make sure to add your Legacy Shapes and More folder from the Shapes menu. Refer to Figure 3-86.

Figure 3-86
Custom shapes created with the Custom Shape tool and custom shapes stored in the Shapes panel and additional options in its menu

Once the custom shape is created and selected with your Path Selection tool, use the bounding box handles for further moving, scaling, and rotation. Refer to Figure 3-86 and Figure 3-87.

Figure 3-87
Path Selection and Direct Selection tools

To select individual points, use your Direct Selection tool. Refer to Figure 3-87.

Shape Tool Properties

Since many of the Shape tool properties are similar for most tools when in Shape mode, as with the Pen tool, I will just look over the main key differences for each tool. Otherwise, refer to the Pen tool for more details.

Rectangle Tool Options and Properties

Look at the Options panel from left to right. Many of the same settings are found with the Pen tool. You can set a fill or stroke to a fill of No color, Solid, Gradient, or Pattern. Refer to Figure 3-88.

Figure 3-88
Options panel for the Rectangle tool and various rectangles and squares with various fill and stroke settings

Next, adjust the stroke width and style type options as well as the shape’s width and height and link proportionately. Refer to Figure 3-89.

Figure 3-89
Options panel for Rectangle tool stroke width, styles, width, and height with a link to constrain proportions and a custom rectangle with fill and stroke

Like the Pen and Selection tools, you can use the Path Operations and Path Alignment options if there are two or more shapes on the same layer. Or Path Arrangement when a single shape is selected on the layer. Refer to Figure 3-90.

Figure 3-90
Options panel for Rectangle tool path operations , alignment, and arrangement for various rectangles and squares with similar fill and stroke settings on a single layer

Tip

To put similar shapes on one layer, use your Path Selection tool to Alt/Option+Drag duplicate shapes. To combine different shapes that are on separate layers, Shift+Click each the layer in the Layers panel and choose Merge Shapes from the Layers panel menu or Ctrl/CMD+E. Refer to Figure 3-91.

Figure 3-91
Layers panel with two shape layers merged or use Path Selection tool to duplicate shapes

However, this will cause the shapes to take on the same options and attributes. If you want to use basic path alignment options without combining layers, after you have Shift+Clicked each separate layer, select your Move tool and use the layer alignment options instead. Refer to Figure 3-92.

Figure 3-92
Use the Move tool Options panel to move shapes on separate layers when selected

However, from the Rectangle tool Options panel , additional path options, constrains, and From Center options can be found under the gear icon for adjusting the shape of the rectangle as you draw a new shape. On the far right you can round the radius of each side of the rectangle as well prior to dragging out the shape. Refer to Figure 3-93.

Figure 3-93
Rectangle tool Path Options menu

The last checkbox, when enabled, allows you to align edges to the pixel grid. See View ➤ Show ➤ Grid.

Additional Properties Panel Options

Once you have dragged out and drawn the shape, you can go to your Properties panel and do additional things to the shape, such as transform the shape further in scale or position, alter the angle, or flip the shape vertically or horizontally. Then, as in the Options panel, you can alter the appearance of the fill, stroke, stroke width, stroke type, stroke align type, stroke cap height, and stroke join type. Then you can set each individual side of the rectangle’s radius or keep all the sides the same with the link. All corner radius values are displayed. Refer to Figure 3-94.

Figure 3-94
Rectangle tool Properties panel

Lastly, you can use the Pathfinder options to alter how the shapes combine. Similar settings are also located in the options panel above as Path Operations .

As you drag a new shape, most of them can also be used with key commands to combine another shape to the currently selected shape and the cursor changes:

Combine shapes (Shift)
Subtract front shape (Alt/Option)
Intersect shape areas (Shift +Alt/Option)
Exclude overlapping shapes (does not appear to have a key command, so just use the button in the properties or Path Operations dropdown in the Options panel)

Refer to Figure 3-95.

Figure 3-95
Options panel and Pathfinder options for live shapes in the Properties panel. Cursor icons change when you combine, subtract, intersect, or exclude overlapping shapes

Alternatively, you can use the Live Pathfinder Properties icons on selected shapes on the same layer or on separate layers. However, they must overlap to see the effect, and layer order is important. Refer to Figure 3-96.

Figure 3-96
Selected layers when Pathfinder settings of combine, subtract, intersect, or exclude are enabled

Note

Live Pathfinder options are not available for shapes created with the Pen tool.

Ellipse Tool Options and Properties

The Ellipse Tools options and properties are like the Rectangle tools and Pen tools, so refer to those earlier notes as you look from left to right in the Options panel. However, different additional path options can be found under the gear icon for path options, constrains, and From Center options to alter the ellipse as you draw a new shape. Refer to Figure 3-97.

Figure 3-97
Options panel for the Ellipse tool , path options and various ellipses and circles with various fill and stroke settings

The last checkbox, when enabled, allows you to align edges to the pixel grid. See View ➤ Show ➤ Grid.

Like the Rectangle tool , similar options are available in the Properties panel. Refer to Figure 3-98.

Figure 3-98
Properties panel for the Ellipse tool

Triangle Tools Options and Properties

The Triangle tools options and properties are like the Pen and Rectangle tools. As you look from left to right in the Options panel, refer to those earlier notes. Additional path options, constrains, and From Center options can be found under the gear icon for path options to alter the triangle as you draw a new shape. You can also set the round radius from the Options area prior to dragging out the new shape. Refer to Figure 3-99.

Figure 3-99
Options panel for the Triangle tool , path options, and various triangles with various fill and stroke settings

The last checkbox, when enabled, allows you to align edges to the pixel grid. See View ➤ Show ➤ Grid.

Like the Rectangle tool , similar options are available in the Properties panel. Refer to Figure 3-100.

Figure 3-100
Properties panel for the Triangle tool

Polygon Tools Options and Properties

The options and properties for the Polygon tools are similar to the Pen and Rectangle tools. As you look from left to right in the Options panel, refer to those earlier notes. Additional path options can be found under the gear path options icon as well as constrain options and From Center, including for star ratio and smooth star indents. The setting you make here will affect how the shapes appear as you draw them. In the Options panel, you can set the number of sides and the radius for round corners prior to dragging out the polygon. Refer to Figure 3-101.

Figure 3-101
Options panel for the Polygon tool , path options, and various polygons and stars with various fill and stroke settings

The last checkbox, when enabled, allows you to align edges to the pixel grid. See View ➤ Show ➤ Grid.

Like the Rectangle tool , similar options are available in the Properties panel. You can adjust the shape’s number of side as well as set star settings, and more options can be found under the dotted ellipse for smooth star indents, if enabled, but the star ratio must be less than 99%. Refer to Figure 3-102.

Figure 3-102
Properties panel for the Polygon tool

Line Tool Options and Properties

The options and properties for Line tools are like the Pen and Rectangle tools. As you look from left to right in the Options panel, refer to those earlier notes. However, to work with arrows, you need to adjust the line width. Additional path options can be found under the gear icon; they include live shape controls and arrowheads settings for start and end, width, length, and concavity. In the Options panel, the line weight allows for rectangular shapes with arrowheads and a visible fill. The weight by default is set to 0 px. Refer to Figure 3-103.

Figure 3-103
Options panel for the Line tool, path options, and various lines with various fill and stroke settings

The last checkbox, when enabled, allows you to align edges to the pixel grid. See View ➤ Show ➤ Grid.

Like the Rectangle tool , similar options are available in the Properties panel. However, arrowhead options are only found in the Options panel gear icon menu. Refer to Figure 3-103 and Figure 3-104.

Figure 3-104
Properties panel for the Line tool

Custom Shape Tool Options and Properties

The options and properties for custom tools are like the Pen and Rectangle tools. As you look from left to right in the options panel, refer to those earlier notes. Additional path options, constrains, and From Center options can be found under the gear icon. Refer to Figure 3-105.

Figure 3-105
Options panel for the custom shape tool , path options, and various shapes with various fill and stroke settings

You can select your custom shapes from the Options panel, which are linked to the Window ➤ Shapes panel. Refer to Figure 3-106.

Figure 3-106
The custom Shapes dropdown menu is the same as the Shapes panel

The last checkbox, when enabled, allows you to align edges to the pixel grid. See View ➤ Show ➤ Grid. Refer to Figure 3-106.

Like the Rectangle tool, similar options are available in the Properties panel. Refer to Figure 3-107.

Figure 3-107
Properties panel for the custom shape tool

Tip

If you have shapes on one layer that have attributes that you want to add to another shape on a different layer, you can use the Layers panel to right click on a layer. From the pop-up menu, choose Copy Shape Attributes and then select another layer and then right-click and paste the shape attributes. Refer to Figure 3-108.

Figure 3-108
Use the Layers panel to copy and paste attributes from one selected shape to another

Use your History Panel or Edit ➤ Undo or Ctrl/CMD+Z if you need to undo this step. Refer to Figure 3-109.

Figure 3-109
Use the History Panel to undo steps

After practicing creating shapes with your Pen tools, Selection tools, and Shapes tool, make sure to File ➤ Save your document as a .psd file. You can refer to file shapes.psd to see my progress.

Project: Create a Custom Shape and Then Turn It into a Pattern or Brush

Once you have created some shapes with your shape tools, you can then create a custom shape . Let’s try that now.

File ➤ Open the file Ch3_CustomShape.psd. This file is square 500 px by 500 px because a square area is best to create my eventual pattern. Make an Image ➤ Duplicate of the file for practice.

This file contains one small ellipse that is a vector shape layer . Refer to Figure 3-110.

Figure 3-110
Shape layer in the Layers panel

Use the Ellipse tool and make sure in the Ellipse tool options to keep the fill and stroke at black as shapes are stored as black and white images, which you can color later on. And keep the stroke solid. Refer to Figure 3-111.

Hold down the Shift key and drag out to draw and add several more circles in varying sizes and then use the Move tool or Alt/Option+Drag with your Path Selection tool to move and duplicate them and add them around the first ellipse to arrange them into a pattern. It does not have to be the same as mine.

To scale a shape with the Path Selection tool , select the shape and then hold down the Shift key to constrain proportions with the bounding box handles. Alt/Option+Shift will allow you to scale from the current center point.

Note

When a shape is selected with the Path Selection tool, you can also use the arrow keys on your keyboard to nudge it into place.

As you build the shape, make sure that you do not get too close to the edge as you do not want the shape to break off when it becomes a pattern. Here is my pattern so far. You can see how some shapes are together on one layer or on separate layers. You may have a different number of layers. Refer to Figure 3-112.

Figure 3-112
Multiple ellipses on various layers in the Layers panel and moved with the Path Selection tool

Add a few more shapes like a rectangle or triangle around the design in a stroke and fill of black. Just make sure it does not go to the edge of the canvas. With your Path Selection tool , select the shapes and use the bounding box handle corners to rotate and scale. Refer to Figure 3-113.

Figure 3-113
Use the Path Selection tool when a shape is selected to scale or rotate further

Now, to make sure that all the shapes will be part of the custom shape, in the Layers panel you must select all the layers that you want to have as part of the shape. With the Path Selection Tool selected, Shift+Click all your shape layers in the Layers panel. Refer to Figure 3-114.

Figure 3-114
All paths are selected in the Layers panel while using the Path Selection tool

Now with the Shape Layers selected, choose Edit ➤ Define Custom Shape. Name the shape or keep the default name and Click OK. Refer to Figure 3-115.

The shape is now added to the Shapes panel with any other shapes that were created by yourself or others.

Note

Once a shape has been created, you can return to the Layers panel and continue to create more shapes. As you create your custom shapes, create a group folder and, as you did with the brushes (Chapter 2) and patterns earlier (I called mine Ch3 Custom Shapes), click OK and drag the shapes into the folder to store them. Refer to Figure 3-116.

Figure 3-116
Create a group folder to store custom shapes

■ Like brushes and patterns, shapes can be stored as .CSH files and saved for other projects when you select the folder and from the Shapes panel menu, choose Export Selected Shapes. You can then share and load shapes created by others when you choose Import Shapes from the menu. You can find my custom shapes file in the chapter’s project folder. Refer to Figure 3-117.

Figure 3-117
Export or import custom shapes from the Shapes panel menu

Now, while the shape is still selected, try Edit ➤ Define Pattern to create a new pattern and store it in the Pattern panel with your earlier patterns. Click OK. Refer to Figure 3-118.

Figure 3-118
Add a custom pattern to the group folder in the Patterns panel

You can even do one more thing, as in Chapter 2, but this time choose Edit Define ➤ Brush Preset to make this same pattern into a custom brush and click OK and store it in your folder of custom brushes. Refer to Figure 3-119.

Figure 3-119
Add a custom brush to a group folder in the Brushes panel and preview with the Brush Settings panel

Wow! One pattern can be used in three different tools! That’s good value.

File ➤ Save your custom shape file at this point. You can refer to my file, Ch3_CustomShape_final.psd. And you will find the files for the custom shapes, patterns, and brushes in the chapter’s project folder.

Project: Patterns with the Offset Filter

Once you have created various designs with your brushes and shapes, you can see how they can be defined as patterns. However, maybe you have a photo of a textile or a pattern that you created and then made a photo or scan. How can you create a seamless pattern from an image? To create seamless patterns that flow correctly, you need to find a way to check how the pattern appears at the edges so that one side flows into the other. You can do that in two ways. The first is to use the Offset filter .

File ➤ Open file Pattern6.psd in the Chapter 3 Cloth_Patterns folder and make an Image ➤ Duplicate of the file as you did in Chapter 2 and click OK.

In this case, I’m using a pattern I created from thread and then scanned and straighten using the Perspective Crop tool . See Chapter 2 if you need to review. Refer to Figure 3-120.

Figure 3-120
A custom cross-stitch pattern with texture

Currently this pattern is 827 pixels wide by 745 pixels high. For this project, I need a square pattern so using Image ➤ Image Size, I am going to distort the pattern slightly to force it to be square. Refer to Figure 3-121.

Figure 3-121
Image Size dialog box settings

In the Image size dialog box , disable the link between the width, height, and resolution by enabling the Resample button. Refer to Figure 3-122.

Figure 3-122
Changing the Image Size dialog box settings from inches to pixels

Change the units of measurement from inches to pixels. For the moment, relink the width and height and type in an even number for the width of 828 pixels. Refer to Figure 3-123.

Figure 3-123
Increasing the image size’s width and height proportionately

Disable the link again and make the height 828 pixels as well. There will be a slight height distortion but this is what this book is all about. Bicubic (smooth gradients) is OK. You will see an example of resampling in Chapter 4 where I explain this in more detail for the perspective and interpolation. Click OK to exit the dialog box. Refer to Figure 3-124.

Figure 3-124
Making the pattern square by stretching and increasing the height slightly

This pattern is now 828 px wide and 828 px high. The resolution is 300ppi for print. Remember that if you are planning to use your pattern for a website, then after you create the background, set the resolution to 72ppi. While not relevant to the topic of this book, you can see example files of that resolution in my book Graphics and Multimedia for the Web with Adobe Creative Cloud. However, I think it is best to create the initial pattern at 300ppi because, depending on your project requirements, later you can use the background for a variety of print or web projects and are not restricted to one media.

Also, always keep a backup of your original pattern in an undistorted state. This is why we are working on a copy: in case we want to use this pattern for a different project.

Now I want to create a repeating pattern with seamless edges. I prefer working with a square canvas that has an even number of pixels. It makes the math in the next step easy to figure out. However, depending on the complexity of your pattern, you can make your file dimensions larger or smaller than mine or use a rectangular pattern instead. Just make sure each side has an even number of pixels.

Offset Filter

In the menu, go to Filter ➤ Other ➤ Offset. In the Filter Offset dialog box , set Horizontal: +414 pixels right and Vertical: +414 pixels down. This is because the design is 828 px by 828 px, so you want to break it in half to correct the edge. Then for the Undefined Areas, select Wrap Around. If set to Transparent or Repeat Edge Pixels, this will not give the result you want and only place the pattern in the corner of the canvas. Make sure that Preview is checked so you can see what is happening to your pattern on the canvas. Refer to Figure 3-125.

You willl notice that there are a few lines where the edges are not meeing correctly. This is due to some of the canvas that borders where I stitched and it cannot be helped with handmade items. In the Offset dialog box, click OK.

Touching Up the Pattern

In the Layers panel , create a new layer called Layer 2. Refer to Figure 3-126.

Figure 3-126
Create a new layer to work with the Clone Stamp tool

Then select your Clone Stamp tool (S). We talked about this tool in Chapter 2. Refer to the Options panel to adjust your settings. Use a brush preset of Soft Round Brush with a small Size like 36px and Hardness 0%. The brush should be soft so that you can blend in the threads in a natural way. Leave the Effect Mode at normal and Opacity 100% and Flow at 100%. Make sure Aligned is enabled and Sample is Current & Below. Refer to Figure 3-127.

Figure 3-127
Clone Stamp tool and its Options panel

Alt/Option+Click to select an area to clone and then click on a location to cover that area along the seam to make sure that the pattern has a smooth transion. From the Brushes Preset Picker you can vary your bush size to smaller sizes from 36 px down to 15 px as required and Alt/Opiton+Click if you need to select a new sample area again. Also remember to use your Zoom tool and Hand tool (spacebar) if you need to move arround and get closer to the image. Refer to Figure 3-128.

Figure 3-128
Options panel for Brush Picker Presets for clone stamp and cloning covering parts of the seam on the new layer

Also make sure to use your Eraser tool (E) with a Soft Round Brush so that you can clean up any mistakes or added seams and vary the size of the soft brush as well. Refer to Figure 3-129.

Figure 3-129
Options panel for Eraser tool

Be careful when you get near the edges with your Clone Stamp tool. Don’t clone too closely to the side as that will reflect as a defect later on when the pattern is repeated at that seam. Refer to Figure 3-130.

Figure 3-130
Close-up of edge of pattern that is being cloned with the clone stamp

Turn on and off the Layer 2 visbity eye as you work so that you can see if you have blended in the seam accurately with your Clone Stamp and Eraser tools. Refer to Figure 3-131.

Figure 3-131
Turning off and on the visibility of the area being cloned on the new layer

When you are happy with the results, then from the Layers menu, rather than choose Flatten Image, try the key command of Shift+Ctrl/CMD+Alt/Option+E. This merges all visible layers but creates a copy of them on a new layer (in this case, Layer 3). Your background pattern square should be complete. Refer to Figure 3-132.

Figure 3-132
Combining the pattern and cloned layers as a new merged and complete layer

At this point File ➤ Save your document as a .psd file. You can refer to my file so far, Pattern6_final.psd.

Pattern Preview

If you don’t want to view your pattern again in the Offset filter, another way to check it is to use View ➤ Pattern Preview . You may get a warning message that you need to use a smart object, but in this case clicking OK will allow you to see a display of the pattern as it would appear if were tiled. Refer to Figure 3-133.

Use the Zoom tool or Ctrl/CMD+- to zoom out to see more of the pattern tiled at once. Refer to Figure 3-134.

Figure 3-134
Pattern in Pattern Preview with thin blue guide indicating center

The thin blue line is where your original canvas area is. Looks good to me.

For more details on how to use Pattern Preview, refer to this link: https://helpx.adobe.com/photoshop/using/pattern-preview.html .

To get out of this view, choose View ➤ Pattern Preview again.

Note

I’ll start talking more about smart objects and their uses in Chapter 4 and other filters in Chapters 8 to 10.

Defining a Pattern

To complete your pattern creation, from the menu choose Select ➤ All (Ctrl/CMD+A) and then Edit ➤ Define Pattern . Give it a name like Pattern 6 and click OK to add it to the Patterns panel. Refer to Figure 3-135.

Then drag the pattern into your group folder. Refer to Figure 3-136. File ➤ Save and close your file.

Figure 3-136
Pattern added to the group folder in the Patterns panel

Note

If you enjoyed this pattern creation process, I have five other patterns in the Cloth_Patterns folder you can practice with and repeat these steps.

Earlier in the chapter you saw how to add patterns to vector shapes. Later in this chapter we will start using our patterns in backgrounds to fill areas. However, before we do that, I will show you a second way to create a unique repeating pattern from any image.

Libraries Panel: Adobe Sensei Capture Extract from an Image to a Pattern

The Libraries Panel is used by Creative Cloud to transfer different assets from Photoshop to Illustrator and other Adobe apps without having to File ➤ Open each item. Once you have added items to your panel, just drag and drop on the canvas and they can be linked to the cloud folder or embedded in the new file. The types of assets that Photoshop can create or accept are

Colors and color themes
Gradients
Character styles
Layer styles
Brushes
Graphics
Patterns

Refer to Figure 3-137.

Figure 3-137
Libraries panel that stores various assets including patterns

You can learn more about the Libraries panel as Adobe updates it frequently. Refer to these related links to explore how additional assets can be used in libraries with other Adobe apps : https://helpx.adobe.com/photoshop/using/cc-libraries-in-photoshop.html and https://helpx.adobe.com/illustrator/using/creative-cloud-libraries-sync-share-assets.html .

Most libraries in other Adobe apps have similar importing and exporting features. However, Photoshop appears to be the only one so far that has an Adobe Sensei Capture Extract from Image to create patterns from any image. Let’s see how that works.

Project: Patterns from Cloth Pattern Part 2

To start, make sure that you have your Photoshop Libraries panel visible. If you don’t have a library, create one first or use one of the current libraries you have open for this project.

To create a library, click the Create new library icon or choose this option from the menu. Refer to Figure 3-138.

Figure 3-138
Creating a new library to add patterns to

Give your library a name like Photoshop Patterns and click to create. Refer to Figure 3-139.

Figure 3-139
Creating a new library in the Libraries panel

You can now start building and adding assets in your library by dragging layers into the library or, when a layer is selected from the plus menu, choosing Extract from Image. Let’s try that with an Image ➤ Duplicate copy of the file Pattern2.psd found in the Cloth_Patterns folder . Refer to Figure 3-140.

Figure 3-140
Selecting a layer and choosing to extract from images in the Libraries panel

To create a pattern, make sure your current background layer is visible and Layer 1 is selected. Then, from the Libraries panel, click the plus icon (add elements). Rather than choosing the graphic or the current foreground color, choose the option Extract from Image.

This brings up the Extract from Image dialog box for Adobe Capture. Refer to Figure 3-141.

Figure 3-141
Extract from Image dialog box

The first tab which we will be looking at is the Patterns Tab. However, if you want to create and clean up a graphic shape, add swatches for custom Color Themes or Gradients, or find similar Type fonts make sure to check out those options on your own afterwards as it is not part of the topic of this book.

https://helpx.adobe.com/photoshop/using/capture-extension-in-libraries-panel.html

https://www.adobe.com/products/capture.html

Returning to the Patterns tab, on the left side the current pattern is stored you. When you click the plus icon, you can open and select other file formats to add to the list:

PNG (.png)
JPEG (.jpg and .jpeg)
SVG (.svg)
Bitmap (.bmp)
ICO (.ico)
Webp (.webp)

Refer to Figure 3-142.

Figure 3-142
File formats that can be opened in the Extract from Image dialog box

Click Cancel to this dialog box if you do not want to do this or click Open to add the file to the list. You cannot remove this file from the list until you click the Close button in the dialog box, but you can right-click the thumbnail to print the current graphic pattern for reference. Refer to Figure 3-143.

Figure 3-143
You can print a preview of your current pattern in the Extract from Image dialog box

In the middle of the Patterns tab is the pattern live preview. Refer to Figure 3-141 You can make modifications on the right of this area under the Patterns tab. Refer to Figure 3-144.

There are five options for tile patterns : traditional triangular, square, diamond, and hexagonal grids that create a kaleidoscope effect , like what you saw when working with symmetry paint. Refer to Figure 3-144 and Figure 3-145.

Figure 3-145
Five different pattern variations

You can then set the color mode for your pattern either to appear in colors or grayscale from the dropdown menu. Refer to Figure 3-144 and Figure 3-146.

Figure 3-146
Change the color mode from color to grayscale

The image can then be scaled (0.1 - 10) or rotated (-180, 0, +180°) using the sliders and you can preview this in the image on the left as well as the Pattern Tile Preview area lower down. Here you can drag your image in the Pattern Preview to regenerate the pattern and see a different view or image slices. Refer to Figure 3-147.

Figure 3-147
Change the image scale, rotation, or Pattern Preview area

Take some time to move the patterns around and move the sliders.

Once you are happy with the pattern you have created, click on the Save to CC Libraries button and the pattern will be added to your current open library as a pattern asset. Refer to Figure 3-148.

Figure 3-148
Save your pattern to the selected CC library in the Libraries panel

To generate more patterns from your currently selected image, drag the pattern around or adjust the sliders. For each new pattern, click the Save to CC Libraries button and then click the Close button to exit the Extract from Image dialog box.

OK, you now have a pattern or maybe several patterns. However, they may not be showing up in the Patterns panel for you to use in your current project.

Adding a Library Pattern to the Patterns Panel

While a pattern is selected in the Libraries panel , double-click it to add it to the Layers panel as an adjustment layer called Pattern Fill . Refer to Figure 3-149.

Figure 3-149
Use the Pattern Fill dialog box to move your new pattern to your Layers panel from the Libraries panel

A preview of the pattern appears in the dialog box while selected in the dropdown list. Click the plus icon next to the preview to create a new preset from this pattern. This will now add it to the Patterns panel. Refer to Figure 3-150.

Figure 3-150
Use the Pattern Fill dialog box to move your new pattern to your Patterns panel

Click OK to the default message in the dialog box. We will look at this dialog box in more detail shortly.

At this point, you can close the copy of the Pattern2.psd file without saving changes.

With a few extra steps, Creative Cloud library pattern assets can also later be used in Adobe Illustrator, and you can see that in Volume 2, should you want to extend the use of your patterns in only the Illustrator application.

Note

If you want to save a copy of your library to share with others, in the menu, choose Export “Library Name” and it will be saved as a .cclibs file that you can save in a selected desktop folder and then later others can use when they import the library. Refer to Figure 3-151.

Figure 3-151
Export patterns from the Libraries panel to share with others

You can find a copy of this current library in this chapter’s project folder, which you can from the menu load when you choose Import Library and locate the file in your folder. See the file Photoshop Patterns.cclibs. Refer to Figure 3-151.

Reusing Patterns or Textures

Once you have created your patterns using the various methods described earlier, there are several dialog boxes and tools that you can use them in, so let’s explore them next.

For practice, you can use the blank file that you opened earlier, CH3_SymmetryPaint.psd, and make an Image ➤ Duplicate. And then, in the Layers panel, create a new layer before the next dialog box. Refer to Figure 3-152.

Figure 3-152
Create a new layer in the Layers panel for practice

Fill Dialog Box

When you want to fill a background or selection area on a layer quickly with a solid color swatch, you can use the Fill dialog box . However, did you know that you can also use it to fill an area with a custom pattern?

On a blank new layer, go to Edit ➤ Fill and from the contents list, this time choose Pattern. Refer to Figure 3-153.

Figure 3-153
Fill dialog box with the Pattern option

From the Options presets Custom Pattern List, choose a pattern from the dropdown menu, which is the same as the Patterns panel, and click OK. This will make the pattern appear at its current scale across the entire layer. Refer to Figure 3-154.

Figure 3-154
Fill patterns can use blending modes

Alternatively, for altered colors you can also set the blending mode (refer to Chapter 2). Here I tried a mode of Multiply. It will affect how the pattern applies itself over areas already painted on that layer. Refer to Figure 3-155.

Figure 3-155
Fill patterns can use blending modes to affect how they fill on the canvas over previously painted areas on the same layer. These are Normal and Multiply examples

For blending, you can also set Opacity (1-100%). Preserve Transparency can be enabled if present in the patterns.

However, the drawback of creating a background this way is that you can’t scale the pattern if you find that the pattern is too large or small without destructively altering the resolution or now creating an area of missing pattern on one or more sides of the canvas. You can see how this looks when I use the Move tool and enable the Show Transform controls for scaling the pattern on the layer using the bounding box handles. Refer to Figure 3-156.

Figure 3-156
Scaling a pattern on a normal layer with the Move Tool results in blank areas

Later, we will scale the pattern using an adjustment fill layer instead.

Click the Cancel icon in the Options panel to undo this step for now. We’ll explore this type of transformation in more detail in Chapter 4 and then disable the Show Transform Controls checkbox in the Options panel. Refer to Figure 3-157.

Figure 3-157
In the Options panel, cancel the transform in the Move tool’s Options panel and deselect Show Transform Controls

Fill Pattern Scripts

In the Layers panel, turn off the visibility of fill Layer 1 and create a new layer. Refer to Figure 3-158.

Figure 3-158
Create a new layer in the Layers panel for practice

Return to Edit ➤ Fill for the moment and set the blending mode back to Normal Opacity: 100% and uncheck Preserve Transparency.

Try a different pattern with more colors.

Another hidden feature in the Fill options panel is Script . Enable this checkbox if you want to experiment with this feature. Refer to Figure 3-159.

Figure 3-159
Fill dialog box with the Script checkbox enabled

There are six custom scripts with their own settings and previews. To enter each dialog box, select one from the list and click OK to enter the next dialog box. However, you can only apply these options one at a time, so as you test them, create a new layer and name them for each one so that you can see the difference and then return to Edit ➤ Fill and test the next one.

Your design may be different than mine depending on what pattern you choose.

Here are the details on the six custom scripts .

Brick Fill: It allows you to create a further brick-like design . Every other row is shifted by half a tile. Refer to Figure 3-160.

Adjust your pattern with various sliders that affect

Pattern Scale (0.1 - 1.25): Makes the pattern larger or smaller.
Spacing in pixels (-1292, 0, 7980): Often a small spacing is best, as too high a number makes the space too great, and too low a negative number can make the pattern difficult to see. The range of spacing can vary depending on the pattern used.
Offset between rows percentage of width (-100, 0, 100%): The default is 50% and gives the best brick spacing.
Color randomness (0-1): Alters the color of the bricks with higher settings. Refer to Figure 3-161.

Brightness randomness (0-1): Alters the brightness of some of the bricks. A setting of 1 makes some bricks black. Refer to Figure 3-162.

Figure 3-162
Brightness randomness preview

Pattern rotate angle in degrees (-180, 0, 180°): changes the angle of the bricks , creating a zig-zag like pattern. For example, with 113° degrees, refer to Figure 3-163.

I tried a Pattern scale: 0.34, Spacing of 10 pixels and Offset between rows 50% of width, Color randomness of 0.05, Brightness randomness of 0.1, and Pattern rotate angle of 0 degrees.

When done, you can click OK or you can reset the pattern by clicking the Reset button if you do not like the new settings. Refer to Figure 3-164.

Figure 3-164
Click OK to commit the pattern settings or Reset to set back to the default

Note

Additional presets can be loaded as an .xml file and saved from this menu when altered. The current preset is Custom. Or you can reset by choosing Default from the list. Refer to Figure 3-165.

Figure 3-165
Set the preset from custom to default or load, save, or delete a preset

If you find that the pattern does not have the adequate spacing you are looking for, go back a step in your History panel to remove the fill and then return to the Edit ➤ Fill dialog box to adjust. Refer to Figure 3-166.

Figure 3-166
Use your History panel if the pattern fill is not to your liking and enter the Fill dialog box again

On a new layer, you can try the next fill script setting. Go to Edit ➤ Fill. Refer to Figure 3-167.

Figure 3-167
Create a new layer in the Layers panel for practice and name the layers to keep track of your progress. Turn off the visibility of some layers to see that blank layer clearly

Cross Weave: Allows you to create a more woven or block-like pattern with more gaps. The tiles are rotated at right angles. In this case, the tiles should be square or gaps may emerge. However, for your design, maybe rectangular is what you want. Also, tiles with a grain in one direction will have a more apparent design change rather than uniform tiles. Similar setting to a brick fill can be found, so refer to that script for more details.

Pattern Scale
Spacing in Pixels
Color randomness
Brightness randomness

Refer to Figure 3-168.

I set my setting to Pattern Scale: 0.33, Spacing: 10 pixels, Color randomness: 0.05, and Brightness randomness: 0.1. Spacing often varies slightly from what is seen in the preview so you may need to use your History panel and enter the Fill dialog box a few times before you get the exact cross weave pattern you want. Refer to Figure 3-169.

Figure 3-169
Cross Weave pattern generated

On a new layer, you can try the next fill script setting. Go to Edit ➤ Fill. Refer to Figure 3-170.

Figure 3-170
Create a new layer in the Layers panel for practice and name the layers to keep track of your progress and keep only the new layer visible

Place Along Path: This type of fill can only be used if you have already created a path with the Paths panel . Otherwise, you will get a warning alert. Refer to Figure 3-171.

Figure 3-171
Warning message reminds you to create a path first before using the script

Use your Pen tool in Path mode to create a simple path. In this case, an open path is fine. Refer to Figure 3-172 and Figure 3-173.

Figure 3-172
Pen tool options in Path mode

Figure 3-173
Path created with the Path tool and a path in the Paths panel

To review that, refer to “Project: Create a Custom Symmetry Paint Path” and the Pen tool sections of this chapter.

Once a path is created and selected in the Paths panel, then choose Edit ➤ Fill again and then the pattern and a script of Place along Path and click OK. This script fill allows you to set the following options:

Pattern Scale (0.1-1.25): Makes the pattern larger or smaller. Often smaller, less detailed patterns are best for this dialog box to render, or you may get a warning message.
Spacing in pixels (-2660, 0, 7980): Often a small spacing is best, as too high a number makes the space too great and too low a negative number can make the pattern difficult to see. This setting range may vary depending on what pattern was chosen.
Adjust spacing to fit: Click the checkbox to enable
Angle from path in degrees (-90,0,90)
Distance from path in pixels (0-2000): This setting range may vary depending on what pattern was chosen.
Alternate patterns: On the path, click the checkbox to enable. It is enabled by default.
Scale progression percentage (90-110%)
Skip symbol rotation: When this checkbox is enabled, it disables the spacing and angle from the path options parts of the pattern and they will not be rotated.
Color randomness (0-1): Alters the color of the tiles with higher settings.
Brightness randomness (0-1): Alters the brightness of some of the tiles; a setting of 1 makes some tiles black. Refer to Figure 3-174.

Figure 3-174
Place Along Path dialog box

Note

What you see in the preview may be slightly different than what appears on your custom path and may require you to use your History panel a few times to get the tiles on the path to your liking.

In my example, I kept the default settings and only adjusted the pattern scale to 0.25 and spacing to 20 pixels; however, depending on the pattern you created and path you made, it may look very different. Refer to Figure 3-175.

Make sure to deselect your path in the Paths panel by deselecting it in the Paths panel it so that you can see the path clearly. Refer to Figure 3-176.

Figure 3-176
Pattern on Path, path deselected in the Paths panel

On a new layer you can try the next fill script setting. Go to Edit ➤ Fill. Refer to Figure 3-177.

Figure 3-177
Create a new layer in the Layers panel for practice and name the layers to keep track of your progress and make only that layer visible

Random Fill: Creates an almost jumbled appearance of tiles of varying sizes. Refer to Figure 3-178.

This fill allows you to set the following options:

Density pixels (0.1-10): How many tiles fill the area without leaving gaps
Minimum scale factor (0.1-3): Works with the minimum scale factor to alter the size of the tiles
Maximum scale factor (0.1-3): Works with the minimum scale factor to alter the size of the tiles
Max distance from paths in pixels (0-250): This setting is only available if a path is enabled. See “Place Along a Path Script” earlier for more details on how to create a path. Refer to Figure 3-179.

Figure 3-179
Pattern on a Path when a path is selected prior to entering the dialog box

Rotate Pattern : When this checkbox is enabled, it causes the pattern to rotate. When disabled, the pattern can be at random sizes but are now square. Refer to Figure 3-180.

Figure 3-180
Rotate Pattern disabled for random fill

Color randomness (0-1): Alters the color of the tiles with higher settings.
Brightness randomness (0-1): Alters the brightness of some of the tiles; a setting of 1 makes some tiles black.

In this example, I set the following: Density of 10px, Minimum scale factor of 0.5, Maximum scale factor of 1, enabled Rotate Pattern, color randomness of 0.21, and brightness randomness of 0.18. Refer to Figure 3-181.

Figure 3-181
Random fill pattern generated

On a new layer, you can try the next fill script setting. Go to Edit ➤ Fill. Refer to Figure 3-182.

Figure 3-182
Create a new layer in the Layers panel for practice and name the layers to keep track of your progress and make only that layer visible

Spiral: Creates a pattern that spirals outward from the middle. Refer to Figure 3-183.

This fill allows you to set the following options:

Pattern Scale (0.1-1.25): Alters the size the pattern tiles collectively.
Ring spacing in pixels (-708, 0, 1656): Depending on the pattern, this setting may make little difference to the spacing of the spiral. Spacing range may vary due to what image is chosen.
Pattern spacing in pixels (-708, 0, 828): Bring the spacing either closer together or farther apart. Spacing range may vary due to what image is chosen.

Figure 3-184
Keep Pattern Upright disabled and enabled

Keep Pattern Upright: When this checkbox is enabled, the pattern does not rotate with the spiral. Refer to Figure 3-184.
Color randomness (0-1): Alters the color of the tiles with higher settings.
Brightness randomness (0-1): Alters the brightness of some of the tiles; a setting of 1 makes some tiles black.

In this example, I used a Pattern scale of 55px, Ring spacing of 0 pixels, Pattern spacing of -27 pixels, disabled Keep Pattern Upright and used a color randomness of 0.12 and a brightness randomness of 0.21. Refer to Figure 3-185.

Figure 3-185
Spiral fill pattern generated

On a new layer, you can try the last fill script setting. Go to Edit ➤ Fill. Refer to Figure 3-186.

Figure 3-186
Create a new layer in the Layers panel for practice and name the layers to keep track of your progress and make only that layer visible

Symmetry Fill: The most complex of the six scripts, it has 33 different symmetry types to chose from. Refer to Figure 3-187 and Figure 3-188.

Take some time to preview each of the symmetry fills on your own and see which ones look best for your pattern. Every one is very different.

The one that I like the best is 7: dilative rotation symmetry. It can give some unusual effects similar to a Droste-like pattern appearing within a pattern and spiralling inwards like the center of a flower. Refer to Figure 3-189.

Figure 3-189
Symmetry fill pattern number 7 generated

Then for whichever symmetry type you choose, you can set the options:

Pattern Scale (0.25-1.25): Alters the size the pattern tiles collectively
Pattern translation along the width percentage of width (-100, 0, 100%): Alters the complexity of the pattern along the width
Pattern translation along the height percentage of height (-100, 0, 100%): Alters the complexity of the pattern along the height
Color randomness (0-1): Alters the color of the tiles with higher settings.
Brightness randomness (0-1): Alters the brightness of some of the tiles a setting of 1 makes some tiles black.

In this example, I used a Pattern scale of 0.9, set the Width translation to 75%, Height translation to 75%, Color randomness of 0.05, and Brightness randomness of 0.1. Refer to Figure 3-187.

Click OK to commit to exit the dialog box. And make sure to File ➤ Save your document. You can review mine in CH3_PatternFill_Finals.psd. Refer to Figure 3-190.

Figure 3-190
Various Fill script layers in the Layers panel

Note

There are limits to how much you can scale these fills. Something you can do to avoid having areas chopped off at the edge is to make your canvas size a bit larger before you fill with a script. Another way that I have found around the resolution issue is to make sure that the file that I am creating the random or symmetry fill in is set to 600ppi. Then, if I must copy the background into a file at 300ppi, I find I can get a larger, better quality graphic if scaling is required.

Adjustment Pattern Fill Layers

Earlier, while working with the Libraries panel, you saw that you could easily create an adjustment layer pattern fill . Now we will look at that dialog box a bit further. From the Layers panel, choose Pattern from the Create New Fill and Adjustment Layers list. Refer to Figure 3-191.

Figure 3-191
Create an adjustment layer pattern fill

This creates a pattern fill and will hold the current pattern selected from the Patterns panel. Refer to Figure 3-192.

You can change the pattern here from the drop-down preview list if you want a different pattern. Refer to Figure 3-193.

Figure 3-193
Pattern dropdown menu and options

Set an angle for the pattern (-180, 0, 180) and scale the pattern (1-1000%) if you find it is too large or small, which is something you could not do with Edit ➤ Fill after the pattern filled the layer. Refer to Figure 3-194.

Figure 3-194
Pattern Fill dialog box options for scale and rotation

You can also enable the option Link with Layer as this will force the pattern to move with the layer if you use the Move tool outside of the dialog box. Use Snap to Origin to reset the pattern position if you have, while in the dialog box, adjusted the position of the pattern. If you look at your Options panel area, there is a Move tool hint to remind you that you can move and drag the pattern. Refer to Figure 3-195.

Figure 3-195
Use the Move tool to move your pattern

And after adjusting the settings, click OK to exit. Refer to Figure 3-194 and Figure 3-196.

Figure 3-196
Enter the Pattern Fill adjustment layer anytime from the Layers panel

These features are non-destructive to the pattern fill , and you can double-click the pattern fill layers thumbnail at any time to enter it and make adjustments.

As with any layer in the Layers panel, when selected you can alter the blending mode and opacity. This especially useful if you plan to have a text layer over a pattern. Lowering the opacity of a busy background layer makes the text easier to read. Refer to Figure 3-197.

Figure 3-197
For readability, lower the opacity of your Pattern Fill layer if text is to be over it

We’ll look at text in more detail in Chapter 5.

Also, you can paint on and edit the layer mask if you want remove part of the pattern with your brush or a selection on the layer mask thumbnail. And you can make further edits by feathering the selection in the Properties panel. Also, for more resources and details on masks, you can refer to my Photoshop Selection book that I mentioned earlier in the chapter. Refer to Figure 3-198.

Figure 3-198
Use the Pattern Fill layer mask to hide part of the pattern

Note

To see the options of a selected fill or adjustment layer, you need to click on the mask and refer to the Properties panel. Refer to Figure 3-199.

Figure 3-199
Alter the Pattern Fill mask using the Properties panel to set Density and Feather

Later you can apply additional adjustment layers on top of your current pattern fill for additional color enhancement.

Layer Styles with Patterns and Textures

Layer styles are great to add as embellishments to shapes as well as text. In this example, use one of the shape tools that you used earlier in the chapter and drag out a shape. I am going to Shift+Drag out a circle with the Ellipse tool. It will have a fill of white and a stroke of black in the Options panel. Refer to Figure 3-200.

While your vector shape layer is selected from the Layers panel, choose the Add a Layer Styles dropdown menu. Refer to Figure 3-201.

Figure 3-201
From the Layers panel, add a layer style to your vector shape layer

Layer styles include

Blending Options
Bevel & Emboss
Stroke
Inner Shadow
Inner Glow
Satin
Color Overlay
Gradient Overlay
Pattern Overlay
Outer Glow
Drop Shadow

Most layer styles rely on a combination of opacities, blending modes, colors, and gradients to get the effect you are looking for. However, there are a few layer styles like Bevel & Emboss, Texture, Stroke, and Pattern Overlay that allow you to reuse your patterns in unique ways.

While you should experiment with all layer styles, let’s focus on where to add the pattern or texture to the three I just mentioned.

To start from the list, choose Bevel & Emboss to enter the Layer Style dialog box. Refer to Figure 3-202.

Figure 3-202
From the Layers panel , enter the Layer Style dialog box

Note

While in this area, you can use your Hand tool and Zoom tool key commands of Ctrl/CMD++ or Ctrl/CMD+– if you need to zoom in and out of an area.

Bevel and Emboss – Texture

In the Layer Styles dialog box, below Bevel & Emboss are two submenus of Contour and Texture. Enable the check of Texture and select it. Refer to Figure 3-203.

Figure 3-203
Layer Style options for Bevel & Emboss - Texture

From here, in the elements, you can choose a pattern that becomes an embossed texture. As with other patterns, you can add a new preset pattern to the Patterns panel using the plus icon.

With your Move tool, you can drag on the pattern on the canvas and then reset it with the Snap to Origin button. Refer to Figure 3-203 and Figure 3-204.

Then, with the sliders, adjust the scale size (1-1000%) of the texture or texture depth (-1000, 0, +1000%). Refer to Figure 3-205 and Figure 3-206.

Figure 3-205
Texture scale and depth adjustments

With the checkboxes enabled, you can invert the texture pattern and link the texture with the current layer, so that it moves along with the shape once you exit from the dialog box. Refer to Figure 3-206.

Note

If you do not see the same texture setting, return to the Bevel & Emboss tab make sure that the Structure Style tab is set to Inner bevel, as Outer Bevel affects the stroke area and may cause the texture bevel to disappear inside the shape but appear on the stroke instead. Other style settings like Emboss and Pillow Emboss make the texture appear on the fill and stroke. Refer to Figure 3-207.

Figure 3-207
Bevel & Emboss settings adjusted for Style

Stroke

Click the Stroke tab in the Layer Style dialog box. At first, it might be hard to find where you can add pattern to a stroke but look in the fill type menu and change it from Color or Gradient to Pattern. Refer to Figure 3-208.

This will load a default pattern and the related fill type options. Refer to Figure 3-209.

Figure 3-209
Layer Style options for Stroke with Pattern

As with Bevel & Emboss - Texture, you have the same options to change the pattern. Create a new pattern preset. Snap to origin if the pattern is moved, alter the angle, change the scale size, and link with layer so that the pattern moves together with the shape.

If you can’t see the pattern, adjust the Stroke Structure areas of Size (1-250) px, Position to Outside, Inside, or Center, Blend Mode (see note on Blend Mode in Chapter 2), and set the Opacity (0-100%) and Overprint (blend stroke against current layer contents). Refer to Figure 3-210.

Figure 3-210
Preview and Layer Style options for Stroke with Pattern

In my test, I set the Stroke structure to Size: 76 px and Position to Center so that only part of the earlier texture appeared on the stroke. I set the Blend Mode to Difference, Opacity to 100%, and Overprint disabled. The pattern I used was Tree Tile 4 from the default Pattern Trees folder. I kept the angle at 0° and Scale: 100% and Link with Layer. Refer to Figure 3-210 and Figure 3-211.

Figure 3-211
Layer Style options for Stroke with Pattern, changing the pattern to a new pattern

One additional feature with strokes is that you can add more than one in the Layer Styles dialog box. By clicking the plus symbol, you can add more than one stroke with a pattern over each other. Just vary the structure size, position, blend mode, and opacity, and then the pattern. Refer to Figure 3-212.

Figure 3-212
Preview and Layer Style options for Stroke with Pattern , adding another stroke called Tree Tile 4

Note

Not all layer effects can be used multiple times; only those with a plus symbol. You can select and click the trash can icon if you need to remove a style from the list. Refer to Figure 3-213.

Figure 3-213
With two stokes , use the Trash can icon to select one and remove it if required

Pattern Overlay

Click the Pattern Overlay tab in the Layer Styles dialog box. Refer to Figure 3-214.

Pattern overlay allows you to add a pattern overtop of the shapes or text. It will cover the currently applied fill pattern, gradient, or solid color with the custom pattern you choose from the list. As with Bevel & Emboss - Texture and Stroke, you can set a Blend Mode, Opacity, Pattern, New Pattern preset, Snap to Origin if you have moved the pattern with your Move tool, Angle (-180, 0, 180), Scale (1-1000%) and Link with Layer to allow the pattern to move with the shape. Refer to Figure 3-215.

Figure 3-215
Layer Style options for Pattern Overlay

I’ll change the pattern to one of my custom patterns. I’ll leave the Blend Mode at Normal, Opacity 50%, Angle 0°, and scale at 129%. Refer to Figure 3-216.

Figure 3-216
Layer Style options for Pattern Overlay , new Pattern and Preview

After adjusting your styles, add some layer styles such as Drop Shadow or Outer Glow to complete your style effect. Refer to Figure 3-217.

Figure 3-217
Layer Style options for Drop Shadow and Preview

You can then click the New Style button, name the style, and just enable the Include Layer Effects. Keep the checkboxes Include Layer Blend Options and Add to my Current Library unchecked. Click OK. Click OK to exit the Layer Styles dialog box. This will store your texture pattern and styles as a new layer style in the Window ➤ Styles panel. Refer to Figure 3-217 and Figure 3-218.

Figure 3-218
Save your new style and store it in the Styles panel in a group folder and then you can export the style later for others to use

Other layers styles with additional patterns can be found here as well, which you can modify for your project. We’ll talk more about layer styles again in Chapter 5. However, as with the Patterns panel , you can create a group folder to store your styles in and later Save (Export Selected Styles) as an .ASL file that others can Load (Import Styles) and reuse.

You can take a look at this shape with the styles applied in my file CH3_PatternFill_Finals.psd as layer Ellipse 1. Refer to Figure 3-219.

Figure 3-219
Layer styles applied to the vector shape layer in the Layers panel

Tools That Use Patterns

In Chapter 2, I mention that there are a few tools in the Tools panel that also use patterns, Let’s look at them here. Create a new layer in your file to test. Refer to Figure 3-220.

Figure 3-220
Create a new layer in the Layers panel for practice and name the layers to keep track of your progress

Pattern Stamp Tool (S)

Under the Clone Stamp tool in the Tools bar is a lesser-known tool called the Pattern Stamp tool (S). It’s main purpose, rather than to heal or clone an area, is to act as a paint brush to stamp a pattern on a layer. Refer to Figure 3-221.

Pattern Stamp Tool Options

Look from left to right in the Options panel . After setting your tool presets, you can set your Brush Preset Picker options and Brush Settings as mentioned in Chapter 2 in the Stamp and Healing Brushes related tools area. Refer to Figure 3-222.

Figure 3-222
Options panel for Pattern Stamp tool

However, after setting your blending mode (refer to Chapter 2), opacity, pressure, flow, enabling airbrush, and brush angle, then you can choose a pattern. Refer to Figure 3-223.

Figure 3-223
Patterns options for Pattern Stamp tool

On a new layer, paint a pattern. Try varying your brush from a default General Brushes of Soft Round to one of your custom brushes you created in Chapter 2. Refer to Figure 3-224.

Figure 3-224
Paint with the Pattern Stamp tool with your custom brushes or the Impressionist option

Aligned, when enabled, uses the same offset for each stroke as you lift your brush; that same pattern still remains, and a new pattern does not start. Impressionist, when enabled, has a soft blurry effect and works best with brushes with a lower hardness. The last button icon in the Options panel, Always use Pressure for Size, is affected by the current brush settings. When off, it is controlled by the brush preset. Refer to Figure 3-223 and Figure 3-224.

Tip

You can also use a Pattern Stamp tool to paint on a layer mask. This can add a mottled appearance, revealing hidden features from the image behind. This works well on a solid color fill adjustment layer. Refer to Figure 3-225.

Figure 3-225
Paint on a Color Fill mask with the Pattern Stamp tool

You can alter the color fill at any time with the mask pattern applied.

Paint Bucket Tool (G)

The Paint Bucket tool found under the Gradient Tool is not just for filling the current foreground color into a selection but also for filling with patterns. To use with a pattern, switch the Source for Fill area to Pattern. Refer to Figure 3-226.

Figure 3-226
Paint Bucket tool and options in the Options panel currently set to Foreground but choosing the Pattern option

Paint Bucket Tool Options

Look from left to right in the Options panel . After the preset Tools area, you can set the source from Foreground to Pattern. Refer to Figures 3-226 and 3-227.

Figure 3-227
Options panel for Paint Bucket tool now set to the Pattern option

Choose a pattern from the Pattern Picker List. This time I’ll just use one of the default patterns from the Water folder like Water-Pool. Refer to Figure 3-228.

Figure 3-228
Pattern options for Paint Bucket tool

You can set the fill blending mode. Refer to the custom brush section in Chapter 2 if you need to review the blending modes. Refer to Figure 3-229.

Figure 3-229
Fill Blend Mode options for Paint Bucket tool

Set your Opacity (1-100%), Tolerance or Range of colors to fill (0-255), enable Anti-alias for a smoother blend and Contiguous for filling touching pixels. All Layers, when enabled, will affect how the paint bucket fills on the current layer; leave this setting unchecked. Refer to Figure 3-229.

Now use your Rectangular Marquee tool or any selection tool (which you can learn more details about in my Photoshop Selection book) and drag out the selection on a new layer. Refer to Figure 3-230.

Figure 3-230
Rectangular Marquee options and selection filled with a pattern from the Paint Bucket tool

Select the Paint Bucket tool and click inside the selection to fill with your chosen pattern. Otherwise, it will fill the whole layer.

Then, from the menu, Select ➤ Deselect to remove the selection. Refer to Figure 3-231.

Figure 3-231
Deselect the selection after you fill it with pattern

Tip

You can also use a paint bucket pattern to paint on a layer mask as well, which can add a mottled appearance, revealing hidden features from the image behind. Refer to Figure 3-232.

Figure 3-232
Use the Paint Bucket tool on a mask on a Color Fill layer

Healing Brush Tool (J)

The Healing Brush tool , which was briefly mentioned in Chapter 2, is more for cosmetic touch-ups on images and models and is often used with the other brushes and tools in the collection, such as the Spot Healing Brush and Patch tool. Its main purpose is to blend the texture, lighting, transparency, and shading of the sampled pixels to the current pixels that you are trying to “heal.” Refer to Figure 3-233.

However, once the Healing Brush tool is selected, you will discover that it also has a pattern option hidden in the source area of the Options panel. Refer to Figure 3-234.

Figure 3-234
Options panel for Healing Brush tool set to Sampled and Pattern

Healing Brush Tool Options

Look at the Options panel from left to right. Like the Brush tool , after the tool preset area, you can set your Brush Preset Picker options of size, hardness, spacing, angle, and roundness. Refer to Figure 3-234.

However, unlike the brush, which contains brush settings, the next icon allows you to access the Clone Source panel when in Sampled mode. See the Clone Stamp tool for more details. Refer to Figure 3-235.

You can set a painting blending mode (Normal is the default, Multiply, Screen, Darken, Lighten, Color, and Luminosity). Refer to the “Brush Options and Blending Modes” section of Chapter 2 if you need to review the blending modes. Refer to Figure 3-236.

Figure 3-236
Options panel for Healing Brush tool’s Painting Blending modes

Note

Unlike the other blending modes, Replace is used to preserve noise, film grain, and texture at the edges of the brush stroke when using a soft-edge brush and you will not have access to the Options panel’s diffusion settings. Refer to Figure 3-236 and Figure 3-237.

Next, switch from the source of Sampled to Pattern and choose a pattern from the pop-up Patterns panel menu. I used one from the Trees folder, Tree Tile 4. Refer to Figure 3-237.

Figure 3-237
Options panel for Healing Brush tool switched from Sampled to Pattern

Aligned, when enabled, allows you to align the same offset for each stroke.

The Use Legacy setting is from an older Photoshop version (CC2014). This option will also disable the Diffusion option.

You can sample image data from the current layer, current and below, or all layers including adjustment layers. Click this button next to this menu to exclude adjustment layers while healing. Refer to Figure 3-238.

Figure 3-238
Options panel for Healing Brush tool Sample options

The next section allows you to set the brush angle, which is the same as what is set in the Brush Preset Picker . The next button is Always use Pressure for Size or let the brush preset control the pressure. And a Diffusion (1-7) slider. This slider and number controls how quickly the pasted region adapts to the surrounding image. Adobe recommends you select a lower value for images with grain or fine details and a higher value for smooth images.

Depending on the choice of brush, blending mode, or pattern, this can create some unusual blur and pattern effects.

I made a copy of my Symmetry Fill layer (drag over the Create new layer icon in the Layers panel) and then tested the tool on it with a pattern.

While in Pattern source, you do not need to Alt/Option+Click to retrieve a sample for the heal; simply paint with your brush and create a pattern covering.

I recommend working on a new layer when using this tool, so that you can later fade the layer’s opacity or alter its blending mode as required.

Everyone’s design will turn out differently. You can review my example in CH3_PatternFill_Finals.psd. I kept the following layers visible to create this effect. Refer to Figure 3-239.

Figure 3-239
Painting with the healing brush on a copy of the symmetry fill layer and a patterned color fill mask behind

For more detail on healing brush topics, you can refer to these links: https://helpx.adobe.com/photoshop/using/retouching-repairing-images.html and https://helpx.adobe.com/photoshop/using/healing-examples.html .

Patch Tool (J)

The other healing tool I will mention is the Patch tool . If you do not use this tool, often you may be unaware that it can use patterns as well for basic cosmetic touch ups and artistic effects. To locate this setting in the Options panel, switch the Patch dropdown menu from Content-Aware to Normal. I created a copy of the layer Symmetry Fill again to work with this tool. Refer to Figure 3-240.

Figure 3-240
Options panel for the Patch tool set from Content-Aware to Normal Patch mode

Patch Tool Options

After the tool presets area, use this tool now to make a new selection with the tool, dragging in a loop shape with the new selection option. Refer to Figure 3-241.

Additional selection options after you have made a new selection are

Add to selection (Shift+Drag)
Subtract from selection (Alt/Option+Drag)
Intersect with selection selections (Alt/Option +Shift+Drag)

I talk about selections in detail in my previously mentioned book. Patch is set to Normal in the drop-down menu. When the Source tab is on, drag the selection to get the selected clone area from the new sample source. This will add or blur that new information into the selection. Refer to Figure 3-240 and Figure 3-242.

Figure 3-242
Move the selection as a source

Or choose the Destination tab and drag to move the selection sample to that area you want to cover. Refer to Figure 3-243.

Figure 3-243
Move the selection as a destination

Enable the Transparency checkbox to use transparency when blending. This is good for extracting texture with a transparent background from sampled areas. Disable it if you want to fully replace the target with sampled image. Refer to Figure 3-244.

Figure 3-244
Transparent option enabled and disabled

In the next section, select a pattern from the Pattern dropdown menu and click the Use Pattern button. This will affect the blur of the blend based on the pattern chosen from the Patterns panel menu. Refer to Figure 3-245.

Figure 3-245
Options panel for the Patch tool . Click the Use Pattern button to add the pattern to the patch

In the last section, as with the Healing Brush tool, you can also set the degree of diffusion from 1-7. See the Healing Brush tool for more details on this option. Refer to Figure 3-245.

Click elsewhere on the canvas to remove the selection, or Select ➤ Deselect, or Ctrl/CMD+D.

Everyone’s design will turn out differently. You can review my example in CH3_PatternFill_Finals.psd. Refer to Figure 3-246.

Figure 3-246
Edited layer using the Patch tool

Note

In Normal mode, I had to work directly on the layer to sample and use the pattern. I could not use the Sample All Layers option that would have been available had the Patch mode been set to Content-Aware. Refer to Figure 3-247.

Figure 3-247
Options panel for the Patch tool in Content-Aware mode

For details on content-aware features, you can check out in this link (it also applies to the spot healing brush and content-aware move tools): https://helpx.adobe.com/photoshop/using/content-aware-patch-move.html .

Make sure to File ➤ Save your document at this point.

Project: Create a Texture for the Filter Gallery

While custom patterns and textures seem interchangeable when it comes to layer styles and some healing tools, this is not the case when it comes to filters, as you will see in Chapter 8 when you work in the filter gallery . In this gallery, you will not have access to the Patterns panel and must instead create a file to load a texture.

We can create that quickly here. File ➤ Open Pattern4.psd found in the Cloth_Patterns folder. Make an Image ➤ Duplicate. Refer to Figure 3-248.

Figure 3-248
Cross-stitch pattern to be used for texture

This file is currently in RGB mode . Convert it to Image ➤ Mode ➤ Grayscale and from the warning message choose Flatten. In the next message, choose Discard. Refer to Figure 3-249.

Figure 3-249
Warning message when changing a file from RGB color mode to grayscale

The reason I made the pattern in grayscale is that I really do not care about the color, only the texture of the threads, so a grayscale image is just what I need. This is best when you want to do certain types of embossing with textures because you need the shadows and highlights. Refer to Figure 3-250.

At this point, to make the pattern seamless, you could use the Offset filter . We will do that in Chapter 8. But instead, I will just use my Crop tool to move the bounding box handles inward and take a bit off the sides and then click the Commit check to commit the crop. Refer to Figure 3-251.

Figure 3-251
Grayscale pattern cropped using the Crop tool and its Options panel

Then with my View ➤ Pattern preview, I’ll check to see how it looks. Click OK to any warning message. Refer to Figure 3-252.

Figure 3-252
Testing the texture pattern in Pattern Preview

The texture now looks good. Click View ➤ Pattern Preview again and click the Move tool to exit the Crop tool.

Make sure to File ➤ Save this as a .psd file such as Pattern4_Texture.psd. You can find my example in the folder Cloth_Patterns. Keep it aside in your project folder for now. In Chapter 8, we’ll look at this custom texture again and how to load it and test whether it is seamless.

Tip

You can also use Patterns found in the Patterns panel and in the Layers, panel rasterize the Pattern Fill adjustment layer when you right-click on it and from the pop-up men choose Rasterize Layer and then repeat this project to re-use those patterns as a texture.

In this current version of Photoshop, you can also create additional patterns using the new Window ➤ Materials panel for Substance Materials which you can learn more about here:

https://helpx.adobe.com/photoshop/using/substance-3d-materials-for-photoshop.html

Folders containing Brushes (.abr), Library files (.cclibs), Patterns (.pat), Shapes (.csh) and Layer Styles (.asl) used in this Chapter can be found in the Chapter’s folder and you can import them using that panels menu.

Summary

In this chapter, you looked at the many ways to create patterns and use them with other tools such as the Pen and Shape tools and then dialog boxes, the Offset filter , and the Layers panel. While working with patterns can involve many tools, in the next chapter you will look at a collection of editing tools that affect the transformation of an object on a layer, either in a destructive or non-destructive way, depending on the type of layer that is used.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for 3. Warping with Patterns

Create new playlist

Sign In

Sign Up

3. Warping with Patterns

Basic Pattern Creation

Project: Create a Custom Symmetry Paint Path

Defining the Custom Pattern

Vector Shape Patterns

Pen and Shape Tools Review

Pen Tools

Pen Tool (P)

Pen Tool Options

Freeform Pen Tool (P)

Freeform Pen Tool Options

Content-Aware Tracing Tool (P)

Content-Aware Tracing Tool Options

Curvature Pen Tool (P)

Curvature Pen Tool Options

Add Anchor, Delete Anchor, and Convert Point Tools

Path Selection Tools

Path Selection Tool Options

Direct Selection Tools Options

Shape Tools

Shape Tool Properties

Rectangle Tool Options and Properties

Additional Properties Panel Options

Ellipse Tool Options and Properties

Triangle Tools Options and Properties

Polygon Tools Options and Properties

Line Tool Options and Properties

Custom Shape Tool Options and Properties

Project: Create a Custom Shape and Then Turn It into a Pattern or Brush

Project: Patterns with the Offset Filter

Offset Filter

Touching Up the Pattern

Pattern Preview

Defining a Pattern

Libraries Panel: Adobe Sensei Capture Extract from an Image to a Pattern

Project: Patterns from Cloth Pattern Part 2

Adding a Library Pattern to the Patterns Panel

Reusing Patterns or Textures

Fill Dialog Box

Fill Pattern Scripts

Adjustment Pattern Fill Layers

Layer Styles with Patterns and Textures

Bevel and Emboss – Texture

Stroke

Pattern Overlay

Tools That Use Patterns

Pattern Stamp Tool (S)

Pattern Stamp Tool Options

Paint Bucket Tool (G)

Paint Bucket Tool Options

Healing Brush Tool (J)

Healing Brush Tool Options

Patch Tool (J)

Patch Tool Options

Project: Create a Texture for the Filter Gallery

Summary

Table of Contents for
3. Warping with Patterns