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

  • PanToshi
    Reply to Hello GDF community
    PanToshi
    Welcome to GDF Tim

    We ask all new members to read the very important links here and here. These explain the rules and how the forum runs. No, you haven't done anything wrong, we ask every...
    Today, 10:32 PM
  • PanToshi
    Reply to Hola!
    PanToshi
    Welcome to GDF pixaeiro

    We ask all new members to read the very important links here and here. These explain the rules and how the forum runs. No, you haven't done anything wrong, we ask...
    Today, 10:31 PM
  • Lucifer
    InDesign and Illustrator - am I missing out?
    Lucifer
    Both these programs seem to be popular here. Rarely do I see someone talking about CorelDRAW. I've been using CorelDRAW for less than a month and I'm picking up stuff fast. I assume the Adobe suite is...
    Today, 10:26 PM
  • TimDojo
    Reply to Lowly student designer desperately seeks community
    TimDojo
    Hi Cilemons, I just joined this forum for a lot of the same reasons. I think community is important, and we thrive together much more than alone. I'm new to graphic design but I like helping other artists...
    Today, 10:02 PM
  • TimDojo
    Hello GDF community
    TimDojo
    I'm excited to join this collective of creative people! I hope to build connection, to learn from others and help anyone I can reach their creative potential!
    Today, 09:55 PM
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, 02: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, 08: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, 01:06 AM.

                              Comment

                              Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2014 Mediabistro Inc.
                              Working...
                              X