Hey everyone,

 

So I'm quite new to web design and noticed an effect on a site and I can't see how to re-create it.

 

It's a dotted / mesh effect on a background picture, like on the official White Lies website. It's a Flash site so can't see what's going using Firebug, wondered if anyone knew how to do it??

 

Cheers,

 

Jon

Open Photoshop

 

1- Create a new document (Ctrl/Cmd + N) with the dimensions 2px by 2px. Use the Zoom Tool (Z) to zoom in as much as you can. Then create a new layer (Ctrl/Cmd + Shift + N) and select the Pencil Tool. Set the size to 1px and use the Pencil Tool to create a diagonal line from the lower left corner of the document to the upper right corner.

 

2- Hide the Background layer by clicking on its eye icon from the Layers Panel.

 

3- Then go to Edit > Define Pattern, give your pattern a name and click OK. Now you can close this document.

 

4- Open your document,and create a new solid color fill

 

5- Choose black #000000 as color and apply.

 

6- With the Color Fill 1 selected, go to “Add Layer Style” and select Pattern Overlay.

 

7- choose the pattern you have just created and apply.

 

8- Set the blend mode of Color Fill 1 to Overlay.

 

Done!

 

I hope you enjoyed this tutorial.

 

Cheers,

 

Ramzi

 

NB: If the effect is too intense you can play with the opacity to tone it down.

 

thats the scanline effect^

 

for the dotted effect, just create a 3x3 image, then using the pencil tool 1px put a dot in the middle, then save as a PNG. Make sure your have it transparent

Or why don't you just make a square and apply noise to it through photoshop? and then in your web browser repeat it?

 

thats what I would do ?

Or why don't you just make a square and apply noise to it through photoshop? and then in your web browser repeat it?

 

thats what I would do ?

 

It would be virtually impossible to tile that without seeing visible edges.

It would be virtually impossible to tile that without seeing visible edges.

 

Do it a decent size, offset the square by half horizontally and vertically then cover the edges with the clone tool. Although I don't think noise would achieve the desired effect.

Edited July 6, 201115 yr by Neji

for the dotted effect, just create a 3x3 image, then using the pencil tool 1px put a dot in the middle, then save as a PNG. Make sure your have it transparent

 

Just do as said, tried it myself just then and looks the same really, could maybe even use the CSS3 Duel background to apply a picture below it similar to the white lies site.

 

Lewi