2 Replies Latest reply on Dec 1, 2009 10:51 AM by pixlor

    Slicing Fireworks image to create a website?


      I have created a large image and will like to slice it to make a website. How can I best do this??


      I tried to slice it but the text on the image did not appear well on the internet browser. I now want to remove the text from the original image, slice it, and be able to insert the text over the image on dreamweaver so that the text can be sharp and clear on the browser.


      How can I best do this??


      The attached png, jpg and html files.

        • 1. Re: Slicing Fireworks image to create a website?
          Joyce J. Evans Erb

          With all due respect - don't. If you are a beginner then  the easiest way would be to use tables. Te layout should be done in dreaweaver.


          Very broad overview of process:


          1. Insert a table for the header/banner (in DW)

          2. In FW use your banner graphic as the background image (turn view of text off in Layers panel). Right click on graphic and "Add rectangle slice", optimize and export.

          3. Turn text back on (Name) and turn view off for header. Repeat slice and optimize.

          4. In DW either add a row or a new table for the navigation (a whole topic on it's own)

          5. New table with 3 columns for News area. Again export background graphics and insert into table cells


          If your are totally lost then as LAST resort and NOT recommended is to export your Fireworks layout as HTML and Images.


          If you use all images for your site it will load slow and any text can't be read by a search engine. But an image can be used as a backgriund then you can type on top in Dreamweaver.


          Hope this helps some.


          Joyce J.Evans

          • 2. Re: Slicing Fireworks image to create a website?
            pixlor Level 4

            Just as a matter of curiosity, how are the news fields and other variable content going to be added? This looks like it's intended to be the front end of a data-driven system. If that's the case, then you will need to take accommodate that in the code.


            But I agree with Joyce. Your design is extremely complex. The various rounded corners you have on your different elements are tricky and you'd save yourself quite a few headaches if you go with standard rectangles. This is especially true as it looks as if you will have changing content.


            However, here's a tutorial on slicing that you might find helps you understand how to approach slicing a Web design:



            Good luck!