Wrangling Web Graphics, Pt. 2

The making of a transparent GIF (or fixing a super ugly ad tile)

One of the most common tasks for a web designer or web master is placing ad tiles on their web site. When dealing with web ads, the necessary evil that they are, it's good to have a few Photoshop tricks up one's sleeve for making them look as good as possible. The tricks I'm going to show you today are useful in *many* situations, so be sure to read to the end (enjoy a nice beverage if you must).

Case in point: I have a graphics segment each Wednesday night on the Your Mac Life Internet radio show (affectionately dubbed YML). They have a big presence at Macworld in San Francisco each year and negotiate a fantastic hotel deal for their listeners. So one time (not at band camp), I was trolling through the YML graphics forums and a *huge* Marriott ad tile loaded on the left sidebar. Gak! It was way too big and the background was all wrong and it made the site look like terrible, hence the birth of this tutorial. I'm sure the YML web dude went along with what the hotel sent, but...arg.

First, take a peek at this shrunken web page to see what we're starting with:

Make it smaller

Most ad tiles are designed to fit snuggly into sidebars and the width should rarely exceed 180 pixels (in my humble opinion), so let's start off with sizing the graphic down.

Step 1: Open the ad in Photoshop and summon the Image Size dialog box by choosing Image > Image Size. TIP: If you're running CS2, you can press Command + Option + I (PC: Ctrl + Alt + I). Hooray for keyboard shortcuts!

Step 2: Make sure Resample Image is checked at the bottom of the Image Size dialog box, and type 180 pixels into the width field at the top. Since we're not printing the ad and we know the exact pixel width we want, we can ignore resolution completely. Just type 180 into the width field and press OK.

Ah, that's a more manageable size (originally it was 255 pixels wide). The ad is still noticeable, though it doesn't detract from the site itself and make the sidebar look blown out.

Zap the background

The ad Marriott sent contained a white background which doesn't match the YML site at all. To fix it we need to zap the white and steal the gray from YML's sidebar. This is going to take a wee bit of editing, so first we need to make our document editable.

Step 3: In the Layers Palette, double click the background layer to make it editable. Give it a name if you wish.

Step 4: Since the area we want to zap is all one color, the Magic Wand is the perfect tool for the job. Select it by pressing W, then click on the white area surrounding the logo, as shown below.

Step 5: You should now have little ants marching all the way around the logo. Control click (PC: Right click) within the selected area and choose Feather from the contextual pop-up menu. Enter 1 pixel and press OK. This will soften the edge of our selection just a touch, so the background color change blends.

Step 6: Now that the white is selected, zap it by pressing the Delete key. You should now see the checkerboard of a transparent background in your document. Press Command + D (PC: Ctrl + D) to deselect and get rid of the marching ants.

Snatch a color from your web browser

With the YML web site open in my web browser and the sidebar visible, I'm going to select that shade of gray with the Eye Dropper tool (read closely because there's a trick to it) so that the ad blends perfectly with the background color. The first thing we want to do is create a new layer that we'll soon fill with the new background color.

Step 7: Create a new layer by pressing the icon circled in red below. Drag this new layer to the bottom of your layers stack.

Step 8: Select the Eye Dropper tool by pressing I. Click and hold on the transparent background bit of your document and drag the Eye Dropper to the gray sidebar area of the web site, then release. If you do not click and hold within the Photoshop document first, the Eye Dropper cursor will disappear as soon as you drag it outside the Photoshop realm. You must click and hold *before* leaving Photoshop to select a color from the outside world, as shown below.

Step 9: Once the color appears in the foreground (top) color chip, you're clear to fill the new layer by pressing Option + Delete (PC: Alt + Delete). This is what we have now:

Step 10: Select the logo layer and choose Filter > Sharpen > Unsharp Mask. For this example, I entered an Amount of 100%, Radius of 0.3 pixels, and a Threshold of 1. Press OK.

Export it as a GIF

Actually, since the background color of the graphic now matches perfect with the background we could skip the following bit and just save the ad as a JPEG. However, the tutorial couldn't be called "the making of a transparent GIF" if we didn't save the thing out as, well, transparent GIF. At any rate, this is a nice bit of magic to have in one's bag of tricks.

Step 11: With the editing bit finished, it's time to save the file, so choose File > Save for Web. Select GIF and make sure the Transparency box is checked. Grab the Eyedropper from the toolbar on the left side of this huge dialog box and click on the new gray background, as shown below.

Step 12: From the Matte pop-up menu, choose Eyedropper Color. This ensures that you won't get an ugly halo effect around the logo by forcing Photoshop to map the transparency to the gray, so the logo edge blends nicely into the background.

Step 13: In the gloriously useful 4-Up display of the Save for Web dialog box, I wanted to see if making this graphic a GIF was helping or hurting image quality, and if it was creating a smaller file than a JPEG. I clicked on the preview directly beneath my GIF and chose JPEG High with a Quality setting of 60 to see what the file size would be. Since the original file from Marriott was a JPEG to begin with, I didn't want to perform much compression (I noticed that the red area started to get mottled on the JPEG preview). Hmm... back on my GIF preview, I noticed that the gold border looked a little jagged, so I increased the Colors to 64, as shown below.

TIP: Anytime you save a GIF, be sure to play around with the number of colors in the color palette pop-up menu. The fewer the colors in your logo, the fewer number of colors you can get away with in the color palette, and the smaller the file size will end up. Those of you who read last week's tip know this already.

Photoshop dutifully displayed the size of the GIF to be 6.694k and the JPEG to be 7.686k (circled above in red), so I went with the GIF, thus shaving off a whole 1k on file size. This wasn't a huge savings so I could have easily went with the JPEG, though the quality of the GIF looked slightly better. (Why? Because the ad is comprised of flat color and not a gradient or blend.) In this particular example, the file size savings really didn't matter. However, if your web page is graphics heavy, every little bit of file size savings counts!

As you can see in the before and after below, tweaking the ad tile made the sidebar look more professional and not nearly as obnoxious:

That's all for now! I'm headed to Vegas for PMA tomorrow so hopefully I'll have a few extra coins in my purse when I see you back here next week ;)