Header Drop Shadow Question

[Marc S]

Hi folks,

I've searched but haven't found how to tackle this issue:

I've created a header with a drop shadow in CS2, saved it as a gif and loaded it onto my site. However, as you can see on my site www.inframepictures.com the drop shadow is surrounded by white.

I figure I can always go back into photoshop and add a gray layer matching the background of my page and insert it as a jpg, etc. However, I'm sure there has to be a different way.

Thanks
Marc S

[Marc S]

I tried to upload an image with a grey background from photoshop #999999. However, the PS 9's don't seem to match up with SmugMug's 9's.

Suggestions? (Of course, all of this will be a sidenote if I can get the drop shadow to show up without adding a grey PS background)

Thanks in advance for the help is all of this.

Marc S
www.inframepictures.com

[Andy]

Marc,

Do the following:

re-open your .psd image, and be sure that it's on a transparent background

then, "merge visible"
then, save for web
choose png-24 transparent

reupload it and come back here with the link, and we'll show you how to set up your code for the transparent png (IE needs a special little hack, it's easy and common, we use it in all our tranny pngs on the site).

:deal

[Marc S]

Thanks Andy,

Here's the link:

src = http://www.inframepictures.com/photos/81833573-M.jpg

However, the uploaded version shows a black squared background. It looks good on my mac photo folder and looks good in the upload image smugie. But once in my gallery, it looks pretty awful.

I'm beginning to wonder if it's something I'm not doing correctly in Photoshop....

[bwg]

Thanks Andy,

Here's the link:

src = http://www.inframepictures.com/photos/81833573-M.jpg

However, the uploaded version shows a black squared background. It looks good on my mac photo folder and looks good in the upload image smugie. But once in my gallery, it looks pretty awful.

I'm beginning to wonder if it's something I'm not doing correctly in Photoshop....you'll want to use the original image (-O) for your gallery. when smugmug creates all the other sizes -S, -M, -L it converts them into jpegs and pngs get all weird looking.

[Andy]

Thanks Andy,

Here's the link:

src = http://www.inframepictures.com/photos/81833573-M.jpg

However, the uploaded version shows a black squared background. It looks good on my mac photo folder and looks good in the upload image smugie. But once in my gallery, it looks pretty awful.

I'm beginning to wonder if it's something I'm not doing correctly in Photoshop....
You did it fine, but as BWG sez: -O is the way to go. Now, can you put that file on a diet? 400KB, is way too heavy IMO for a header. Don't want to drive people away kicking and screaming!

[Marc S]

Most excellent!!! That took care of the problem.

I'll still need the IE fix. I use Safari and Firefox. It looks good there. If anyone uses IE, please look at the site and see if you see any problems

www.inframepictures.com

Again, this is still a work in progress.

Thanks

[Marc S]

You did it fine, but as BWG sez: -O is the way to go. Now, can you put that file on a diet? 400KB, is way too heavy IMO for a header. Don't want to drive people away kicking and screaming!

Sorry. I posted the bottom prior to seeing your reply.

I'll make the size smaller. I saved it at 125 resolution. I'll change it to the 72.
I;m definitely NOT a web programmer!! If it wasn't for my wife, Andy, and Big Web Guy, I'd still be lost. Thanks!

[Mike Lane]

Sorry. I posted the bottom prior to seeing your reply.

I'll make the size smaller. I saved it at 125 resolution. I'll change it to the 72.
I;m definitely NOT a web programmer!! If it wasn't for my wife, Andy, and Big Web Guy, I'd still be lost. Thanks!

The resolution doesn't matter one bit for display on the web. The only thing that matters is pixel count :thumb

[Marc S]

The resolution doesn't matter one bit for display on the web. The only thing that matters is pixel count :thumb

Thanks Mike,

Of course, you are absolutely correct. I recently read an interesting article about how there is a huge misconception concerning resolution and pixel count.

Regards

[Dna]

So, just out of interest, what is the IE hack for pngs ?!?

Dna

[Andy]

So, just out of interest, what is the IE hack for pngs ?!?

Dna

it's like this:

#myImage {
width: XXpx;
height: XXpx;
background: url(http://www.smugmug.com/photos/72592254-O.png) no-repeat;
_background: none;
filter: progid:*DXImageTransform.Microsoft.AlphaImageLoade r(enabled=true,
sizingmethod=image,src='http://www.smugmug.com/photos/72592254-O.png');
}

IGNORE THE magenta asterisk.

[Dna]

Thanks...

it's like this:

#myImage {
width: XXpx;
height: XXpx;
background: url(http://www.smugmug.com/photos/72592254-O.png) no-repeat;
_background: none;
filter: progid:*DXImageTransform.Microsoft.AlphaImageLoade r(enabled=true,
sizingmethod=image,src='http://www.smugmug.com/photos/72592254-O.png');
}

IGNORE THE magenta asterisk.