0

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 about creating this background.

Thank you enter image description here

  • 1
    For the "grid", it's just a pattern (keyword), there are plenty of tutorial about it. The rest, is just layer above each one with more or less opacity. – Larme Oct 28 '16 at 9:08
2

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

enter image description here

(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:

enter image description here

You will end up with something like this:

enter image description here

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);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.