How to resize a text logo correctly in Photoshop

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
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
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.

resize article 1
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
 

resize article antialias versions
Different Anti-aliasing options in Photoshop
(From top: None, Sharp, Crisp, Strong, Smooth).
400% zoomed on the right.
resize article compare god zoomed
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…
 

resize article bad resize
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:
 

resize article compare
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.
 

resize article zoom
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.
 

resize article zoom2
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.

This entry was posted in Design and tagged , , . Bookmark the permalink.

23 Responses to How to resize a text logo correctly in Photoshop

  1. Hello Dana,

    I’m glad this helped you. It’s required reading for all our designers. Most designers think they know these basics but they don’t.

    Even people who should know better like SixApart (publishers of Typepad) don’t save their logos in the right format.

    The same principles should apply in Fireworks. We use Photoshop as an example as we haven’t been able to find an image editing program with better algorithms for compressing and resizing images for the web. We tried almost all of them, but the Photoshop algorithms are superior.

  2. Dana

    Thank you for this great explanation. I’m a newbie at web development, and your description made perfect sense. My only question, is that when you reference Photoshop, I suspect that using Fireworks is analagous. I’m able to save in all the formats (.gif, .png, .jpg, etc) and I’m just wondering whether your saving as a big file, but rendering it smaller would work the same… I suspect so… Thanks, Dana.

  3. John O

    Excellent advice, thanks very much.

    Looking forward to trying it out tonight..

  4. Kathy

    Hi – I was just reading your post on saving images for the web. I am having trouble with a logo, and I can’t figure it out.

    It needs to be 85 px wide by 98 px high. I’ve created it in Illustrator at that particular size, then saved it for web (PNG 24) but it always looks blurry when
    I publish on IE7. It’s better on Firefox, but horrible on IE7.

    Any help would be appreciated….

    Thanks, Kathy

  5. Hello Kathy,

    I would try to open up the AI file in Photoshop and save it for the web from Photoshop and not Illustrator. I don’t use Illustrator much myself, but have had problems saving for the web.

  6. Grateful to have found your information! My friend had a huge graphic she sent to a printer as a .jpeg, for business cards, and they couldn’t get the image to downsize sharply.
    In PaintShop Pro X2, there’s no Save For Web Devices choice, but Save For Office gives Advanced Settings to re-size the image, chose quality & file type.
    Worked perfectly! I did use the unsharp mask to tweak the new image slightly. Thanks so much!

  7. peggy

    thank you for posting this. i’m helping a co-worker with their church banner which is currently very jagged in appearance and while i’m pretty good in some applications, I don’t know much photoshop or illustrator which I plan to change shortly. it is nice that to know that i don’t have to redraw the thing by hand because i’m not an artist.

  8. mare

    thank you for the advice. I was really annoyed already, wasting time, looking all over for the solution and feeling stupid… I hate jagged edges!

  9. Aegides

    great guide, thanks a lot.

    but there is on thing i can’t get right, my logo text size is 75 x 300.
    and no matter what i save my logo either in jpeg or png i am getting fuzzy
    text, how do i make it look perfect in text font size 38?

  10. Diego

    Thank you very much Alec,

    Very useful tutorial.

    I like the way you have included images step by step, comparing the different results.

    Well done!

  11. Malvika

    Thank you,I’m gonna try this right away!

  12. John O

    There aren’t many posts which are still relevant three years after they are written but I think this one will remain so for many more years to come. Proved very useful to me. Thanks again.

  13. GeoXman

    Speaking of current relevance. I know that Adobe Photoshop has really made some significant changes especially with CS6.

    Is there any recent changes worth noting, or is this still the best way?

    I had figured out everything except the factor of 10. That was far from obvious, but makes sense.

  14. GeoXman

    Also, you speak of making the image to size to begin with. Do you have any tips regarding this. I have steered clear of working from such a small canvas but clearly that creates a much cleaner image.

  15. AC

    Great post…thx.

  16. Karen

    Thanks, I was almost at the verge of pulling my hair when I found your tips online.

    It worked like a charm. Like GeoXman I did everything right except for the factor of 10.

    Thanks a lot.

  17. Safely Unarmed

    I’m an IT admin, not a designer and I often have to resize logos for letterheads, email signatures etc.
    Your post has saved me hours of frustration, tinkering with settings and going back and forth with users…

    Thanks a lot.

  18. Misti

    Im going to cry. It didn’t work. I’ve been trying this for 12 hours.

  19. John O

    Hi Misti,

    Give us some more information.

    Alec’s advice on this page is excellent so I would say the problem lies elsewhere.

    Not sure if the admins will allow us to sort this out here, but if not we can take it offline.

    Either way we will try to get it sorted for you.

    Regards,

    John

  20. Arpan J

    Really very helpful for me. I am very good experienced person in print media, and now I started working for web also, and really this tutorial helps me a lot. :)

  21. Jamie Lyons

    This was really helpful,.. I feel like opening champagne.

    I’ve been struggling with downsizing text for a while.

    I wanted a 250px wide text based logo.
    I made it 2500px
    Used the image resize to make it 250px using bicubic sharper.
    Then I saved for web using png24 using bicubic sharper also.

    Come up great, and I’m not even sure I followed all the steps correctly.

  22. Maria Prontera

    Please can you tell me how do you use the “Save for web” box in Photoshop when you save png or gif transparency? I’ve been tried in several ways.. always with terrible result :(

  23. Excellent explanation. The step by step instructions worked a treat. Thank you!

Leave a Reply