• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Web Design Techniques > Transparency


To create lines and edges that are not perfectly vertical or horizontal, Photoshop employs an approximation based on the available resolution. To get the best result, Photoshop uses a technique called anti-aliasing, in which pixels at the edges of an object are smoothed to blend with the background.

The intermediate colors that anti-aliasing creates are a problem only if you are planning to use transparency with a GIF. If the image is viewed on a browser in front of the same color as the transparency color, you won’t have a problem because the edges are already anti-aliased to the right color. But if you change the background in the browser at some point, your image may show a halo at the edges. Fortunately, Photoshop offers you a great way of dealing with this problem.

Using Transparency With Solid-Colored Backgrounds

The best way to demonstrate transparency is with an example that you are very likely to run into: rendering a headline as an image. To make sure the text image displays correctly in the browser and blends perfectly into the background, it is important that before you render the text, you use a background color that’s as close as possible to the one on your Web page. To accomplish this, follow this procedure:

Create a new document, select a foreground color (which will be the font color), and click on the working area with the Type tool. Photoshop will automatically create a new layer. Choose a typeface and point size in the options bar and select the Anti-Alias option.

Since you want the background to be transparent, hide the background layer by toggling off its visibility in the Layers palette. A checkerboard pattern signals that the background is now transparent. Choose File > Save For Web and click on the Optimized tab in the Save For Web dialog box. Set the format to GIF, and make sure that the Transparency option is selected (it is selected by default). Select a color in the Matte popup menu: Choose between Eyedropper Color (the color in the upper-left corner of the dialog box), Black, White, and Other. If you select Other, the Photoshop Color Picker will appear. You can select your color, and Photoshop will anti-alias the edges with this color.

When using a single-color background, hide the layer before using the Save for Web command.

Click OK. The File Selector dialog box appears, giving you the option of saving your image along with an HTML file (click on Options and choose the appropriate settings).You can use this file to check the result in a browser. Save in HTML, then open the file in Netscape Navigator or Microsoft Internet Explorer to see how your text looks in front of the background color you selected.

Using Transparency With Multicolored Backgrounds

Creating transparency for a solid-colored background is easy, but this technique won’t work if your element is later placed in front of a textured or multicolored background. In previous Photoshop versions this was a more complicated process, but Adobe has improved this greatly. The only limitation is that it only works if the color isn’t also used in the element itself. Also important: If you want to export an element from your design, you might have to use the Slicing tool first to isolate the element.

When using a multicolored background just open the Save for Web command, then select the colors you want to be transparent and click on the Transparency button at the bottom of the Color Table.

Use the Save For Web command from the File menu. In this technique you don’t have to make the background layer transparent; the transparency is assigned directly in the Save For Web dialog box.

Choose the Eyedropper tool and hold the Shift key while selecting all the colors in the background that you want to be transparent. In the Color Table, all the selected colors will have an outline, and when you click the Transparency button (it maps selected colors to transparent), the colors will become transparent.

Tutorial: Developing A Web Site In Photoshop

I created this simple mock-up, trying to incorporate as many as possible of the elements that you find in realworld Web sites. This design will also show you how to work with the shape layers, which are still fairly new (they were introduced in Photoshop 6.0). This tutorial will lead you through every step of the development from the design and the optimization of the images up to the point of the final HTML page in GoLive.

Creating a sidebar: After creating a new file (File > New) 640 pixels in width by 600 pixels high, you need a second (temporary) document for the fill pattern, with the dimensions 4 pixels (width) by 1 pixel (height). Make the color of the first pixel a light gray (RGB: 204, 204, 204), the second pixel a dark gray (RGB: 102, 102, 102), and the third and fourth pixels a medium gray (RGB: 153, 153, 153). Use the maximum magnification to paint the pixels with the Pencil tool. (This tool may be hidden in the Paintbrush tool slot; a click on the Paintbrush tool will reveal it.) To define a color, click on the foreground color field in the toolbox. When the Color Picker dialog box appears, make sure that the Only Web Color option is selected.

Use the Only Web Colors option when creating the pattern.

Edit > Define Pattern will store this small document as a pattern. You won’t need this document anymore, but you can save it for later in case you want to edit it. Switch back to your first document and display the rulers (View > Show Rulers).

Before you start to create the actual sidebar, make sure that the Create New Shape Layer option is activated and that no style is selected (click on Layer Style in the options bar at the top of your working environment; in the pop-up menu select No Style). With the Rectangle tool from the toolbox, draw the sidebar with a width of 150 pixels. This sidebar is now filled with the foreground color. To actually fill it with the pattern, we create a pattern overlay in the Layer Style dialog box (Layer > Layer Style > Pattern Overlay). From the pop-up menu, select the pattern that you saved previously, and your sidebar is done.

Creating the arch: When designing a Web site in Photoshop, you should decide early on whether you want to use frames or stick to HTML tables. This decision can have an impact on your design, but this particular design can be created with either.

After the lower-right Anchor was moved up, an anchor point was added to the path and then moved to create the arch.

With the Rectangle tool, draw a shape with a height of 95 pixels, and with an offset of 20 pixels from the top—you will have to zoom in to do this precisely. If you need to adjust the shape, use the Free Transform Path command (Edit menu). Double-click in the rectangle after you are finished resizing.

To change the shape to an arch, select with the Direct Selection tool (white mouse arrow) the lowerright corner of the rectangle, and then click on the anchor point and drag it up while holding the Shift key to restrict the movement to the vertical axis. Add an anchor point in the middle of the path with the Add Anchor Point tool, and move this anchor with the Direct Selection tool until you get a nice arch.

Fill this path with a pattern using the same technique as with the sidebar, above: Open a texture, define it as pattern, and then select Pattern Overlay in the Layer Style dialog box (Layer > Layer Style > Pattern Overlay). While you are there, also select Drop Shadow.

Creating the sidebar navigation buttons: If you are familiar with Adobe Illustrator and working with the Path tool, this should be no problem. Duplicate the arch layer using the Duplicate Layer command in the Layers palette menu. Layer > Layer Style > Clear Layer Style gets rid of the layer style in the copy. The intention is to cut out just the part of the arch that lies over the sidebar to use it as a basis for the buttons (this ensures that both arches will match later). With the Direct Selection tool, select all the anchor points—except the two that we need for the buttons—and hit the Delete key. Then drag the path parallel while holding the Shift key and then clicking the Alt key before releasing the mouse button (this creates a copy automatically). Connect the two ends of the paths with the Pen tool and use the Convert Point tool to adjust the handles of the anchor point. Change the color of the shape to black with Layer > Change Layer Content > Solid Color. Finally, use the Opacity slider in the Layers palette. The other two buttons are simply created by duplicating this layer and then moving and adjusting the paths and transparency.

With the Type tool, click at the location where you want to place the buttons’ labels and then type the text. Make sure that the foreground color is set to white before you do this (otherwise, you have to change the color later by highlighting the text with the Type tool and changing the color in the Color Picker). To rotate the text layer use Edit > Free Transform (if this is grayed out in the menu, try selecting the Move tool first). You see the same bounding box as before, which you can use to scale and rotate the text by moving the Free Transform tool along the left or right side of the bounding box (consult the Photoshop manual on how to work with the Free Transform tool). Once the text is in position, use the Warp Text feature to bend the text slightly. Duplicate the layer twice and change the text as necessary.

With the Type tool, click where you want to place the text. Rotate and resize the text using the bounding box.

Use the Warp Text feature to bend the text slightly.

Creating the top and bottom navigation bars: For the buttons’ background, create the shape with the Rectangle tool. Instead of using beveled buttons, we’ll use the Inner Shadow effect and disable the effect for the onMouseOver rollover state in ImageReady, which will make it look like the gray background is moving up when the mouse is over the button. Once you’ve placed the text for the buttons (and the black rectangle on the left side), create a new folder (Layer Set) in the Layers palette and drag all the elements of the top navigation into it. Being able to organize the contents of the Layers palette in folders is a true blessing of Photoshop; not only does it help you to keep an overview, but it makes it easy to duplicate several layers at once. Select the top navigation bar layer set in the Layers palette and use the Duplicate Layer Set command in the Layers palette’s menu. With the Move tool, drag the new set to the bottom of the document.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint