3 Replies Latest reply on Apr 27, 2009 10:35 AM by pixlor

    Convert png to slices in FW or Photoshop?

      Hello, wondering if someone could help: I did a few designs in Fireworks that a friend now wants to use as a website. I'd like to know the best way to convert my PNG files into a web page.

       

      At present, my files do not have layers, but am I right in thinking that I could put the elements into layers and then somehow slice them up to form a web page? Or do I have to get my PNG into Photoshop and slice from there (but will there be a layer issue?)...

       

      Not sure how to proceed and don't want to lose all my work! Any help is greatly appreciated - thanks!

        • 1. Re: Convert png to slices in FW or Photoshop?
          pixlor Level 4

          I use layers to keep the objects organized and also to make it easier to show and hide bunches of objects to simplify my view of them. For example, I'll often make a layer for the header area, the content area, and the footer area, and maybe others if things get messy. Layers are nice from that perspective.

           

          When you go to export your images, though, whether or not the objects are on different layers doesn't change the result.

           

          Since you have your document in Fireworks, and Fireworks is great for creating Web images, I recommend you go ahead and learn to slice your design in Fireworks.

           

          If you have the rulers and guides set to view (View > Rulers and View > Guides > Show Guides + View > Guides > Snap to Guides) you can click in the rulers and drag a guide line into your document. If you double-click on a guide line, you can set its position exactly. Set up guidelines along logical places in your design.

           

          Once you have your guidelines, select the Slice tool (the green rectangle). With Snap to Guides turned on, you can easily drag your slice positions with respect to your guides. As you draw each slice, a slice object appears in the Web layer. Give each object a unique, descriptive name (without spaces); this will be the name of the exported file. In the Properties palette, set the file format for that slice (.gif, .jpg, etc.).

           

          Fireworks can write an HTML page from a sliced design. This code, however, is tightly locked to the shape of the design and it will usually break if you try to do anything with it. It is better to export only the images and build the Web page in a text editor or Web design tool (such as Dreamweaver).

          • 2. Re: Convert png to slices in FW or Photoshop?
            Level 1

            Thanks very much for your help. I've been playing around with this and it's all working great!

            • 3. Re: Convert png to slices in FW or Photoshop?
              pixlor Level 4

              It's exactly what FW was designed to do, so it's pretty good at it.

               

              The whole "creating a Web page" part gets more involved, though. Nadia-P has been linking to an article that may be helpful:

              http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html