GRAFPEDIA 70.000+ resources graphics & tutorials for only $49

Grafpedia » Templates » Psd Themes » Design an awesome colorful layout

25
May

Design an awesome colorful layout

Psd Themes, Templates, Tutorials, Web layouts
43 Comments

colorful-layout In this tutorial i will show you how to create another web 2.0 layout for your creative portfolio. You can easily transform this PSD layout into a wordpress portfolio theme because it use one of the latest web design trends.
The layer styles used in this tutorial you can download from here

Preview full size web 2.0 layout

Apply for VIP to download this PSD Layout and the brush set. Please note that you can download ALL our Premium resources if you have a VIP membership

Create a new document with the following size: 960 x 900 pixels
I will use a dark color for the background #0a0a0a
I will create another document with the following size: 270 x270 pixels and I will create a simple shape with Ellipse Tool

150

Then I will add the following layer styles

240

330

This is my result

413

Now I will go to Edit > Define Brush Preset

513

I will choose a name for my brush, and I will click ok.
Now I select Brush Tool, and I will create a few points on my layout

613

I will change the blending mode for this layer to Hard Light, and I will lower the opacity for this layer to 65 %

712

Now I will select the brush I just create a few steps ago, and I will bring up the brush settings palette (Windows > Brushes and I will use the following settings

812

912

1012

Then I will create a new layer on top of all layers, and I with the brush we just create I will make some drawing on the header of the website. Please note that you need to set your brush size to maybe 40-50

1117

Then I will make the drawing on the header

1213

I will go to Filter > Blur > Gaussian Blur and I will use the following value

1312

Then I will change the blending mode for this layer to Soft Light, and the opacity to 50 %

1411

I will create a new layer (press CTRL+SHIFT+ALT+N) and I will change the blending mode for this layer to Overlay, and the opacity value to 50 %, and then with Brush Tool I will create the same circles

1512

I am ready with this nice colorful header. Now I will create a few shapes with Rounded Rectangle Tool

1610

For the top navigation bar I will add the following layer styles

1711

189

199

209

2115

This is how my navigation bar will look like

2211

For the bottom shape I will lower the opacity to 20 %. I will not show you this step anymore because it is a very simple step.
Now I will add some text over my layout with Horizontal Type Tool

2311

I will create a new layer, and with Pencil Tool I will add some details on my navigation bar. If you use a small 1 pixel brush you will be able to create the dotted line and the arrow very easy

249

I will add some images on this layout. This is my final result

258

I will show you another look. I have used some triangles

268

And another result with a hexagonal brush

278

I have included the brushes in the download. If you don’t know already our entire downloads from Grafpedia including this PSD layered layout and all other layouts and resources are available exclusively for VIP members. We charge a very small fee, and you will be able to download all. Join now !

We offer up to date 70-648 questions and answers with 100% success guarantee.  Download the 650-195 tutorials, study guides, dumps and 642-456 practice test to ensure your success in exam.

Download

Responses to “Design an awesome colorful layout”

  1. sandeep 25.05.2009 um 12:31 am

    wow.. nice layout!

  2. Carolina 25.05.2009 um 7:47 am

    Great result. I like the design very much. I will apply for VIp to download this great PSD layout

  3. david 25.05.2009 um 7:50 am

    Keep up the good work admin. I really appreciate your hard work. I visit your blog from almost one month and i like that you update each day your blog. I really want to see what ideas do you came up with. I am also what you will release next in this blog for VIP.
    Can i suggest a set of vector laurel ?

  4. Deea 25.05.2009 um 7:54 am

    I like the third layout. with the hexagonal brushes. Very nice work. All your tutorials are very easy to follow. I am trying to learn Photoshop from a long time, and to be honest only on your website i’ve learned so many because you make it very easy for beginers like me.

    I like that you provide full PSD files ( with all layers, and i can play alone with the settings )

    Great job. Keep up the good work

  5. Eric Shafer 25.05.2009 um 12:49 pm

    This is a really pretty layout, great tutorial.

    Featured here: http://www.presidiacreative.com/web-picks-22/

  6. wiphone 25.05.2009 um 2:53 pm

    your designs are always the best! thanks for sharing and also teaching me

  7. jermaine 25.05.2009 um 3:29 pm

    Nice work keep it up

  8. joyoge designers' bookmark 25.05.2009 um 4:00 pm

    It looks really nice, thanks for the tut..

  9. huwaw69 27.05.2009 um 12:55 am

    wow this is really cool awesome tutorial, very nice and attractive header… i like the bubbles..

  10. Catea_iv 27.05.2009 um 3:18 pm

    This was a very enjoyable tutorial… and very colorful indeed :)

  11. CgBaran Tuts 1.06.2009 um 8:58 am

    Excellent layout thanks

  12. projektowanie stron tworzenie 1.06.2009 um 1:31 pm

    very nice layout in 5 steps :) wow.

  13. flashfs 6.06.2009 um 4:57 pm

    Thanks for the tutorial. Beautiful and simple header effect

  14. Lulush 11.06.2009 um 9:45 am

    WOW! this is amazing!
    thanx for this tutorial

  15. Color Printing 15.06.2009 um 7:19 pm

    I like the bubbles-effect of the brushes and the faint colors on the black background. Thanks for sharing these great tips, again.
    So is there anyone who can teach me how to do vector graphics? :D

  16. SOS Media 23.06.2009 um 10:49 am

    Thanks for the tutorial, looks great.

  17. Schmiddy 23.06.2009 um 1:47 pm

    I love it. Simple and very usefull tutorial. Go ahead ;)

  18. vatz 29.07.2009 um 7:46 am

    woooow!!!!

  19. Guru 7.08.2009 um 12:47 am

    Nice man, This very goog and very cool web page. I like it very much and learn better things.

  20. BEAN 12.08.2009 um 2:52 am

    Very good!!!

  21. Mehdi 9.11.2009 um 8:39 am

    thats awesome work i’ll try to do one like this & publicate it i’ll tell you how many downloads in a mounth

  22. Gonza 13.12.2009 um 9:13 pm

    Brilliant! I used that in my web. Thanks!

  23. Rooney 23.12.2009 um 3:29 am

    Nice.Very Nice But,

    I want to change my doc to da size of 1080px X 960px

    But da clarity is gettin low.. Its not like HD.So pleez can just Display How to Change it to a more like HD content. But Razven I Really like ur Hard work and da tutorials r Kool…

    Thanks…….

  24. Razvan 23.12.2009 um 3:53 am

    it is very easy Rooney. Go to Image > Canvas size ( or use the photoshop shortcut ALT+CTR+C ). Please note that it is not the same like Image > Image size

    Please let me know if everything is good.

  25. agon 28.12.2009 um 8:18 am

    hi awesome tutorial… i like ur tuts very much, and i learned a lot from this site…i have a question…whith this brush that u created and then u brushed the canvas whith hard light bland mode and then u lowed the opacity to 65 , i didnt have a same result like ur points, but i gave a little gaussian blur and finally i got a result. was it the point of those hard lights brush or there is another way …?

  26. Razvan 28.12.2009 um 8:29 am

    When you create the document first time, please use 72 DPI. If you have a greater value your result will be different.
    Let me know if this helps

  27. agon 28.12.2009 um 9:25 am

    no it doesn’t help but anyway i got the result whith gaussian blur so thanks for ur time …

  28. Tiger_bank 12.01.2010 um 4:33 pm

    This is cool! nice tutorial

  29. Nick 7.05.2010 um 3:56 pm

    Argon and Razvan,
    I think the part of the tutorial that was missing was adjusting the “Other Dynamics” option under Brush styles. You need to set the Opacity Jitter to something around 75%. Hope this helps.

  30. Zeeshan 9.06.2010 um 10:55 am

    good tutorial. thanks
    http://www.zeeshanfolio.com
    http://www.elixirsoftsolutions.com

  31. eye shield 9.08.2010 um 9:14 pm

    how to convert photoshop to web site

  32. riky 3.10.2010 um 9:03 am

    Wow, nice share … thx for the tutorial :-)

  33. lyy 12.10.2011 um 2:57 am

    Beautiful !
    I like it very much !

Trackbacks

  1. Learn how to create an awesome colorful layout
  2. Best Tutorials, Websites and Resources | Webdesigner blog
  3. 30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites | Dzine Blog
  4. 30 tutoriali z layoutami | webdesign.stripes-design.pl
  5. 160+ Mega Web Design Tutorial Roundup | tripwire magazine
  6. 40 Excellent Web Design Tutorials for Busy Web Designers | tripwire magazine
  7. 40 Web tutoriais para Web Designers atarefados « Upmasters
  8. 30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites | DzineBook
  9. 185+ Web Design Tutorials using Photoshop, CSS, HTML etc. | tripwire magazine
  10. How to create a software web layout | Grafpedia

Leave a reply

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

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

.