How to Create a Sleek Textured Layout That Stands Out – Tutorial

In this tutorial i will show you how to create a textured website layout. I will use only two different seamless pixel patterns, and you will see how some simple patterns can create a great website layout. This PSD layout can be transformed very easy into a CSS / XHTML layout because it was created on the Ultimate CSS Framework.

Below you can see the layout we will create. If you’re a member, you can download the PSD Layout at the bottom of the page.

To start you need to create a new document with the following size: 1100 pixel x 1200 pixels, and fill the background color with the following color #e8e8e8

Duplicate the background layer and add the following layer styles. Please note that this pattern can be found in the following set with 815 photoshop patterns.

On the top of the website create a dark shape with Rectangle Tool

For this shape you will need to add some layer styles. The pattern used in the following image can be also found in the same set with 815 photoshop patterns.

Under the header of the website create a new shape with the following color: #e4e4e4

Also for this shape we will use some layer styles.

This is the result so far. You can see how some simple pixel patterns can create amazing effects.

I will create a text logo, and under this logo i will add also a nice slogan. in my case i will use our slogan, which i hope will bring over more members.

Bellow you will find the layer styles used for the text logo with Ultimate Designer Toolkit

This is the layer style for the slogan: Over 55000 Items to choose from… As you can see this slogan has a nice pressed layer style

On the right side i will add a horizontal menu, and right under your menu i will add a image with a iMac 27″

I will turn on the grid ( press on CTRL + ‘ , or CMD + ‘ ) and with pen Tool create the following shape.

Under your slogan you can add some buttons. You can download a nice set of PSD Layered buttons from this link: Download Web Buttons.

Right under this nice red buttons i will add some image placeholders and some texts.

In the same way i will create also on the right side under the image with the iMac

The last step is to add also some text and another shape on the footer of the layout.

Related:

• How to Create a Light Grunge Website Layout – Tutorial
• How to Create a Professional Business Web Layout – Tutorial
• How to Create a 3D Portfolio Layout Design – Tutorial
• How to Create the Ultimate Web Hosting Layout – Tutorial
• How to Create an Elegant Wordpress Theme – Tutorial