Web Page Background tips

Background images in web pages can be done really well, or they can be really annoying. Below are some tips on how to make better web page backgrounds.

When you put an image as a background for a web page, the background image will get tiled or repeated when it is actually shown. The best web page backgrounds are what are called seamless tiles. These images are designed so that when they are tiled, the edges of the image blend together so that you cannot see the edges. To make one of these images, you need to create an image that is symmetric horizontally as well as symmetric vertically. Easier said than done. Let's go into more detail on how to make seamless tiles and other web page image tips.

General background image tips:

  1. Always make sure that you can read the text over the background image. Your text is normally the most important thing on the web page. If you cannot read the text and read it easily, your web page is pretty worthless. In order to lighten or white-out an image in Adobe Photoshop, just create a white layer on top of your image and turn the opacity of the white layer down until the desired lightness is attained.
  2. Make sure your background images are small in computer size (bytes). If possible, keep the background images to under 15 kilobytes (KB).
  3. How to use Adobe Photoshop to create seamless tiles.

Types of seamless tiles:

  1. Gradient backgrounds
  2. Simple pattern backgrounds
  3. Simple image backgrounds
  4. Complex image backgrounds

 

Background Tips/Gradients/Simple Patterns/Simple Images/Complex Images/Photoshop Techniques


Didier Home / Current Classes / Previous Classes / Lessons / JVHS Pages