Skip navigation
Currently Being Moderated

Idiotic Basic Question - making a circle with transparent bg driving me nuts!

Mar 22, 2011 6:01 PM

OK, disclaimer - I have been using an old version of elements and just upgraded to Photoshop CS5 Extended.  All I want to do is:

 

1)  Create a circle for a logo.

2)  Add text and drop shadow.

3)  Make bg transparent.

 

 

Why am I getting the white line around the circle?  (The circle will be the logo.  Right now it is a 240 x 240 gif that is floated on top of the header using CSS).

 

Thanks,

 

Gary

 

circle.JPG

 
Replies
  • Currently Being Moderated
    Mar 22, 2011 6:19 PM   in reply to garynng

    In the shape tool's option bar, you're creating a SHAPE.  By default when you draw it, the shape outline will show.  You can toggle hide this by pressing CTRL + H (by default I think)

     

    If you just want to create a regular circle filled with pixel data, then change the shape tool to use Fill Pixels.  This won't have a shape outline on creation.

     
    |
    Mark as:
  • Noel Carboni
    23,523 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 22, 2011 7:36 PM   in reply to garynng

    Try this:

     

    • Make sure the Shape Layers button is pressed.

     

         ShapeLayersButton.jpg

     

    • Draw a circular vector shape using the Ellipse tool and the Shift key to constrain it to being circular.

     

    -Noel

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2011 9:04 AM   in reply to garynng

    I found your problem!

     

    You have to keep the image size at 100%!

    (Sorry, I'm German! )

    Unbenannt-2.jpg

    You can find this option at the bottom right of the "Save to web" dialog.

     

    I think that's because of the GIF format's lacking transparency. It doesn't provide semi-transparent pixels. If you resize your image, it tries to keep all information correct, but to do that it wants to create semi-transparent pixels. To be able to save the image all the same it mattes the pixels with white.

    Don't ask me why it's white or any other question. I don't know if it's true and I might have confused some terms whith the German ones but it's the most believable explanation I have!

     
    |
    Mark as:
  • Noel Carboni
    23,523 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 23, 2011 10:01 AM   in reply to garynng

    The problem is that GIF cannot do partial transparency, which is needed for smooth edges.

     

    If your intent is to put this on the web, try saving as a PNG-24 instead.

     

    I suspect this is what's been the problem all along.

     

    -Noel

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2011 2:56 PM   in reply to garynng

    In addition to Noel's advice, there is no need to rasterize the shape layer

    to change the color, just double click on the solid fill color to change the color

    of your circle. Also move your shape layer above the white layer and turn off the

    visibility or delete the white background layer before saving as a png-24.

     

    You might also try Image>Trim to crop the circle. Pick transparent pixels in

    Image>Trim dialog.

     

    Untitled-3.png

     

     

    Untitled-4.png

     

     

    Untitled-2.png

     

     

     

     

     

    MTSTUNER

     

    Message was edited by: MTSTUNER

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2011 3:12 PM   in reply to garynng

    Ah!  lol.  That's not a line at all.  You have what we call a "Poorly matted" graphic.  As previously indicated, because GIF can only support a single color being transparent, you'll have a very "jagged" edge.  This cannot be helped, because it's the limitation of the file format, and smooth edges actually employ very many color variations to be smooth.

     

    GIF supports 1 bit of transparency.  That's 1 single color.

     

    Try saving as PNG files.  They support 8 bits of transparency (2^8).  That's 256 different levels of transparency.  This will give your image a very sharp edge with no noticable matte.  But you seem new to PS, do you know how to create a PNG alpha channel?  This is what tells the file what areas of the image are see through and not.

     

    Also, be mindful if you are viewing these images in IE browsers.  Older models are notorious for not supporting PNG transparency without having to do tweaks here and there.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points