11 Replies Latest reply on Jul 24, 2009 8:52 AM by Sean McVey

    Exporting Text out of Fireworks on top of BG image

    Sean McVey

      In Fireworks I have a black background with text content on top of it.  I would like to export both so that the bg comes into dreamweaver as a background image and the text comes in as editable text.  Right now when I slice the bg it automatically includes the text in the image.  How do I export text that is on top of an image?

        • 1. Re: Exporting Text out of Fireworks on top of BG image
          Panos Zygopoulos Level 3

          One option is to draw your document like it is shown in the picture.

           

          image2.jpg

           

          Draw a rectangle to use it as the background area. Write your text on top of it and then draw a slice at the edge of your rectangle as is in the picture. Set the slice as background image and choose repeat, from the properties panel and inside the slice area draw any image that you want to be repeated as a background through the rectangle. This is helpful if you want to repeat a background image.

           

          If you want to place another image as a background, at the exporting options > general - document properties select a background image.

          1 person found this helpful
          • 2. Re: Exporting Text out of Fireworks on top of BG image
            Jim_Babbage Level 4

            Don't slice the rectangle, and choose to Export as CSS and Images.

             

            It would be worth your while to read this article:

             

            http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html

             

             

            Jim Babbage

            • 3. Re: Exporting Text out of Fireworks on top of BG image
              Sean McVey Level 1

              Hey thanks for your quick responses guys.  For some reason the background image will not repeat in dreamweaver even though I selected the repeat option.  I can get it to repeat if I browse for the image under options for export.  However, I don't want that image to be the entire background, just for one part.  Therefore I don't think the repeat option is going to work anyway.

               

              Maybe the best way to describe my problem is for you to check out the site I have up now: www.bradsrawchips.com.  This version was built in photoshop and then I saved for web and devices as HTML and Images.  As you can see the whole site is images.  Now I am going back and re-working the site in Fireworks (which I just got) so that the text is real and not images.  The background on the current site is blue.  I would like to keep it that way.  The problem is the black background behind the content of the site.  Because the blue is the page background, I can't set the background in dreamweaver as black.  I figure that I need to set it as a background image.  But when I do that the text is no longer editable.  The obvious solution is to use the repeat method but this is not working for two reaons:

              1. Like I said it isn't reapeating in Dreamweaver but instead just showing up as the sliced image

              2. If it repeats forever the blue background will no longer be visible.

               

              Sorry if I am explaining this poorly and thank you so much for your help.  I understand if you don't want to help anymore but any advice would be amazing.  Thanks!

              • 4. Re: Exporting Text out of Fireworks on top of BG image
                jenniferjorman1

                Jim,

                Thanks for that article that you posted.  I have been working on a new website and that was really helpful!  By the way, I am to the forum and have already learned so much from you all.  Hopefully I will have something to contribute soon!

                 

                Jennifer

                http://practicebuildingcenter.com

                • 5. Re: Exporting Text out of Fireworks on top of BG image
                  Jim_Babbage Level 4

                  You're welcome Jen (and Sean). Matt did a great job of reworking the original export script and I highly recommend installing his update (and the new symbols).

                   

                  That said, please understand the Fireworks is a graphics application first and foremost. It won't give you the kind of control over HTML and CSS that applications like Dreamweaver - or hand coding - will. If your design is complex enough, Fireworks may not be able to export it accurately without reverting to a complete AP layout, which is not desirable.

                  • 6. Re: Exporting Text out of Fireworks on top of BG image
                    Jim_Babbage Level 4

                    Sean, it would be helpful if you could share your PNG file with us.

                    • 7. Re: Exporting Text out of Fireworks on top of BG image
                      Sean McVey Level 1

                      Jim,

                       

                      The PNG and PSD files are here: http://drop.io/yrkddzb#

                       

                      For some reason when you open the PNG in Fireworks it is screwy; the layers have moved around for some reason.  If you open the PSD in Fireworks though it looks fine.

                      • 8. Re: Exporting Text out of Fireworks on top of BG image
                        Jim_Babbage Level 4

                        So you started in Photoshop? Good to know. I wasn't sure if you had 

                        rebuilt the design from scratch or not. What version of Fireworks are 

                        you using?

                         

                        Exporting this from Fireworks may not be a simple one-step process. 

                        I'll have to look at the file and see what I can come up with.

                         

                        Is there a reason you aren't building the web page itself in 

                        Dreamweaver?

                         

                        Jim Babbage

                        • 9. Re: Exporting Text out of Fireworks on top of BG image
                          Sean McVey Level 1

                          The reason I started in Photoshop is because I am working off of a template.  The template company (templatesbox.com) gives you psd files and you are supposed to alter it the way you want, slice it up, and put it into dreamweaver.  I started using Fireworks (CS4) because it seems like the easiest way to make the psd's editable in Dreamweaver (automatic div's and whatnot).  Unfortunately, the template company's tutorials are outdated an do not deal with Fireworks (http://www.templatesbox.com/tutorials/index.htm).

                           

                          I originally sliced it up in photoshop and saved as html and images.  But like I said, I am trying to find the easiest way to get text into dreamweaver so that I don't have to reformat all of the content.

                           

                          Thanks again for your help and support.  Really appreciate it.

                          • 10. Re: Exporting Text out of Fireworks on top of BG image
                            Panos Zygopoulos Level 3

                            I forgot earlier to say that you must finally export as CSS and Images.

                             

                            I'll try to give some simple advice while trying to export css from Fireworks CS4.

                             

                            You can apply the blue background, by simply adding it from the CSS and Images export options. You should not draw it in your document(, it doesn't matter at all).

                            Draw Rectangles all over your document to finally export them as div tags.

                            When you need to apply a background, think of what exactly you want your background to be, solid color, or a picture?

                            If it's going to be a picture, you must place that picture and insert a slice to it, set as background.

                            If you want color, you don't put a slice. You just ...draw a rectangle. Write some text over the rectangle, and you can export it as CSS.

                            A slice is used to export images. Otherwise, you just draw rectangles to export the current color as a value in your exported CSS.

                            The black background color of your document, can be set as a color value inside your exported css, so you don't have to place a slice for that.

                             

                            image4.jpg

                             

                            Watch not to overlap objects like images, rectangles and slices. It is going to be hard to achieve an excellent result in order to construct your web site with Fireworks while trying to export CSS.

                            Jim has already said it Fireworks won't help you that much with coding like hand coding or Dreamweaver will.

                            1 person found this helpful
                            • 11. Re: Exporting Text out of Fireworks on top of BG image
                              Sean McVey Level 1

                              Thank you for your informative answer.  It has given me a better idea of how complex this situation is.  I think, like you guys said, the best thing to do would be to export the images as div tags and do the rest (text content) in dreamweaver.