Grafpedia

Premium graphics for smart webmasters

Home News Tutorials VIP Downloads

RSS Feed

About Us Advertise
Search

Grafpedia Tutorials Graphic Design Studio Web Layout

Graphic Design Studio Web Layout

in Tutorials, Web layouts by admin on April 5th, 200922 Comments

Webfetti.com

Ads by Goooooogle

7
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

Please note the brush size should be 600 pixels

I will go to Filter > Noise > Add noise

I will use the following settings

Your layout will look like this one

I will go to Filter > Blur > Motion Blur

In the Motion 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

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

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

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

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

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

Click on the following image to see my result better

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

For all these shapes i will add the following layer styles

This is my result

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

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

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

Login/Register to Download

Digg Del.icio.us StumbleUpon Technorati 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

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 XHTML 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?

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

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 XHTML 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 Muy Interesante!

19. George 8.05.2009 um 8:26 am This is a great tutorial. All of the tutorials I have seen are awesome. My 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?

Trackbacks
1. Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster? 2. psaddict.com

Leave a reply
Name (required) Mail (will not be displayed) (required) Website

submit comment

Learn More | Sign up

Advertise Here

Login
Username Password
Login
b c d e f g

Remember me

Register Recover password

Grafplus lates downloads

Vector missile launcher Vector bug - Vector grasshopper vector bombs - vector torpede Vector bilboard Old style retro car in vector file format Vector army tank ACrobatic vector plane Vector military tank Vector acrobatic plane Vector speed boat

Subscribe to Grafpedia
Subscribe to our RSS feed and you can download unique premium downloads

Enter your email address:

Subscribe

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

Advertise here
Advertise Here

Recent Comments

admin on Draw Fairy Tale Characters in Photoshop klavins21 on Draw Fairy Tale Characters in Photoshop George on Design a realistic website layout in photoshop Nick on Design a two color website layout in Photoshop StriderGax on Design a two color website layout in Photoshop

Pages

About Advertise Contact us Vip Membership

Most downloaded resources

27.000 Photoshop Gradients

Last Posts

Draw Fairy Tale Characters in Photoshop Hi-Res Square pattern brushes Design a two color website layout in Photoshop 35 Seal Brushes - Badge Brushes Vector ink drawings

2008 | Grafpedia is proudly powered by Wordpress