Creating Textured Background Images for Your Website Design

Designing with Wix | June 23rd 2010

Deep textured background images are an easy way to make our websites design stand out. Background images help to frame your page. Textures also add an essence of grunge if the minimal look isn’t for you.

Take a look at a few pages that use textured background images very well.

As you can see, these sites range from design website portfolios to wine vineyards. The Wix editor has a great selection of background images and textures in Page Parts >> Backgrounds. If you’d like to be adventurous (and have a recent version of Photoshop), here’s how to make your own:

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 background images, the better you’ll get at customizing them just right.

Good luck!
Textured backgrounds for web design 8

Tagged with:

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>