Quick Question - Transparent background?

[SPStakem]

Hey guys. I am trying to create a banner for my website. I need to create a file with my logo on it but with a transparent background. Everytime I try I end up with a solid color background. I am using Photoshop 7...anyone have any ideas?? Thanks!

[Supermanny]

If you plan to use it for web, I believe you need to save the image in a format that supports transparency like GIF. JPEG does not. And I think that PNG does not support it on Internet Explorer.

[OTRphoto]

Move the bar to change the opacity of your background layer until it goes all grey-white checkerboard

I can't remember which way - but it's either 0 or 100% lol

And then save it as a gif

[SPStakem]

Thanks, I will give it a try.

One other question if anyone knows..

When you type in HTML and you use color codes like 00000 for black and 000FFF for a different color and so on...is there a code for a transparent color/background?

[SPStakem]

The .gif worked on fixing the background! Thanks guys...

Still another problem though...

It is giving the lettering an extremly harsh border around it...all I did was type the words and turn it to silver color but now it has a harsh while outline when I load it to the website as the banner...

here is the link:

www.SPSphotos.com

Any ideas?

[Supermanny]

Originally Posted by SPStakem

When you type in HTML and you use color codes like 00000 for black and 000FFF for a different color and so on...is there a code for a transparent color/background?

I don't think so. x0 is black. xffffff is white, and there is everything in between but no transparent color. But you can arbitrarily designate any color of those hex values to be the transparent. If that makes sense.

[OTRphoto]

welcome to the world of gifs....

I'm having the same-ish issue with the logo I'm trying to design for mine (see here)

Mine doesn't have the white glow.. but you loose alot of detail with the gif's.. and so it's making the edges of my fon't real scratchy...

Hopefully one of the gurus out here will have an idea... (other than changing to jpg)

[SPStakem]

Yea that makes sense but if you look at the background I am using it is hard because the background kind of changes from a black on top to silver in the middle and below.

[SPStakem]

I hope so Mel! :)

[Supermanny]

Originally Posted by SPStakem

Still another problem though...

It is giving the lettering an extremly harsh border around it...all I did was type the words and turn it to silver color but now it has a harsh while outline when I load it to the website as the banner...

Any ideas?

I guess it's having trouble showing a smooth gradient between the border the and transparency. Like if I'm telling you something you didn't know :)

My advice, use the background color of your website as the bg color of your image in your graphic software to make the logo and save it as jpeg. You will just have to edit your logo if you change your website bg.

my $0.02

[rott]

Originally Posted by mjae69

Hopefully one of the gurus out here will have an idea... (other than changing to jpg)

Guru here...

Without getting into all the boring technical details, PNG is a vastly superior image format to JPG and GIF. PNG is a lossless format (better than JPG) and supports alpha transparency (better than GIF). Alpha transparency will give you a "soft fade" into the transparent background, rather than the "hard stop" GIF gives you.

You can, in fact, use png format with Internet Exploder version 6. It's a hack, but it works. Read on...

My quick and dirty:

1. Grab this file: link (right-click, save as)
2. put it on your webserver somewhere (remember where!)
3. add the following to your stylesheet:

   * {
   	behavior: url('/wherever/you/put/the/file/iepngfix.htc');
   	}

Source: http://www.twinhelix.com/css/iepngfix/

PNGs work already in Safari, Firefox, and IE7+. It's IE6 and lower you got to do this for. So, you could get even fancier and only include that stylesheet entry for IE6, but I leave that as an exercise for the reader.

[rott]

Oh. smugmug. Ummmm, I *think* you can edit your own stylesheet, right? Looks like you can, from what I see on the page source. Don't know about uploading that .htc file I linked.

If not, then I would probably take a screen capture (ctrl-printscreen on Windows), paste it (ctrl-v) into a new image in Photoshop, and line up your text layer with where it will land on the background (which is often difficult to figure out, but can be easy with Firefox with some FF developer tools), crop, save, upload, and voila. If you need me to, I can whip up an example for you.

[Concisus Cognatus]

I'm no PS guru but I would try having the banner and lettering as 2 different layers, then, save as a gif. This might work.

[OTRphoto]

I'll have to try the PNG thing. My doc is actually about 6 layers.. So I don't think that would help.. but thanks for the suggestion.

Mel

[rott]

There you go. Stick a new text layer on it, save it as gif, jpg, or png, and boom.