how to make an image partially transparent (gradient not working/saving).

[Qxx1]

hello
im working on my college final year project which is my college`s website n im doing it alone.
So i am in trouble at the very first step! while setting up the background.
Ok so here is the problem, i have a blue colored image as my main background that spans from right to left and top to bottom, it will fill up the whole screen of the user just like this site`s blue image in the background.Over that image the central part is where the whole content will be shown, this part has another image ans i want this image to be partially transparent (like gradient) from the left side for a distance of about 2 inches or so.
The thing is i apply the gradient in the image in photoshop but it does not gets saved in the image no matter i save it as gif/png/jpeg(just tried jpeg hoping god will do something special this time!:banghead also tried saving it normally and 'for web and devices', also tried fiddling with the saving settings there but i cant get the transparacy gradient to save.
Here take a look at the first image, thats what i want and second image shows what happens when i try to save it normally, third image shows what happens when i try to save 'FOR WEB AND DEVICES'..(here save type shows jpeg,just took the screen shot before changing it, but nothing changes even if i turn it to gif/png)

The fourth one is what happens when i try to put an above image saved as gif. There is no transparacy in the image and background is not visible at all.
i cannot use layers to mix both these images since the background image will be changing for different users but the central part and this central image will have to be a fixed one.
what to do??

 

[Dataflow]

best way is to use an alpha channel and save as PNG
you could also do it using CSS
http://www.w3schools.com/css/css_image_transparency.asp

and jpeg doesnt support transparency

 

[Qxx1]

hey thanks for reply..
i am aware of the transparency thing in the css but that makes whole image and all the content transparent (main thing is the whole image becomes transparent) but i want a gradient instead of whole image being transparent.
im not familier whit the alpha channel so i searched over for that and i dont understand how is that suppose to help me getting a transparent gradient.

 

[Dataflow]

forgot to mention use the alpha (gradient) as a selection to delete the main image.
by using the "Load Channel as Selection" button

 

[Qxx1]

can u please enumerate the steps i kind of not able to understand it completely that how do i do it.(As i dont have any experience working with channels)

 

[image2all]

According to my self, This is one of the most important and Awesome helpful post to the all new user of Photoshop.
So, i just want to say that Follow the instruction and Read the Post carefully to Learn Photoshop very nicely.

Thanking you.

 

[Qxx1]

i actually did it!!!!! i was fiddling with layers,channels,load and save selection and got what i wanted but i dont actually remember how i got there...will post back when i figure it out

 

[Qxx1]

here is how you can make your image partially transparent using gradient in Photoshop cs5
get your image
add a new layer mask
go gradient--> select foreground to background-->apply gradient
go to channels...u`ll see a new channel there(the last one)...duplicate it(right click-->duplicate channel), u can also rename it
go to your original image...now you dont need the layer mask u just created so right click on the layer mask and delete layer mask.
now you are back at your original image..
go to Select-->load selection-->load the channel u just duplicated or renamed..u can also click invert if u want
now a portion will be selected and you can press delete to get the transparecy effect..
go on file click 'Save for web and devices' save the image as PNG-24 for best results.


also you can create a new layer and fill it with some color (black etc) and drag it below your image layer so you can see the transparacy effect more precisely and it will also give you an idea of how the transarany has worked out if u like it save the image otherwise get back to step 1 n keep trying till you get ur desired effect.


thanks people for helping me out on this one.
Every single problem leads to a solution for many others.