Transparent Background Question

THE TOUCH

Yet another question!

I'm trying to do a logo in PS with a transparent background. Everything looks great until I flatten the layers and my transparent background goes to solid white. How do I prevent this? Using PSE4.0

Thanks!

Andy

Try "Merge Visible" and be sure you're working in a file that has a tranny bg to begin with.

THE TOUCH

Andy wrote:

Try "Merge Visible" and be sure you're working in a file that has a tranny bg to begin with.

Still no worky

I start with a new "blank file...", set the background to transparent, add text, add a line, merge or flatten, and everything looks good until I save it as a jpg. The original work stays transparent, but the jpg. has a white background.

Am I missing something stupid?

Andy

THE TOUCH wrote:

Still no worky

I start with a new "blank file...", set the background to transparent, add text, add a line, merge or flatten, and everything looks good until I save it as a jpg. The original work stays transparent, but the jpg. has a white background.

Am I missing something stupid?

You need to save for web as a Transparent png-24 file, not a jpg. JPG can't be transparent.

THE TOUCH

Awwww....Got It!

Thanks Andy!

Andy wrote:

You need to save for web as a Transparent png-24 file, not a jpg. JPG can't be transparent.

silica

You can also save it as a transparent gif file. It, like png, will allow the transparent background.

dancorder

GIF vs PNG
For what it's worth, PNGs allow varying amounts of transparency while GIFs only allow 100% solid or transparent. So if you wanted your logo to fade gradually into the picture PNG would be better.

Andy

silica wrote:

You can also save it as a transparent gif file. It, like png, will allow the transparent background.

But it will likely have artifacts I'm interested to see tranny gifs that look good, show them if you've made one I'm very interested

THE TOUCH

Andy wrote:

But it will likely have artifacts I'm interested to see tranny gifs that look good, show them if you've made one I'm very interested

sure thing.

Thanks all for your help!

Sam

I guess I don't understand the question, but I just went to PS and added text with a transparent background, flattened the image and saved as a jpg without a hitch?

I started with a psd file, created a new image with a trnsparent backdround, and typed in sample text. Then I dragged the text into the image file. I then had 2 layers. I flattened the image and saved it as a jpg. The text remained without the appearence of any white background.

Sam

Andy

Sam wrote:

I guess I don't understand the question, but I just went to PS and added text with a transparent background, flattened the image and saved as a jpg without a hitch?

I started with a psd file, created a new image with a trnsparent backdround, and typed in sample text. Then I dragged the text into the image file. I then had 2 layers. I flattened the image and saved it as a jpg. The text remained without the appearence of any white background.

Sam

A transparent png is used in web design, typically - when you want a file that will lay on top of a background. So, you use transparent bgs in photoshop, and you "merge visible," not flatten, and then save-for-web as a transparent png-24.

like this or this

JBurt

Sam wrote:

I guess I don't understand the question, but I just went to PS and added text with a transparent background, flattened the image and saved as a jpg without a hitch?

I started with a psd file, created a new image with a trnsparent backdround, and typed in sample text. Then I dragged the text into the image file. I then had 2 layers. I flattened the image and saved it as a jpg. The text remained without the appearence of any white background.

Sam

If you saved the logo as a .psd and then pasted it into the photo, it would retain the transparent background even if flattened. If you had saved the logo as a .jpg the logo background would have turned white. I always save logos as .psd (.psp in my case) so I don't lose any quality in compression. I also don't flatten the layers on the logo so I can alter the individual layers as needed.

When you save a photo as a .jpg, with the logo pasted in, it automatically flattens all the layers but the logo's transparent layer remains clear.

Clear as mud?

dbmagnus

Okay, I created a logo in Adobe Illustrator. I opened in Photoshop and saved with transparent background as a png24. When I view the logo in Adobe Bridge or even ACDSee it looks fine (it is supposed to say "dan magnus" in black text, with a white vertical line separating it from "photography" which is supposed to be white text). I went to upload it to Smugmug and it came out like this....

http://danmagnusphotography.smugmug.com/gallery/1263165/1/83800798/Small

I'm pretty sure I have it right in photoshop, so I don't know why it's uploading like this. Any ideas? Thanks.

Mike Lane

dbmagnus wrote:

Okay, I created a logo in Adobe Illustrator. I opened in Photoshop and saved with transparent background as a png24. When I view the logo in Adobe Bridge or even ACDSee it looks fine (it is supposed to say "dan magnus" in black text, with a white vertical line separating it from "photography" which is supposed to be white text). I went to upload it to Smugmug and it came out like this....

http://danmagnusphotography.smugmug.com/gallery/1263165/1/83800798/Small

I'm pretty sure I have it right in photoshop, so I don't know why it's uploading like this. Any ideas? Thanks.

Check out the original size:

http://danmagnusphotography.smugmug.com/photos/83800798-O.png

Looks exactly like you want it.

mike_flood

Sam wrote:

I guess I don't understand the question, but I just went to PS and added text with a transparent background, flattened the image and saved as a jpg without a hitch?

I started with a psd file, created a new image with a trnsparent backdround, and typed in sample text. Then I dragged the text into the image file. I then had 2 layers. I flattened the image and saved it as a jpg. The text remained without the appearence of any white background.

Sam

I suspect that if you pasted the text over another image that the image
replaced the area that would have been white. As I understand the goal it was to have the text on a trasparent background, not laid on another image. I wasn't aware of the advantages of using PNG format. I'd have used the .gif method too. .GIF has a 256 color limitation which loses some detail in some instances.

mike_flood

Andy wrote:

A transparent png is used in web design, typically - when you want a file that will lay on top of a background. So, you use transparent bgs in photoshop, and you "merge visible," not flatten, and then save-for-web as a transparent png-24.

like this or this

I'm seeing a white background on both logos. Is it my browser?

StevenV

mike_flood wrote:

I'm seeing a white background on both logos. Is it my browser?

could be - what are you using (browser & OS)? Firefox on Mac here, and they're transparent as can be.

Mike Lane

You won't see the transparency in Internet Explorer version 6 or earlier. It takes some proprietary (and annoying) microsoft CSS code to get the alpha transparency of pngs to show up in IE6.