Explore our comprehensive Photoshop for Web Design tutorial, featuring in-depth exercises on creating, using, and colorizing patterns.
This exercise is excerpted from Noble Desktop’s past web design training materials and is compatible with Photoshop updates through 2020. We now teach Figma as the primary tool for web and UX & UI design. To learn current skills in web design, check out our Figma Bootcamp and graphic design classes in NYC and live online.
Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.
Topics covered in this Photoshop for Web Design tutorial:
Creating & using patterns, Colorizing patterns
Exercise Preview
Exercise Overview
In this exercise, you will learn how to work with patterns. Starting with pre-made patterns you can easily download from the web, you’ll learn how to use and colorize patterns. Then you’ll learn how to make your own custom patterns from scratch.
Creating a Pattern
In Photoshop, close any files you have open.
Hit Cmd–O (Mac) or Ctrl–O (Windows).
Navigate into Desktop > Class Files > yourname-Photoshop for Web Class > iTastify and open iTastify Ready for Patterns.psd.
Notice the 3 testimonials in the middle of the page. We want to spice things up by putting a pattern behind them.
Before applying a pattern, we must define it. Let’s open a pre-made pattern tile. Hit Cmd–O (Mac) or Ctrl–O (Windows).
-
Navigate into Desktop > Class Files > yourname-Photoshop for Web Class > iTastify > patterns and open food.png.
NOTE: The patterns we’ll be using in this exercise were downloaded from toptal.com/designers/subtlepatterns which is a great resource for free patterns. Unlike this one, most of their patterns are subtly colored. Later in this exercise you’ll learn how to colorize them.
-
This is a single, seamless tile, suitable for a repeating pattern. Go to Edit > Define Pattern.
NOTE: We want to use this entire file to define the pattern. If we wanted to use just a portion of the file, we could make a rectangular selection first, then define the pattern.
Leave the name as is and click OK.
Let’s define one more pattern. Hit Cmd–O (Mac) or Ctrl–O (Windows).
If you’re not already in the patterns folder, navigate into Desktop > Class Files > yourname-Photoshop for Web Class > iTastify > patterns.
Open shattered_@2X.png.
Again, go to Edit > Define Pattern.
Leave the name as is and click OK.
Close both of the pattern tile files.
You should now be back in iTastify Ready for Patterns.psd.
Using a Pattern
To use our patterns, we’ll create a shape that we can fill with the pattern.
If the guides are not showing, hit Cmd–; (Mac) or Ctrl–; (Windows) to show them. (If you still don’t see the guides, in the Layers panel select the artboard or any layer.)
In the Layers panel, select the testimonials folder.
Make sure the testimonials folder is expanded, so our new element will be created inside it.
Select the Rectangle tool
.At the top left of the Options bar, set the menu to Shape. (The menu may currently say Path or Pixels.)
We want to create a stripe/band across the middle of the page, behind the testimonial photos. Using the guides above and below the testimonial photos, drag a rectangle over the entire width of the file.
Hit Cmd–; (Mac) or Ctrl–; (Windows) to hide the guides.
In the Options bar, click on the Fill button
.-
At the top of the pop-up panel, click on the Pattern button
.- The patterns you defined are at the bottom of the list.
- Click on the orange food.png pattern to choose it.
Hit Return (Mac) or Enter (Windows) to close the pop-up panel.
The pattern is covering the photos, so let’s move it behind them. Choose Layer > Arrange > Send to Back.
In the Layers panel, notice that the Rectangle 1 layer was sent to the bottom of the current folder.
Double–click the Rectangle 1 layer name and change it to: pattern bg
Now that we see this pattern in our design, we don’t like it. Let’s change it. Double–click the Layer thumbnail of the pattern bg layer.
The Pattern Fill dialog should appear. On the left, click the Pattern thumbnail to open the list of patterns.
Click on the shattered_@2X.png pattern. It should be the last in the list.
-
Click OK.
NOTE: We do not recommend using the Scale feature in the Pattern Fill dialog because it will result in a blurred pattern. If you want to change a pattern’s size, edit the original pattern file using Photoshop’s Image > Image Size, as it will result in a better quality image.
Colorizing a Pattern
Let’s add a bit of color to this pattern. First, make sure you can see the pattern as well as the Download Now button below (we want to sample its color).
In the Layers panel, double–click in the empty space to the right of the pattern bg layer name.
The Layer Style window should open. On the left, check on the words Color Overlay so it’s checked on and selected. Click directly on the words. Do not just check the checkbox, or else you won’t see its options on the right.
To the right of Blend Mode, click on the Color swatch.
Click on the red background of the Download Now button.
Click OK one time, to close the Color Picker.
-
Currently the color is solid and overlaying/obscuring our pattern. We need to blend it with the pattern, not replace it. Photoshop has various blend modes, which are ways to blend elements together.
From the Blend Mode menu, choose Color.
Curious how this works? Color and luminosity are two different visual aspects. Luminosity is how light or dark something is. Blend modes let us separate these aspects and blend only the part we want. The solid red color was a single luminosity, with no lights or darks. We liked the color, but not its luminosity. The Color blend mode says to use the color, but not the luminosity. Instead, it blends the color we want into the luminosity from the underlying pattern.
Let’s try another color. To the right of Blend Mode, click on the Color swatch.
With the Color Picker open, click on Layla’s skin. Click a few times on different parts and see how it picks up different tans, pinks, etc.
If you find a color you like, click OK. If you liked the red better, click Cancel.
Close the Layer Style window by clicking OK.
-
In the Layers panel, and under pattern bg, you should see the Color Overlay effect. Click on the eye
to toggle the effect off and on to see the before and after.You can decide if you like the original gray pattern or the colored version.
Creating Your Own Pattern from Scratch
It’s great to be able to use pre-made patterns, but what if we want to create our own? Let’s create a pattern from scratch.
- Zoom to accurate size:
- Low-Res Screen: Zoom to 50% by hitting Cmd–1 (Mac) or Ctrl–1 (Windows), then hitting Cmd–Minus(-) (Mac) or Ctrl–Minus(-) (Windows) two times.
- Hi-Res Screen: Go to View > 100% or hit Cmd–1 (Mac) or Ctrl–1 (Windows).
-
We want to create a grid pattern. It will be easier to create it in a separate file, but first we need to figure out what size to make the pattern.
Select the Rectangular Marquee tool
. We’re going to create a selection to figure out the size. Hold Shift and start dragging anywhere in the file.
Watch the tooltip containing dimensions to see how large the square is. We want a small grid, so when you are roughly around 50px, release the mouse. Don’t worry about making it exactly 50px, we’re just getting a rough idea of the size.
This should be a good size. We only made this selection to get a sense of the size, so get rid of the selection by hitting Cmd–D (Mac) or Ctrl–D (Windows), or choosing Select > Deselect.
Choose File > New.
-
On the right of the dialog that opens, set the following:
- Width: 50 Pixels
- Height: 50 Pixels
- Resolution: 72 Pixels/Inch
- Color Mode: RGB Color 8 bit
- Background Contents: Transparent
- Uncheck Artboards
Click Create.
Hit Cmd–0 (Mac) or Ctrl–0 (Windows) to make the image fill the screen.
To create a grid, we need a horizontal line and a vertical line. Go to Select > All.
Select the Rectangular Marquee tool
.-
Move the selection as follows:
- Press the Down Arrow key two times.
- Press the Right Arrow key two times.
NOTE: Hitting the Arrow key moves 1 pixel at a time. We’re in a 2x file so we have to keep lines at least 2px thick. When they get reduced to 1x they’ll become 1px thick.
Go to Select > Inverse.
At the bottom of the Layers panel, click the Create new fill or adjustment layer button
and from the menu, choose Solid Color.In the Color Picker, set the color to black, #000
Click OK.
Now we can define this as a pattern. Go to Edit > Define Pattern.
Name it 50px grid
Click OK.
Leave the pattern file open, and switch back to iTastify Ready for Patterns.psd.
In the Layers panel, double–click the Layer thumbnail of the pattern bg layer.
In the Pattern Fill dialog, click the Pattern thumbnail to open the list of patterns.
Click the 50px grid pattern, which should be the last in the list.
Click OK.
Wow, the grid is harsh! Let’s tone it down. In the Layers panel, change the Opacity to 8%.
Notice that at the top of the rectangle, the grid lines get abruptly cut off. It would look better if we moved it so that the top edge starts with a horizontal line.
In the Layers panel, double–click the Layer thumbnail of the pattern bg layer.
With the Pattern Fill dialog open, drag the pattern in the file so that the top edge starts with a horizontal line.
When done, click OK to close the Pattern Fill dialog.
Adjusting the Brightness & Contrast of a Pattern
It was nice seeing how to make custom patterns, but we liked the previous pattern better. In the Layers panel, double–click the Layer thumbnail of the pattern bg layer.
In the Pattern Fill dialog, click the Pattern thumbnail to open the list of patterns.
Click the shattered_@2X.png pattern (should be the second to last).
Click OK.
In the Layers panel, change the Opacity back to 100%.
Let’s make the pattern more dramatic by increasing its contrast or darkening it. Make sure the pattern bg layer is still selected.
-
Go to Layer > New Adjustment Layer > Curves.
NOTE: Photoshop has numerous ways to adjust contrast and brightness, but Curves is the most powerful.
-
In the dialog that appears:
Name it contrast & brightness
Check on Use Previous Layer to Create Clipping Mask. This option ensures this adjustment will only affect the currently selected layer (the pattern layer).
Click OK.
-
In the Properties panel, at the bottom of the graph notice the following:
On the bottom left there is a black triangle (or dark gray). This is for adjusting the black point which affects the shadows and darkest parts of the image.
On the bottom right there is a white triangle (or light gray). This is for adjusting the white point which affects the highlights and lightest parts of the image.
Drag the black point triangle slightly to the right and notice the dark areas in the pattern get darker.
-
Drag the white point triangle slightly to the left and notice the light areas in the pattern get lighter.
You can’t go very far with the white point before losing details in the pattern, so only move it a very small amount!
If you wanted to adjust the midtones (in-between shadow and highlights), you can click and drag up/down on the diagonal line on the graph.
-
To see the before and after, hide and show the contrast & brightness layer by clicking its eye
.That’s it for now. Enjoy your new pattern-making skills!
Saving a Pattern for Web Use & Editing Patterns
If you create a pattern you like, you should save the original pattern file (as a Photoshop document) for two reasons:
You need the pattern file to create the web optimized version. When coding a website, CSS will tile a background image just like Photoshop tiled a pattern. To create the web optimized version you’ll want to open the pattern file (the single tile) and do a File > Export > Save for Web (Legacy).
- You need the editable pattern file later if you want to edit the pattern. Photoshop does not have a way to edit existing patterns! You just define a new one. So if you want to make a change later, you’ll want the original Photoshop file in which you created the pattern.