Announcement

Collapse
No announcement yet.

Text Quality in Images

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Text Quality in Images

    Hi All,
    I use Macromedia Fireworks for Graphics. When I add text to an image it looks perfectly crisp but when I upload it to my site the text is a bit blurry around the edges i.e the crispness goes. It appears to be the same issues for JPG, PNG, GIF at varying compressions. I understand that you can apply eg a background and write text in HTML over it but there are scenarios when this isnt ideal. Whats the best way to ensure crisp text on images? If eg I use white text on a red background the crispiness goes. Is there a font that is best etc..?
    Thanks

  • #2
    Make sure you save the images out at 100%. Do NOT resize them in the browser window.
    Professional Pixel Pusher — Designing the world around you. | Working daily to reach 10,000 hours of practice.

    Comment


    • #3
      Thanks I do that but the crispness of the text still deteriorates comapered to the original. It seems the outline of the text is fuzzier than the original.

      Comment


      • #4
        What font are you using? Do you have a screen cap of this issue?? How bad is it???
        Professional Pixel Pusher — Designing the world around you. | Working daily to reach 10,000 hours of practice.

        Comment


        • #5
          When you make the image in fireworks, add the text, but don't save it as a jpg, save it as HTML, I'm not sure if that is in the Save As or in Export, probably both.

          But you need the HTML. That will save the background image and the text will be selectable/editable in the code and be text not an image.

          "May your hats fly as high as your dreams"Michael Scott

          Comment


          • #6
            Hi ,
            I used Garamond in this case. Animated Gif. Pls see http://www.classifiedads.ie/account_access.gif
            Thanks

            Comment


            • #7
              Thanks eugenetyson but I want to be able to use textures in the text if needs be. Ideally I want to make my images/button as crisp clear and professional look as possible.

              Comment


              • #8
                Originally posted by randomdude2009 View Post
                Hi ,
                I used Garamond in this case. Animated Gif. Pls see http://www.classifiedads.ie/account_access.gif
                Thanks
                It looks fine to me. GIF by default (you can change this when you optimize the image through Save for Web or whatever) uses a selective color palette, which is the main cause of your fuzzy edges, along with the fact that there's only so many pixels to use in the image at that small size. This is what you'll expect to get with any web-sized raster text...

                You could try a more complete color palette instead, and see if that helps.

                If it were me, I would have made that button in CSS to keep it completely vector based.
                Last edited by Ned; 05-30-2009, 08:43 AM.
                Ned Yeung, A.C.E.
                mediamainline.com
                cyclopsphoto.ca

                Comment


                • #9
                  OK Thanks Ned!
                  CSS isn't my forte unfortunately. I will google how to do that. Don't know much about vectors either. Will look it up.
                  Thanks

                  Comment


                  • #10
                    Why don't you just try the html route instead of dismissing it.

                    "May your hats fly as high as your dreams"Michael Scott

                    Comment


                    • #11
                      I will look further into the html. Thanks everyone for the feedback. I was just looking at the ad on the sidebar of this site i.e Wordpress/Joomla & Oscommerce Templates. It just looks so much crisper than the images I create.
                      Thanks

                      Comment


                      • #12
                        Looks fine on my screen for it's size and content. *shrugs*
                        Professional Pixel Pusher — Designing the world around you. | Working daily to reach 10,000 hours of practice.

                        Comment


                        • #13
                          Originally posted by randomdude2009 View Post
                          Whats the best way to ensure crisp text on images? If eg I use white text on a red background the crispiness goes. Is there a font that is best etc..?
                          Thanks
                          The smaller your text gets, the more issues you're going to have with anti-aliasing causing fuzziness. You might want to:
                          • Try using a more geometric sans serif font as there will be less variation in line weight between the parts of the letters—sometimes the thin lines & serifs of a serif font can get anti-aliased to the point that they almost disappear.
                          • Change your anti-aliasing settings. I don't use Fireworks much, but CS4 gives you the option to change the amount of anti-aliasing used and even use custom settings.
                          • Try using a pixel font (also referred to as a "bitmap" or "screen" font). Pixel fonts don't need to be anti-aliased and will look nice & sharp, the drawback being that each one is only intended to be used at a single size. Read more here (includes links to both commercial & free pixel fonts).
                          Digi
                          Last edited by digizan; 05-30-2009, 02:12 PM.
                          The world is divided into people who think they are right.
                          —Anonymous

                          Comment


                          • #14
                            Thanks Digi, I will try that

                            Comment


                            • #15
                              Use a gracefully degrading font stack. You can also take a look at this article for other ideas.

                              HTML Code:
                              font-family: Garamond,Adobe Garamond Pro,Georgia,serif;
                              Last edited by tZ; 05-30-2009, 07:06 PM.

                              Comment

                              Search

                              Collapse

                              Sponsor

                              Collapse

                              Incredible Stock

                              Latest Topics

                              Collapse

                              • SophieMDesigner
                                Good morrow! I was wondering if you guys could give me some advice in this logo?
                                SophieMDesigner
                                Hi GDF Peeps!

                                My name is Sophie M O'Connell I live in Sunny Devon in the UK and I was recently made redundant from a local newspaper/ad agency. Turns out this isn't such a bad thing though......
                                Today, 08:02 PM
                              • Mojo
                                Reply to Questions about Pitching to New Client
                                Mojo
                                I wouldn't show sketches. You're demonstrating your propensity to give away your work for free, without any sort of contract or agreement to terms. It's a bad precedent and it makes it more likely in...
                                Today, 12:44 PM
                              • B
                                Reply to Logo Critique Please
                                B
                                It took me a few seconds, but instead of AMP D, it says AMPED. It's clever making an electrical plug from the E and D. The abbreviation "amp' has a bunch of definitions, like amplifier or ampere....
                                Today, 12:25 PM
                              • B
                                Reply to Questions about Pitching to New Client
                                B
                                It's been my experience that when clients see rough sketches, they are typically unable to envision a sketch becoming a finished product. They also see it as unfinished and seem to feel an urge to want...
                                Today, 12:06 PM
                              • iyanez
                                Mobile website profile/portfolio, share the best you seen.
                                iyanez
                                Hey, guys, I'm really in the need for some inspiration. I'm looking for websites that show your profile/CV/PORTFOLIO sort of thing. like a LinkedIn page but without the social BS.

                                I mean...
                                Today, 12:04 PM
                              GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright © 2016 Mediabistro Holdings
                              Working...
                              X