Creating Random Stripe Patterns
1st edition — by Patrick McNeil — Mar. 14, 2006
Difficulty: Beginner
Application: Photoshop
This tutorial is meant to accompany the Striped Backgrounds design
element chapter.
The purpose of this tutorial is to show how to create repeating stripe patterns
using randomly generated stripes. We will also colorize these in various
ways to regain some control over the colors. This tutorial assumes you
have the knowledge presented in the previous stripes tutorial Basic
Stripes - Vertical & Horizontal.
Step 1
The first step is to create a small file that will be the repeating pattern.
In this case we created a 200x50 pixel image.
Step 2
We begin by adding a gradient fill adjustment layer. Do this one of two
ways. Click on the add adjustment layer icon in the layers pallet and select
Gradient. Or go to the LAYER menu and then to the NEW FILL LAYER sub menu
and select GRADIENT. The following window will come up.
LAYER > NEW FILL LAYER > GRADIENT
Click on the gradient image where the orange arrow is pointing.
Step 3
This will present you with the Gradient Editor window. In the Gradient Type
drop down menu select NOISE. This will generate a random gradient noise pattern.
Step 4
You can click randomize to get a new random pattern. You can also adjust
the roughness and RGB settings to alter the output. We will be adjusting
the color after this step because it is most unlikely that the random generator
will produce a color pattern that fits our design.
Step 5
Clicking OK in the previous menu will get us back to the Gradient Fill window.
enter 0 in the Angle option to make the pattern a vertical one.
Step 6
Your image should now look something like this with some other colors of
course.
Step 7
We will present two options for regaining control of the colors
used in the gradient but still make use of the overall pattern. The first
is with the Hue/Saturation tool.
Instead of using the regular Hue/Saturation adjustment tool I much prefer
to add adjustment layers. This allows you to return to the adjustments settings
and refine it later on.
Go to the LAYER menu and then to the NEW ADJUSTMENT LAYER sub menu and select
HUE/SATURATION.
LAYER>NEW ADJUSTMENT LAYER > HUE/SATURATION
In the dialog box that comes up check the COLORIZE option. You can then
adjust the settings to get a variety of results all of which will be based
on a single color. When you find a color that you are happy with click OK.
Step 8
This is what we got when we used the HUE/SATURATION settings shown above.
Step 9
We will now colorize the gradient using a second option. This should be
done in place of steps 7 & 8. You will need to hide or delete the Hue/Saturation
layer previously created to properly see the results of this step.
Begin by adding a new solid color fill layer. Go to the LAYER MENU and then
to the NEW FILL LAYER sub menu and select SOLID COLOR.
LAYER > NEW FILL LAYER >SOLID COLOR
This window should be failure. Select the color you would like to base the
gradient on and hit OK.
Set the layer BLENDING MODE to COLOR. Below is the results we got from selecting
a purplish color.
Step 10
If you would like a random gradient but don't want it to be so fuzzy continue
on and see how to sharpen it up.
Begin by rasterizing your gradient fill adjustment layer. Do this by going
to the LAYER menu and then to the RASTERIZE sub menu and select FILL CONTENT
LAYER > RASTERIZE > FILL CONTENT
This will allow you to run filters on the layer as you normally would. Next
go to the FILTER menu and then to the SHARPEN sub menu and select UNSHARP
MASK
FILTER > SHARPEN > UNSHARP MASK
You will get the following dialog box. I cranked up the amount and the radius
a bit to get more drastic results. This wouldn't produce desirable results
on a photo but it serves to really tighten up our stripes. They become much
less fuzzy and instead have sharper edges. Ironically in the preview window
you can see the original gradient colors unaffected by the adjustment layers
that have been placed over it. Click OK when you are satisfied with the results.
Step 11
This is what our settings produced. A much crisper striped pattern.
Step 12
Here is the pattern repeated in a larger file to get an idea of how it will
look. For detailed instructions on how to do this see the basic
stripes tutorial.
Summary
Hopefully this tutorial will give you some new tools to create more interesting
stripes. Basic two tone stripes can of course be nice. But I believe it is
helpful to have tools to go beyond that to allow you to fit the style into
your overall design.
