7 Replies Latest reply on Jun 19, 2008 3:35 AM by

    Transparent images help

    johngordon12 Level 1
      I'm just putting together a site that uses a background image. So am adding a title that I need to have a transparent background. I've used the Index transparency when exporting as a GIF - but it hasn't come out very well :

      link here

      Can anyone give me any pointers to tidy that up and get rid of the white jaggies around the text?

      Thanks.
        • 1. Re: Transparent images help
          Level 7
          Hi Ian,

          > I'm just putting together a site that uses a background image. So am
          > adding a
          > title that I need to have a transparent background. I've used the Index
          > transparency when exporting as a GIF - but it hasn't come out very well :

          Rather than exporting the title by itself with a transparent background,
          export it as a jpg WITH the background behind it, like so:
          http://mauiwebdesigns.com/logo_sunflower.jpg

          Aloha,

          Jerry



          • 2. Re: Transparent images help
            pbsue
            To set the canvas as transparent, use Alpha transparency.
            • 3. Re: Transparent images help
              pixlor Level 4
              Using a .gif, you still have to anti-alias the text to some color. That means that you're going to have a halo around your text, no matter what. If you know that that's where you want your .gif, go ahead and anti-alias against a light blue rectangle over a dark blue background (sky color). Then, fill the backgrounds with something you can mark as your transparent color.

              That, or change your design a bit to include more sky, don't overlay the text on the light area and anti-alias to a dark blue.
              • 4. Re: Transparent images help
                johngordon12 Level 1
                That kind of makes sense - with the idea to use the space in the top right as a permanent box for contact info, it'll work better if the main body is aligned with that one at the top.

                I'm a bit unsure of exactly what you mean when you talk about the blue rectangles - where do they come into it exactly? I thought the idea was that everything but the text was transparent.
                • 5. Re: Transparent images help
                  thegendreamer
                  No you have to restructure the design from the beginning for transparency. I think
                  • 6. Re: Transparent images help
                    pixlor Level 4
                    quote:

                    Originally posted by: Iain71
                    That kind of makes sense - with the idea to use the space in the top right as a permanent box for contact info, it'll work better if the main body is aligned with that one at the top.

                    I'm a bit unsure of exactly what you mean when you talk about the blue rectangles - where do they come into it exactly? I thought the idea was that everything but the text was transparent.


                    Ah. I meant, you could possibly do something like this: http://i183.photobucket.com/albums/x123/pixlor/Fireworks/Sunflower-exp.png (where I've faked a bunch of stuff). You'd set your logo on dark and light blue backgrounds in place of the dark sky and faded sky. Before export, flood-fill the background colors with something that isn't otherwise in the image (pink?) and use that for the index transparency color. Then, the resulting transparent .gif set over the background blends nicely. Of course, it's tricky to get the vertical alignment just right.

                    With the design you have, just anti-alias your logo text against a light blue that appears to be a good match for the overall background color.
                    • 7. Re: Transparent images help
                      this link proved very much beneficial for me http://mauiwebdesigns.com/logo_sunflower.jpg