I opened the nuts.ai file in Photoshop and immediately saved the file as nuts.psd. After duplicating the background layer, I turned the layer off and continued working from the copy. I renamed the duplicate layer as “nuts.” The design elements appeared on the layer with a transparent background.

Starting with the headline, I cropped each element using Photoshop's Crop Tool. I saved each crop using the File/Save for Web... menu option. Because of the drop shadow in the headline and stars graphics, I saved these two elements with the same cream-colored background I would be using for the web page. This insured that the graphics would seamlessly blend with the web page background. It was not necessary to worry about the size of the crop: I cropped each element so as to leave a little bit of the background around the edges.

In order to achieve the smallest file sizes for the graphics, I saved the graphics as PNG-8 files. During the save process, I adjusted the bit depth of each graphic for the smallest file size while maintaining good image quality. Photoshop's Save for the Web is a great utility for visually optimizing graphics for the web. For the web page, I had the following files:

• the headline — nuts-breakout.png (6KB),
• the sub headline — tired.png (3KB),
• the breakout — mmnolink.png (2KB), and
• the graphic — stars.png (6KB).

Because I saved the headline and star graphics on a cream background (#FFFEF2), they do not blend into the background color I used for this web page (#FFFFDD). They did blend perfectly on the web page I designed for the sales campaign, though. The other two graphics blend perfectly because they were saved on a transparent background and did not have a drop shadow. Here is how the headline looks when it is saved on a transparent background:

I was confident the graphics would load quickly in a web browser because of their small file sizes. Why did I use graphics for text? I wanted to make sure that the layout would be viewed—with the same fonts and font styles—exactly as I designed it.

For the banner ad, and before leaving Photoshop, I first saved the file as banner.psd. At all times, it is important to preserve source files and to work on copies or renamed files. I added a new background layer and filled it with an eye-catching yellow. From the layers palette menu, I selected “Flatten Image.” to merge the layers. I then cropped the headline to a 468x60-pixel banner using the Crop Tool. I cropped the headline so as to leave a good bit of yellow background around the text. When the crop was finally executed, the banner resized automatically to the dimensions I had entered into the tool-option bar's width and height fields.

There are a couple of tricks that make precise crop selections easier. While holding down both the left mouse button and the space bar, the mouse can be used to move the crop selection into position. After the crop selection has been made, but before the selection is applied, the arrow keys can be used to nudge the crop selection precisely where desired.

After flattening and cropping the banner, only one layer, the background layer, remained in the Layers palette. The special styles I wanted to apply to the banner cannot be done on the background layer, so I duplicated the layer. I could then apply additional layer styles to the banner. I renamed the duplicate layer as banner. Double clicking on the banner-layer thumbnail gave me access to the Layer Style dialog. I selected “Bevel and Emboss” from the Styles options. Clicking on “Bevel and Emboss” from among the available style options brought up another dialog box with a multitude of adjustments that I could apply to the bevel I wanted to use. After setting the adjustments, I applied the bevel to the banner. As a final touch, and also from the Layer Style dialog, I selected the “Stroke” option and applied a 1-pixel stroke (border) around the banner. This can be important because parts of the bevel can get lost in the background. I selected the color for the stroke from a sample taken from the bevel itself.

© Copyright 2007-2012 by Royce Tivel. All Rights Reserved.