Você está na página 1de 23

Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.

com/tutorials/graphic-design-studio-web-layout

A dvert ise Here CLOSE X

Loading Image...

M ain Page
*** VIP ***
M y account
Contact

Grafpedia
Premium graphics for smart webmasters RSS Feed

User: Pass:
Not a M ember ? Sign Up

1,720 Subscribers

Home
News
Tutorials
VIP Downloads
Stock Photos

Apply for a VIP Account and download ALL our VIP resources: PSD Layouts , Vector Files , Photoshop
Brushes , Vector Icons, Stock Photos, Textures etc...

Grafpedia Tutorials Graphic Design Studio Web Layout

1 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

Graphic Design Studio Web Layout


in Tutorials, Web layouts by Razvan on April 5th, 200926 Comments

8
tweets

retweet

In this tutorial i will show you how easy is to create a layout with transparent buttons. This type of layout
was used lately a lot because it is the latest trend in website design. For start i will show you how to create a
colorful background then i will transform this background into a nice layout.

Preview full screen

Lets 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

2 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

Please note the brush size should be 600 pixels

I will go to Filter > Noise > Add noise

I will use the following settings

3 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

Your layout will look like this one

I will go to Filter > Blur > M otion Blur

4 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

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

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

5 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

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

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

I will use one more time a big smooth brush

6 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

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

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

7 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

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

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

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

8 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

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

Now i will add for all layers some layer styles

9 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

Click on the following image to see my result better

10 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

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

11 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

For all these shapes i will add the following layer styles

12 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

This is my result

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

13 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

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

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

14 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

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

Want to download this PSD layout and the XHTM L files for this tutorial ? Join our VIP membership

Digg
Del.icio.us
StumbleUpon
Technorati

15 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

Reddit

Responses to Graphic Design Studio Web Layout

1.
Belinda 6.04.2009 um 5:26 pm

Hello,
I am having trouble downloading your free download for the day. It is the purple website background.
Can you please let me know which program I have to open it with.

Thank you!

2.
admin 7.04.2009 um 1:22 am

Hello.

You need winzip or winrar to open the files.


rarsoft.com
winzip.com

If you still have problems please let me know

3.
Blake 7.04.2009 um 1:09 pm

Great Tutorial!
Here is my version:

http://zoostormhost.co.uk/img/index.png

4.
admin 7.04.2009 um 1:39 pm

Hi Blake. Looks very good. You can try also with another colors to see maybe you can create a better
effect

16 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

5.
Blake 7.04.2009 um 2:34 pm

Thanks, I will have a go with other colours and see what I render, what I come up with.

Also, I didnt know you had to pay on here, I cant afford it at the moment so :/

Lol.

6.
Olek 8.04.2009 um 3:40 pm

Great tutorial, exellent resoult! :thanks:

7.
Karan 10.04.2009 um 12:04 pm

Its awesome..

Really Cool Thanks for this tutorialExcellent Result.

Keep Going.

8.
Karan 10.04.2009 um 2:06 pm

Can you please provide the tutorial on changing it in XHTM L and CSS Template.

I would be grateful to you..

9.
klavins21 13.04.2009 um 1:56 pm

if I purchase membership I will be able to download html or php files for this website or I must make it
my self?

17 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

10.
admin 13.04.2009 um 2:31 pm

Hello Kalvins. We have already added the coded version of this layout a few minutes ago

11.
Brochures 13.04.2009 um 9:40 pm

Loved your color selection for the background. The design is simple, neat, and very sophisticated.
Thanks for posting this cool tutorial!

12.
simon 14.04.2009 um 4:31 pm

what day do you post free downloads? thanks, btw great layouts

13.
admin 14.04.2009 um 5:09 pm

We release downloads each day. Each download will be free for 24 hours. After that will be available
only for VIP members. There is a small fee to access VIP area.: 9.95 $

14.
Mark 15.04.2009 um 7:33 pm

Nice. I learned a lot from this.

15.
oscommerce templates 21.04.2009 um 11:20 am

very very nice tutorial.thanksvery easy to follow

18 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

16.
Company Logos 25.04.2009 um 12:33 am

Hey dearit would be greatful if you can also please provide the tutorial on changing it in XHTM L
and CSS Templatei think that would be quite handful for me..

17.
ALS 3.05.2009 um 12:02 am

How do you slice or create this to fit in xhtml & CSS?

Anybody able to do that?

18.
retoque fotografico 3.05.2009 um 5:46 am

M uy Interesante!

19.
George 8.05.2009 um 8:26 am

This is a great tutorial. All of the tutorials I have seen are awesome. M y main reason for learning how
to use Photoshop is to then take that PSD Template slice and dice it to use in Dreamweaver for either
dynamic content (sections resize yet keep background and image clarity).

Are you able to code this up in Dreamweaver or post an example?

20.
Val 11.06.2009 um 1:23 am

Great tutorial. What is the name of the font you used for the headlines?

19 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

21.
TutsKing 15.07.2009 um 1:49 pm

Very Nice. I love how you made the background image.

22.
luciano 5.10.2009 um 2:41 am

nice work, just wondering though how to get the background image fit in xhtml and css? Same thing
about how you make those shooting stars background on the main page, grapdedia? Im trying to figure
how you would apply it in dreamweaver after you done in PS.

23.
Luiz Mendes 7.10.2009 um 7:59 pm

Hi, im a little bit late, but, thanks for the great tutorial. The way you made the background is awsome!
I loved this and learned too !

Trackbacks

1. Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks,


Downloads, M ath and being a Web 2.0 Hipster?
2. psaddict.com
3. 40 best photoshop tutorials for web layouts - Grafstorm

Leave a reply

Name (required)

Mail (will not be displayed) (required)

Website

20 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

submit comment

A dvert ise Here

Grafplus lates downloads

Nostalgic vector tank - Old-fashioned asault weapon car


Vector chapel illustration
Detailed vector boat
Police vector ship
Vector plane
Vector working tools

21 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

Vector illustration of an old ship


Simple vector billboard
Vector panic rack
Old style vector tank - Army vector tank

Categories

Actions
Brushes
Contests
Designing
Drawing
Gradients
Icons
Illustrator
Layer Styles
News
Patterns
Photo Effects
Stock Images
Swatches
Textures
Tutorials
Vectors
VIP Downloads
Web layouts

Pages

Terms of Use
Advertise
Commercial License
Contact us
Privacy Policy
Vip M embership
Write for us !

Write for Grafpedia

Do you want a Free VIP account on Grafpedia for one year ?

Write one high quality tutorial for us and we will give you a VIP account for one year.

For more details please contact us

22 of 23 10/12/2009 3:14 PM
Graphic Design Studio Web Layout | Grafpedia http://www.grafpedia.com/tutorials/graphic-design-studio-web-layout

Want to download ?

If you don't find the download links please see this page

Last Posts

Photoshop Flower Brushes


Ornamental, floral, swirly and curly vector graphics
Universal icons for your website, application, or presentation
Design a car dealer website layout with Photoshop
Grafpedia - New Design

2008 | Grafpedia is proudly powered by Wordpress

23 of 23 10/12/2009 3:14 PM