28 Replies Latest reply on Feb 25, 2011 8:44 AM by phyllisj9

    Wireframing and PDF Resolution

    phyllisj9 Level 2

      Hi, I'm taking a class in Web design.  We're working on planning out a website, and my project right now is to do the wireframing for the website.  I'm allowed to use whatever program I want for the wireframing, and Fireworks sounds like a really good option.  However, I have to submit my final wireframes in PDF format.  Is there any way to get a PDF of decent resolution from Fireworks?  When I export as PDF, it's always very very jagged on screen, even though it's just text and shapes.  The text is selectable in the PDF which would lead me to think that it's still in vector format; however, it looks terrible.  Are there any workarounds?  Any multiple steps I can go through to get a decent PDF?  I have to wireframe the whole website that I'm creating.  Fireworks seems like the perfect tool, but I can't turn in a low-resolution PDF for a grade.

       

      Any suggestions?  Should I switch to Illustrator?  I don't know it as well, but I understand it has symbols in it also.  Do they work the same way Fireworks symbols do?

       

      I hear Visio is the program of choice, but I can't afford to buy that one.  And really Fireworks seemed like it'd be ideal.  Any suggestions?

       

      Thanks, Phyllis

        • 1. Re: Wireframing and PDF Resolution
          phyllisj9 Level 2

          Minor correction:  I can turn in a low-res PDF as long as it still looks good on screen.  I can't figure out why vector shapes and text look so terrible in the PDF export.

          • 2. Re: Wireframing and PDF Resolution
            phyllisj9 Level 2

            Well, I've tried everything I can think of.  The only thing that almost works is saving as an Illustrator 8 file, opening that in Illustrator CS4 and saving as a PDF.  That makes a crisp PDF.  But the big problem with that method is that the format is so old the conversion is poor -- I end up having to redo all the fonts in Illustrator.  I tried saving the fonts as paths but that (again) gives a crummy PDF.  I guess if I'm going to do all that I may as well just work in Illustrator in the first place (unless someone knows where I could get a copy of Illustrator 8?)

             

            Anyone else have this problem?  I tried making Photoshop PSD files, opening in Photoshop and saving as a PDF.  I tried opening the PNGs in Photoshop to make a PDF.  I tried opening the PNGs in Illustrator and making a PDF from there.  I tried many many combinations.  As far as I can tell, there's no way to make a usable PDF in Fireworks.

             

            I understand that the images from Fireworks would be low-resolution in a PDF.  But I don't understand why text and vectors look so bad in a PDF.   And really, a PDF with 72 dpi images generally looks decent on screen -- at least when it's made from some program other than Fireworks.

             

            Ugh.  I spent many hours today reading and watching videos on how to do wireframing efficiently in Fireworks, only to find that I can't use it.  Even if this were for a client rather than just for schoolwork, I couldn't risk using a program that won't let me make a reasonable PDF.  People ask for those all the time.

             

            Does anyone know if Fireworks CS5 can make a good PDF?  I might be able to upgrade.  Or does anyone know of another good program for wireframing (one that can make PDFs obviously)?  One that's not too expensive?  (I'd love to learn Visio, but I just can't budget for that.)

             

            Thanks, Phyllis

            • 3. Re: Wireframing and PDF Resolution
              Jim_Babbage Level 4

              What version of Fireworks are you using? CS4 and CS5 both offer a PDF export option, but there are some caveats.

               

              If you want a "print quality" version, you'd need to start with a print quality resolution. Or resmaple later to a suitable reolution. This is because FW converts all graphics to bitmaps at the original file resolution. It doens't convert FW vectors to vectors in the PDF.

               

              There is another issue I discovered some time ago too. FW has a problem with image quality if you have a transparent background. Set your canvas color to a solid color to help FW create better quality export.

               

              Also, make sure in Acrobat that the file is being viewed at 100%. Often, Acrobat will zoom the document to fill the screen area.

              • 4. Re: Wireframing and PDF Resolution
                phyllisj9 Level 2

                Hi, thanks for your response.  I'm using CS4.

                 

                My canvas is white.  What I want is to make a crisp PDF of a page that contains boxes and type.  It's just supposed to be a very simple static wireframe.  How should I set that?  If I try to set 600 pixels per inch, when I save a PDF, the PDF is then 83 inches x 70 inches (looks like it reverts to 72 ppi on output).  My final result needs to be an 8.5 x 11 PDF.  It doesn't need to be print quality, but it does need to have text and boxes that look clean on screen -- I don't care how they print as it won't be printed.  I care only that it looks clean on screen when the PDF is viewed at 100% size (or smaller) in  Adobe Reader.  Vector quality would have been preferable by far, but I guess that doesn't work from Fireworks.

                 

                I can't get anything that's usable unless I go through saving as Illustrator 8 files from Fireworks.  When I do that, all my text comes into Illustrator CS4 (the only version I have) as Myriad Regular.  I guess I could redo the type in AI, but then I come back to just thinking I might as well figure out how to do the whole thing in AI.

                 

                Am I missing something?

                 

                Thanks, Phyllis

                • 5. Re: Wireframing and PDF Resolution
                  phyllisj9 Level 2

                  I guess in the end I really need the Firework type and lineart to stay vector inside the PDF.  I can't do without quality PDFs.  (Again, I don't care how they print, but they have to look professional on screen.)  I wonder why Fireworks can't save as Illustrator CS4?  AI 8 is really ancient.

                   

                  I'm actually considering building my wireframe project in InDesign.  I love master pages....

                  But I also love 9-Slice Scaling...  what to do what to do.....  :-)

                  • 6. Re: Wireframing and PDF Resolution
                    Jim_Babbage Level 4

                    Can you share a sample? I just exported one of my wireframes as a PDF and at 72 ppi, it looked fine when viewed in Acrobat (but perhaps my standards are not the same.) I'll happily share my sample with you if it will help.

                    • 7. Re: Wireframing and PDF Resolution
                      phyllisj9 Level 2

                      Please do share the sample!  I'll have to recreate mine before I can share it.  I changed the settings and messed around with it so much, it's no longer representative.  Ugh, I have to go out for a bit or I'd make a new sample right now.

                       

                      My standards:  I need type and rectangles not to look all fuzzy at 100% in Adobe Reader.  I have to make a file I can turn in as a class project so the quality needs to look good on screen.  I'm not having luck at all with it.

                       

                      Thanks, Phyllis

                      • 8. Re: Wireframing and PDF Resolution
                        Jim_Babbage Level 4

                        I can't upload it here but I'll post it at this link:

                         

                        http://www.jimbabbage.ca/files/wireframe.png

                         

                        PDF is found at

                         

                        http://www.jimbabbage.ca/files/wireframe.pdf

                         

                        As for type, I'd recommend adjust the anti-aliasing of the text to make it crisp.  That could help the final PDF as well. It could very well be I'm not as particular, but hopefully these files help.

                        • 9. Re: Wireframing and PDF Resolution
                          phyllisj9 Level 2

                          Thanks for sharing that!

                           

                          Your PDF looks better than mine.  But it also looks better in the browser than it does in Adobe Reader.  Actually, now that I've noticed that, I just tested mine too:  My PDFs look much better if I open them with a browser instead of Adobe Acrobat.  What's up with that?

                           

                          Of course, my instructor is more than likely to open them with Adobe Reader.  But why would that be different?

                           

                          I'm digging for the anti-aliasing setting now.....

                           

                          Thanks, Phyllis

                          • 10. Re: Wireframing and PDF Resolution
                            phyllisj9 Level 2

                            And yeah, I'm particular.  :-)  I need the PDFs to look as good as they would if I'd wireframed in Illustrator.  And I don't see that happening. 

                             

                            But I am curious why the PDFs look so much better with Internet Explorer than with Adobe Reader.  I'll test again from work tomorrow in case I've somehow messed up the Adobe settings on here...

                             

                            Thanks again,

                            Phyllis

                            • 11. Re: Wireframing and PDF Resolution
                              Jim_Babbage Level 4

                              Unlikely that you're viewing the PDF in the browser. Typically it just downloads. What you are probably viewing is the Fireworks PNG file, which you can download and open in FW if you like. It has about 5 pages in the wireframe.

                              • 12. Re: Wireframing and PDF Resolution
                                phyllisj9 Level 2

                                Hey!  I downloaded both the PNG and the PDF.  The way I notice the difference is if I click on your PDF link (versus opening the downloaded copy), the PDF opens inside Internet Explorer.  It looks much better there than when I subsequently open your (downloaded) PDF in Adobe Acrobat.  I haev no idea what's causing that difference unless I've messed up the Acrobat settings at some point (I have the full Acrobat, whereas Internet Explorer is using some limited version of it inside its browser).

                                 

                                Thanks, Phyllis

                                • 13. Re: Wireframing and PDF Resolution
                                  phyllisj9 Level 2

                                  Also, if I use Internet Explorer to open your PDF (the downloaded copy I mean), it looks much better & smoother than if I open it with Acrobat.  Totally weird.   In both cases, the file I'm opening is named wireframe.pdf -- it just looks better opened with one program than with another.  I don't understand it.  I'll have to give up for the night and pursue again when my brain's more alert.  :-)

                                  Thanks for all your help!

                                  Phyllis

                                  • 14. Re: Wireframing and PDF Resolution
                                    phyllisj9 Level 2

                                    Well, I definitely have a problem with Acrobat settings at home as PDFs generated from Fireworks look better on my work computer.  But they still don't look high enough quality to send to a client.  I saw this page where folks have the same problem (in the comments at the bottom), so I guess it's not just me.  Is Fireworks CS5 better?  Or does it have an export-to-EPS function or anything?  I'd love to use Fireworks, but I don't know if I can get around this issue.  PDFs are really important.

                                     

                                    Thanks, Phyllis

                                    • 15. Re: Wireframing and PDF Resolution
                                      Jim_Babbage Level 4

                                      As far as I know, there were no changes made to the PDF export workflow in CS5. However, a new export option, FXG and Images was added and this produces very good quality results when opened in Illustrator.

                                       

                                      Worth checking out by downloading the trial, to see if it meets your needs.

                                      • 16. Re: Wireframing and PDF Resolution
                                        Jim_Babbage Level 4

                                        If you want, you can email me the FW PNG file and I'll do an FXG export for you to judge.

                                        • 17. Re: Wireframing and PDF Resolution
                                          phyllisj9 Level 2

                                          Thanks Jim!

                                           

                                          I really appreciate that.  I will make a sample and send it your way soon.  (At work right now so can't manage it.)   I'm not familiar with FXG, though I've seen the initials here and there.  That's a vector format I take it?

                                           

                                          I can probably get the CS5 upgrade if I start pestering the I.T. department where I work.  Sounds like it might be worth it.  :-)

                                           

                                          Thanks again -- I appreciate all your helpful comments and suggestions.

                                           

                                          Phyllis

                                          • 18. Re: Wireframing and PDF Resolution
                                            Chris Cavallucci

                                            Whenever I experience image quality issues in my output, I check the default export option in the Properties section for each of the pages. I've found that using JPG better quality gives me decent results.

                                            fireworks-output-quality.png

                                            • 19. Re: Wireframing and PDF Resolution
                                              phyllisj9 Level 2

                                              Thanks, I'll check that too.  I'm going to figure out some way to do this in Fireworks.  I really think Fireworks is the right program for this -- I just somehow have to get a PDF that's good enough to turn in for my school.  Maybe the FXG option will work.  Or maybe if I export to Illustrator 8, I can get something that won't take forever to clean up in Illustrator.  At my school, I can see the submissions from the other students (it's an online school), and a lot of them are using Illustrator (making nice crisp PDFs).  I hate using a print-based program for Web stuff though.  I'd really rather concentrate on Fireworks since I think I'd be using it for this type work in the real world, and I need to learn it better.  Anyway.  I'll keep trying.

                                               

                                              Thanks, Phyllis

                                              • 20. Re: Wireframing and PDF Resolution
                                                JoeDaSilva Level 4

                                                I've been using Fireworks for over a decade, and I'd argue it's probably NOT the best program for the job. You're using software that's much to complex for the task at hand.

                                                 

                                                I use www.GoMockingbird.com for wireframing. It's extremely easy to use and exports to PDF flawlessly.

                                                • 21. Re: Wireframing and PDF Resolution
                                                  Jim_Babbage Level 4

                                                  I like the way you think, Phyllis! FWIW, I have put this issue over to the engineers to see if they have any suggestions.

                                                  • 22. Re: Wireframing and PDF Resolution
                                                    phyllisj9 Level 2

                                                    Thanks Jim!!!!!!  I really appreciate your taking in an interest in my Fireworks to-use-or-not-to-use dilemma.  :-)

                                                     

                                                    Many thanks!

                                                    Phyllis

                                                    • 23. Re: Wireframing and PDF Resolution
                                                      phyllisj9 Level 2

                                                      Thanks also Joey! That's definitely a nifty intuitive little program.  Temptingly easy to use.  :-)  I do want to be able to make custom, branded wireframing templates for myself though, which is probably beyond the scope of GoMockingbird.  But I'm checking it out.  Quality PDF export is a big plus.

                                                       

                                                      Funny that I never really knew anything about wireframing.  I've worked on Web designs before (I was originally a self-taught designer but am trying to get as much formal education as I can manage around work!).  I knew nothing about the process of wireframing, but I think it's going to be hugely valuable stuff to know.

                                                       

                                                      Thanks, Phyllis

                                                      • 24. Re: Wireframing and PDF Resolution
                                                        phyllisj9 Level 2

                                                        Well, I got too busy with work and school to come back to this discussion for a while!  But the result was: Sadly, I had to abandon Fireworks for the wireframes.  Studying the lesson requirements a little more closely, I realized the wireframe had to make a clean printout as well as look crisp on screen.  I spoke with the instructor (who is a Web designer), and she said it was most common to use Illustrator for wireframes -- that ultimately you wanted these Web page diagrams to be very clean and printable.  I think she's right about that -- end-users will understand that Web sites themselves don't print great because they see that all the time, but I think they'd expect a diagram to look and print cleanly.  I ended up creating my wireframe in InDesign (I'm faster in InDesign than in Illustrator).  They were very clean on screen and print perfectly of course.

                                                         

                                                        The next lesson was to design the Web site (I was so busy doing that I couldn't get back to this discussion!).  I did my graphics in Fireworks of course.  :-)  I love Fireworks for that, but it'll need vector export quality before I use it for wireframes.  It's too bad really as it's clear the program does use vectors, so why not make it export them like that?

                                                         

                                                        Thanks for all the feedback on this!

                                                         

                                                        Phyllis

                                                        • 25. Re: Wireframing and PDF Resolution
                                                          ChrisBean Level 1

                                                          Hi Phylis

                                                           

                                                          I use Illustrator CS4 or CS5, as it has easy pagination control.  I can create my own symbol libraries (very handy when wanting to show some element of brand). I created a basic sketch look symbol library first,  then I created symbol libraries of page templates per application type, then later creted lo-fidelity symbol libraries.  Takes a while to be honest, but worth it for purpose of presentation.

                                                           

                                                          I go though the page (screen) designs in illustrator, then when happy, I save as PDF.  Illustrator is poor at scripting, as it does not fit anywhere, so I open the PDF in Acrobat 9 Pro. I can use acrobat to put page to page links in, and hilite focus areas using Acrobats annotation.

                                                           

                                                          The only down side is that once you have put all the links in using Acrobat, you can't go in and change the PDF with illustrator later, and maintain the link information.  So it is not quick. Acrobat readers now offer Annotation to PDFs, so you can get feedback from the PDF - Though you can't pool the feedback automatically.

                                                           

                                                          As far as I can see there is no easy workable prototyping setup in adobes arsenal. Fireworks works well to a degree, and it's mix of bitmap and vector is good for web site/web application design, but is poor at creating prototypes that can offer feedback via Annotation.

                                                           

                                                          Indesign CS4 and 5 offer some interaction control for PDFs, I have not tested this one yet. It is still by default a program for Print design, so the Interaction element is always going to be basic.

                                                           

                                                          You can create PDFs using Adobe Bridge, you can create PDFs from alot of Adobe files, do you could keep each page as it's own file, and use bridge to string the PDF together for you. You would have to use Acrobat again to add page to page links though.

                                                           

                                                          If budget is an issue, use balsamiq.

                                                          If you have a Mac or Ipad, look at omnigraffle.

                                                          • 26. Re: Wireframing and PDF Resolution
                                                            phyllisj9 Level 2

                                                            Thanks Chris,

                                                             

                                                            I appreciate your thoughtful replay.  Those are great ideas, and maybe I'll give Illustrator a try for this.

                                                             

                                                            ChrisBean wrote:


                                                             

                                                            The only down side is that once you have put all the links in using Acrobat, you can't go in and change the PDF with illustrator later, and maintain the link information.  So it is not quick.

                                                             

                                                            Actually, I think you can by using the "Replace Page" feature in Acrobat.  I've seen an article on that once before.  Will see if I can dig it up.

                                                             

                                                            Thanks, Phyllis

                                                            • 27. Re: Wireframing and PDF Resolution
                                                              phyllisj9 Level 2

                                                              Okay, not totally sure on links in Acrobat, but at least with bookmarks:  If you have a bunch of bookmarks set up and you want to use a different PDF, open the PDF with the bookmarks & then choose "Replace Pages" to call in the new PDF (it'll keep the bookmarks from the original PDF).  You could try it with links and see if it retained any of that or not....

                                                               

                                                              Hope that's a useful comment.

                                                               

                                                              Thanks, Phyllis

                                                              • 28. Re: Wireframing and PDF Resolution
                                                                phyllisj9 Level 2

                                                                To be more clear:  When you're ready to make changes, save a new copy of the PDF, make your changes in Illustrator, then open the old one and call in the new one with "Replace Page."

                                                                 

                                                                And I'm not 100% sure that's more clear.... ;-)