10 Replies Latest reply on Oct 3, 2009 4:41 PM by Jim_Babbage

    Navigation Menu

    A. Wayne Webb

      Ahh, the good old days when you could design your navigation bar in Photoshop with all your rollover and down images and then pop over to Image Ready and really get to work!  A much simpler, and inherently easier, method of accomplishing a task!!!

       

      I have designed my graphic in Photoshop CS4 with all my over and down layers.  It also has all the slices I need.  Is there some tutorial online for taking this image and applying states to it in Firepuke?  I don't want no stinkin' protopuking, I can do that very well in Photoshop thank you very much.

       

      I just want to take my navigation bar and create my HTML so I can plug it in to my Dreamweaver design.  And of course Adobe's Classroom in a Book does not have a chapter showing how to take a navigation bar created in Photoshop and create HTML from it.  Fireworks treats Photoshop as a "picture" supplier only.

       

      The image in question can be viewed here and thank you in advance for any assistance.

       

      I do not want to use Fireworks as the basis for my design because the layer and filter options within Fireworks are very limiting.  The results look amateurish and atrocious compared to the smoothness of the available filters in Photoshop. I can also use filters created by others in Photoshop.  You cannot do so in Fireworks.  Why use subsets of the tools already available in Photoshop?

       

      I would love to chat with the imbecilic person at Adobe who thought a Photoshop to Fireworks workflow was better than one utilizing Photoshop to Image Ready.  Prototyping in Photoshop results in more aesthetically pleasing creations.  Talk about trying to reinvent the wheel.  The results in Fireworks are more akin to an octagon-shaped Fred Flintstone wheel styled by Hanna-Barbera.

       

      Heaven forbid if you create something in Photoshop, port it over to Fireworks and then try to reopen the same PSD file in Photoshop.  So much for program interactivity.

       

      P.S.  And in case you have not noticed the PNG files created in Fireworks are, comparatively, bloated in size compared to those exported by Photoshop.  Test it yourself!  Can I at least have back my Ctrl+F4 key stroke combination?  The days of Ctrl+W went the way of the Dodo bird.  The use of the Control and W keys is for writing a file, not closing a file.

       

      P.S.S.  Sorry for the assualt on the senses for those who enjoy Fireworks. <grin>

        • 1. Re: Navigation Menu
          pixlor Level 4

          A. Wayne Webb wrote:

           

          P.S.  And in case you have not noticed the PNG files created in Fireworks are, comparatively, bloated in size compared to those exported by Photoshop.  Test it yourself!  Can I at least have back my Ctrl+F4 key stroke combination?  The days of Ctrl+W went the way of the Dodo bird.  The use of the Control and W keys is for writing a file, not closing a file.

           

           

          The native Fireworks document is an expanded .png file, containing extra information in the header that is specific to Fireworks. This is explicitly allowed by the PNG specification, although it does tend to cause some confusion. To produce .png images for the Web, you want to export, not save. The save operation results in the Fireworks document, which would be analogous to a .psd for Photoshop. The export operation produces a .png file without the additional Fireworks-specific information. You can also use File > Image Preview to choose from the 32-bit .png (full color plus full transparency), 24-bit png (full color, no transparency), or 8-bit .png (an indexed palette that can include transparency, something Photoshop cannot produce).

           

           

           

          P.S.S.  Sorry for the assualt on the senses for those who enjoy Fireworks. <grin>

           

          Uh huh.

          • 2. Re: Navigation Menu
            A. Wayne Webb Level 1

            Thank you for the explanation of the limitations in this aspect.  Yes, the PNG file format permits for the possibility of inclusion of ancilliary information.  Things such as metadata, EXIF, IPTC are to be expected to increase the file size.  But since in the case of creating buttons and the like needless information should come into play is a mystery.  This does not explain why.  Why Adobe would want to add information to a format should be the real question.

             

            Since I have saved the same file from Photoshop and from Fireworks as a PNG file, sans any additional information, the size of this file should equate to a similarly sized file.  Not a file that is three to four times the size!  Catch my drift?

             

            Can you help with a simple explanation as to how to take my Photoshop generated navigation bar, port it over to Fireworks and get my series of rollover and down images?  Adobe's Classroom in a Book spends 95% of the time talking about Photoshop exercises and techniques and Prototyping.  The remaining 5% is spent working with Acrobat.  Just a simple rollover created based on a Photoshop image is what I want from within Fireworks!

             

            Does this program want to be Dreamweaver?  If I want Spry Data Tables and hotspots then I will use Dreamweaver!  Does it want to be Photoshop!  If I want masking techniques or to be able to create paths I will use Photoshop!  Does it want to be Illustrator?  If I want vector graphics or symbols I will use Illustrator.  It is trying to be everything and failing to be even moderately good at any of them.

             

            Adobe has again bought a product from someone else, tried to merge it into their product line with a semblance of interactivity between it and the suite of products AND in the process eliminated the good features of the original program.  But as we all have come to recognize Adobe will eventually shut down another purchased software title.  Just AFTER we have become accustomed to using it!

             

            Fireworks was Macromedia's image editing software that also by happenstance created their web graphics.  Thus we have the Photoshop-like image editing techniques.  Since we have Photoshop we do not need these in Fireworks.  Or should I get rid of Photoshop?

             

            I never heard any complaining about Image Ready!  Just give me a simple way to slice and dice my Photoshop and Illustrator creations?

            • 3. Re: Navigation Menu
              pixlor Level 4

              Since I have saved the same file from Photoshop and from Fireworks as a PNG file, sans any additional information, the size of this file should equate to a similarly sized file.  Not a file that is three to four times the size!  Catch my drift?

              If you save from Fireworks, you will get Fireworks-specific information as header data. If you want a .png image for a Web page, you need to export. Some people make a habit of distinguishing their Fireworks documents by naming them .fw.png and their exported Web images with the standard .png. I find that is a helpful habit.

               

              Fireworks was Macromedia's image editing software that also by happenstance created their web graphics.  Thus we have the Photoshop-like image editing techniques.  Since we have Photoshop we do not need these in Fireworks.  Or should I get rid of Photoshop?

              No. Fireworks was never intended as a basic image editing application. It was never intended to compete with Photoshop, Photoshop Elements, Paint Shop Pro, or any application along those lines. Its Web focus was not "happenstance" Fireworks was always a Web graphics production tool. It was always in a niche by itself, geared specifically for Web page layout design and the production of Web graphics. It is a hybrid program, combining functionality of a vector drawing program and a bitmap editing program, which makes it an efficient single tool to use. As an extension of Fireworks' Web focus, it has Web coding export for prototyping purposes.

               

              Can you help with a simple explanation as to how to take my Photoshop generated navigation bar, port it over to Fireworks and get my series of rollover and down images?

              If you have images ready and you now need code, you would probably be better off going straight to Dreamweaver and building the navigation bar there. It sounds like you are thoroughly comfortable with that program. That would be the best option at this point.

               

              • 4. Re: Navigation Menu
                A. Wayne Webb Level 1

                Afternoon and thanks for the reply.  I am starting to get over my frustration after venting it via the written word. <grin>

                 

                Yes I am thoroughly accustomed to using Photoshop to Image Ready to GoLive / Dreamweaver for my creations.  I am not accustomed to using or plugging Fireworks into the mix.  And the frustration stems from there being no clear cut answer to the one overriding question.  Unfortunately because of my design a simple "create a PNG file" will not suffice.  It is a complex design which was child's play in Image Ready.

                 

                I have my PSD file with the dozen or so normal, rollover and down images as layers.  All my slices are in place.  Now just how do I get Fireworks to create my navigation bar from this file?.  Or at least direct me to an online tutorial showing the workflow based on a Photoshop image.  Such a web link would definitely make it to my Internet Bookmarks.

                 

                David Hogue's Using pages, states, and layers in Fireworks CS4 assumes that you are prototyping.  I don't need pages, I don't need symbols and I definitly don't need to prototype.  I will once again go back and read his article.  Perhaps a cooling off period is in order to better understand the complexities of it and adapt it to encompass a Photoshop image.  Does this sound like re-inventing the wheel?  Sure does!  Step aside Fred Flintstone!

                 

                Your response as to the PNG format and Fireworks explains a lot.  A simple, concise explanation it was!  In essence Macromedia took the PNG file format and adapted it to suit their needs.  Which is permissable under the guidelines as long as the specifications are reported back to the ISO committee.  This is akin to Adobe's usurping of portions of the orginal TIF specification long ago and adapting it to create the PSD file format for proprietary purposes therein inherent.

                 

                Best regards.

                 

                P.S.  Just on the off chance I am going to fire up the old computer that has Image Ready on it.  Hopefully Image Ready CS2 will not notice that the PSD file was created in Photoshop CS4.  A hybrid approach to achieve a goal.

                • 5. Re: Navigation Menu
                  pixlor Level 4

                   

                  I have my PSD file with the dozen or so normal, rollover and down images as layers.  All my slices are in place.  Now just how do I get Fireworks to create my navigation bar from this file?.  Or at least direct me to an online tutorial showing the workflow based on a Photoshop image.  Such a web link would definitely make it to my Internet Bookmarks.

                  Do not, at this point, use Fireworks as an intermediary. Export your images from Photoshop, open Dreamweaver, and use Dreamweaver's functionality to build your navigation bar. The code will be more robust.

                   

                  http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WScbb6b82af5544594822510a94ae8d65-7c17a .html

                  or

                  http://www.google.com/search?hl=en&q=create+a+navigation+bar+in+dreamweaver+cs4&btnG=Searc h&aq=f&oq=&aqi=

                  • 6. Re: Navigation Menu
                    A. Wayne Webb Level 1

                    Once again thank you for the response.  I will review both links this evening after my normal job and likely add them to my library of links.

                     

                    I did find an even better solution.  As stated, I still have Image Ready CS2 installed on an older, outdated computer.  I was able to open my custom made Photoshop CS4 navigation bar in Image Ready CS2.  Seeing as it was a PSD file I knew this should be no problem.  What took me longer to describe via my frustrating postings took me all of 15 minutes to accomplish using Image Ready.  The time was required was for renaming the default named slices into the names for each button.

                     

                    And as you were so astute in stating, or alluded to, the code and graphics created by Image Ready were more robust.  By using the Output Settings > Slice option and setting the Slice Output to "Generate CSS" I created exactly what was needed.  Remember, the use of tables is frowned upon in modern uses.

                     

                    Someone REALLY needs to create an online tutorial demonstrating the steps necessary to take a custom made Photoshop CS4 navigation bar and convert it to a Fireworks series of graphics and HTML for inclusion into Dreamweaver.  This needs to be hosted at Adobe in the Fireworks links.  Nothing long-winded, just something in a Step A, Step B, Step C, etc. workflow.  There are many who do not desire, or need, to make a construct using a Spry Menu Bar.  This is fine for a menu, but limiting when you use custom made graphics.

                     

                    Better yet!  Since Image Ready was so simple in its operation how about posting Image Ready as a quick and dirty download at Adobe.  Include it in the purchased Fireworks CS4!  It is a small program on one's computer so program size is not an issue.  As I said, what took me hours to describe took mere minutes to accomplish in Image Ready.

                     

                    Are you listening Adobe?

                    • 7. Re: Navigation Menu
                      pixlor Level 4

                      And as you were so astute in stating, or alluded to, the code and graphics created by Image Ready were more robust. 

                       

                      Don't misquote me or put words in my mouth. I made no comment whatsoever, express or implied, on the quality of code produced by ImageReady.

                      • 8. Re: Navigation Menu
                        Jim_Babbage Level 4

                        As for differences in how the file looks, change the Maintain

                        Editability setting to Maintain Photoshop Layer appearance. You'll

                        retain the layers but flatten the effects. This will give you pretty

                        much an identical look. And you always have the original Photoshop

                        file to go back to if you want to tweak the layer styles.

                         

                        Putting all your "states" into PS layers is where the real problem is,

                        I think. I realize you don't have much of an alternative when created

                        this type of thing in PS. The two applications are not the same; they

                        have different workflows.

                         

                        Ideally build out the states in Fireworks, rather than having them as

                        hidden layers in PS. I realize you're not happy with Fireworks base

                        Live Filters, but when you open the PSD in FW using Maintain

                        Editability, it should maintain your existing layer styles as PS Live

                        FIlters. If you choose the Photoshop Layer Appearance, your effects

                        will be an exact match because they're flattened into the object.

                         

                          As an aside, there are MANY third part filters which work with

                        Fireworks.

                         

                        Fireworks has a feature called button symbols which give you the

                        opportunity to create up to four states for each button.

                         

                        In your case though another option might be easier. You can

                        distribute some of your layers to states.

                         

                        Typically the order of button states is Up, Over, Down and Over While

                        down. So your layer states are not in the correct order for a quick

                        distribution, but it's not undoable. Will it take some time and a

                        little bit of dancing? Yes. But if you're up for it I'll be happy to

                        detail the process for you, if you are interested in learning.

                         

                        If you read my book, Fireworks CS4 Classroom in a Book, I'm sorry it didn't give you the answer to your specific problem;

                        but no book answers every question. There are a limited number of

                        pages for a given book and decisions have to be made about what to

                        include and what to exclude. But, I'm happy to help here if you like,

                        as are many other talented people.

                         

                        BTW, you can add your own images to the FW Patterns folder - or point

                        FW to a supplemental Patterns folder via the preferences panel. That

                        might help you make use of some of the textures and patterns you've been using in

                        Photoshop.

                         

                        HTH

                         

                         

                        Jim Babbage

                        • 9. Re: Navigation Menu
                          A. Wayne Webb Level 1

                          Jim,

                           

                          Thank you for the response.  Both you and Pixlor hit the nail on the head, the workflow of Fireworks is foreign to me.  However, I do wish to express my thanks to the two of you for your assistance.  As for the Classroom in a Book for Fireworks this is the first time that a book of that series was not able to walk me through a problem.  I often keep one in the Throne Room (the bathroom) and several on my coffee table and nightstand.  They are my modern version of the Sears / Roebuck catalog.

                           

                          If a person was not accustomed, and comfortable with, a Photoshop to Image Ready to Dreamweaver digital workflow I feel assured that Fireworks would fulfill everyone's needs.  Hopefully the next iteration of the program will better accomodate the available power of Photoshop and it's layers and filters.  Or at least better than at present.

                           

                          The majority of my frustration was my unfamiliarity with the program.  That being said a tutorial based explicity on converting a Photoshop navigation bar creation to a Fireworks to HTML construct would have handled everything I needed.  This online Adobe tutorial is a needed feature.  Perhaps you could convince them to create one. <grin>

                           

                          My final result can be viewed here and I am more than satisfied with the creation.  I was able to take my Photoshop image and open it with Image Ready CS2 and create the basis for everything I needed.  The HTML file as created by Image Ready was cumbersome, and more attuned to GoLive, but with a little imagination and CSS finesse I was able to get it down to only six lines of code.  The accompanying CSS file is complex but gets the job done.

                          • 10. Re: Navigation Menu
                            Jim_Babbage Level 4

                            I'm glad you got it sorted out. Keep using Fireworks and as you become 

                            accustomed to its workflow, your frustration level should decrease. 

                            It's not  that the workflow is difficult, it's just different from 

                            what you are used to.

                             

                            Jim Babbage