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

  • PrintDriver
    Reply to Need Designers Input - Prep for Printing survey
    PrintDriver
    Designia, that's because you think like a printer might. With the current downward trend in designer print capabilities though, someone sounds like they are offering a solution to alleviate printer headaches....
    Today, 11:24 AM
  • PrintDriver
    Reply to Illustrator color mixes keep reverting
    PrintDriver
    I've discovered that happens when you click "Add all used colors." I've had pantones become CMYK values too.
    Damn near tanked a print project before I caught it.
    I submitted it as...
    Today, 11:18 AM
  • carter the artist
    Reply to GDF's Portfolios
    carter the artist
    So, I still need to put the "Portfolio" section together, but I have changed my site from id8tion.com to id8tionist.com. Since I cannot edit the first post, would one of the love admins please...
    Today, 04:36 AM
  • carter the artist
    Let me reintroduce myself
    carter the artist
    Hey Guys and Gals!

    What is going on? I thought I should jump in here and say hey, since I am now back in the field. I got bogged down at Quiksilver and then got laid off last year which somehow...
    Today, 04:26 AM
  • <b>
    Reply to Proving ownership of a tee only store within a marketplace
    <b>
    Wouldn't your PayPal records serve as proof? If I remember right, PayPal provides detailed transaction records.
    Today, 04:05 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

                              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. call (212) 389-2000 or email us
                              Working...
                              X