9 Replies Latest reply: Dec 26, 2011 7:12 PM by quality11 RSS

    Slicing Illustrator file

    quality11 Community Member

      I'm a front end developer and I know FW and PS much more than Illustrator. So, designer sent an Illustrator file. When I do a File > Save for Web and save as a high quality JPG or even a PNG 24 so that I can open it in FW to cut images, image is always slightly pixalated; especially on the text. I've tried copying and pasting it into PS too but same thing. No matter what I try, not great quality. How do I optimize/reduce the size of the image (or even copy it from Illustrator) for the web?

       

      You can see the images here charlotteswebservices.com/temp/http-stoneyknob. The Sprite (charlotteswebservices.com/temp/http-stoneyknob/images/navigation.jpg) used for the nav is pixalated and so is the "Cuisine from Near and Far". Maybe not pixalated but quality isn't as good as designer wants.

       

      Thanks for your help!

        • 1. Re: Slicing Illustrator file
          Nancy O. CommunityMVP

          I typically export to PSD and work with high res files in Photoshop.

          http://help.adobe.com/en_US/Illustrator/14.0/WS714a382cdf7d304e7e07d0100196cbc5f-6552a.htm l

           

          For single color icons with text, try saving for web as GIF. 

          JPGs are best for full color images and photos.

           

           

           

          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 

          http://alt-web.com/

          • 2. Re: Slicing Illustrator file
            quality11 Community Member

            I tried saving as PSD but it flattened it so no layers to work with (pretty sure I said to save layers too). Do I need to save the PSD a different way? Or, just for slicing images if I don't need layers, I guess I could use it for that.

             

            These are high quality photos; some with a bit of text over them so JPG is best. But, which gif to you suggest? I have CS4 and when I go to Save for Web > Gif it has about 6 options.

            • 3. Re: Slicing Illustrator file
              Rob Hecker2 CommunityMVP

              Illustrator is a great program for preparing vector-based images for the web. But remember that resolution usually is not a factor in Illustrator images, so make sure that when saving for web, the images are the correct size at 100%. Also, set preview mode to 'pixel' and check 'align new objects to pixel grid.

               

              Generally, vector objects are best saved as GIF.

               

              Many web designers simply don't know Illustrator, so they try to do everything in Photoshop. However, for many web graphics, Illustrator is far superior. You might get better results bringing the illustrator work into Fireworks instead of Photoshop.

               

              In the url you provided, there is just one rectangle that needs to be jpeg. The text that says cuisine from near and far probably would be fine as part of that jpg. That block should be done in photoshop. The rest should be GIF and can be done in Fireworks or Illustrator.

               

              But are you talking about exporting html slices? Not a good plan.

              • 4. Re: Slicing Illustrator file
                quality11 Community Member

                Thanks Rob. It seems that Nancy's suggestion of trying to save as Gif worked better for text. A bit less quality for image itself but don't think it's distinguishable. Appreciate your feedback about saving as Gif for web too. Didn't know that.

                 

                And many thanks for the explanation about web. How do I check that images are correct size in at 100% in Illustrator?

                 

                Whenever I bring an Illustrator file into FW, it loses it's quality very noticably even if chaning to PNG first. It also seems to lose it's layers or at least on this file.

                • 5. Re: Slicing Illustrator file
                  Nancy O. CommunityMVP

                  Use the 4 up panel to compare image quality vs filesize (see screenshot)

                  Experiment with different settings.

                   

                  PS-4up.jpg

                   

                  Web browsers are only capable of displaying images at 92 dpi.  That's a far cry from print output which can vary from 150 to 2800 dpi.  Educate your designer to the web facts of life.  Images on the web are never going to look as sharp as print graphics.

                   

                  Whenever possible, you should use real text instead of images of text.  Apart from being hard to read, images of text cannot be indexed, searched, or read by translators & screen readers. 

                   

                   

                  Nancy O.

                  Alt-Web Design & Publishing

                  Web | Graphics | Print | Media  Specialists 

                  http://alt-web.com/

                  • 6. Re: Slicing Illustrator file
                    Rob Hecker2 CommunityMVP

                    The save for web dialog, which Nancy exhibited, is essentially the same in Photoshop and Illustrator, with an important difference. On the bottom right of the Illustrator dialog, you can check and adjust the size of the image that will be created, in pixels. You can adjust this without image loss if the image is vector.

                     

                    Are you trying to output the whole things, vectors and rasters, as a single image? It sounds like you are. The photographic part should not be GIF. You should build your image pieces in the appropriate program and arrange them in Dreamweaver. Do not use slices.

                    • 7. Re: Slicing Illustrator file
                      quality11 Community Member

                      Thanks for the 4-up recommendation. Designer actually showed me his site and said the images are just like 300 dpi but he reduced the size so he seems to know about images.

                       

                      Yeah, I know using text is much better than using an image for SEO. I do use the web font services too.

                       

                      @Rob...I'm a little confused. I don't want to change the width and height; only the size of the file for the web (2 MB vs. 62 KB). In FW, I usually use Export Wizard for this but in Illustrator I assumed it was File Save for Web. Is that right? Also, after using Save for Web in PS or Illustrator I don't want to Export Wizard in FW afterward or it would lessen the quality - is that right?

                      • 8. Re: Slicing Illustrator file
                        Rob Hecker2 CommunityMVP

                        Are you confused by the difference between vectors and rasters? Illustrator, being a vector editor, naturally does not work with "sizes" the way photoshop does. A vector image that is the size of a thumbnail can be resized to a billboard without loss of image quality.

                         

                        But when you save for web in illustrator, it of course has to save the file with specific pixel dimensions. However, with vectors, thiis is not a problem. With rasters, it could be a problem. But Illustrator is not made for working with rasters.

                         

                        Did you get the point that you should be working with the photographic material in photoshop and the rest in Illustrator or Fireworks?

                        • 9. Re: Slicing Illustrator file
                          quality11 Community Member

                          Hmmm....I'm not sure what I'm confused about. I just know that you can reduce the size of all images by Export Wizard in FW so it takes a 3 MB let's say and reduces it down to 70 KB or something w/o changing the width and height; it condenses it I guess. As I'm sure you know for the web, it's important to get the graphics and images as small as possible (w/o jeapordizing the quality).

                           

                          I didn't know that about vector images vs. non vector and being able to resize them w/o losing quality.

                           

                          No, I didn't get that point that it's best to work with photographic material in PS and the rest in ILL or FW. So, back to the original question. What's the best thing to do when I get an Illustrator file with images? Export to PSD even though it flattens the whole file?

                           

                          Not sure what you meant above, "when saving for web, the images are the correct size at 100%. Also, set preview mode to 'pixel' and check 'align new objects to pixel grid.". Where in Illustrator do I do this?