are so many different features in Photoshop, most web designers never get to
use half of them. I wanted to learn some fun Photoshop tips to spruce up my
website and impress my friends. I thought it would look cool if my website had
a pattern background instead of just a flat color background. Do you know what
I discovered...YOU DON'T HAVE TO BE A COMPUTER GENIUS TO...Create a Patterned
Background in Photoshop!!!
a sstep-by-step guide. ONE DISCLAIMER, I WILL BE DESCRIBING THE STEPS I TOOK
USING THE WEBHOSTING AND SOFTWARE SERVICES I HAVE CHOSEN. IF YOU HAVE DIFFERENT
BACK-END SUPPORT, YOU WILL HAVE TO ADJUST ACCORDINGLY.
- Windows 98
as my hosting company, using UNIX
(32-bit) for my file transfer protocol
as my web page designing software
(or Files) should always be named in small letters not CAPS!
You can create a background for your website that uses images such as an image
of a computer or the image can be a simple pattern. This article specifically
addresses "tiled" patterns such as checkerboard or diagonal lines
etc. Note, in Dreamweaver, a pattern will be "tiled" (or repeated)
automatically by clicking "Modify" then "Page Properties"
and inserting the background image where indicated.
- Open Photoshop
5.5. Once you launch Photoshop 5.5., go to the menu option "File"
and click "New." A new image canvas will appear called "untitled."
You'll have to designate a size in pixels or inches for your image and select
RGB if you want the pattern image to be in color (not black and white). I
just want to create a striped pattern so I opened an image 3 pixels by 6 pixels.
Because it's so hard to work with such a small image, I hit "ctrl +"
to enlarge it.
- Open Swatches.
Open the "color swatches" window and click on the color you want
the pattern image to be. The color you choose will appear in the "tools"
window in the foreground box. The other box is the background color.
- Open The
Pencil (Paintbrush) Tool. Click the "pencil" or "diagonal
line" on the tool box. Make sure the size of the pencil point is just
one pixel by going to the brush panel and picking the size.
- Pencil in
the image. Pencil in the image with the different colors you want. If
you are trying to create a checkerboard look, then you will probably have
to color 2 pixels with one color and 1 pixel with the other. When the 2 x1
image is "tiled" in Dreamweaver then you'll have your checkerboard
- Test Pattern
Image. To see how your pattern image will look "tiled" as a
full background image, you must "define the pattern" as described
in the next step.
- Define The
Pattern. First go to "Select" and click "all" or you
can use the marquee tool to "select all". Then go to "Edit"
and click "Define Pattern." The image you want as your background
should be highlighted. Then open a "New" canvas under "File."
The size of the new image is not important...I picked 5 inches by 5 inches.
Next, go to "Edit" and click "Fill." A window will pop
up and prompt a drop down, click "use pattern." You should now see
how your pattern image will look as a background on your website.
- Export as
a GIF. Once your happy with how your pattern image looks, save the smaller
image as a GIF by going to "Save for Web" and naming your image.
- Insert Pattern
Image. When in Dreamweaver, you can insert your new "pattern image"
just as you would any image. NOTE: If this is a background image, then go
to "Modify" and then click "Page Properties" and insert
the image under "background image."
© 2000-2001 Marlene Hollander. All rights reserved.