Announcement Announcement Module
Collapse
No announcement yet.
Text Quality in Images Page Title Module
Move Remove Collapse
Search Search Module
Collapse

Advertisement Advertisement Module
Collapse

Featured Images Featured Images Module
Collapse

Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
Latest Topics Latest Topics Module
Collapse

  • Buda
    Reply to Please help with company logo
    Buda
    Is the company name still The Fitness Doctors? The latest logo doesn't show this.
    Today, 03:38 AM
  • Buda
    Reply to Happy Last Friday of July!!!!
    Buda
    Oh lala, if your summer is ending, that means my winter is ending.

    Amazing pirate mermaid wedding! I went to a pirate birthday party on a boat once but that doesn't even compare to a wedding....
    Today, 03:35 AM
  • salsa
    Reply to Freelance Advice - Family Conflict
    salsa
    If it were me, I'd just write off all the work done so far as pro bono. Like several others already mentioned, I do all family work for free and if they want to pay me then that's an extra bonus.
    ...
    Today, 03:23 AM
  • Kayekaye
    Reply to Freelance Advice - Family Conflict
    Kayekaye
    I had inlaws approach me for a logo and website. What a nightmare. They are a married professional couple and said "Of course we would pay you, $___ (an amount that barely covers 2 hours of work)...
    Today, 03:07 AM
  • garricks
    Reply to Need help identifying Font
    garricks
    You'll be surprised. To do WELL, that is....
    Today, 01:38 AM
Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

X
Conversation Detail Module
Collapse
  • 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, 01:43 PM.
                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, 07: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-31-2009, 12:06 AM.

                              Comment

                               
                              home | site map | advertising/sponsorships | about us | careers | contact us | help courses | browse jobs | freelancers | events | forums | content | member benefits | reprints & permissions about | terms of use | privacy policy | Copyright © 2014 Mediabistro Inc. Mediabistro Inc. call (212) 389-2000 or email us
                              Working...
                              X