Web 2.0 Vector Layout

Web 2.0 Vector Layout

Information

Submitted on: 26 02 2009

Category: Web Layouts

Rating:

1 Star2 Stars3 Stars4 Stars5 Stars



Description:

I am sure you are mad on us because we haven’t posted a tutorial lately. we are working for a new version of www.downplazza.com
We will release soon a commercial version for this script with more advanced features:
It will be a hybrid between sitepoint marketplace, and deviantart plus a lot of new features. until then i will continue to write tutorials more often.

Today i will write tutorial number 159 from our marathon.
I will create a website only with vector brushes, you can use this type of website for a portfolio website, or an agency layout. of course you can change the design a little and you can use one what type of website you want

This is my final result

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: photo-shop-brush ( 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

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

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

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

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

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

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

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

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

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

Got something constructive to say?