Home > Tutorials > Photoshop > Intermediate

Photoshop Tutorial 0007 - Creating the 3 B's (Background Banners and Buttons)

One of the difficult parts of creating any web site is getting elements to work together seamlessly, without being locked into that rigid HTML-look. There are tricks to get around this, most notable being the use of transparent GIFs and an intergrated background image. This tutorial will take you through the steps of creating a layered page effect, without using layers in HTML.

First, you will need to download this archive:

ps007-archive.sit - 86K for two items.

1. Create a new document. Set the dimensions to 800 x 800 pixels, the resolution to 72 and the color mode to RGB.

2. Set the Foreground color to 3333CC using the HTML picker in Photoshop (If you don't have access to this, go to the Preferences. Set the color picker to Apple). Fill the background (Option-Delete).

3. Change the Foreground and Background colors by clicking the swap arrow on the toolbar or using the keyboard shortcut - X. Set the new foreground color to 6666FF.

4. Go to the FILE menu and choose Place. Locate the ps0007-archive folder and select dottedline.eps. Click the OK button. The placed file will appear on its own layer. Hit the Return key to place it.

5. Select the dottedline.eps layer and check the "Preserve Transparency" option on the Layers Palette. Fill the dotted line item with the foreground color by using the Option-Delete keyboard shortcut. Move the line to the left edge of the document.

6. The line is not long enough to extend across the full width of the document. Select the layer and duplicate it by dragging it to the "New" icon at the bottom of the Layers palette.

7. Select the Move tool, and using the SHIFT key to constrain the movement, drag the copy to the right edge of the original line. You will need to have a slight overlap, so that the line will appear seamless. Move the line until the first dash of the copy overlaps the last dash of the original line.

8. Select the dottedline.eps layer and link to the layer copy. From the layer option menu, choose Merge Linked. Double-click the merged layer and rename it "line".

9. Hold down the shift key and use the move tool to move the line to the 3/4-inch mark on the vertical axis. Save the file as background.psd.

10. Duplicate the layer. Move the new line to the 6-inch mark on the vertical (Y) axis.

11. Duplicate the layer again. We are going to rotate this layer to create a vertical line. Go to the EDIT menu and choose TRANSFORM > Rotate 90 CW. Move the vertical line to the 2-inch mark on the horizontal axis.

12. Duplicate the vertical layer. Move the line to the 8-inch mark on the horizontal axis.

13. Duplicate this layer and move it to the 8 & 3/8-inch mark on the horizontal axis.

14. Save your file again.

15. Now we need to prepare this file for use on the web. Flatten the Image (LAYER > Flatten Layers). Go to the IMAGE menu and change the mode to Indexed Color. A dialog box will appear. The settings should automatically default to the Exact palette with the number of colors set to 8. Click the OK button.

16. We are ready to export our background. Go to the FILE menu and choose EXPORT > GIF89z Export. A new dialog will appear. Uncheck the Interlace option and click the OK button. Set the filename to background.gif.

17. Back in the background.psd file, go to the History palette and choose the last item before the Flatten Image item. Your file should now be back to its state before flattening.

18. So, we've got a background image. Now we need a banner and some buttons. Create a new document. Set the dimensions to 400 x 56 pixels, and set the contents to Background Color.

19. Change the Foreground color to CCCCFF.

20. Select the TYPE tool and click inside the document area. In the Type dialog, select a font with good descenders. I used a font called Junior & Stinky, by Robotic Attack Fonts, which is available for download through The Font Pool. Change the size to something between 40 and 50 pixels (even numbers work best). Type your banner text or just "banner text". Click the OK button (or hit the Enter key) to accept the settings. Use the Move tool to move the text so that it fits in the document area.

21. Save this item as "bannertemp.psd". You can simply duplicate this file whenever you need a new banner.

22. Flatten and Index this image. Again, the number of colors is below 256, so the palette will be set to Exact with the number of colors this time set to 18.

23. Export this file using the GIF89a Export. Uncheck the Interlace option. Now, we want to make the background transparent. Select the eyedropper tool and click the blue background in the preview area. This will define that color as transparent. Click the OK button and name the file "banner.gif".

24. Next, we need buttons. Create a new document. Set the dimensions to 142 x 30 pixels and the contents to Background color.

25. We need to place another file. Go to the FILE menu and choose PLACE. Select the file named oval.eps in the ps0007-archive folder. Click the OK button to place the file on a new layer. Hit the Return key to actually place the file.

26. Check the Preserve Transparency option in the Layers palette. Set the Foreground to 6666FF (the same as used for the line elements). Fill the element by using the Option-Delete keyboard shortcut.

27. Select the Type tool again, and, using the same font and font color (CCCCFF), click in the oval area. Set the size to 20 pts (or less) and type "button text". Click the OK button when done.

28. Move the text element until is fairly centered in the oval area (you can have some overlap).

29. Once again, Flatten, Index, and Export the file, setting the background to transparent and the filename to button.gif.

Put these together in your favorite HTML editor to see the final effect.

So, that's how you create transparency and a layered effect in a web page. Keep these files handy for later tutorials!