How to resize a text logo correctly in Photoshop

January 29th, 2009

A lot of logos on the web look like they were run over by a truck. Blurry, jagged, hideous. Here's how to make your resized logos gorgeous and sharp.

The first point is to always save your graphics and logos as either a GIF or a PNG. Saving solid colour graphics and logos as a jpeg is a catastrophe and inevitably results in nasty digital noise. This sound elementary but I have had three trained graphic designers do this wrong, including a graduate of the Art Institute of California. The only one who knew the right answer (in what format to save a text logo) was our lead programmer, Peter.

For an example, one doesn't have to go further than the website of Royal Bank of Canada.

RBC logo: jpeg text buzz in action

Even billions of dollars won't save you from jpeg text buzz on your logos. Here are the jpeg jaggies in closeup:
 

rbc logo jpeg text buzz @ 400%

Nasty. Click the logo to see the full image at 400%. Not what you went to design academy to create.

Now that we have the correct save format out of the way (preferably 24-bit PNG - now compatible with all modern web browsers, or if the logo is simple 8-bit GIF with 256 colours can save some space), we can move on to how to handle small size text correctly.

There is one very important rule in icon design which says:

Design your icon for each size separately.

This is because, if you have for example 128 x 128 px icon, after resizing it to 16 x 16 px, you will see nothing or It will not looks how it should. The best solution is design It also for 16 x 16 pixels.

Difference between resizing and designing to small size.
Example how is it doing in Apple (Home folder icon in Mac OS 10.5)

But in some cases is designing smaller version is just too time consuming. During the course of a day a graphic designer needs to resize a logotype or graphic to a smaller size many times. We can't hand draw every one. But if you need the logotype in very small dimensions and you want to maintain quality, it's not easy.

A standard resizing can give your logo or text jagged edges even if you have original vector file. If your find the text blurry or illegible after downsizing, you can start by using the different anti-aliasing techniques in Photoshop testing for the best result. The options are:

None | Sharp | Crisp | Strong | Smooth
 

Different Anti-aliasing options in Photoshop
(From top: None, Sharp, Crisp, Strong, Smooth).
400% zoomed on the right.

Result with our method. 400% zoomed on the right.

We usually have the best results with Strong. The result will be a bit blurry but usually attractive. But with very small text, photoshop will not get very good resullt. So we need another solution…
 

This is result after standard resizing.
Edges are too jagged.

The image you want to resize should be in vectors (That means Shape Layers and Text Layers in Photoshop). The idea is to make very big image, and downrez it to 10% size and let Photoshop solve our problem.

1. Blow up your vector image to 10 x bigger image size than the size you want in resullt (Photoshop: Image > Image Size… ).
2. Open File > Save for Web & Devices…
3. Change image size to the values you want (remember, your image is now 10 times bigger, so your new values should be 10% of Size you have before opening Save for Web & Devices…) and set quality of resizing to Bicubic Sharper.
4. Save your file.

Now in the small image you can see clean edges of our logotype.

Example: you have 500px wide image and want 150px width. Then Resize it from 500 px to 1500px and export it via Save for Web & Devices… with 150 pixels on width.

Compare the diferences with standard resize and our method:
 

Normal poor result on left with standard resize.
Result of our method on right.

Some differences can be seen after zooming both images. Especially on letters f and o.
 

Example 1: Standard resize on left. Our method on right. 400% view.

Another zoomed example. There are not a lot of difference for first look, but on the letter m or a you can see that text on left is too strong and jagged.
 

Example 2: Standard resize on left. Our method on right. 400% view.

Note: You can do this also with non-vector images, but then you will need to have a four to ten times larger file than your destination size as your starting point.

For best results you should always use round numbers, i.e 10%, 20%. 25%, 50% of Original size for best results.

Why?

With a round number, Photoshop divides the pixels by a multiple (2 or 4 or 5 or 10) which means Photoshop doesn't have to interpolate nearly as much.

If you start form a large enough original, an exact multiple becomes less important as Photoshop has lots of pixels to choose from when interpolating and the rounding will not be as noticeable.

By Alec

You might also like

1. Photoshop CS3 Droplet: Save as GIF
2. How much is a good logo worth? Case study: Agile Pain Relief
3. ImageMagick vs GD

IT | Comments | Trackback