Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Graphic Design Studio Web Layout

Graphic Design Studio Web Layout


Let's start our tutorial by creating a new document with the following size : 960 x 900 pixels.I will set my Foreground color to #141414, then with Paint Bucket Tool i will press one time over my document.
I will grab Brush Tool, and with a Smooth Round brush i will create 3 points over my layout with the following colors:
#a864a8
#ed1c24
#662d91

image 1

Please note the brush size should be 600 pixels

image 2

I will go to Filter > Noise > Add noise

image 3

I will use the following settings

image 4

Your layout will look like this one

image 5

I will go to Filter > Blur > Motion Blur

image 6

In the Motion blur window i will set the angle to 90 degrees, and distance to 998

image 7

This is a very easy way to create a nice background for your website. This is my background. In the following image i will show you only a part of my entire screen

image 8

I will create a new layer ( press CTRL+SHIFT+ALT+N ),

image 9

I will select one more time Brush Tool, then i will set my foreground color to white

image 10

I will use one more time a big smooth brush

image 11

Then with this brush i will create another point over my layout

image 12

Then i will change the blending mode for this layer to Overlay

image 13

Now i will start to create another shapes. I will create a navigation bar. For this i will need the Rectangle Tool
With this tool i will create a simple shape at the top

image 14

I will select Rounded Rectangle Tool, and i will set the radius to 6 pixels

image 15

I will turn on the Grid, because i want to align better my layout in the next steps

image 16

I hope you still have the Rounded Rectangle Tool selected. Please create 3 shapes like in the following image

image 17

Now i will add for all layers some layer styles

image 18

image 19
image 20

Click on the following image to see my result better

image 21

I will create another shapes with the same tool: Rounded Rectangle Tool

image 22

For all these shapes i will add the following layer styles

image 23

image 24

image 25

This is my result

image 26

Now it is tyme to add some text. As usual with Horizontal Type Tool i will write some dummy text

image 27

Then i will add a image on top of the layout. I will use the 3D Blueprint image. You can see the tutorial here

image 28

In the same area i will add two arrows with Custom Shape Tool

image 29

This is my final layout. I hope you like it. If you want to see how it is made please apply for a VIP account and download this layout to see better how it is made

Graphic Design Studio Web Layout



Author's URL: grafpedia
Final results of our readers
New!
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: