Get Digital Screen Texture Visual Effect In 3 Steps Photoshop Tutorial

Effective image preview
Share

Having tiny dots pattern on the background video or over the full-screen jquery slideshow and slider is very popular among HTML5 and CSS3 technology based websites. This visual effect has been usually seen on modern web design practices as well,

you guys might have Googled about such VFX (visual effects) but was unable to explore the tactics behind it because I did the same and didn’t find the proper method to achieve this effect at least not a serious tutorial I found somewhere else. So after a simple experiment, I had decided to make one for myself and share the technique by writing a simple step-by-step tutorial for this.

Take a closer look over the demo image below before get started!

Effective image preview

Result: Look at the dot effect over the image

This VFX Will Take Your Slider Images To The Next Level..

Step 1

First of all we would have to create a new pattern, to do that go to File > New and make a document of 2 x 2 pixels of width and height. Select background content as transparent and click OK.

step-01-image

Step 2

Select black as your foreground color then grab the pencil tool or simply press (B) and make sure it is 1px as by default, now zoom-in about 800% and click a dot on top left corner of the canvas so that half of the vertical and horizontal part of the overall image will be filled by this 1px or follow the image below

step-02-a-image

step-02-b-image

Step 3

Open your desired image and make a new layer on top of it then press G or Shift+G to switch through the tools to get the Paint Bucket Tool and from the top options select Pattern which is below the Foreground from the dropdown option or simply follow the images respectively…

step-03-image

You can also tweak some opacity levels of pattern layer to reduce its impact on the image.

Step 4 (Bonus Step For Web Designers!)

Before proceeding to the Step 3 save that 2 x 2 pixels of pattern image as transparent .png having (no background) now create an absolute positioned div give it 100% width and height and a z-index for overlaying on the content then finally call the pattern image as background-image and repeat it across the background in CSS.

before-after-image

Conclusion
Defining patterns in Photoshop is always fun and creative specially if you want a big impact with small efforts on your visuals. Have you seen such a visual effect before? If so, then don’t forget to mention where or do you have something to ask about the tutorial then leave your comment below. See you in next tutorial my friends.

Leave a Comment.