A Tartan Bordered Background
I've gotten some requests for a tutorial on making bordered backgrounds, so I decided to do one based on a scanned tartan that was sent to me. You can use the general method to make your own bordered backgrounds.
- The original image was 307x286 pixels and 38K in size -- too big for
a background image. So I resized it down to 100x93 pixels (which maintained
the aspect ratio of the original). The resulting block will form the lefthand border
of the background.
- I next used the Eye Dropper tool to pick up a cream color in the tartan, and I
adjusted that color just a bit to make it slightly lighter. Then I
enlarged the canvas using Image | Enlarge Canvas. For your border, set the height
to the height of the image and the width to 1024 or more (you want to make the image
as wide as the maximum width of the browser window most people visiting your site
are likely to use).
- Next I zoomed in a couple times to give myself some room to work, and made a selection
beginning at the upper edge of the image along the rightmost edge of the tartan and
extending to the bottom edge of the image and about 7 or 8 pixels to the right.
With this area selected, I used the Eye Dropper to pick up a dark color in the tartan for the foreground color and kept the background color set to the cream color used earlier. Then I chose the Fill tool and in the Control palette set Fill Style to Linear Gradient and clicked the Options button, then set the gradient angle to 90 degrees. I then clicked within the selected area to fill it with the gradient. This gives a nice, shadowy transition from the border to the solid area.
- To retain the subtle color gradations in the tartan, I saved the background as a JPEG.
Click here to see how this background looks on a page.
Thanks to Tony from AOL for sending the original tartan image!
Back