• Skip to content
  • Skip to primary sidebar
  • Skip to footer

Foliovision

Making the web work for you

Main navigation

  • Weblog
    • FV Player
    • WordPress
    • Video of the Week
    • Case Studies
    • Business
  • About
    • Testimonials
    • Meet the Team
    • We Support
    • Careers
    • Contact
    • Pricing
  • Products
  • Support
    • FV Player Docs
    • Pro Support
  • Login
  • Basket is empty
Affordable VAST/VPAID for Wordpress has arrived. Serve ads with your videos starting today!

How to resize a text logo correctly in Photoshop

29 January 2009 / Alec Kinnear / 28 Comments

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.

Alec Kinnear

Alec Kinnear

Alec has been helping businesses succeed online since 2000. Alec is an SEM expert with a background in advertising, as a former Head of Television for Grey Moscow and Senior Television Producer for Bates, Saatchi and Saatchi Russia.

Categories: Design Tags: Design, graphics, photoshop

Related Posts

  1. Photoshop CS3 Droplet: Save as GIF

    Photoshop CS3 Droplet: Save as GIF

  2. ImageMagick vs GD vs Photoshop

    ImageMagick vs GD vs Photoshop

  3. Image Resizer Faceoff OS X: JPEGmini vs Adobe Photoshop vs PhotoBatcher vs ResizeMe

    Image Resizer Faceoff OS X: JPEGmini vs Adobe Photoshop vs PhotoBatcher vs ResizeMe

Reader Interactions

Comments

  1. alec 18 February 2009 at 10:55 am

    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.

    Reply
  2. Dana 18 February 2009 at 9:46 am

    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.

    Reply
  3. John O 12 March 2009 at 10:41 am

    Excellent advice, thanks very much.

    Looking forward to trying it out tonight..

    Reply
  4. Kathy 3 April 2009 at 2:36 pm

    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

    Reply
  5. alec 3 April 2009 at 2:39 pm

    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.

    Reply
  6. Janet 25 August 2009 at 9:26 am

    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!

    Reply
  7. peggy 6 July 2010 at 10:23 am

    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.

    Reply
  8. mare 15 December 2011 at 6:03 am

    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!

    Reply
  9. Aegides 2 January 2012 at 3:37 am

    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?

    Reply
  10. Diego 1 February 2012 at 7:19 am

    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!

    Reply
  11. Malvika 18 May 2012 at 9:54 am

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

    Reply
  12. John O 21 May 2012 at 1:24 am

    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.

    Reply
  13. GeoXman 10 August 2012 at 12:12 am

    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.

    Reply
  14. GeoXman 10 August 2012 at 12:16 am

    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.

    Reply
  15. AC 22 August 2012 at 3:20 pm

    Great post…thx.

    Reply
  16. Karen 28 September 2012 at 10:59 pm

    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.

    Reply
  17. Safely Unarmed 30 October 2012 at 8:43 am

    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.

    Reply
  18. Misti 28 June 2013 at 5:10 am

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

    Reply
  19. John O 28 June 2013 at 11:44 am

    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

    Reply
  20. Arpan J 12 November 2013 at 10:44 pm

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

    Reply
  21. Jamie Lyons 19 November 2013 at 8:15 pm

    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.

    Reply
  22. Maria Prontera 17 March 2014 at 1:38 pm

    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 :(

    Reply
  23. Mike Hodges 24 April 2014 at 7:45 pm

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

    Reply
  24. Matt 30 March 2015 at 12:28 pm

    Quite informative and helpful. Thanks for your sharing.

    Reply
  25. Louise 17 December 2015 at 3:42 pm

    Thanks. You have given me hope. I’m self taught and text quality has been driving me mad! I don’t seem to have ‘save for web and devices’. Can I just open a new image at 10x the final size I want, design it all then ‘resize image’ and save as a GIF file? Suddenly seems too easy!

    Reply
  26. Ahmed 22 January 2016 at 2:55 am

    THANK YOU SIR, you have helped me tremendously!!! Everyone else online makes it seems impossible and time consuming and your technique saved me so much time.

    Reply
  27. Alec 25 January 2016 at 5:27 pm

    Thanks Ahmed. We are focused on making the difficult simple, in a platform agnostic way. IT companies (the new Apple included) are focused on crippling our abilities to do simple tasks without reliance on a single company.

    Reply
  28. Alison 31 January 2018 at 12:49 pm

    Late to the party as usual but I have been Googling for some help. Thanks for this. However, my static PNGs look great but when I turn them into animated GIFs in Photoshop the quality drops quite substantially. Is there a trick here too please?

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You can click here to Subscribe without commenting

Primary Sidebar

My Account

  • My Licenses
  • My Profile
  • Invoices
  • Affiliate Area
  • Log Out

Categories

  • Business
  • Camera Reviews
  • Case Studies
  • Design
  • Flowplayer
  • Internet Marketing
  • IT
  • Life
  • SEO
  • Slovak
  • Video of the Week
  • WordPress
Foliovision logo
All materials © 2023 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com
  • This Site Uses Cookies
  • Privacy Policy
  • Terms of Service
  • Site Map
  • Contact
  • Tel. ‭+421 2/5292 0086‬

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in settings.

Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Necessary Cookies

Strictly Necessary Cookie allow you to log in and download your software or post to forums.

We use the WordPress login cookie and the session cookie.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Support Cookies

Foliovision.com uses self-hosted Rocket.chat and self-hosted Freescout support desk to provide support for FV Player users. These cookies allow our visitors to chat with us and/or submit support tickets.

We are delighted to recommend self-hosted Rocket.chat and especially Freescout to other privacy-conscious independent publishers who would prefer to self-host support.

Please enable Strictly Necessary Cookies first so that we can save your preferences!

3rd Party Cookies

This website uses Google Analytics and Statcounter to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

We reluctantly use Google Analytics as it helps us to test FV Player against popular Google Analytics features. Feel free to turn off these cookies if they make you feel uncomfortable.

Statcounter is an independent Irish stats service which we have been using since the beginning of recorded time, sixteen years ago.

Please enable Strictly Necessary Cookies first so that we can save your preferences!