Photoshop Tutorials
The Design Center, Photoshop Department: image editing tutorials  

Smooth, tight images for the Web

There are any number of methods you can use to optimize and deploy nice smooth images as gif files to the Web. Usually it's much better however to "pixelsmith" the image by hand for the best results. After we took a look at the of this reader's problem, we knew this was a case for some rather serious pixelsmithing...

J.S. from Oceanside, CA inquired with this question:

OK, I have a gif that is going on a website with a background gif. So, When I place the gif image on the site, I get really bad jaggy edges.
I know there's a way to just have a little bit of the color around the edge to get rid of the white jaggyness but I'm completely blanking on how to make it work...
See the surfboard Thanks!
J.S. is running Photoshop 6.0 under Windows 98

Over Optimizing

Looks like the surfboard has been badly over optimized.

In my humble opinion, neither ImageReady nor Photoshop would optimize this file to my liking. Automated routines seem to favor the numbers rather than visually pleasing results. After all, they can't see. Let's take a look at the symptoms.

  1. Too many colors tagged to be transparent - this kills all the smoothing (aliasing) around the surfboard.
  2. Too many colors left in the tan and blue stripes - I found roughly a dozen color pixels so close in color value they were only taking up space in the indexed palette.
  3. Slant line stair stepping -- with any image which has stripes, you'll get this effect as soon as you rotate the stripes even a little. We'll fix that too.
  4. Surfboard edges not buffered -- those smooth, slightly curved and slanted edges just won't stand much optimizing. They've got to be protected.

First, fix the stripes

Transparent First I'm going to optimize and smooth the stripes at the same time. They've become mottled by previous optimizing so by using the line tool, and the prevalent "tan" color (visually) we can clean those up and re-smooth them. (Open diagram #1, if you haven't already, by clicking on the thumbnail.)
      Start with the board alone on its own, transparent layer.

  1. Select the Line Tool
  2. Choose the appropriate tan color (#3 in diagram)
  3. Pull straight lines, slightly overlapping, until you've rebuilt the color
  4. Repeat for other stripes.
While you're at it, do the blue sections too, (following the same procedure) and if need be, follow with white stripes for touch-up.
      Once you're satisfied with the touch-up, you can begin the transparent background operations...

Building the Shadow

To build the buffer we need two grays -- one which is exactly the same as the background used for the web site and one very similar but slightly darker. The latter will become our "buffer" against the background.
      First, fill a layer behind the board with the background from the web site. Use either the exact HEX number color, or pick it up with the Eyedropper from the background filt. (Even though you're using a background image, it's always good to specify an html background color anyway in case something happens to the background image, or people are surfing with the graphics turned off.)
      Since the board has a bit of a dropshadow, we'll generate that through traditional methods. Either...

  1. Use the Layer Style "Drop Shadow" and tweak it into position by clicking the layer styles button at the bottom of the Layers Palette, and selecting "Drop Shadow. Manipulate the selections there until the shadow suits you. OR
  2. Drag the surfboard layer to the "New Layer" button at the bottom of the Layers Palette, Fill the new copy with a dark gray color, and choose Filters > Blur > Gaussian Blur and set the shadow to your liking. You may also want to slide the Opacity slider for that layer back to around 80% for good shadow smoothness.
Now you have a nicely smoothed surf board, complete with drop shadow, on your medium gray background

Building the Buffer

By "buffer" we mean a slightly expanded version of the same image colored a neighboring color to the background to "buffer" the transparency, holding it slightly away from the nicely antialiased edges of the subject.

  1. Drag the surfboard layer once again to the "New Layer" button at the bottom of the Layers Palette
  2. Make the board shape active (racing ants selection)
  3. Choose Menu: Select > Modify > Expand and set it to one pixel. That should be enough
  4. Select the same color of the drop shadow where it meets the edge of the board, and
  5. Fill the selection
You've now created your buffer.

Make it transparent... you're done

Gif FilterFlatten the file... after saving it! Now, convert to Indexed Color using what ever method you wish to make the Indexed optimization, or follow my method:
      Since I can do a better job, faster, than ImageReady, I'll rely on my own expertise rather than navigating through yet another software program. For this you could use the "Save For Web" function in Photoshop 6, however it often selects too many pixels in your smoothed, antialiased edges earmarking them for transparency.

  1. Choose Menu: Image > Mode > Indexed Color
  2. Set number of colors to 128
  3. Make sure there are no dithered areas and the image didn't lose any fidelity
  4. Choose Menu: Image > Mode > RGB Color (Back to RGB)
  5. Choose Menu: Image > Mode > Indexed Color, yes, back to Indexed, but this time you get an actual count of colors in the image and the color mode should have changed to Exact. If there are less than 128 you did well. If it says 128 you can gamble and try ramping it down to 72... which is what I did with no degradation in color.
  6. Click Okay
  7. Check the image. Still look great? I knew it would.
  8. Now Choose Menu: File > Export > Gif89a
  9. Click in the medium gray background ONLY. You've set just that color as transparent and all others will be left safe
  10. Click Okay, name the file and you're done.
Here's a screen capture of the final product on the web page.

We feel this was a good solution. It took about 15-minutes in reality, and produced a 14K file size as opposed to the 23K of the original. It loads super fast and looks very nicely smoothed. The colors held up and that wraps up another case study from the emergency calls at Photoshop 911 dot com. To see more case studies, and tips generated from Photoshop911 just go to our Tips & Tricks department.

 

Return to the Photoshop Department, or the Design Center Main Index

 

Participate in your Design Center

Lots of fun and information for all... don't forget, any community is only as good as the participation of its members. We invite your tips, tricks, comments, suggestions and camaraderie.
Advertise your products or services among these pages! Call: 540-433-8402 for details.