Talon's Blog

Due some request here a little tutorial for how to make (semi-)transparent areas in images. I'll explain it how it's done in Photoshop and I assume the method is close to what other grafical programs ask for to make it.

I'll start of with some knowlegde for this. Transparent pixels are working with .gif and .png images, not with .jpg images. this is due the structure of how the images are build in pixels.
GIF can have 256 different colors where "transparent" can be one of those colors
JPG has 3 channels (red, green, blue) wich each channel the chose of 256 steps in color (256³ times more colors then gif since they are multiplied). transparent is not added thos these channels. Read more on wikipedia or elsewhere about RGB, I assume you got internet.
PNG had 4 channels, the RGB channels and an aditional Alpha-channel wich all have 256 steps in tone. This Alpha channel makes it posible to define how transparent something is in 256 steps. Zero means no Alpha and no Alpha means you can see though it.

Now we get to a problem wich is caused by Microsoft; the Browser story. I'll cut it short, PNG alpha channel can't be read by IE6 and IE7 has problems when you meddle with css filter:alpha(); and again I suggest you use firefox, opera, safari or anything else except IE to view your list. Seriously, life it too short...

Interesting part:
Enough bla bla, how to make a PNG image with Transparent areas!

Step 1: open Photoshop, make a new document or open the one you where busy with.




Step 2: add something we can make semi transparent

I've used this image of nagisa and Ushio
hmm, those clouds are nice but somehow limited when they crash to our border of the image... let's make something nice out of it. how about a fade out to the top?

Step 3: linking to (semi-)transparent layers
Let make a new fill layer, a gradient one


you'll get a gradient fill option menu

as you can see I see those blocks again we had in the second image. this means this goes from white to transparent.
you can adjust this when you click in this gradient.
else klick okay and you'll get a new layer


put the transparent gradient layer under our Ushio layer go with your mouse between those layers (on this thin line). Hold ALT and your mouse symbol changes, leftclick with your mouse and you link you layers.


wich makes a result that should look like this

Okay we see our block again going over into the Ushio image. This ca be a little bit nicer when we go a little more with our clouds. let's look closer to our Gradient fill layer, it has such a White box....

Step 4: Alpha Masks
yep this box is called Alpha mask.

I'd used the word alpha in my story about PNGs, this is exactly that what I'd mention. I't now completely white wich means the alpha value is 256 and so fully transparent.
let's select this box, take our brush with a soft egde, a black colour and brush over the image. the gradient layer disapears where this layer becomes black: Zero in Alpha.
let's bring the clouds some more to attention by ereasing arount them on the gradient fill layer.


ofcouse you can use this alpha mask on all layers, if a Layer doesn't have it you can click on that grey box with a white hole on it at the bottom of the layer menu.

Step 5: finishing touch
hmm add some text maybe and then save it correctly.




save for web, this is important!


set your settings on the right to PNG-24.
24 means you have 4 8bit channels (RGB+alpha with each 256 steps)

now and then you can upload your png and add it to you list header for example:








here to see the final .png image
here to download the .psd to see it yourself
(I've rendered the text layer because I know you don't have that font I'd used)

hope some people can make something out of this, hope that those layer linkage and alpha masks help many people with their designs, I'm gone >_>'