Diagonal Stripes
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 demonstrate the creation of diagonal
repeating stripe patterns. The tutorial assumes you have the knowledge presented
in the Basic Stripes tutorial.
Step 1
The first step is to create a small file that will be the repeating pattern.
In this case we created a 50x50 pixel image. You could make the image wider
or taller to allow for non 45 degree angled stripes.
Step 2
Fill the default layer with a color of your choice.
Step 3
We need to make sure our grid settings will be suitable for the size file
we are working with. Go to the EDIT menu and then the PREFERENCES sub menu
and select the GUIDES, GRIDS & SLICES option
EDIT > PREFERENCES > GUIDES, GRIDS & SLICES
In the following dialog window set the grid line options to 10 pixels and
the subdivisions to 2.
Step 4
If you don't have grid lines turned on do so by going to the VIEW menu and
then the SHOW sub menu and select GRID.
VIEW > SHOW > GRID
Next be sure to turn the snap to grid on by going to the VIEW menu and then
to the SNAP TO sub menu and select GRID
VIEW > SNAP TO > GRID
Your window should now look something like this.
Step 5
Activate the Polygonal Lasso Tool and make a selection similar to the one
below. By having snap to grid on we can be sure our selections are precisely
made according to the grid. This will guarantee that the pattern will repeat
with out any problems.
Step 6
Fill the selected area with a new color using the paint bucket.
Step 7
Now, make a similar selection in the lower right making sure that the horizontal
and vertical points line up with the fill area created in step 6. The yellow
guidelines in the image below should show you what needs to line up. This
will ensure that when the pattern repeats the bottom part of the image will
match up with itself on the top part.
Step 8
Fill the new selection with the same color as the previous one.
Step 9
If you have created any of the colors on separate layers you will need to
flatten the image to preview it using the create pattern option described
in detail in the Basic Stripes tutorial.
Select the whole image and then go to:
LAYER > NEW FILL LAYER > PATTERN
Step 10
Name the pattern.
Step 11
Create a new file and fill it with the pattern to see what it will look
like.
Summary
Creating diagonal stripes is of course a bit more complex, but it really
isn't that hard once you see how it is done.
