In HTML you can use a pattern for
a background instead of just a flat color. This is done with
the BACKGROUND attribute of
the BODY tag. When you use
a background image, it is displayed repeatedly as tiles until
the display area is filled. This can be a great opportunity
and challenge to you because as we will see in some web site
examples further on, if used wrong, it can make your web site
look terrible. On the other hand it, if you keep it simple,
it can improve and add a special visual effect to your page.
|
In Photoshop
1. Create a New transparent Document of 2 x 2 pixels.
Name it and save it as "tile_bg.psd" (photoshop
format)
2. Select the Zoom-in tool from the toolbox, and zoom-in to
the maximum percentage. (See sample on the right)
3. Select the first color, for example #003366
from the Color Picker
5. Select the second color, for this example, choose #336699,
and with the pencil or paint bucket fill the bottom
two pixels with that new color.
6. Save your image as GIF: Go to File > Save for
Web...
7. For your optimizing settings, choose: GIF, Adaptive
and choose 2 colors. Save your image in the appropriate
image folder, next to your HTML files.
|
4. Select the pencil tool (make sure that the size of the brush
size is set to 1x1 pixels)
Fill the upper two pixels with the first color:
Final graphic:
(Viewed at 1600% of real size) |
Making Buttons and Graphics for Mission Pages