15 Replies Latest reply on Oct 24, 2008 8:03 PM by Deaf Web Designer

    An old web designer who's confused...

    johnson_jclub
      Hi all,

      I'm a long-time web and graphic designer, having started when Flash was in version 2 and Dreamweaver wasn't even thought possible. Pixel spacers and nested tables were (and actually, still are!) my basic method of site build.

      Now that I've installed CS4, my world's a bit upside-down... no more ImageReady, and everything is CSS based. I know CSS is now a necessity (I understand the text styling side of it)... but as for layouts...

      Can someone confirm this process for me? I believe now things go:

      1. design website in Photoshop, present to client as single image
      2. take design into Fireworks and create slices (as per ImageReady) and ALSO set up CSS
      3. take HTML file and... do something with it in Dreamweaver.

      So what is Dreamweaver used for now? Can Fireworks be used to CSS code the entire site? At what point in the process do you set up the overall site structure (traditionally I just work with single pages)?

      This is one of the toughest transitions I've gone through in my career. I suppose I want to get the basics right before I throw myself into the tutorials.

      Many thanks!
        • 1. Re: An old web designer who's confused...
          Level 7
          johnson_jclub wrote:

          > Can someone confirm this process for me? I believe now things go:
          >
          > 1. design website in Photoshop, present to client as single image
          > 2. take design into Fireworks and create slices (as per ImageReady) and ALSO
          > set up CSS
          > 3. take HTML file and... do something with it in Dreamweaver.

          Actually, it's

          1. Design site in Fireworks :-)
          2. Create interactive prototype for client in Fireworks
          3. Slice and dice, export images to site properly defined in Dreamweaver
          4. Build HTML pages in Dreamweaver

          --
          Linda Rathgeber - Adobe Community Expert
          http://www.adobe.com/communities/experts/members/8.html
          --------------------------------------------------------------
          • 3. Re: An old web designer who's confused...
            johnson_jclub Level 1
            Good to know! So all slicing and optimising is done in Fireworks now, plus the assignment of layers?

            I'm trying to get my head around something like www.ai2.com.au (my own site). If I want to convert that to full CSS, how do I define the background images (the ones that are currently table backgrounds)? Is CSS basically just a series of overlapping layers, each defined by the Z index?

            (Apologies if this is the wrong forum... realised I'm going a bit off-topic!)
            • 4. Re: An old web designer who's confused...
              Level 7
              johnson_jclub wrote:
              > Good to know! So all slicing and optimising is done in Fireworks now, plus the
              > assignment of layers?
              >
              > I'm trying to get my head around something like www.ai2.com.au (my own site).
              > If I want to convert that to full CSS, how do I define the background images
              > (the ones that are currently table backgrounds)? Is CSS basically just a
              > series of overlapping layers, each defined by the Z index?
              >
              > (Apologies if this is the wrong forum... realised I'm going a bit off-topic!)

              I think the Dreamweaver forum is the right place to go.

              --
              Linda Rathgeber - Adobe Community Expert
              http://www.adobe.com/communities/experts/members/8.html
              --------------------------------------------------------------
              • 5. Re: An old web designer who's confused...
                Level 7
                Check this -

                Taking a Fireworks comp to a CSS-based layout in Dreamweaver
                http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
                http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html


                --
                Murray --- ICQ 71997575
                Adobe Community Expert
                (If you *MUST* email me, don't LAUGH when you do so!)
                ==================
                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                ==================


                "johnson_jclub" <webforumsuser@macromedia.com> wrote in message
                news:gdousj$emj$1@forums.macromedia.com...
                > Good to know! So all slicing and optimising is done in Fireworks now,
                > plus the
                > assignment of layers?
                >
                > I'm trying to get my head around something like www.ai2.com.au (my own
                > site).
                > If I want to convert that to full CSS, how do I define the background
                > images
                > (the ones that are currently table backgrounds)? Is CSS basically just a
                > series of overlapping layers, each defined by the Z index?
                >
                > (Apologies if this is the wrong forum... realised I'm going a bit
                > off-topic!)
                >

                • 6. Re: An old web designer who's confused...
                  joeyscc
                  Actually here is a problem.... I always built the template visually in ImageReady, with layers of course, and sliced and saved as a PSD for future changes. So now ImageReady is gone and adobe is trying to push designers to use Fireworks... so what about the clients that need or want the Photoshop files for their own future changes because guaranteed, most have photoshop and not fireworks (which 75% or more of my clients fall into this category). I cannot give them a png template without layers. So this means I still have to use Photoshop as I am sure many designers have to as well. Or....

                  1. Use fireworks as my own template artwork when I create and sell templates for cms systems
                  2. For all clients, use Photoshop for them and not Fireworks

                  What Adobe should have done was taken "some" features of Fireworks and integrated them into ImageReady and kept it as a standalone application outside of Photoshop.
                  • 7. Re: An old web designer who's confused...
                    heathrowe Most Valuable Participant
                    I hear ya joey.
                    There was a time I was in your situation, regarding ImageReady.
                    There is an article for ImageReady features still in Photoshop here http://kb.adobe.com/selfservice/viewContent.do?externalId=kb400899 if you no longer have ImageReady on your machine.

                    I do what you mention, as well (1,2), except I now ask if the client has Fw, if so, that gives me the go-ahead to begin and end in Fw.

                    As for Fw to Ps and vise versa workflow, have you tried CS4? Fw has gone through great pains (over the past few versions) to accomodate .psd files (Import/Export) to steamline this workflow.

                    h
                    • 8. Re: An old web designer who's confused...
                      joeyscc Level 1
                      I am actually still on Studio 8 suite but I do have PS cs2 which still has ImageReady which I use right now. I am planning to upgrade to CS4 for the design suite. And as a side note: it's a shame adobe doesn't let a person "Build your own Suite" instead of being told I have to buy all this other stuff that I don't use ever. It would be cool to Build your own suite and each application you add, you save more. But that's what happens when a company buys out their competition (which I am not sure how they were allowed to do that in the first place).

                      Anyway, I have a feeling I am going to have to stay with Photoshop and try and get used to how certain IM functions are done in PS. For example: rounded corner marquee...easy in IM but multiple steps in PS. Why this wasn't part of PS's marquee sections, is beyond me, and it's something I use a lot actually.

                      I will admit to one thing though....Fireworks does create better png's for sake of those who use internet explorer to view websites. PNG's in Firefox are great but IE, nope!
                      • 9. Re: An old web designer who's confused...
                        Level 7
                        joeyscc wrote:
                        > Actually here is a problem.... I always built the template visually in
                        > ImageReady, with layers of course, and sliced and saved as a PSD for future
                        > changes. So now ImageReady is gone and adobe is trying to push designers to use
                        > Fireworks... so what about the clients that need or want the Photoshop files
                        > for their own future changes because guaranteed, most have photoshop and not
                        > fireworks (which 75% or more of my clients fall into this category). I cannot
                        > give them a png template without layers. So this means I still have to use
                        > Photoshop as I am sure many designers have to as well. Or....
                        >
                        > 1. Use fireworks as my own template artwork when I create and sell templates
                        > for cms systems
                        > 2. For all clients, use Photoshop for them and not Fireworks
                        >
                        > What Adobe should have done was taken "some" features of Fireworks and
                        > integrated them into ImageReady and kept it as a standalone application outside
                        > of Photoshop.
                        >

                        You can save the FW design as a PSD file and open it in Photoshop.

                        --
                        Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                        http://www.communityMX.com/
                        CommunityMX - Free Resources:
                        http://www.communitymx.com/free.cfm
                        ---
                        .:Adobe Community Expert for Fireworks:.
                        Adobe Community Expert
                        http://tinyurl.com/2a7dyp
                        ---
                        .:Author:.
                        Lynda.com - http://movielibrary.lynda.com/authors/author/?aid=188
                        Peachpit Press -
                        http://www.peachpit.com/authors/bio.aspx?a=d98ed798-5ef0-45a8-a70d-4b35fa14c9a4
                        Layers Magazine - http://www.layersmagazine.com/author/jim-babbage
                        • 10. Re: An old web designer who's confused...
                          joeyscc Level 1
                          I read somewhere yesterday online off the adobe site about saving in PSD but it has limitations and somethings are sacrificed. Trying to think what they were now and where I saw this...but think it was for the previous version. If the CS4 version now has this ability to save a "true" psd without "any" limitations and allowing others to open the file in their photoshop or ImageReady, then that is a good thing. So is this the case now with CS4 FW?
                          • 11. Re: An old web designer who's confused...
                            heathrowe Most Valuable Participant
                            Yes there are limitations and here that documentation
                            http://kb.adobe.com/selfservice/viewContent.do?externalId=kb405713

                            But the limits are certainly a lot shorter than what it use to be.
                            And in most cases, roundtripping (between them) is a mere simple correction (rather than a total rebuild).

                            One big exception (though not a limitation, if you use the right application for the job) is the color managed <> non-colormanaged workflow. Fw ONLY operates at 8-bit RGB, much the same way ImageReady did.

                            h
                            • 12. Re: An old web designer who's confused...
                              Level 7
                              joeyscc wrote:
                              > I read somewhere yesterday online off the adobe site about saving in PSD but it
                              > has limitations and somethings are sacrificed. Trying to think what they were
                              > now and where I saw this...but think it was for the previous version. If the
                              > CS4 version now has this ability to save a "true" psd without "any" limitations
                              > and allowing others to open the file in their photoshop or ImageReady, then
                              > that is a good thing. So is this the case now with CS4 FW?
                              >

                              Things are much improved in CS4, however - for example - symbols and
                              grouped objects will be flattened when you save as PSD - simply because
                              PS can't understand the assets. You would have to ungroup groups to keep
                              the elements editable, and break apart symbols. Likewise, PS has no
                              comparable feature to Pages, so you will need to export each page as a
                              separate PSD file.

                              Vector shapes, vector and bitmap masks, and text are all editible within
                              PS (CS3 and CS4). Certain vector fills and blend modes and some styles
                              will not transfer over to PS either, because the effect doesn't exist in PS.

                              Remember these two applications are not the same. If they were, there
                              wouldn't be a need for both, so certain things - at this point anyway -
                              just won't translate going from FW to PS. For what it's worth, IMO that
                              is a problem on the PS side, not FW. PS still cannot open an FW PNG file
                              without flattening the entire document. The FW engineers have worked
                              VERY hard to improve integration when importing PSD's into FW, however.
                              Many updates have been made to ensure that a PSD design opened in FW
                              looks much as it does in PS.

                              I have no idea how the file will be handled in IR.

                              HTH

                              --
                              Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                              http://www.communityMX.com/
                              CommunityMX - Free Resources:
                              http://www.communitymx.com/free.cfm
                              ---
                              .:Adobe Community Expert for Fireworks:.
                              Adobe Community Expert
                              http://tinyurl.com/2a7dyp
                              ---
                              .:Author:.
                              Lynda.com - http://movielibrary.lynda.com/authors/author/?aid=188
                              Peachpit Press -
                              http://www.peachpit.com/authors/bio.aspx?a=d98ed798-5ef0-45a8-a70d-4b35fa14c9a4
                              Layers Magazine - http://www.layersmagazine.com/author/jim-babbage
                              • 13. Re: An old web designer who's confused...
                                Level 7
                                joeyscc wrote:

                                > What Adobe should have done was taken "some" features of Fireworks and
                                > integrated them into ImageReady and kept it as a standalone application outside
                                > of Photoshop.

                                Naw. Fireworks is much more powerful than Image Ready, and it's already
                                a stand alone application. Take the time to learn it well and you will
                                be amply rewarded.

                                --
                                Linda Rathgeber - Adobe Community Expert
                                http://www.adobe.com/communities/experts/members/8.html
                                --------------------------------------------------------------
                                • 14. Re: An old web designer who's confused...
                                  Level 7
                                  Linda Rathgeber wrote:
                                  > joeyscc wrote:
                                  >
                                  >> What Adobe should have done was taken "some" features of Fireworks
                                  >> and integrated them into ImageReady and kept it as a standalone
                                  >> application outside of Photoshop.
                                  >
                                  > Naw. Fireworks is much more powerful than Image Ready, and it's already
                                  > a stand alone application. Take the time to learn it well and you will
                                  > be amply rewarded.
                                  >

                                  Agreed.

                                  --
                                  Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                                  http://www.communityMX.com/
                                  CommunityMX - Free Resources:
                                  http://www.communitymx.com/free.cfm
                                  ---
                                  .:Adobe Community Expert for Fireworks:.
                                  Adobe Community Expert
                                  http://tinyurl.com/2a7dyp
                                  ---
                                  .:Author:.
                                  Lynda.com - http://movielibrary.lynda.com/authors/author/?aid=188
                                  Peachpit Press -
                                  http://www.peachpit.com/authors/bio.aspx?a=d98ed798-5ef0-45a8-a70d-4b35fa14c9a4
                                  Layers Magazine - http://www.layersmagazine.com/author/jim-babbage
                                  • 15. Re: An old web designer who's confused...
                                    Level 1
                                    quote:

                                    Originally posted by: Newsgroup User
                                    joeyscc wrote:

                                    > What Adobe should have done was taken "some" features of Fireworks and
                                    > integrated them into ImageReady and kept it as a standalone application outside
                                    > of Photoshop.

                                    Naw. Fireworks is much more powerful than Image Ready, and it's already
                                    a stand alone application. Take the time to learn it well and you will
                                    be amply rewarded.

                                    --
                                    Linda Rathgeber - Adobe Community Expert
                                    http://www.adobe.com/communities/experts/members/8.html
                                    --------------------------------------------------------------



                                    Just as Jim agreed, I also agreed. To reinforce this, all you have to do give Fireworks CS4 a test drive. I believe it speaks for itself.