 |
|
| |
|
| |
|
| |
|
| |
|
| |
| Every
now and then, we as designers, use some sort of background
image to compensate for negative space
that might look strange in own website designs. If
executed correctly, backgrounds can looked fantastic,
yet others can look horrible! I've found that the
key to using a good background is having one that
can have a 'seamless' repetition, as well as not
being too large-so that it loads quickly. Noted below
are the steps that I took in setting up the example
on the right. CLICK
TO ENLARGE. |
|
 |
|
| |
|
| |
 |
|
For the example, I selected a background.
In this case, I chose Psychedelic.jpg, and opened the file in Photoshop.
Once in Photoshop, I selected:
Edit > Define Pattern > (Give your pattern
a name)
Once the pattern is in your library, you are now able to paint with
it using the Pattern Stamp Tool. This tool is anchored to the Clone
Tool. |
|
| |
|
| |
| I then opened a blank canvas, 800x600, and began creating all sorts
of miscellaneous shapes using the Rounded Rectangle Tool or U on the
keyboard.
Once I had the look I wanted, I selected 2 shapes, in this case, the
ones with the pattern, and Rasterized the those Shapes:
Layer>Rasterize>Shape
I then locked those shapes in the locked
transparent pixels on the
Layers Pallette, and began painting them with the Pattern Stamp Tool |
|
 |
|
| |
|
| |
 |
|
I then completed my design by adding an image and some text to the
design.
The next step was importing the design into ImageReady,
and slicing the image with the Slice Tool. You can
see that I sliced all of the buttons, and a small square (6), for adding
some HTML text.
Save as Optimized, in ImageReady, and be sure to select HTML
and Images in the drop down box. |
|
| |
|
| |
| Now that the images had been created, and an HTML file has been generated,
the next step was to open the file in Dreamweaver, and add the same pattern
background to the web page.
But before that can be done, place Psychedelic.jpg in the same folder
as all of the other images. You are now ready to add the background. |
|
 |
|
| |
|
| |
Now, input the following code that is red into
your HTML:
<BODY BGCOLOR=#FFFFFF background="images/psychedelic.jpg"> |
| |
|
|
|
© 2003 Andre Bergeron. All Rights Reserved |
|
