Forum Moderators: not2easy
I wonder if you can help me, please.
I have been strugling for some time to somehow create the following effect:
a layer (or "sheet") of "mist" (or a gray shadow) over a web page (or just over an image or even text)
Here is one imaginary scenario:
I have a webpage consisting of 3 layers:
first layer just holds my tiled background image - red bricks, as it happens to be.
third layer holds a non-background table of two cells - an image into the left and text in the right cell.
the Second layer is the one in question - smaller than the first layer, once placed over it will make the bricks look like "grayed-out" or shaded or... like an unavailable button in a program, if you guys get what I mean - I am stumbling for words to explain it better.
So, I have imagined two possible solutions:
1. an image 2x2 pixels - top-left and bottom-right pixels are black and the image is made transparent - this when tiled as a background image into the second layer will... do the job?
2. There has got to be some Javascript trick, but I can't work it out...
so what is my problem then?
Well, after downloading 170MB trial of Adobe Photoshop, I simply cannot convince it to create 2 pixel square picture with transparent background and 2 black pixels in the opposite corners. Dunno what I am doing wrong, probably lack of knwoledge with transparency options and matte and stuff... save for web gif and God knows what kind of other stuff.
shame on me, but could someone help, please? Pretty, pretty please that is, with 2 spoons of organic honey on top?
thank in advance
Zaxo
Welcome to Webmasterworld [webmasterworld.com]
I am not sure this can be acheived using Photoshop, but using Fireworks you can do it (fairly crudely) by web dithering a layer.
>>create a new document
>>draw an object over a transparent canvas
>>set the object fill to webdither - transparent box ticked
>>Then export the image as a gif with alpha transparency. This would mirror the 2x2 pixel effect you described
I would think this can be achieved to better effect using PNG and alpha transparency but I have never tried it.
Good luck
open a new document and set the size to 2 by 2.
make sure you check 'transparent' where it says contents.
change your foreground colour to black and zoom right into the image. use the pencil tool to draw in the opposite corners.
choose 'save for web' and select gif as the type. make sure transparency is checked.
bingo.
Thank you wholeheartedly for this advice.
I finally did it in Photoshop.
I am sure I went through the same steps (almost) on several different occasions (even starting from scratch)
Possible fault of mine could have been selecting various "matte" options.
I read tons of info on the web about all those transparent images and backgrounds and stuff... dunno where it went wrong...
... but it is good now.
Thanks once again!
