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
  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/
 
 
  Click to open user profile  
Iqratechnolog, 18th Jul 2024, 6:18 PM
"Creating an overlay pattern in Photoshop for website backgrounds can significantly enhance readability and visual appeal. By adding a subtle pattern over full-screen images or videos, you can soften the background and make the text stand out, improving the overall user experience. It's a simple yet effective way to balance aesthetics with functionality on your site."
 
 
  Click to open user profile  
ardithvenessa, 13th Nov 2024, 10:41 AM
Create a new project in Photoshop with the dimensions you want for the background of your website. Adjust the height and width to fit the design of your website.Create Your Own Pattern: To create your pattern, use a variety of tools, such as the Brush Tool, Pencil Tool, or Shape Tools. You can make whatever design you want, including geometric shapes and textures2.Define the Pattern: Select Edit > Define Pattern after you are satisfied with your design. By doing this, your design will be saved as a pattern for future use1.Apply the Pattern: To fill in a new layer with the pattern, create a new layer. Select Pattern from the drop-down option under Edit > Fill. Click OK1 after selecting the pattern you just made.Modify the Layer: To get the desired look, you can modify the pattern layer's opacity, blending mode, and position2.Save Your Work: To maintain the layers in your design, save it as a PSD file. For web use, save it as a PNG or JPEG.
 
   
 
 
online learning made for people
Dreevoo.com | CONTRIBUTE | FORUM | INFO