Photoshop Trasparency format

talk design
1

Hi,
I am dealing with an html page and i use some java script to let the user swap the background color: Fine:
My problem is that i can’t make see the trasparency of the main pictures which is suppose to be just a name, some letters made in photoshop and saved with no background and in a format as gif or png24, the only two ways to see this trasparency.
my mac platform with IE 5 is fine , when all the page is loaded i can swap the color of the background whitout spotting anything between the letters in the pictures. On explorer 6 and windows xp this png or gift format does not work and I am not more allowed to swap bgk color without notice that my nice letters are just an ugly square shaped picture. All my trasparency is been changed to white by the browser and the page look nice only if the user leave the bgk color set to WHITE:
So , my question is . How can I save a picture in a format which supports the Trasparency and is browser friendly as well ???
I thought saving in png was a clever thing but …
:toad:
I am not sending the image because i guess u understand
ps= please help i am gonna eat "save x the web " soon

2

png is only transparent in Flash from what i have used. Gif is the only one that supports browser transparency, just make sure to check the “Transparency” box when you go to File|Save for web.

3

Hi, if you are going to use a solid color BKND this can help. (Photoshop) start w/ant-ialiased graphic. Choose save for web. In the window select GIF as as the format. Check the transparancy box. Then set matte for the color of your bknd. that’s it . Save the image you think is best for the web. There are other features you coould set, but that’s a differet story. By the way, try Map to transparency PS7. good luck

4

Thanks guys, i will try these options than i get back.

5

ok cool, let us know how it turns out.

6

not happy yet.
I put some sample on http://www.adrianogallo.com/test/test.html.
if u try to swap bgk under mac Os and with IE 5 u should see the first pic from the top dispayed ok.
The other 2 r gift and u can see cleary the GAP between the colored letters & the bgk.
Do not have any PC platform near 2 me at the moment.
Any suggestion to make a nice pic that allows me to swap!?
ps - the site will be 99% flash MX and this will be the welcome page with no flash in it .:smirk:

7

this is ok = http://www.adrianogallo.com/test/test.html

8

looks like you need to trim up around the coloured letters a bit; still a bit of white around them.

did you start the image as a transparency first or did you later convert it to one?

9

Good question!
if I trim like u sayd i will probably see the step between the letter color and the bgk.I tryied several time but with no results unless is pixelate, I even tryied doing pixel by pixel but at the end seem i’ve been using an azde !!

10

try this.

I have to run into work atm, but if that’s what you were trying to do; I’ll tell you how I did it once I get back online.

11

thanks !
take ur time 7twelve : ) !

12

well, there’s really no secret to it. Nothing hard to do; so I’ll try my best to explain it.

First, I copied your image.
then I opened a new document in PS, set the background to transparent (very important)
Then I pasted your image onto a new layer.
I went thru and cut out all the white and other colours (there was some green and gray on the coloured letters) from around the letters.
Then I went to File-Save As; Choose GIF
On the settings, make sure no forced colours are checked and that it is set to exact instead of web (only dealing with a small amount of colours so it doesn’t matter), and make sure that the transparency box is checked (very important). Then I just saved it as interlaced and you get the end result.

hope that explained myself somewhat. Its a lot easier to show people how to do something than to type it up (which is why I suck at tutorials )

13

but what about the result?
u like it ?, u don’t think is too square shaped ?
The colors u refer to are close to orange and green and i need them to hide te passage between letters and background.
By the way i 'll work on your file and i’ll do my best.
get u later thanks.

14

well, you can do the same thing I did (start a new file with transparent background) and just put your font on top of it. That’ll make it blend better; but since I had to work from the rasterized image, and I didn’t have the time to make it blend a bit it does look a bit block-y. But I was just trying to illustrate the easiest way (imo) to save a transparent GIF. None of that save for web crap ;):stuck_out_tongue: hehe

15

I’ ll try once more than html.
thanks man.