: Creating Light Shadow Background Effect Anybody know how to create this background effect (light in the top coner & small grids overs the background) or at least the link about the article

@Alves566

To make that effect in photoshop you need to define a pattern like this one:



(The pattern I have defined is 2px by 2px with two layers, one full black with 30% opaxity and the other layer with a 1px black square at 50% opacity at the top-left corner but you can experience a lot and create yout own.)

After you have done that, add your image, go to Blending Options > Pattern Overlay and select the pattern you have just defined.

Then simply create another layer, take the Radial Gradient tool and make a white radial gradient wherever you want the light. Set the layer mode to overlay and that's it.

Take a look:



You will end up with something like this:



PS: Add a white/grey filled layer under the image layer and adjust the opacity to get the faded look in your example.

I also have to mention that what you have in your print-screen is most likely done differently. The proper way to do that in a web design project is to create a separate div with the pattern and place the image (image slider) without the pattern underneath it hierarchically.

(this way you don't have to edit each image and add the pattern and if you want to change the pattern you simply change the image source and it appears all the images have the new pattern).

Like so:

HTML

<div id="my_images">
<div class="my_pattern"></div>
<img src="my/image/location.jpg" />
</div>


CSS
#my_images {
width: your_width px;
height: your_height px;
position: relative;
}
.my_pattern{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:10;
background: url(../img/pattern.png);
}

Vote Up Vote Down