9 Replies Latest reply on Aug 30, 2009 2:57 PM by heathrowe

    cant get rid of myText logo background

    oftalmos

      Hi everyone.....ok im going to explain what Im traying to do...

       

      Im trying to design a web site using dreamweaver CS3, im creating the fonts and words of the title of the web site with the text tool in fireworks with some effects, then Im saving the file as jpg or gif, but when I import the image to dreamweaver the title that I design appears with a white background that  is not present on the original fireworks file...¿Does anyone know how to save the words created with the text tool in fireworks and make the background color dissapear or make it invisible so I can see only the text and no the background of the text in dreamweaver?...

       

       

      Thanks...

        • 1. Re: cant get rid of myText logo background
          heathrowe Most Valuable Participant

          Set the CANVAS to Transparent.

           

          Then Export using either .gif/png8, or png32 With Transparency from the Optimize Panel setting.

           

          h

          • 2. Re: cant get rid of myText logo background
            oftalmos Level 1

            Thanks for the answer....

             

            ¿What is the difference between Alpha transparency and index transparency?

             

            By the way I cant see the option of transparency using png32 ¿Do you know why?

             

            Thanks again...

            • 3. Re: cant get rid of myText logo background
              heathrowe Most Valuable Participant

              Sorry for the little confusion, I'll rephrase it this way

               

              Set the CANVAS to Transparent.

               

              Then Export using either .gif/png8 (With Transparency), or png32 (with matching Matte Color to your web page) from the Optimize Panel setting.

               

              As for the difference between Index/Alpha Transparency, have a look at this thread here, particularly the visual representation provided by David Powers. He gives a nice summary/visual representation of the two.

               

              h

              • 4. Re: cant get rid of myText logo background
                Therese Sherman

                Dear Heathrowe,

                Thanks for the answer to this puzzling question.  I have a stack of library books knee high that I have been poring over these last weeks and not one author addressed the issue yet I've now seen multiple posts on other lists about it.  I tried your solution and exported a Fireworks generated button symbol as a PNG32 optimized graphic with a matte background selected.  However when it arrived in Dreamweaver 8 it changed the formatting of the page so that it is no longer whysiwig.  It opened okay in a browser.  I tried it again in a brand new doc with no CSS.  I only set a background image in my page properties then opened a new layer to insert the button symbol and this time not only did I lose my bg image in my Dreamweaver format but also in the browser.  You seem to know a lot about this so I would appreciate any advice you can give me.

                signed,

                desperately trying to learn the weaver.

                • 5. Re: cant get rid of myText logo background
                  heathrowe Most Valuable Participant

                  Therese Sherman wrote:

                   

                  Dear Heathrowe,

                  Thanks for the answer to this puzzling question.  I have a stack of library books knee high that I have been poring over these last weeks and not one author addressed the issue yet I've now seen multiple posts on other lists about it.  I tried your solution and exported a Fireworks generated button symbol as a PNG32 optimized graphic with a matte background selected.  However when it arrived in Dreamweaver 8 it changed the formatting of the page so that it is no longer whysiwig.  It opened okay in a browser.  I tried it again in a brand new doc with no CSS.  I only set a background image in my page properties then opened a new layer to insert the button symbol and this time not only did I lose my bg image in my Dreamweaver format but also in the browser.  You seem to know a lot about this so I would appreciate any advice you can give me.

                  signed,

                  desperately trying to learn the weaver.

                   

                  I am not sure if I am undeerstanding your workflow here?

                   

                  To export a symbol button graphic (from Fw) as described in your case, you apply a Slice to the Symbol, set your Optimized options from Window > Optimized, then Ctrl/Command click on the sliced symbol to export only that item. Export it to a subfolder under you Dw site (such as images). Is this how you did it?

                   

                  In Dw, inserting a new image control, then setting the src to the  above Fw .png graphic, should not affect the background properties of your overall page. I am not sure how it's formatting your page in this case?

                   

                  If your Fw exported graphic (slice) is set with a Matte Color then that Matte color should only appear around the 'bounds' of the graphic. This again should have no impact on the pages background properties.

                   

                  The general idea of using a Matte color is to simply eliminate 'fringe' halo colors that often appear when your graphic shape is non-square and you have Fw Canvas transparency set. The Matte color should be as close a color as possible to what lies directly under it (the page) so as to create a seemless blend (No Halos).

                   

                  I am not sure if this helps.

                   

                  h

                  • 6. Re: cant get rid of myText logo background
                    Therese Sherman Level 1

                    Dear Heathrowe,

                     

                    My workflow has been.  Design graphic in FW.  The canvas I use is

                    transparent and just larger than the graphic.  I choose Modify:Convert to

                    Symbol:Button.  I open the Button editor and complete the button.  It is

                    already sliced.  I optimized it as a PNG32 (I have tried Giff with and

                    without alpha and index transparencies--neither worked) as you said then

                    chose Export with these parameters:

                     

                    Export HTML and Images

                     

                    Export HTML File

                     

                    Export Slices

                     

                    Checked

                     

                     

                     

                    OMG.  I stopped this note to check parameters and exported about a dozen

                    different ways again with results varying from no functionality in a browser

                    for the button to functionality but with the gray matte showing and finally

                    found the winning combination!  I think I should publish a book.  FYI: it

                    went like this:

                     

                    Construct the graphic on a small canvas just big enough for the button.

                    Modify> Symbol> Convert to Symbol> Button

                     

                    Open Button editor, edit four button states

                     

                    Optimizes as PNG32

                     

                    File>Export

                     

                    Select:

                     

                    Export: HTML and Images

                     

                    HTML: Export HTML file

                     

                    Slices: Export Slices

                     

                          +Selected Slices only

                     

                          +Put images in Subfolder

                     

                    Select OPTIONS on dialog page

                     

                    GENERAL TAB

                     

                    HTML Style: Dreamweaver XHTML 

                     

                    Extension: htm

                     

                          +lower case file name

                     

                          +Use CSS for pop up

                     

                          +write CSS to external file (oh..Does that mean I have a bunch of

                    external files now?  Whoops.)

                     

                    TABLE TAB

                     

                    Space with:

                     

                          +nested table, no spacer -OR

                     

                          +1 pixel transparent spacer

                     

                    Empty table cells

                     

                          +Use canvas color

                     

                    Contents

                     

                          +none

                     

                    DOCUMENT SPECIFIC TAB

                     

                    I just kept all the defaults.  I could list them if you like.

                     

                     

                     

                    Anyway, The PNG graphic allowed me to do what I wanted which was have a

                    transparent box around my rounded rectangle button which used the web page's

                    background, a rectangular gray box gradient as the background.  I didn't

                    want to go with Matte color on the Optimize panel of FW because of the

                    gradient. 

                     

                     

                     

                    When I opened it in Dreamweaver 8 I did this:

                     

                    In Layout View I clicked on Draw Layer icon

                     

                    Drew a layer

                     

                    Chose Insert>Image Object: Fireworks HTML and

                     

                    Browsed to the HTML file for the button graphic.

                     

                    Inserted it. Saved the page and opened in OPERA and IT WORKED!!!!

                     

                    THANK YOU So MUCH Heathrowe.  You don't know how long I've been wrestling

                    with this thing.

                     

                    Do you think it would be okay to publish my results on the Adobe forum to

                    help other frustrated web designers?

                     

                    Therese Sherman

                    • 7. Re: cant get rid of myText logo background
                      heathrowe Most Valuable Participant

                      Your welcome, but you desrve the credit for going the extra mile and discovering the workflow.

                       

                      Though I would offer the suggestion that you can cut back on half that workflow this way

                       

                      - Once you have the Button Symbol created, Option/Right Click and choose Export Selected Slice

                        This will 'grab' your chosen Optimize preset option, and export 'just' the necessary graphic.

                      - Then in Dw, add an Img control and point to the previously saved Fw png.

                       

                      This way you can bypass the whole html/images Export and configuration settings, and bypass the Dw import Fw html option.

                      It's less work and less overhead.

                       

                      Good luck with the Dw learning

                       

                       

                      • 8. Re: cant get rid of myText logo background
                        Therese Sherman Level 1

                        Thanks H.  You're the best.