Basic Stipes - Vertical & Horizontal
1st edition — by Patrick McNeil — Mar. 14, 2006
This tutorial is meant to accompany the Striped Backgrounds design
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.
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.
Since we are starting with a vertical set of stripes we start by making
a selection of a portion of the image.
We then fill the area with a color using the paint bucket.
Repeat this process on a slender area next to the previous one.
Finally select the remaining area and fill it with your final color.
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
Click the EDIT menu and select DEFINE PATTERN. The following window will
pop up. Name the pattern appropriately.
EDIT > DEFINE PATTERN
Now lets create a new much larger file to fill with the pattern.
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
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.
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.
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.
Genopal (Color pallet creation software)
COLOURlovers (Excellent color pallet collections)
Kuler - pallet builder from Adobe /
best tool I have found for easily creating beautiful color pallets)
Great color browsing resource (Named colors, by hue, etc)
Blender (On MeyerWeb)
Color In Motion
Color Schemer Online v2
Color Schemer Gallery