Photoshop - corners and drop shadow's help

[Ollie]

So I made this right:

http://www.redhearted.co.uk/images/redhearted-home-page_01.gif

And this:

http://home.thirdage.com/Computing/oliherst/What-is-GS-button.gif

If you put them on any background other than white, you get a white outline around the corners on the first image or a really bad looking drop show as per the second image. Any tips on how to fix this?

I'm new to photoshop and I'm sure that there is a really simple solution, I just can't work it out. Thanks in advance for any help.

[Letty]

I'd suggest making the background transparent?

Owing to the fact my copy of photoshop is so old, it doesnt have that option, so I have no idea how to do it, but maybe if you google it?

sorry thats all I could help

[Ollie]

Even with a transparent background I have the same problem, the only way around it that I can think of, is to make the background that I am designing the image on the same colour as the background it is going to be used on, although that solution isn't ideal.

[Mike_C]

Its your dropshadow, you can try just creating a grey duplicate behind to act like a shadow...but if you really hate the outline.... you can try saving as .png

[Ollie]

I think maybe I'm not explaining myself very well. I understand what you are saying about the drop shadow thing, although I haven't had a chance to play with that yet, here I have illustrated my problem:

http://www.redhearted.co.uk/test/redhearted-home-page.html

As you can see the corners are white. I can't remember exaclty now but I might have made it on a white back ground and then 'trimmed' the transparent pixels afterwards, although I can't remember....

Thanks again for any help!

[Shino]

Can't you just erase those white parts? Or at least change it to black? (maybe I'm not seeing it right). As for the button, how did you save it? I think you have to go to File > Save as Web and then when you choose gif toggle the transperancy check.

[Ollie]

I might just doing it wrong in fact, I probably am, I know this sounds dumb, but any tips on the eraser tool, it just won't delete those white bits.

[Smalldude76]

The layer has to be transparent from the start. If your button or whatever is on the same layer as the white, it will erase the button too. So theoretically using a transparent GIF image on a webpage would reveal the page's background where the white currently is.

In the image you have above it looks like you went around it with the eraser.

[Shorty]

From what I can tell the problem is just that you're trying to use semi-transparency in a .gif, which can only handle solid colours or no colour at all. That is, you can't have a faded grey colour which, when put on top of a red layer, will come out red/grey. The only way to achieve semi-transparency online is with .png files, which aren't supported by all browsers anyway.

I would suggest either opening your corner gifs and going round with the selection tool, deleting the white sections, or remaking the corner images with a black background instead of a transparent background.

Most buttons that have drop shadows do not then have transparent backgrounds, rather, they have a background the colour of the page's background.

To give you an example (not the best one) here is the gamespy logo from the left of IGN's homepage

http://videomedia.ign.com/video/image/item/317/3177333/gamespy_kmj_20040422.gif

It looks transparent, but actually it has a solid white background because that was the page background colour.

[Ollie]

I am at work at the moment, I will upload the psd file or my website later as I don't think I am explaining myself very well, then hopefully you guys will see what I mean. I'm not so bothered about the button, I'm pretty sure I understand whats wrong with it and how to fix it now, but the corners on the website are p*ssing me off.

EDIT - Shorty - Ah I see what you mean about the corners, the selection tool idea will probably work now that I think about it. The back ground that I actually want to use is a bit like the revo-background, as in its not a solid colour which is why I want to get rid of the white all together, I just used black for that example. I'll try that when I get home and see what happens :)