Basic Stipes - Vertical & Horizontal
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 a small sized pattern
that will repeat and form a nice looking set of stripes. Nothing to extraordinary
but this will serve as the basis for more complicated tutorials.
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. This could easily be altered
to allow for more complex patterns. In this case it could also be a 50x1
pattern to further reduce the file size, but for the sake of being able to
get a feel for how it will look we have settled on a larger format.
Step 2
Since we are starting with a vertical set of stripes we start by making
a selection of a portion of the image.
Step 3
We then fill the area with a color using the paint bucket.
Step 4
Repeat this process on a slender area next to the previous one.
Step 5
Finally select the remaining area and fill it with your final color.
Step 6
Next we will create a pattern based on our new image inside of photoshop
so we can get a preview of what it will look like repeated. Select the entire
viewing area.
Step 7
Click the EDIT menu and select DEFINE PATTERN. The following window will
pop up. Name the pattern appropriately.
EDIT > DEFINE PATTERN
Step 8
Now lets create a new much larger file to fill with the pattern.
Step 9
Go to the LAYER menu, then to the NEW FILL LAYER sub menu and select PATTERN.
The following window will show up. Accept the default settings and hit ok.
LAYER > NEW FILL LAYER > PATTERN
Step 10
This is what your window should look like depending on your color selections
and what not. This just gives you a better idea of how it will feel in your
overall design and verifies that it repeats with out any problems.
Step 11
The final step to put this file to use is of course to save the original
pattern as a gif or jpg. You can then set this as a background in your css
files as necessary.
Summary
Hopefully this tutorial will serve to give you the basic idea of how to
create a simple repeating stripe pattern. You could obviously use this same
method to create a horizontal pattern.
Links
Genopal (Color pallet creation software)
COLOURlovers (Excellent color pallet collections)
Kuler - pallet builder from Adobe /
ColorBlender.com (The
best tool I have found for easily creating beautiful color pallets)
Great color browsing resource (Named colors, by hue, etc)
Color
Scheme Generator
Color
Blender (On MeyerWeb)
Color In Motion
Color Schemer Online v2
Color Schemer Gallery
Color Symbolism
