6 Replies Latest reply on Feb 3, 2010 7:53 PM by John Blaustein

    PS Save For Web -- what are optimum GIF settings?

    John Blaustein Level 4

      Hi,

       

      I am making very simple buttons for a web page navigation bar as follows:

       

      Create new file in sRGB with proper dimensions for my navigation area.

      Fill with web page background color, #c4c0b4.

      Use Type Tool to create text in gray #666666.  (After creating these buttons, I change the text color to white for hover buttons.)

      Use Guides and Slice Tool to define shape of each button.

      Save For Web to create folder with all the buttons.

       

      In the Save For Web dialog I have tried several of the GIF presets -- 128, 64, 32, with dithering and without dithering.  They all look good, but I'm not sure which will give me that absolute highest quality, sharpest looking characters.

       

      QUESTIONS:

       

      1) Which of the GIF presets should I use for the best text appearance?  I have read the Help file and it would seem that I do not need dithering since I am using two solid colors -- #c4c0b4 and either #666666 or white.  To dither or not to dither, that is the question!

       

      2) Do I need more than 32 colors?

       

      3) In Save For Web, when I click Save and the Save Optimized As dialog opens, should I use the Default Settings under Settings, or would a custom setting be preferable?

       

      4) Am I correct that I should NOT apply any sharpening to text-only files such as this?

       

      As always, thanks to the pros here for any advice on this.

       

      John

        • 1. Re: PS Save For Web -- what are optimum GIF settings?
          Nancy OShea Adobe Community Professional & MVP

          I tried several of the GIF presets -- 128, 64, 32, with dithering and without dithering.  They all look good, but I'm not sure which will give me that absolute highest quality, sharpest looking characters.

           

          Depends on the number of colors in your image.  GIFs can range from 2 to 256 colors.  Don't use dithering.  Use the smallest filesize needed for the job.

           

          That said, I can't remember the last time I used a GIF.  I use JPEGs for photos, PNGs for backgrounds or images that require transparency, and real HTML text for menus and content.  Pictures of text are not recognizable to Screen readers, Translators, or Search Engines.  And people who need to increase text size to make it readable will have a devil of a time with pictures of text - especially on super wide displays.

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          www.alt-web.com/
          www.twitter.com/altweb
          www.alt-web.blogspot.com

          1 person found this helpful
          • 2. Re: PS Save For Web -- what are optimum GIF settings?
            John Blaustein Level 4

            Hi Nancy,

             

            Thank you for your reply.

             

            I am using an image for my navigation text precisely because it can't be enlarged or reduced.  Here is what I'm doing:

            http://www.johnblaustein.com/web2/ (the links don't work yet)

             

            Screen readers, Translators and Search Engines don't need to read my links.  I tried using text for the links but as you know, each browser displays the text differently depending on the magnifications settings for the page and/or text, and my designer and I want to keep the look consistent.  So, that's why I am using GIFs.

             

            Thank you for the advice on colors and dithering.

             

            Regards,

             

            John

            • 3. Re: PS Save For Web -- what are optimum GIF settings?
              jessegiga Level 1

              Hi John,

                 I think I have to agree with Nancy  - when I began web site development several years ago, I built all of my buttons as graphics and it became an incredible nightmare over the years when the client added or changed the names on the link... I had to find my original photoshop files, and hope I still had the fonts, etc...

               

              If you use pixel sizes for your fonts (instead of points, percentages, or the generic 1,2,3 sizes) the font size remains pretty consistent, and is m-u-u-ch easier to edit and add links down the road... Your fonts look like around 10-11 pixels...

               

              With that said - if you prefer to use graphics, here are a few tips I keep in mind. First, if you're optimizing them through photoshop - use the "optimize for web setting", so you have control over the final output. I think PS4  calls it something else now like "save for web"... or something. If using fireworks or anoither program to save it out, you still want to compare settings. The goal is to use the fewest number of colors in your .gif without losing quality (and it becomes a balance). Your site just has basically two colors - the dark grey and the lighter tan, but I would use more than just two colors for the "anti-aliasing" around the text... say maybe 8 or 16 colors to be safe. As you adjust the settings, you should be able to see the file size adjust in the bottom of the panel - yours are very simple colors, so likely will only be aroun 5kb at the most... extremely small, and should be no problem with loading at all...

               

              Hope that helps - for what it's worth - I've found that .gifs work best for text - but not so good for photos, or gradients... you'll get some banding for those, so a .jpg or .png works best for photos... Gif format works best for text because it's generally "crisper" - jpgs blend the colors in a photo better, but generall make smaller text appear fuzzy. But the same rules apply to .jpg/.png settings - try to adjust the setting when you're saving a .jpg to get the best quality at the lowest setting. I generally don't go below 30 on a .jpg - and sometimes as much as 60 on the quality setting depending on how soft it begins to look. Compare that to a .png - and no matter what the settings, a .jpg will always be a smaller file size for download - .pngs are only used if you need the alpha channel (so that the background is has transparency for being placed over a background color)...

               

              With all of that said - your site looks very cool - great photography... Hope my long-winded answer didn't make you fall asleep - good luck,

              Jesse

              1 person found this helpful
              • 4. Re: PS Save For Web -- what are optimum GIF settings?
                John Blaustein Level 4

                Hi Jesse,

                 

                I tried using text links and setting the size in pixels, but the sizing changed depending on the browser settings.  Sizing in pixels is better than in points or generic sizes, but still subject to changes.  I'm on a PC and my designer-friend who is helping me with this is on a Mac.  We've done some tests and anything other than making the links with images is not consistent from browser to browser, Mac to PC.  We want to guarantee that all the text on the page will not change -- size, spacing, leading, etc.  My clients are graphic designers and art directors who will notice this kind of thing.

                 

                As for the client changing, adding or subtracting links... well, I'm the client and I'm doing the site myself, so that's not going to be an issue.  In addition, as you see, the site is super-simple so there aren't likely to be a whole lot of major changes.  That's not to say it could not happen, but saving all my Photoshop work files is not a problem.

                 

                Please understand, I am not arguing with you or Nancy.  If I were doing a complicated corporate or business site, I would use text links for all the reasons you lay out... no question about that.

                 

                Thank you for the tips on saving GIFs.  I'm using Photoshop CS4 and Save For Web.  I think I now understand what settings to use.  I am using GIFs only for the text.  All of the images will be JPGs, but those are all generated automatically by Lightroom and a web gallery plug-in called SlideShowPro which not only generates the images but assembles the galleries and does all the Flash stuff.  All I do is embed the Flash galleries into my pages.  For a non-web person like me, that's nothing short of a miracle.

                 

                Your comments were not long-winded.  In fact, I'm so eager to learn more about this stuff that I really appreciate your detailed explanations.  Thanks for the comment about my work -- I'm excited about this new website which hopefully will make it look better than ever!

                 

                Best,

                 

                John

                • 5. Re: PS Save For Web -- what are optimum GIF settings?
                  Nancy OShea Adobe Community Professional & MVP

                  We want to guarantee that all the text on the page will not change -- size, spacing, leading, etc.  My clients are graphic designers and art directors who will notice this kind of thing.

                   

                  John,

                  If your clients wear glasses or contacts, they may find your site unconformtable to use. I don't have an especially huge display, yet I find your graphic links way too tiny to pay attention to.

                   

                  I appreciate you and your designer's attempts to keep things consistent.  I began in Print to Digital mindeset.  BUT, the web is not the same as print to digital or even graphics to digital in terms of user-centrics.  You need to think as your site visitors think or MAY THINK -- depending on their circurmstance.  Sometimes painful but utimately better, if you ALLOW  people to see you as THEY NEED TO SEE you instead of injecting your perspective without any choice in the matter.

                   

                  Just my 5 cents.

                   

                  Best of luck with your new site!!!!  Very Nice Photos, BTW.

                   

                  Cheers,

                   

                  Nancy O.
                  Alt-Web Design & Publishing
                  Web | Graphics | Print | Media  Specialists
                  www.alt-web.com/
                  www.twitter.com/altweb
                  www.alt-web.blogspot.com

                  • 6. Re: PS Save For Web -- what are optimum GIF settings?
                    John Blaustein Level 4

                    Hi Nancy,

                     

                    I came here to get some information on saving GIFs, and I am grateful to you and Jesse for your help on that.

                     

                    As is often the case online, the discussion has broadened.  In this case, we are now talking design and aesthetics, and that by nature is very subjective.  I don't think we are going to agree on this one, but the various points of view are interesting.  (And we can all be grateful that the discussion remains civil, which is not always the case in user forums!)

                     

                    Best,

                     

                    John