Small Photoshop Question

[Sublime 2]

I like to just mess around with Photoshop and HTML in my free time, but I'm having a 'problem' combining the two. See, I want to keep the transparent background I have for a lot of my pictures on Photoshop when I put them into the HTML. I've tried saving as a JPEG, GIF, and BMP...there are a lot more options, but I don't feel like testing each one. So if anyone could help me, that'd be great. It's certainly not life or death, but I figure this is as good a place as any to ask.

[Godzilla Blitz]

I'm not sure I can get you all the way there, but I might be able to get you started on the path...

The answer depends a bit on what you're starting with, I think...

If you've got a complex photo with oodles of colors, then you'd want to save as a JPEG. It's usually easiest to change the transparent sections of any complex photo to the background color of the webpage you want it to match to, as I don't think you can save transparency with a JPEG file. You do this by setting the "matte" color of your photo to your webpage background color when you open up the "Save for Web" window in Photoshop.

GIF files are better for low complexity clip art and such. I'm guessing that is not where you are coming from because you probably wouldn't have run into the problem you've got if you were working with GIF files to start with. GIF files can have transparent backgrounds, but you'll lose quality if you save a complex photo as a GIF file.

Another option is a PNG file, which has transparency built in as well. However, Microsoft has never fixed the problem with Internet Explorer 6 that screws up the transparency display issue with PNG files, so I wouldn't recommend that route, as so many people still use that browser.

[Router Help]

GB is correct. PNG and GIF support transparency while JPEG does not. PNG is the superior format, but IE 5.5 and 6 have issues with 24 bit transparent images so for maximum compatibility you probably want GIF.

[Sublime 2]

Originally Posted by Godzilla Blitz

I'm not sure I can get you all the way there, but I might be able to get you started on the path...

The answer depends a bit on what you're starting with, I think...

If you've got a complex photo with oodles of colors, then you'd want to save as a JPEG. It's usually easiest to change the transparent sections of any complex photo to the background color of the webpage you want it to match to, as I don't think you can save transparency with a JPEG file. You do this by setting the "matte" color of your photo to your webpage background color when you open up the "Save for Web" window in Photoshop.

GIF files are better for low complexity clip art and such. I'm guessing that is not where you are coming from because you probably wouldn't have run into the problem you've got if you were working with GIF files to start with. GIF files can have transparent backgrounds, but you'll lose quality if you save a complex photo as a GIF file.

Another option is a PNG file, which has transparency built in as well. However, Microsoft has never fixed the problem with Internet Explorer 6 that screws up the transparency display issue with PNG files, so I wouldn't recommend that route, as so many people still use that browser.

The problem with changing the transparent section to match the background color is that the background on the site isn't a color, it's a background image (a tiled Red Sox logo).

And like you said the problem with GIF file is I lose a lot of my quality. It's not a very colorful/complex picture, it's just some text with a glow, but I still lose the glow.

Thanks for the feedback.

[Sublime 2]

dola

Just to show you the image, I threw up an old page and added the background and picture. This is JPEG format, and I don't really mind it in this case, but I have always wondered about saving w/ transparency.

hxxp://cs-people.bu.edu/jprovost

lol ignore the BC/BU table, this was for my CS101 class, we were just doing some basics. The 'problem pic' is the Title, if i use a GIF i lose the glow, which i like. In this case I just made the picture larger enough to cover where the Sox Logo's would be.

[Zippo]

Originally Posted by Sublime 2

dola

Just to show you the image, I threw up an old page and added the background and picture. This is JPEG format, and I don't really mind it in this case, but I have always wondered about saving w/ transparency.

hxxp://cs-people.bu.edu/jprovost

lol ignore the BC/BU table, this was for my CS101 class, we were just doing some basics. The 'problem pic' is the Title, if i use a GIF i lose the glow, which i like. In this case I just made the picture larger enough to cover where the Sox Logo's would be.

http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

The link above gives you a quick way to use PNG in IE. You can also mimic the redsox logo background on your JPEG image so it blends in with the rest.

[Godzilla Blitz]

Originally Posted by Zippo

http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

The link above gives you a quick way to use PNG in IE. You can also mimic the redsox logo background on your JPEG image so it blends in with the rest.

Cool. I bookmarked that link! Thanks!