Creating Sidebar Backgrounds

click on each graphic desplayed below to view a webpage which uses the image as a background

  1. create a new file at least 1000 pixels wide (minimum screen size)
  2. create a new layer, select an area on the left and fill it with a web color safe color.
  3. While color is still selected create a drop shadow using alien skin
    OR: use a manual technique
    • duplicate the layer & fill with black
    • Blur the black (Gaussian blur)
    • knock back opacity if needed.
    • nudge it to the right
  4. OR: make a drop shadow quickly with the airbrush
  5. select a rectangular area and this time place the color in the foreground, white in the background and use the gradient tool to create a blended fill.
  6. Add a stripe to the solid color for contrast and interest
  7. Fill with a solid color and add noise
  8. Gaussian Blur the noise
  9. Motion Blur the noise
  10. using the marquee feathered at 2 select a slim strip near the end of the colored area
  11. Use Image > Adjust > Brightness and Contrast to lighten the area
  12. select 2 slim areas to the left and right of the light area
  13. Use Image > Adjust > Brightness and Contrast to darken the area
  14. A bump is born

To get really wild and crazy try the sidebar color set 1/2" away from the left hand edge or use a stripe instead of a solid. Examples about at the Web Development Training Program website