Forum Moderators: not2easy

Message Too Old, No Replies

Saving both opacity and transparency in an image?

In Photoshop 6?

         

bondjamesbond

8:39 am on Oct 17, 2003 (gmt 0)

10+ Year Member



Hi

I have a large image where there are 4 small horizontal 'stripes' which have been filled in black and the opacity set to 50%. On top of this stripe I have some white text. This is not a problem as I have just saved the iamge with 3 of these stripes.

I have a problem saving the 4 'stripe'. I'm looking for a way to save this layer with its 50% opacity and make the whole layer transparent. This way the image can be placed over my large image and the opacity and transparency allows the background image to show through on the 'stripe' layer.

Can this be done - have I made any sense? =) Any help would be greatly appreciated.

Cheers.

benihana

8:58 am on Oct 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



save this layer with its 50% opacity and make the whole layer transparent

i dont really understand what you are trying to do.
what format are you trying to save as?
if you are talking about 50% opacity, then a png will be the only way (assuming you want them for the web).

ben

bondjamesbond

9:43 am on Oct 17, 2003 (gmt 0)

10+ Year Member



Sorry if I am not being clear. Let me try and make sense!

I have created a large image (background), 4 horizontal black stripes (4 seprate layers) with each of these layers opacity is set to 50%. I have created four text layers with each of these layers being placed on the black layers. I have created a jpg of this image with three of the black layers with text, these three layers make up my logo for my site. The fourth layer is the heading for the title of the page.

Now rather than just having lots of large images for every page I thought I could have one large jpg for the main (logo) header and have a series of small images for the different pages. I'm using CSS so I could float this smaller image of the page header into place. However I found the problem when I tried to save this file. The file needs to preserve the opacity so the background image appears underneath.

does this help?

benihana

10:39 am on Oct 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



sounds like you need to use gifs for the smaller images.

i would move each component that is going to be a smaller image to its own file of the right dimensions, and save as a gif in imageready, so you can tweak the matte settings to blend in with your background.

ben

bondjamesbond

11:29 am on Oct 17, 2003 (gmt 0)

10+ Year Member



Thanks Ben.

The only problem is the background is going to my large image which contains multiple colours. I have tried saving my smaller files as gifs and exporting to a seprate image as you suggest but there is a problem. When saving the gifs, I can get the background transparent, but when the file is saved the 50% opacity of the black layer is lost.

Maybe I will have to try and think of another way to go about doing this?

spud01

11:40 am on Oct 17, 2003 (gmt 0)

10+ Year Member



In photoshop layers are save in a PSD file (photoshop) any other file type like gif,jpg,etc will flatten the image, and all layers are lost with the layer orders supperimpossed on each other.

benihana

12:39 pm on Oct 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



the only way to get semi-transparency in a web format is to use a png format graphic.

other than that it will take a lot of careful positoning to give the impression of transparency i.e. using parts of the background in your smaller images and trying to get it to line up and give the impresssion of a transparent layer, which will probably be a nightmare to attempt.

ben

bondjamesbond

1:12 pm on Oct 17, 2003 (gmt 0)

10+ Year Member



Thanks for your suggestions ben. How is the compatibilty of png on the web? Jpg and gif you know everyone will be able to see them - how does this fare with png?

I might have to come up with another solution.

limbo

1:16 pm on Oct 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



the only way to get semi-transparency in a web format is to use a png format graphic.

Spot on - and as far as I can see PNG's are basically supported by nearly every browser so might as well replace GIFs and JPEGS for this type of effect. I am fully aware of the possiblities of PNG's and have taken to using them for many of my sites graphics (where other formats won't suffice).

Having only one (channel?) of transparency in GIFs is a limitation unless you can get a good 'film over film effect' or 'blue screen' as Ben hints. Then you could apply the layers like you describe.

garann

6:49 pm on Oct 17, 2003 (gmt 0)

10+ Year Member



One caveat..

PNG's are basically supported by nearly every browser

I think the key word there is "basically". You can display a PNG in IE by just dropping it in an img tag, but it won't have alpha transparency. To get alpha transparency in IE, you've got to use a proprietary filter on a div or something:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\'myImage.png\', sizingMethod=\'scale\' );

Full article on this approach [alistapart.com]

bondjamesbond

8:35 am on Oct 21, 2003 (gmt 0)

10+ Year Member



Thanks everyone for all your advice. After considering using PNG's I have decided to slightly adapt my situation. Rather than trying to get a png to overlay my jpeg, I have created the required "black stripe" on the JPG and put the text transparent in a gif. Using css I have poistiioned the text in the correct place.