Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Grunge Backgrounds

"Grunge" images are popular with rock bands and artsy designers. If you'd like to follow along, click on the ZIP icon to download the supporting file, and then create a new folder on your hard drive. Label the folder My Grunge. Unzip the supporting file into your new folder.

Download the supporting files

This is an easy, fun to do exercise. You'll begin creating your masterpiece by cropping out a section from a large photo. Here's a screen shot of the image, reduced to 25% of its actual size.

The photo is courtesy of http://www.imageafter.com/, where you'll find many wonderful, royalty and copyright free texture photos.

figure18
Figure 19: Joe Bob's Auto Shop

Let's get started!

  • Choose File > Open.
  • Browse to the My Grunge folder and locate the shop.jpg.
  • Click on the shop.jpg file to select it, and then click on Open.
  • Reduce the magnification to 50% (View > Magnification > 50%).
  • Click on the vertical ruler at the left side of the document window and drag toward the right pull a guideline over the image.
  • Double click on the guideline and enter the value 760 in the Position box.
  • Click OK to accept the changes and close the dialog box.

Next, you'll crop the image.

  • Click on the Crop tool to select it.
  • Click in the document window just outside the canvas.
  • Drag to the right, until you reach the guideline.
  • Drag downward, along the guideline until you reach the bottom of the image.
  • With the crop marks set, double click in the middle of the marked off area.

figure19
Figure 20: Preparing to crop the photo

The more interesting part of the cropped section of photo is at the bottom right. To reposition it to the top left, with the photo selected, choose Modify > Flip Vertical, and then Modify > Flip horizontal.

As it is, the pattern in the image is too strong to use text on. It will work best if we convert the color to monotone and soften some of the detail in the image.

Adjusting color

  • With the image still selected, choose Filters > Adjust Color > Hue/Saturation.
  • Move the saturation slider all the way to the left.
  • Click OK to accept the changes and close the Hue/Saturation dialog box.
  • Choose Edit > Clone.
  • With the clone selected, choose Filters > Adjust Color > Hue Saturation.
  • Click in the Colorize box to check it.
  • Set the Hue to 222, the Saturation to 18, and the Lightness to 40.
  • Click on OK to accept the changes and close the Hue/Saturation dialog box.

figure20
Figure 21: The Hue/Saturation settings

Softening the image

To soften the image, you'll blur the clone and add a Blend mode

  • With the Clone selected, choose Filters > Blur > Gaussian Blur.
  • Set the blur amount to 16.
  • Add the Screen Blend mode.

Adding some details

For the fun of it, let's add some details of our own.

  • Click on the Text tool and click on the upper left area of the image
  • Choose a Sans Serif font like Garamond Bold and type the number 42.
  • Scale it to 140 pixels by entering 140 in the text size box in the PI.
  • Use a white fill, and reduce the opacity to 58.
  • Add a couple paragraphs of Lorem Ipsum text, in white, to the center of the image.

Reducing and blending

The image is far too large to use for a background image, so we'll use just the top, left quarter. To reduce its size and blend it into the background of our HTML page,

  • Drag out a rectangle the covers the bottom half of the image.
  • Fill the rectangle with white or light blue (pick a color from the image) and set the edge property to Feather.
  • Set the feather amount to 60.
  • Repeat with the top right quarter of the image.
  • Crop to where the image blends into the white rectangles.
  • Export in JPEG format.

Using your Grunge image on a web page

To use the tile on your page, set the margins to zero, and no-repeat Your style should look like this:

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(grunge1.jpg);
background-repeat: no-repeat;
background-color: #??????;
}
-->
</style>

Here's what the tile looks like on the page.

Note for fontaholics. The header font on the Grunge page is Eduardo Recife's Mosh 1. You can purchase Mosh 1, and other Eduardo Recif fonts at www.myfonts.com.