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

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 |  
 
 
1.
 

Open a new Photoshop document (Ctrl + N).

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

Click OK.


 
 
2.
 

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.

 
 
3.
 

Create a new layer.

 
 
4.
 

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.

 
 
5.
 

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

 
 
6.
 

This is waht your document should look like at this point

 
 
7.
 

Now choose the Pencil Tool (see picture).

It's usually hidden under the Brush Tool.

 
 
8.
 

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

Press Enter to confirm the changes.

 
 
9.
 

Create another new layer.

 
 
10.
 

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.

 
 
11.
 

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

 
 
12.
 

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.

 
 
13.
 

Name your new pattern and save it.

To learn how to apply the pattern, go here:


Also recommended:

 
 
 
   
  Please login to post a comment
   
 
 
online learning made for people
Dreevoo.com | CONTRIBUTE | FORUM | INFO