top of page

Copied

WEBSITE ESSENTIALS

Creating textured background images for your website design

Wix Team

Creating Textured Background Images for Your Website Design

Deep textured background images are an easy way to make a website design stand out, since textures add an essence of grunge if the minimal look isn’t for you. Furthermore, using a website background image will also help frame your page and enhance your web design and skill set regarding how to make a website.

1. Open Photoshop and create a document that matches your Wix canvas size.



Textured backgrounds for web design 1

2. Color the first layer white, hexadecimal code: # ffffff.


Textured backgrounds for web design 2

3. Search the web for an image of a rough surface. It may be best to search for “cement wall” or something similar. Copy and paste that image over your first layer.



Textured backgrounds for web design 3


4. Increase the contrast to accentuate the highlights and lowlights. Then drop the opacity of that image to 40%.



Textured backgrounds for web design 4

5. Repeat steps 3 and 4 with a second image of rough surface.



Textured backgrounds for web design 5

6. If you’d like to add more colors, add some shades over your first layer.



Textured backgrounds for web design 6

7. Finally, flatten the image, save it to your desktop and import it onto the Wix editor.



Textured backgrounds for web design 7

As you see, the trick to textures is in adjusting contrasts and opacities. The more you create your own fullscreen background images, the better you’ll get at customizing them just right.

Good luck!



Textured backgrounds for web design 8



Was this article helpful?

bottom of page