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

Web 2.0 Vector Layout


Please open a new document. As usual i will chose my standard sizes: 760 pixels wide x 770 pixels height

I will use a blue #154681 background for this layout

for this layout we will use brushes very much. please bookmark the following link: www.photo-shop-brush.com ( for the next 2 months we have placed schedules posts in this website, and you will have available for download at least 2 - 5 new brush sets per day.

Please download the following set of brushes : Design elements brushes

Load these brushes in photoshop, then create a new layer ( press Ctrl+Shift+Alt+N ), and with brush tool make a simple drawing on your layout

image 1
Click to enlarge

Select Rounded rectangle tool, and create a new shape. place it like me

image 2
Click to enlarge

Then download the following set of Vector brushes

Select a brush you like most, then

Create a new layer ( Press Ctrl+Shift+Alt+N ) and with brush tool, add some details on our background

image 3
Click to enlarge

Please look at the following image. you can see some red arrows. on that area we need to fill the empty holes.

image 4

You will see in this image exactly what i want to make

image 5

This step is very important because we will create a continuity in our layout

Now comes the funny part. please select a Hard round brush ( already in photoshop ) and on this layout, please add different details like me. use different colors if you want a nice effect

image 6
Click to enlarge

Now set the foreground color to white, and with a smaller brush add another circles over the colored circles

image 7
Click to enlarge

Now it is time to add some text, on our layout, and of course some text

image 8
Click to enlarge

You can see that i have placed 4 buttons at the top of the layout. i consider there are a little to simple, that's why we need to add another details for that buttons

Create a new layer ( press Ctrl+Shift+Alt+N )

Then with another set of brushes : Tech Brushes

Add some minor details

image 9
Click to enlarge

Of course on this layout can be added a lot more details. If you have time I want to see layouts you can made using photoshop brushes. the best layout with a unique idea will receive a VIP subscription for one year

This is my final result

Web 2.0 Vector Layout
Click to enlarge


Author's URL: amitk
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

No comments yet...
Add comments to "Web 2.0 Vector Layout"

Captcha