16 Replies Latest reply on Jul 16, 2009 3:38 PM by Dave Hogue

    CS4: Photoshop Mock-up to Fireworks Export Disaster

    james#bond_007

      I created a CS4 Photoshop mock-up website design.  It consist of 4 "div" containers, some text, nav, etc.  Please see image below.  I've been trying to bring into Adobe Fireworks CS4.  I slice up the logo, 3 thumbnails and background images as jpeg and the 2nd div container text, since it's a non-standard font not in Adobe Dreamweaver CS4 as gif.  I leave everything else alone.  Export the file with CSS in Fireworks.  Thereafter, I bring up Dreamweaver to look at the html code and external CSS generated from Fireworks.  However, much to my chagrin, I look at the results in Dreamweaver split view (code/design).  It just comes out as one big, un-editable image.  What am I doing wrong?

       

      jamesportfoliowithtransoverlay.gif

        • 1. Re: CS4: Photoshop Mock-up to Fireworks Export Disaster
          Jim_Babbage Level 4

          It would be very helpful to see the actual PNG or PSD file.

           

          Jim Babbage

          • 2. Re: CS4: Photoshop Mock-up to Fireworks Export Disaster
            james#bond_007 Level 1

            Jim,

             

            Attached is a copy of the psd file.  BTW, I'm a big van of your work.

            • 3. Re: CS4: Photoshop Mock-up to Fireworks Export Disaster
              james#bond_007 Level 1

              Attached is the original psd file.  BTW, I'm a big fan of your work.

              • 4. Re: CS4: Photoshop Mock-up to Fireworks Export Disaster
                Jim_Babbage Level 4

                Thank you for the compliment! :-) I've downloaded the file and will have a look at it this evening. Two questions: are you hoping/expecting to produce production ready code fromthe CSS export? and Have you installed the updated CSS and Images export script?

                • 5. Re: CS4: Photoshop Mock-up to Fireworks Export Disaster
                  james#bond_007 Level 1

                  Yes, I was hoping to produce production code from the export.  Not sure what you're asking for: "updated CSS and images"?

                  • 6. Re: CS4: Photoshop Mock-up to Fireworks Export Disaster
                    Jim_Babbage Level 4

                    OK I've got the ball rolling, but I want to caution you that FW may not be capable of reproducing this layout in a single export, because you have several overlapping graphic elements. I'll also point out I'm no CSS guru, so there may well be other CSS techniques which could be applied.

                     

                    At any rate, I opened your div layer and the first thing I noticed was all the divs were bitmaps, probably they were bitmap images in PS. FW does not recognize bitmap shapes as css divs. I don't thing FW recognizes PS shape layers as CSS div containers either. Also, a couple of the shapes were overlapping - another no-no for CSS export.

                     

                    So I rebuilt the divs as vector rectangles and added a wrapper div to contain things, and made sure none of the divs were overlapping each other. The export produced a CSS layout.

                     

                    As css divs, the opacity settings you added to those divs do not apply; you'd need to export out separate png 32 files, or add slices to the div areas. The latter options would require testing to ensure it works as expected.

                     

                    Exporting the layout in this manner at least produces a CSS-based layout. I did not worry about slicing the background image or setting the background images for the divs; I just wanted to see if I could get the general layout created.

                     

                    I've attached the modified PNG file, as well as the exported CSS and HTML.

                     

                    Hope this helps.

                    1 person found this helpful
                    • 8. Re: CS4: Photoshop Mock-up to Fireworks Export Disaster
                      Dave Hogue Level 2

                      I took a pass at your file, and made quite a few changes to the Fireworks PNG file created when opening the PSD in Fireworks.  Some of the changes:

                       

                      (1) The leading was adjusted on nearly every text object - for some reason the leading varied from 102% to 500% - this was totally screwing up the text layout, because FW exports the leading value as line-height in the CSS. I suspect you used leading in the PSD to adjust text position, but in FW you need to place text where you want it, not shift it around with large leading values.  You'll notice that all leading is now 100% for single lines of text and 120% for paragraphs.

                       

                      (2) I turned each sub-layer into it's own layer in the FW file - I'm not sure this was necessary, because I did it early on while working with your file to try and track down a CSS layout problem. I'm not sure of sub-layers can confused the CSS export feature or not... 

                       

                      (2) I re-drew the rectangles, because the PS rectangles were not exporting their borders.  I'm not sure why, but it may be due to the way strokes were created in PS originally - if they were separate objects from the rectangle fills, FW may not be able to connect them and understand that the stroke color needs to become a border color on the exported DIV in the CSS.

                       

                      (3) I added slices over the graphics in the page - one over the logo, and three over the thumbnails.  The logo slice optimizations were set for transparent GIF so that the background would appear to pass behind it, and the logo was put under a slice and exported as a graphic because you have a gradient fill in the text (it's not plain HTML text.) Note that I added ALT text in the property inspector for this slice, because text as graphics as not good for search engines.

                       

                      (4) nearly every object on the page was given a tag in the Property Inspector - look at the object names and you'll see <p> tags and <h2> tags and <div> tags and the slices and rectangles were all given names to help make them easier to find in the HTML and CSS.

                       

                      (5) the inky/smoky/swirly background was exported separately as one large bitmap image first (a PNG8 adaptive bitmap), then the visibility was turned off before exporting the CSS and HTML.  Note also that I combined all of your background images and layer effects into a single background layer.  Unfortunately this loses the highlights on your nav bar, but we cannot export DIVs with variable opacity anyway.

                       

                      (6) The opacity of all rectangles was set to 100% - there is poor CSS support for transparency, and FW cannot export DIVs with transparency, so each rectangle was given a solid fill and stroke - these become the background color and border color of the DIV in the CSS.

                       

                      (7) The footer rectangle was deleted and replaced with a single horizontal line above the text. The original rectangle around the footer text bumped up against the container DIV along the right, bottom, and left sides at the bottom of the page - this often confuses the CSS export algorithm and causeslayout problems. You can extend the length of the line, but I liked it aligned with the content area. 

                       

                      (8) All of the text objects were re-aligned using the Align panel to make sure they all have a consistent layout.

                       

                      (9) I added a block of text under "Tutorials" just to balance the layout and show how the text could export.

                       

                      (10) if you look really closely, you'll see black rectangles under the three content columns - these become invisible DIVs and are necessary to keep the text in the three columns properly left-aligned.  FW positions text and objects based on the actual pixel positions of the text and objects relative to other objects that precede them in the layout - remove those black rectangles (and only those three) and re-export the CSS, and you'll see right away how the layout of the three columns shifts.

                       

                      (11) There is a rectangle (the same size as the canvas) behind everything named "container" - this allows all of the content and objects on the page to be properly positioned and for the page to be centered in the browser window (when you export, go into Options from the Export dialog, and you can choose to position the page at the left of the browser or centered within it.)

                       

                      (12) Finally, after exporting the CSS I edited the CSS file and added the background image to the #container DIV (look for "background-image: url(images/background.png);" in the CSS file - that was not exported by FW.)

                       

                      I've attached the modified Fireworks PNG and the export HTML, CSS, and images it produced.  It's not quite the look you wanted, because we had to lose the transparency in the rectangles and some of the highlights.  Unfortunately FW's CSS export cannot do that for you - you'll have to edit the code and create more background images and transparent PNGs (and deal with IE6...) if you want your original design.

                       

                      Hope this help!

                       

                      Dave

                      1 person found this helpful
                      • 10. Re: CS4: Photoshop Mock-up to Fireworks Export Disaster
                        pixlor Level 4

                        Dave Hogue wrote:

                         

                        I took a pass at your file ...

                         

                        Wow.

                        • 11. Re: CS4: Photoshop Mock-up to Fireworks Export Disaster
                          Dave Hogue Level 2

                          Thanks!  I Hope this helps.


                          Dave

                          • 12. Re: CS4: Photoshop Mock-up to Fireworks Export Disaster
                            james#bond_007 Level 1

                            Thanks Jim,

                             

                            I have no idea why my images came in as bit maps in CS4 Fireworks.  They were jpg images in CS4 Photoshop.  Whoa!, thanks for the Fireworks FYI "does and don't" for clean CSS code generation in Fireworks.  I plan on keeping that list by my side as I compose new mock-ups in Photoshop.  Can div's touch?  Or is that considered overlapping?  I've tried to slice the div's with transparency.  It worked but the text was not editable.  The div became a jpg.

                             

                            I tried to just create a simple Photoshop website with a header, footer, main content and sidebar with text on top of the div's as a proof of concept like you did for Fireworks CSS export.  However, I stumbled with no love in creating clean CSS in Fireworks.  Your proof of concept methodology I plan on using in the future.

                             

                            Could you give me a recommendation on what to use for website mock-up designs?  I was trying to design in Photoshop for broader creativity.  But it may not be the best choice for integration with Fireworks to generate clean CSS if you have a complex design to save time.

                             

                            Thanks

                            • 13. Re: CS4: Photoshop Mock-up to Fireworks Export Disaster
                              james#bond_007 Level 1

                              Thanks Jim,

                               

                              This will help as I go forward with creating standards-compliant web designs.

                              • 14. Re: CS4: Photoshop Mock-up to Fireworks Export Disaster
                                Jim_Babbage Level 4

                                You're very welcome. Dave Hogue's breakdown of your file is much more 

                                detailed than mine, so have a good look at it as well.

                                 

                                As for web site design and prototyping and mock ups, I use Fireworks 

                                hands down, every time. If I have a particularly complex bitmap image 

                                to edit, I'll pull in Photoshop, but I do all my mocking up in FW.

                                 

                                After the prototype is done and approved, I will slice things up as 

                                necessary and generate the HTML and CSS using Dreamweaver.

                                 

                                Jim Babbage

                                • 15. Re: CS4: Photoshop Mock-up to Fireworks Export Disaster
                                  james#bond_007 Level 1

                                  Dave,

                                   

                                  You did a great job taking things to the next level using Fireworks.  You came very close to matching my PSD file -  Yahtzee!  In addition, thank you for your clear and easy to follow explination to changes you made.  I plan on adding it to my Photoshop to Fireworks to Export design crib sheet.

                                   

                                  The Html and CSS looks like it should not what I was getting.

                                   

                                  What would you recommend using a web design mock-up tool?

                                   

                                  Thanks again for all your help.  I learn a great deal about design and Fireworks.

                                   

                                  James

                                  • 16. Re: CS4: Photoshop Mock-up to Fireworks Export Disaster
                                    Dave Hogue Level 2

                                    James,

                                     

                                    One of the things that Jim pointed out is that Photoshop layers and effects do not map directly to Fireworks, so when you open a PSD in Fireworks, it tries to make sense of and translate anything it can to a Fireworks format. Anything that cannot be translated into an editable format will be flattened into a bitmap to maintain the appearance (but you lose the editability you had in PS.)  The Import PSD dialog provides you with some options to better control what gets flattened and what remains editable, but there are just some things that are too different between the programs, and the only way to handle it is to flatten them. (There are also a few cases, as I'm sure you will discover, where there ARE similar features between PS and FW, but they way they appear in the two programs is different, such as some layer effects. The Fireworks file will have something editable for you, but it might look slightly different than it did in the original PSD. Often you can tweak it and make it look like it did originally, but if you can't do that, that flatten it in the PS before you import the PSD, that way you can control the appearance.)

                                     

                                    What would I recommend as a web design mock-up tool? Fireworks, of course!

                                     

                                    Fireworks is my central tool for all of my web design work - from wireframes to prototypes to visual design to preliminary CSS and HTML code.  I do use other tools, depending on my needs.  I'll (rarely) open Photoshop if I need to manipulate photos or create graphics that either require tools (like brushes) or effects that are not available in Fireworks or if I need a file that can be used for both print and web.  I use Illustrator for vector drawings and illustrations that need to be printed (e.g., site architecture diagrams and workflows.)  I use Dreamweaver for HTML and CSS. I sometimes use Flash, but I'm not very good at it, so all I ever get are simple animations... And I use InDesign for documentation.  If I were break down the time I spend in these tools, it's probably 65% Fireworks, 15% Dreamweaver, 7% InDesign,7% Illustrator, 5% Flash, and 1% Photoshop.

                                     

                                    Dave