Well I guess this is a two part question.
Firstly how can I make an image have partial transparency (I think you can do this with PNGs but don't know how -- I have photoshop just need instructions?)
Secondly how do I use that image in a layout using CSS? I think I need some kind of "PNG Hack"
The easy option which probably won't work for you:
Webkit browsers (Safari, Chrome) can use the -webkit-box-shadow CSS3 property. Firefox and IE (of course) don't support this (or have a vendor-specific equivalent) yet.
The other options you're left with are numerous, and widely covered on the Internet (since every man and his dog want to use drop shadows)
http://www.google.com/search?q=how+to+make+a+drop+shadow
Just one thing I'd add: before you go messing with transparent PNG hacks, you should consider how many of your users are still on IE6, and how important it is to you to be making your site pretty for someone who hasn't upgraded in 8 years.
Getting it to work well in IE6 is going to be the issue. You should use a separate stylesheet that only ie6 loads via conditional comments that loads the backgorund image like this:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="my_trans_image.png", sizingMethod="crop");
And in your standard style sheet use it like any other image:
background-image: url(/path/to/my_trans_image.png);
Load a stylesheet with IE6 specific rules in it like so:
<!--[if lt IE 7]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css" charset="utf-8" />
<![endif]-->
This will only load in IE and if the version is less than 7.
Final note: IE6 is rapidly fading out. If you dont need to support IE6 then setting the PNG as a background image in plain old CSS will work in all modern browsers without any real problems.
Well, that's the idea - you need to create transparent PNGs. I usually use Paint.NET for these sort of stuff but if you feel more comfortable using Photoshop, go ahead. All you need is to have a transparent background on your image and then put some semitransparent dark pixels on that would become the shadow.
You can use images with CSS by the background-image property. That is:
#myDiv
{
background-image: url('myimage.png');
}
IE6 doesn't support PNG transparency out of the box - google for IE6 PNG hack or just search this site. Also, be warned that even though IE7 supports PNG transparency, it is awfully slow so it's next to unusable for advanced effects like shadows. You might want to have some more basic fallback style for Internet Explorer.
To address your second question: If you don't mind using a little JavaScript, you can use a png fix JavaScript file to automagically apply the IE-specific filter to your images.
Make sure your glow/shadow uses a Blend Mode of "Normal". Other blend modes such as Multiply or Screen are really awesome inside Photoshop, but won't look as expected on the web.
If you need to support IE6, you'll need some sort of PNG fix solution. This post lists several: http://stackoverflow.com/questions/86545/is-there-a-javascript-png-fix-for-ie6-that-allows-css-background-positioning/480085
My personal favorite is : http://www.dillerdesign.com/experiment/DD_belatedPNG/
The typical IE PNG fix actually causes IE to crash under certain conditions. (google it). Unless the user has tweaked a registry setting (hah). Unless you want an implicit fuck you to some of your IE6 users, try using VML for transparent PNG images instead. the raphael.js lib is a nice way to achieve that.