Forum Moderators: not2easy
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.
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?
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?
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
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.
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]