5 Replies Latest reply on Apr 13, 2012 4:24 PM by Noel Carboni

    Making a web logo w/transparent background

    mixapix Level 1

      I'm designing a header logo for a website with Photoshop CS4 (Mac) but am struggling to understand how to get the background transparent.

       

      In Photoshop I've designed the logo using multiple layers. Prior to saving I've disabled the background layers (used for testing purposes), thus leaving a transparent area behind the logo (shown as a checkerboard pattern). However, I don't understand what the next step is.

      I've tried "Save for web" as well as flattening it first, only to result in a white background. I suppose I don't need to flatten it then

      I've also messed around with the transparency and matte options in the "Save for web" window but to no avail (yes, I know that I need to save in either GIF or PNG though for the latter I don't know the difference between PNG 8 and 24 and which of the three formats I should go for).

       

      As for "Matte"; is this the color in the image which should be made transparent? So that in my case with a logo containing white among several colors I should make the background something entirely different from the logo as a background layer and choose "Matte" for that? I've also experimented with that but to no avail.

       

      Can someone please set me straight?

        • 1. Re: Making a web logo w/transparent background
          Trevor.Dennis Adobe Community Professional

          You are right about using GIF or PNG, but you need to delete the background layer so that you can see the transparent chequer board around your logo before saving.  PNG is probably your best choice.

          • 2. Re: Making a web logo w/transparent background
            Noel Carboni Level 8

            By the way, you probably want to save in the sRGB color space, and you should keep in mind that File - Save As - PNG embeds a color profile in your PNG while Save For Web does not.

             

            You want a PNG-24, which gives you 16 million colors as well as 256 levels of transparency.

             

            Not exactly a logo, but have a glance at this to see what's possible:  http://Noel.ProDigitalSoftware.com/temp/TransparencyTest/TransparencyTest2.html

             

            -Noel

            • 3. Re: Making a web logo w/transparent background
              Trevor.Dennis Adobe Community Professional

              Noel is the leopard inside the sphere?  I initially thought it on the outside and wondered why it was not sphereised before deciding it must be a glass ball, and that if you gave  it a shake, it would be snowing inside the ball.

              • 4. Re: Making a web logo w/transparent background
                mixapix Level 1

                That's strange.... this time around it worked just fine without flattening or any special settings (I just enabled "transparency" and left Matte to "None" by default) when doing "Save to web"! What's "Matte" for anyway? The tooltip says that it's used for blending the transparent pixels against the background, but maybe that's more for semi-transparent pixels?

                Perhaps it working had something to do with me installing the latest Photoshop upgrade patch a few moments ago prior to trying it again. In any case I got it working.

                 

                Noel: I didn't know that it didn't save the sRGB profile in "Save for web" -so what's the difference between "Convert to sRGB" and embedding the sRGB profile in the image? I guess I really didn't need to check "Convert to sRGB" as I created the image with the sRGB profile to begin with.

                Oh, and converting the image from 300 DPI down to 72 DPI is also a very good idea

                • 5. Re: Making a web logo w/transparent background
                  Noel Carboni Level 8

                  Trevor, that's a photo of a spherical puzzle.

                   

                  If you create the image in the sRGB profile, you're right - you need do no conversion, mixapix.

                   

                  The pixels/inch value doesn't matter for web images.  But you'll notice that the image in my web page above is actually downsized so that it doesn't break down if you zoom your browser (more likely on something like an iPad).  Just food for thought.

                   

                  -Noel