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).
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.
I still get that slight white edge so let me walk thru this and show you what I am doing and maybe you can tell me what I am doing wrong.
1. I create a blank template and then add a new transparent layer. I move that layer to the bottom.
2. I use the Eclipse tool and draw a circle. After that I want to color it so I use the paint bucket tool and it gives me this message.
3. I clicked OK and then use the paint bucket to color. The image on the screen is the full untouched white and the circle with the color is on the transparent background.
4. I deselect the white background and save to web.
5. I load this graphic into DW and there is still a white edge. I know this is probably really easy but I need help! Thanks in advance, Gary.
I found your problem!
You have to keep the image size at 100%!
(Sorry, I'm German! )
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!
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.
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
Message was edited by: MTSTUNER
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.
You guys are awesome! I am very new to Pshop and have used an old version of elements for all of my websites. (see http://www.sonomatouristguide.com for a sample of my work). But I have decided to go to school to learn DW as I have basically hacked at it. In my web class we have to create graphics and the other students have all taken Pshop classes so I am behind the curve. Next semester, I guess (but dammit, I'm OLD and impatient!)
I'm going to play around with this but my newest solution is to not float the gif at all but to go more traditional and put the logo into a stationary header. But one last question - Can I use Pshop to make the logo into an animated gif and have it "grow" from a dot to the 250 pixels? Not sure if that is actually professional or gimmicky, but just curious. In the old days I had some shareware to make animated gifs but that is long lost...