Published on Wed, Sep-01-2010 by Wojciech

Create Colorful Blog Web Layout Using Photoshop

Hello, in this tutorial I’ll show you how to create an amazing colorful web blog layout using Photoshop. In this tutorial we will use only basic tools, like rectangle tool, gradient tool, layer styles, therefore this tutorial will be the good start point for web develop beginners. A result will be a professional web layout that you can convert to WordPress blog theme.

You May Be Interested In The Following Posts

Final Image Preview

blog web layout


Create new document 1200x1800px. Open file bg file , go to Edit > Define pattern and click OK. Come back to new document, go to Edit > Fill, choose ‘pattern’ and select our pattern. Now you should have document filled with excellent pattern!


Import logo file and place it on the top. Use Rounded Rectangle Tool with Radius set to 10px and draw a rectangle. Then set to its layer style:

blog web layout

blog web layout

blog web layout

Gradient colors are #4e0101 and #ad1414.
Now we should have something like that:

blog web layout


Holding CTRL click on layer thumbnail. Then right click on selection and choose Transform Selection. Transform it as it is presented below:

blog web layout

On the new layer fill new selection with white. Then add Gaussian Blur filter with radius 25-50. It depends on how light menu should be. Duplicate layer few times and try to experiment with opacity.


With Horizontal Type Tool insert some text using font Lucida Fax. To the text layer add style:

blog web layout

Using Rounded Rectangle Tool create submenu. To the layer add style: (Gradient colors: #c35a0c, #ffae00)

blog web layout

blog web layout

Now we have:

blog web layout


It’s very important step. In order to make our submenu more interesting we’ll add some oblique gradients. CTRL+Click on layer thumbnail and using Gradient Tool make some gradients. You can press SHIFT while drawing to make sure that gradients will parallel to each other.

blog web layout

blog web layout

You can erase gradients on the edges. Set layer opacity to 17%;


I found some icons on the Web and added some submenu positions. You can place there anything you want. As you can see, the submenu title isn’t visible, so using Horizontal Type Tool place it. I made a search box on the right side of menu, simply because I wanted not to leave so much space, but if you have a very large menu it isn’t needed.


With Rounded Rectangle Tool make box and set style: (Gradient colors: # 0a324c, #0088b5)

blog web layout

blog web layout

Now do as we did in 5.step, but gradients can be thicker.

blog web layout



Find any image, crop it and place over the slider’s background. Add style: (Stroke color: #072231)

blog web layout

Now CTRL+Click on layer thumbnail and using Rectangular Marquee Tool with option Intersect with selection select a bottom part.

blog web layout

Create new layer, fill the selection with black and change opacity to 80-90%; Add some text.


With Pencil Tool make some dots. Add them style: (Color: #072638)

blog web layout

blog web layout

The “selected” dot has color: #73a7bf and additional style:

blog web layout


With Rounded Rectangle Tool create box. Add style: (Gradient colors: #da690e, #e3b410)

blog web layout

blog web layout

Do as in 5.step with gradients. Add title (Lucida Fax, 14pt), text layer style:

blog web layout

Find some photos on Google and add them the same stroke as in 8.step


By now, our tutorial is finished. I taught you basis, but if you want to add some new modules (Login box, Gallery slider) I give you colors I used:
Log inbox: #cec0a5, #f7f6ef;
Gallery slider: #410c1e, #ec4a7c;
Twitter: #bbc9cf, #dee8ec;

Final Result: Colorful Blog Web Layout

blog web layout

Download Psd file


30 Responses

  • Ejaz Siddiqui say:

    I am really enjoying reading your well written post. It looks like you spend a lot of effort and time on your site. I have
    bookmarked it and I am looking forward to reading new news. Keep up the good work!

  • Web Designing Company India say:

    Hi friend. My partner and i seriously enjoy the article as well as your current webpage all in all! Your posting is actually incredibly clearly composed as well as very easily understandable. The WP design is awesome as well! Would definitely be fantastic to learn where I are able obtain it. Please hold up the very good job. We need much more these types of web masters
    just like you on the internet and much less spammers. Excellent mate!

  • Clipping Path Service Provider say:

    Very cool design. Nice tutorial. Well explained. Thanks for share this very easy tutorial of web layout design. :)

  • photoshop stuff say:

    Nice tutorial, with the exception of the sidebar background being transparent, I love the colors and layout.

  • MiZ say:

    very very beautiful..bookmark it

  • Reeka say:

    Its would be great if we could see final FULL size.

  • Rigoberto say:

    From Caracas, Venezuela…
    “Excelente. Voy a seguir el Tutorial para lograr el resultado final. Muchas gracias por compartir tu conocimientos…”

  • bitsgh say:

    Hi guys, your site looks very good and insightful. However some of the tutorials are difficult to study, in that, the trainers keep missing up the steps, hence we the newbies find some very difficult to comprehend. Once again bigups to you all.

  • Philippine Overseas Employment Agency – Michael say:

    Great layout tutorial. Hope to see more of your contribution.


  • Jasper say:

    Thanks for share :D

  • ricky say:

    Interesting tutorial. Nice shared.

  • neo tech blog\ say:

    thanks for this tutorial helping a lot

  • shopping plan say:

    Willingly I accept. In my opinion it is actual, I will take part in discussion.

  • ED Hardy say:

    In my opinion you are not right. I suggest it to discuss. Write to me in PM, we will communicate.

  • Ali say:

    Very Wonderfull Layout

  • Brett Widmann say:

    This is an awesome tutorial. I love the final result.

  • BesEveseeFeft say:

    dobry poczatek

  • Drew say:

    Nice tutorial!

    Is there a tutorial in making this work with say Joomla or WordPress? I can create graphics all day long but the missing step for me is actually getting it to work with a main stream blogging software.


  • clipping path say:

    Your blog is really helpful for photoshop tutorial & lots of tips!
    many many thanks for sharing this nice post!

  • moedbet say:

    As a result of you – this is very constructive !

  • Jasa Pembuatan Web say:

    Wow.. I Love This Site, Free .Psd Design and much more…. Thank You….


Leave Your Response

About PsDeluxe

Psdeluxe is a Design blog dedicated to mainly Photoshop lovers and enthusiasts. We regularly update blog with free and easy to learn free Adobe photoshop tutorials, useful freebies for design projects, powerful tools that will make your work easier and we publish showcase of most beautiful and interesting designers works around the work that hopefully will inspire. Learn Adobe Photoshop techniques with us. Talented and professional designers are always welcome to join our author team. Feel free to subscribe to our Rss feed to be first who get all valuable information for designers.

     Hostgator Coupons | ThemeLabs | MaxReview theme | Review themes

Recommended Links

Wordpress review theme