5 Replies Latest reply on Sep 26, 2010 6:46 PM by cromartie1974

    How to add a button to background image in Fireworks

    cromartie1974

      Hello!
      I created  recently a clickable button with a rollover effect. I made it iin FW  CS5 as a symbol and exported. So I have now .html file and 2 images  files (2 states of my button). The button itself works fine on a live  site. Now, I want to learn a technique to be able to put that button  with the effect and the link in it on an image (it would be like a  background for the button).

      Thanks in advance!

        • 1. Re: How to add a button to background image in Fireworks
          Linda Nicholls Level 4

          Add the background image to your Fireworks document and export again.

          • 2. Re: How to add a button to background image in Fireworks
            cromartie1974 Level 1

            And how exactly I do that?

            I tried to open the image and then I dragged the button onto it and then I exported. But all I got was either an image with a dead button or a good working button without almost anything.

            • 3. Re: How to add a button to background image in Fireworks
              cromartie1974 Level 1

              I finally succeeded, sort of...I dragged the button on to a .jpg image and then I SAVED the document as FW .png file and then I reopened it and then exported. And it works fine in a browser, BUT...now I have a whole bunch of small images (slices probably). And I don't need them. When I try to export the file without slices, then nothing works again. I just want to have a file as a as piece, so I can upload it to the server and use it in Joomla articles.

               

              P.S. I tried to upload all the slices to the server, but in Joomla they're not together as one piece, looks like a mozaic of few separate images. Though rollover button with a small piece of bg image works fine.

              • 4. Re: How to add a button to background image in Fireworks
                pixlor Level 4

                Two things.

                 

                First, when you save from Fireworks, you get a Fireworks document .png, complete with layers, vector objects, and all the other various complex definitions Fireworks can support. Fireworks is the only program that can interpret this information. Any other program (such as a browser) can display what the document looks like, but it's probably much larger than it needs to be for the Web. For Web use, you want to export an image (.gif, .jpg, or one of the bitmap .png variations). Be careful when you export an image to a bitmap .png format that you do not use the same name as your master FW document and overwrite your FW document.

                 

                Second, DW is not a layout program. In order to create HTML files, you probably ought to learn a bit about HTML. I recommend you work through one or both of these tutorials:

                http://articles.sitepoint.com/article/html-css-beginners-guide

                http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-i n-easy-to-understand-steps/

                An HTML file defines blocks of content. The blocks can be stacked or can contain other blocks. The basic html file contains two blocks: the head section and the body section. The only thing in the head section that shows is the page title in the browser's address bar. Also, JavaScript code is often put in the head section. The body section contains all the visible content of your page. Within the body section, you add blocks of content that are HTML elements.

                 

                Content blocks can have properties., One of the properties is a background image. If you want to have a page background, then you need to create an image, export it from Fireworks, and then set it as the background for the body section of the page. That image is then behind all the content blocks you define within the body section: buttons, paragraphs, other images, tables, anything. Most of these other elements can also have background images defined, too.

                 

                Fireworks produces images that are defined by what's visible as well as any active slices (such as those created by buttons). When you exported your background image with a button, Fireworks gave you an HTML table (one of the many kind of content blocks) because the button defined slice regions. Fireworks can't "know" that you really wanted a background image and then the HTML to put a button in a certain location on a page. It created the images you defined (but not what you wanted).

                • 5. Re: How to add a button to background image in Fireworks
                  cromartie1974 Level 1

                  It seems to be OK now...I just had to use Custom HTMLmodule and not incorporating the image comp into an article. Though in Safari and IE8 I have a strange small dot about an inch above the image, but in Firefox it doesn't show.