14 Replies Latest reply on Feb 27, 2010 8:48 PM by pixlor

    Everything looks Blurry!! help please!

    Clinton Mickle

      so, I am making a webpage in fireworks, importing slices from photoshop and illustrator. I save them for "web and devices", with AA on, with high quality. For some reason, everything looks blurry. Even the buttons and the text for the menu bar. I am using a 24 inch screen but I wouldn't think that should matter. Help PLEASE!!!

        • 1. Re: Everything looks Blurry!! help please!
          pixlor Level 4

          No, your screen size doesn't matter a bit.

           

          "Hi quality" generally means you're saving as a .jpg. The algorithm for saving as a .jpg keeps soft variations in colors and luminance, and throws away sharp variations. This will make your images blurry. Save your files as .png, instead.

           

          You will also want to read this article on the Photoshop save for web color shift: http://www.viget.com/inspire/save-for-web-simply/

          • 2. Re: Everything looks Blurry!! help please!
            Clinton Mickle Level 1

            i have been doing them all as png. i tried jpg also, but that didn't help.

            • 3. Re: Everything looks Blurry!! help please!
              pixlor Level 4

              Can you post your original .psd and also one of your exports? Try the Insert Image (camera icon above the post), first, but if that doesn't work, use the Attach Files button at the bottom of the post.

              • 4. here is the fireworks image. I attached one of the illustrator docs.
                Clinton Mickle Level 1

                mockup_01.png

                also, is there a certain way to create them in the first place to help with that? thanks a bunch.

                • 5. Re: here is the fireworks image. I attached one of the illustrator docs.
                  Clinton Mickle Level 1

                  that was kind of hard to see. i'll attach it too.

                  • 6. Re: here is the fireworks image. I attached one of the illustrator docs.
                    pixlor Level 4

                    I can open your .png file. Your attached .ai file is an .ai.pdf (don't know if you made it a .pdf or the forum software did), but I have CS3, not CS4 so all I can see is the black and white blender. For me, the blender is an image, not paths. I do see that the blender image is bigger in Illustrator than you have in your FW file. Reducing an image requires that you reduce the number of pixels used for it, so yes, that can make an image seem more blurry, depending on how you go about it.

                     

                    One thing I do see, though. With the form elements, you have reduced a symbol that should be 190x24 pixels to 132x16. The text inside is 10 point, which your scaling would make something between 10*132/190=6.947 and 10*16/24=6.667 point. That size of font is not legible.

                     

                    Anyway...let's concentrate on an element or two instead of "everything." Pick an item you think is terribly blurry and something and tell me how you got it into Fireworks. (If it's from PS, could you attach your .psd file. If it's from Illustrator, would you mind saving a CS3-compatible copy and attaching?)

                    • 7. Re: here is the fireworks image. I attached one of the illustrator docs.
                      Clinton Mickle Level 1

                      so, i took the file below, made a slice, and imported it into fireworks. They are just green buttons. maybe I would also be better designing things in fireworks to begin with. anyway, here is the psd file.

                      • 8. Re: here is the fireworks image. I attached one of the illustrator docs.
                        Clinton Mickle Level 1

                        also, I am sure you are right about me doing the text font size wrong. lol. I just don't understand how to do it right I guess or what I am doing wrong. I really appreciate your help.

                        • 9. Re: here is the fireworks image. I attached one of the illustrator docs.
                          pixlor Level 4

                          I'm happy to help!

                           

                          I have your files and I've played/experimented with them a bit. Haven't finished, yet. I'll try to get back to you in the next couple of days.

                          • 10. Re: here is the fireworks image. I attached one of the illustrator docs.
                            Clinton Mickle Level 1

                            I really appreciate it. I just want to make sure that if I am spending so much time doing this stuff, that its going to look right.

                            thanks again.

                            • 11. Re: Everything looks Blurry!! help please!
                              Michel Bozgounov Level 2

                              Could be also a matter of wrong dpi (dots per inch) setting... This could lead to "blurriness" in some cases, when transfering graphic work between various image editors... Just an idea! (because of that, sometimes, when you copy an image object and paste it in Fireworks, it may ask you "Resample?" -- I usually never do a resample, results are rarely good).

                              • 12. Re: here is the fireworks image. I attached one of the illustrator docs.
                                pixlor Level 4

                                Well, I don't see any problem with your buttons. That's the .psd file you attached so I worked with that.

                                 

                                Fireworks can open .psd files (although some effects are converted to bitmaps), so before you go through the process of exporting from PS, try opening the file in FW, first. See if it works.

                                 

                                I opened your .psd in both FW and PS and made screen captures. I then put both screen caps in the same FW file to compare.

                                http://drop.io/FWpixlor/asset/smoothiecompare-png (Uploaded to my drop, because sometimes the forum software goes wonky.

                                 

                                On the first layer, I put the two screen caps and labeled them. These items are at the top and middle of the image.

                                 

                                On the second layer, I copied the two screen caps, aligned them, and set the blending mode of the FW-opened file to difference. This group is at the bottom. You can see where PS and FW display the greens at the edges of your buttons slightly differently, but the text is perfectly aligned. (Black means you have a difference of 0 - the pixels are the same color.)

                                 

                                On the third layer, I copied the buttons from your FW image. I duplicated them, turned their blending mode to difference, and set one copy over each screen capture. There's a very slight color difference in the anti-aliasing, but the text is perfectly aligned. (Except "Nutrition," which is one pixel off.)

                                 

                                So! Compared to your original .psd file, your buttons are perfectly accurately rendered by Fireworks.

                                 

                                 

                                As for the symbols, I don't use them, myself. Form elements will need to be coded in HTML (or HTML and CSS). I use Fireworks to get the general layout of a page or site and then I build it in Dreamweaver. If you want a form element of a different size, I think what you want to double click the symbol and edit the individual elements. You don't want to resize it as a symbol, that's the problem you have with your text elements.

                                 

                                Hope that helps, some.

                                • 13. Re: here is the fireworks image. I attached one of the illustrator docs.
                                  Clinton Mickle Level 1

                                  pixlor,

                                  thanks so much for the help. sorry for the delayed response. I think I just wasn't familiar with the zoom. I didn't think it was normal for the items to look pixelated at 150%, but I guess it is.

                                  I had a question. what did you mean by this: "As for the symbols, I don't use them, myself. Form elements will need to be coded in HTML (or HTML and CSS"?

                                  I guess I am still not familiar with all of the terms. What would be the best way to create them?

                                  I really appreciate your help.

                                  • 14. Re: here is the fireworks image. I attached one of the illustrator docs.
                                    pixlor Level 4

                                    Oh zoom! I should have thought of that one! Yes, if you're used to working in Illustrator, Fireworks will be different. Illustrator's vector objects look great no matter how much you zoom in, because it recalculates the mapping to the pixels. This is a good approach for Illustrator, because something you design could go on a business card or on a billboard.

                                     

                                    Fireworks is designed to produce graphics for the screen, consequently, it shows you the objects as they will look on screen. If you zoom in, you can see the detail of the pixellation. It can be very useful.

                                     

                                    Fireworks is a Web graphics/Web prototyping application. It is not an HTML/CSS authoring application. If you want to have forms on your Web site, you need to have the form tags in your HTML file. You're really better off creating your HTML files in either an HTML authoring application (such a Dreamweaver) or a text editor (plain text, not a word processor). If you don't know HTML, you will need to learn it. Fireworks can export HTML (and CSS), but it isn't great code and it's very difficult to read and maintain. It is also not robust and is not recommended for use on live sites. It's okay for mockups and prototypes, just not for the real deal.

                                     

                                    Symbols are handy, reusable complex objects in Fireworks, They can have a lot of benefit for graphics layout and design. I tend not to use symbols, as it is faster for me to compose any complex object I want than to search for something I might edit. But that's just me. Loads of people find symbols extremely handy.

                                     

                                    Also, since I'm comfortable coding HTML and CSS in Dreamweaver and text editors, I use Fireworks to get the general layout and create any full images I need to have (buttons, logos, background images, etc.). Then, I use Dreamweaver to design my page, incorporating the graphics I exported from Fireworks. Some people use the HTML output from Fireworks as a starting point. I find that the code that Fireworks produces is so obtuse that I spend more time trying to decode it and make it maintainable than I would if I had just started from scratch.

                                     

                                     

                                    Despite all that typing, I think that may be the short answer to your question. Where (if at all) do you need more detail?