GRAFPEDIA 70.000+ resources graphics & tutorials for only $49

Grafpedia » Templates » Psd Themes » Graphic Design Studio Web Layout

05
Apr

Graphic Design Studio Web Layout

Psd Themes, Templates, Tutorials, Web layouts
47 Comments

tut7

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

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

110

Please note the brush size should be 600 pixels

210

I will go to Filter > Noise > Add noise

310

I will use the following settings

410

Your layout will look like this one

510

I will go to Filter > Blur > Motion Blur

62

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

71

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

81

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

91

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

92

I will use one more time a big smooth brush

111

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

121

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

131

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

141

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

151

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

161

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

171

Now i will add for all layers some layer styles

181

191
201

Click on the following image to see my result better

211

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

221

For all these shapes i will add the following layer styles

231

241

251

This is my result

261

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

271

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

281

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

291

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

301

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

Guaranteed 350-018 exam preparation in easy and fast way! Subscribe for 646-363 online training program and pass your 642-515 exam in first attempt.

Try our booklet printing today and get to see the quality of Online Color Printing at PsPrint.

Download

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 didn’t know you had to pay on here, I can’t 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 tutorial…Excellent 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.: 49 $

  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.thanks…very easy to follow

  16. Company Logos 25.04.2009 um 12:33 am

    Hey dear…it would be greatful if you can also please provide the tutorial on changing it in XHTML and CSS Template…i 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?

  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? I´m 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, i’m a little bit late, but, thanks for the great tutorial. The way you made the background is awsome!
    I loved this and learned too !

  24. arizona search engine optimization 29.11.2009 um 2:49 am

    AMAZING! This is a perfect tutorial for web 2.0 look. Thanks for the gradients. http://arizonaseo.com/arizonagraphicdesign.htm

  25. Peter 9.12.2009 um 2:00 pm

    Lucida fax looks like the font that has been used here…

  26. Zavrab 28.12.2009 um 9:52 am

    good tutorial, thanks

  27. maq 19.01.2010 um 2:13 am

    I like background. Really good.

  28. Maneet 28.02.2010 um 7:21 am

    Hey great work..
    a vry simple and an easy way to create such a gud backgrnd.
    thanks for d tutorial.
    Also, where can i find more such tutorials.
    Thanks neways
    Gud Luck

  29. kinozalov 27.04.2010 um 5:20 am

    Very good instruction, thanks

  30. SessizCrew 13.05.2010 um 6:53 pm

    good perfect thanks

    http://www.mymedya.net/

  31. Sarah Clark 2.08.2010 um 10:25 am

    i am self-studying web design coz building websites is my passion;`~

  32. Christopher Mills 29.09.2010 um 1:05 pm

    web design is also a good hobby and a great job too. web design jobs pays very well;,`

  33. Anna 1.10.2010 um 12:48 am

    Thank you, very nice tutorial.

  34. ali 6.10.2010 um 6:27 pm

    Hi, thanks very much for making these great desgins for us to learn.

  35. Web Tasarım Firmalari 18.10.2010 um 2:30 am

    Thanks for the sharing about web design.

  36. thebulfrog 7.11.2010 um 4:40 pm

    This is great – one of the steps I feel that’s left out is the back and forth process every designer goes through in iterating their designs. No one starts with the finished polish. I posted a video showing my own back and forth in creating a website in a time-lapse format. http://www.youtube.com/watch?v=AOJlQRTbLpM if you’re curious.

  37. elham 19.02.2011 um 4:17 am

    hello
    thanks for your gerate tutorial.i like it so much.i am from iran then i cant going vip members.please tell me what i do to download it to now css for it.
    thanks a lot….

  38. net space profits 2.05.2011 um 8:17 am

    I feel a lot better informed on this subject since I found this site.

  39. Parkeren Schiphol 4.07.2011 um 11:38 am

    Great article. Just wondering though how to get the background image fit in xhtml and css. Know this is possible, but I am a learning developer.

Trackbacks

  1. Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
  2. psaddict.com
  3. 40 best photoshop tutorials for web layouts - Grafstorm
  4. 40 best photoshop tutorials for web layouts - Gfx Toolkit
  5. Opacity and Overlay Techniques in Web Design | Bitmag
  6. Opacity and Overlay Techniques in Web Design
  7. 250+ Best Web Design Tutorials to Take Your Creativity to the Next Level – Part 2
  8. 7 Latest Hot Practical PSD Sites + 1 Detailed Tutorial About Converting PSD into Working Web Pages

Leave a reply

  • Sign up for Grafpedia VIP
Suscribe to Grafpedia's RSS feeds!

© 2011 | Grafpedia is proudly powered by Wordpress edited by GrafikNetwork

.