Dreevoo.com | Online Learning and Knowledge Sharing
Home | Programs | Adobe Photoshop | Basics | Website background overlay pattern using Photoshop
Click to view your profile

Website background overlay pattern using Photoshop

Image overlay pattern comes in very handy when a website has a full screen image or a video as a background. Applying a pattern can make things more readable and easier on eyes. Let's Photoshop.

  Author: mat | Version: CS5 | 10th February 2014 |  

Open a new Photoshop document (Ctrl + N).

Set Width and Height to 3 pixels and Background Contents to Transparent.

Click OK.


As the 3x3 document is too tiny to work with we need to zoom it in as far as we can.

3200% is the max. Hold Alt key and use the scroll wheel on your mouse to zoom in and out.


Create a new layer.


We will now fill the document with black color.

Press D key to set a black foreground color.

Press Shift + F5 to call the Fill window. Choose the same settings as I did and click OK

Your 3x3 document should now be black.


Set the black layer's Opacity to about 20% (see picture).


This is waht your document should look like at this point


Now choose the Pencil Tool (see picture).

It's usually hidden under the Brush Tool.


Right-click the document, set pencil Size to 1 px and Hardness to 100%.

Press Enter to confirm the changes.


Create another new layer.


And now draw or better said click the same pattern as I did.

Simply align the Pencil's square to fit the left corner and click then draw the additional. 

1 click = 1 pixel = 1 square.


Reduce the squares pattern Opacity to about 30% and we are done.


All you have to do now is to save your new website background image overlay accordingly.

In the menu click File, choose Save for Web & Devices... 

Set image type to PNG-24 and enable the Transparency option.

Click Save.


Name your new pattern and save it.

To learn how to apply the pattern, go here:

Also recommended:

  Please login to post a comment
  Click to open user profile  
propharmacyst, 26th Jan 2023, 11:05 AM
We also offer Vidalista 80, a high-strength version of generic Cialis. This medication is ideal for men who need a higher dose to achieve and maintain an erection. Like our other generic Cialis products, Vidalista 80 is just as effective as the brand-name version but much more affordable.Vidalista 80 from ProPharmacyStores store. Visit at: https://propharmacystores.com/product/bu....
  Click to open user profile  
propharmacyst, 26th Jan 2023, 11:11 AM
Viagra Cialis Levitra Sample Packs - The three most often used erectile dysfunction drugs are Viagra, Cialis, and Levitra. These drugs assist men obtain and sustain an erection by boosting blood flow to the penis. To find the prescription that works best for them, several men opt to try trial packets of these drugs first. Those trial kits could be purchased with a prescription from a healthcare professional and usually include tiny amounts of each drug. Visit at: https://propharmacystores.com/product/vi....
  Click to open user profile  
indiansatta, 29th Jan 2023, 4:16 PM
SattaMatka is a gameof chance that is played by a large number of people in India. It is played byspinning a wheel with a specific number of spots on it. The wheel is dividedinto twelve parts, each part being worth a different amount. The number ofspots on the wheel is between one and twelve, and the wheel is spun arounduntil the player lands on the number they want. Visit at: https://indiansatta.net/
online learning made for people