Transparency in webshites

Post by **Joose** » May 8th, 2006, 10:34

I have a small issue with some websitey stuff im doing. Im attempting to make a page which will appear like posters and photos and things stuck to a wall. My first thought was to make a wall background, make some poster and photo images, and hurrah, done.

However..

Posters are not perfectly rectangular (not realistic looking ones, anyway). But as jpg's dont do transparency, the options are gif or png.

Gif'd versions of the poster image i have look shocking. truly shocking.

Png works, but only in firefox. plus the image size is coming out of tatty shop in hueg-o-vision.

The only other (as yet untested) idea I had was to fill in the "transparent" bits of the images with the background wall texture (its a rendered wall, not bare bricks), but I imagine that the seams will be somewhat....crap looking.

Any ideas?

Post by **deject** » May 8th, 2006, 10:46

if you google, there are some javascript fixes for IE and PNG Transparency.

Post by **Joose** » May 8th, 2006, 11:08

Yeah, but still: 22k as a jpg, 900k as a png

besides, I dislike using javascript unless absolutely necessary.

Post by **deject** » May 8th, 2006, 11:30

you should be able to optomize the PNG smaller than that, although I don't know how to do that in Potatoshop.

Post by **FatherJack** » May 8th, 2006, 11:31

Flash?

wyrd · Post by **wyrd** » May 8th, 2006, 12:44

click on file -> save for web in photoshop, you can choose all kinds off stuff

IE7 will, so i've heard, fix the png issues your having, but that's a while off

the JS is prolly your safest bet

PS try to keep gradients down to a minimum with png

Post by **TezzRexx** » May 8th, 2006, 14:28

Fuck internet Explorer, make the bastards download it if they use it.

webclam · Post by **webclam** » May 8th, 2006, 14:34

why not build each image in PS, complete with wall effect behind and then flatten the image, save as jpg and viola! The world is your crustacean.

unless I'm missing the point, that should work, shouldn't it?

Post by **Grimmie** » May 8th, 2006, 14:41

Could build the website image/background//whatever in Macromedia FireWorks and then use the slice tool?

Post by **Joose** » May 8th, 2006, 14:46

Well, it turned out that the problem was that the "Save to web" option in tattyshop is highly shit with png's. With a little help from deject, the thing is now down to a decent size, and i'll be going with the scripty-evil to make it work in IE.

The reason I didnt do it in the easier sounding methods from webclam and grimmie is that theres all manner of gimmickery that *may* at some point be added to the site later. All of which mean that keeping the layout as flexible as possible will make things further down the line infinately easier.

Thanks for all the suggestions, none the less

Post by **deject** » May 8th, 2006, 15:45

Grimmie wrote:Could build the website image/background//whatever in Macromedia FireWorks and then use the slice tool?

Well, I used Fireworks to optomize the PNG to smaller-than-gif size, down from hueg-O-vision. There was very very little artifacting that I could see. I used 8-bit PNG with Index Transparency. Using Alpha transparency basically doubled the size of the file.

Post by **Joose** » May 8th, 2006, 17:51

After extensive buggering around, I have discovered that although tattyshop has almost no options for optimising your png's, imageready has loads. Its now even smaller, but with not really many more farty-facts.