Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create an Amazing Layout Using Textures

Create an Amazing Layout Using Textures


I will start this layout by opening a new document with the following size: 960 x 900 pixels, and with a white background.
Download the following seamless texture (right click on it and choose Save image as)

image 1

Open this image in Photoshop, then go to Edit - Define Pattern. Choose a name for this pattern and click OK. Select Paint Bucket Tool, and on the top of your screen select this pattern.

image 2

You can use one of the following 200 pixel patterns if you don't like this one.
200 Pixel Patterns

Your canvas will look like this image

image 3

I will select Rectangle Tool, and I will make some shapes like in the following image. The colors doesn't matter right now.

image 4

For the top layer add the following layer styles.

image 5

image 6

image 7

image 8

This is my result.

image 9

For the second layer I will add the following layer style.

image 10

image 11

image 12

This is my result so far.

image 13

Over this grey shape I will add an orange one.

image 14

For this orange shape I will add the following layer styles.

image 15

image 16

This is my result.

image 17

I will select the background layer (with the pattern), and I will go to Filter - Render - Lightning effects.

image 18

I will use the following settings.

image 19

This is my result. Please click on the image to see better the layout.

image 20

Select Rounded Rectangle Tool, and create 3 shapes like in the following image

image 21

For the black shape add the following layer styles

image 22

image 23

image 24

image 25

image 26

For the other 2 shapes use the following color: #cbc5b5
This is my result. Click on the image to see better what I am doing.

image 27

One more time I will use Rounded Rectangle Tool, to add some shapes.

image 28

On the black shape I will add our logo, but before I will place there a logo I will add a layer styles.

image 29

image 30

This is my result.

image 31

On the header of my layout I will place some text buttons, and my simple logo.

image 32

The fonts I have used:
For menu: Dilenia UPC, Bold, 24 pixels, Crisp
For logo: Dilenia UPC, Bold Italic, 52 pixels, Crisp

On the right side, I will create other shapes with Rounded Rectangle Tool.

image 33

You can see a border around all shapes. You can add it with a simple stroke. To access the stroke settings go to Layer - Layer Style - Stroke, and use the following settings:

image 34

Over these shapes you can add some images. I will place some 3d Software boxes from our blog. You can see them live if you browse the VIP download area.

image 35

On the left side I will add a image.

image 36

Now I will write some text with Horizontal Type Tool.

image 37

On the right side of the layout, I will add another shape with Rounded Rectangle Tool

image 38

Under this shape I will create a similar shape but with a black color. Then I will go to Edit - Transform - Perspective, and with Mouse tool I will modify the top part of the shape by dragging the corners to the left and right.

image 39

Then I will go to Filter - Blur - Gaussian blur, and I will use the following settings:

image 40

With Move Tool nudge the layer a few pixels to the top. This is my result so far.

image 41

This is a nice method to add another shadow, to an object. You can use also drop shadow, but the result will be not the same.
Over this shape I will add some icons. You can download this great set of icons from this link: Website and internet icons

I will open these vector icons in Photoshop, and with Move Tool I will drag the layer over my document.

image 42

I will select Line Tool, and I will make three lines. Please note that these lines should be very thin (1 pixel) It is very important to make the lines with the right colors. The lines from the middle should be black, and the other ones should be white. I will zoom my document to see better, what I am doing.

image 43

Select all the three lines layers in your layer palette, and click on CTRL+E. This shortcut will merge all the layers into a single one. The next step is to select Eraser Tool, and be sure you have a soft round brush selected.

image 44

Erase the left part and the right part of the lines. This is my final result, and it looks like a nice indent.

image 45

With the same technique I will create some lines between my text menus on the header of this layout.

image 46

This is my final result.

image 47



Author's URL: grafpedia
Final results of our readers
New!
FeFo
asc20091
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: