How To Design A Grey-Blue Blog Design In Photoshop – GreyFuture

If you are looking for a nice way to display your photos you might want to check out WordPress Gallery Theme.

—————————————————————————————————–

This is my 2nd attempt of creating a attractive blog layout in photoshop, My previous attempt : How to Create Greenary WordPress Layout In Photoshop had a fair amount of response and had even been converted to working Blogger theme which is being used by more than 100′ds for blogspot blogs !!

This design which have grey and blue as their main base colours, PSD file have been attached at the end of the tutorial for your convenience, but please note i haven’t been able to get much time to arrange the layers and release, so you have to cope with un-arranged layers, and as always this theme is free and can be used on any commercial or personal purposes (i prefer the proper credit be given though). If anybody want to convert it into working theme don’t forget to let me know how you did :)

Final Layout

Grey Future (Click To Enlarge)

Creating The Header & Menu

1) Create a New File  (Width 1020, Height 1550)

2) Use the rectangle tool to draw a rectangle in the top.

3) Open Layer Style Palate and give it a gradient as shown in image below.

4) Create another rectangle just below the upper rectangle and add the following layerstyle.

It will look like below after your done.

5) I’ve created the top right menu using Myriad Pro (condensed) 16pt.

6) The main top menu text have been done using Myriad Pro (Bold Condensed) 24pt #444444. In the logo Myriad Pro (Black Condensed) 76pt have been used and layer style shown below have been added. Slogan is 18pt Myriad Pro (Black Condensed). If you dont have Myriad Pro, i’d recommend using Impact for the logo and Arial in other areas.

Creating Featured Section & Polishing Borders

7) Now similar to what you have done with menu, create a rectangle just below menu with approximately double height of the header, and add a light grey to medium grey, linear gradient using layer styles. This box will be used for the featured post section.

8 ) Now we’ll learn how to polish the edges to make them look more edged, this is a very easy trick, all you have to remember is that we need to 1px lines side by side, 1 will be of darker colour and another lighter colour. Check the image below.

If you are unsure about the colour, just add 1 black and one white line and play with the opacity slider in layers panel.

9) The featured post Heading text have been created using Myriad Pro (Semi Condensed) 36pt, and a gradient have been added (linear #7d7e7d to #oeoeoe). The paragraph text : Arial 14pt #434343.

10) For the button select Rounded Rectangle tool and select 20pc as radius, then draw a small rectangle. Give it a grey to white gradient and 1pc white stroke. The text is Arial Bold 18pt, with a inner shadow, the setting can be checked using the PSD file.

11) The image have to have the following style.

13) Now the last thing we need for the featured section is a shadow, which is very easy thing to add, create a new layer behind the featured post layer and create a elliptical circle, then give it a guassian blur of 25-35 px, and the readjust the position and lower the opacity to 33.

The final image uptil now for what we have done.

Creating The Posts

14) Creating the main body is easy as hell, 1st divide the width of document using the guides into two sections for your convenience. Then draw a white rectangle just below the menu rectangle. On the left section where the blogposts are visible, I have used Arial 24pt Bold, dark blue colour texts. Then i have used the line tool to draw a wide line below of two colours one light blue and one dark. Then on the right i have used Arial 12pt text. Check the image below.

For the paragraphs i have used Arial 14 pt, light grey color.

15) Next you again need to draw a rounded rectangle with 5px radius just below the paragraph, and add a 1 pc inner shadow of white colour, layer style to normak and choke to 1oo, and distance to 0, and also add a light grey  gradient , and a stroke or 1 px light grey outside. Then using Arial font write comments on left and read more on right. Go to custom shape tool and select arrow shape and draw a small arrow beside read more, and change the colour to blue.

Same way do this for the 2nd post only changing the content and the positions.

Creating the Sidebar

16) Now the main thing that need to learn about the sidebar is the box style, create a rectangle with 5 px radius, and follow the styles given below.

17) For the heading i have used Myriad Pro (Semibold Condensed, and Condensed) 36pt, with a medium grey to dark gey gradient. For the search box draw a white rectangle with 1px grey border, The search butoon is self explanatory.

18) For the catagories text and popular article text refer to the image below.

19) The last thing that is left is the divider, which i have mentioned earlier, is a dark and light line, side by side, check the image below for explanation.

Creating The Footer

20) Now as before create another rectangle below the middle rectangle, and add a linear gradient, #2a2a2a to  #373737. The big texts are created using 30pt Arial Bold white color, and Arial Bold 12pt color #747474. Now as always use the dark line and white line as the divider.  And the last thing you need to do is add a shadow, by the process mentioned above using a an ellipse and then blurring it and changing opacity. And yes you theme is finished.

Epilogue

I’m very much interested to know if you like the theme and am also interested in seeing your own personalised versions which you come up with. If its good i will even add it in this tutorial with your name beside it :) Hope you enjoyed the tutorial as much as i did writing it. Below is the download link for the PSD file.

Tags: , , , , , ,

19 Responses to How To Design A Grey-Blue Blog Design In Photoshop – GreyFuture

  1. Demitri says:

    I like the web 2.0 feel in the design will wait for the html/css tut

  2. Aevion says:

    Eye candy, i hope you dont mind if i use this for my site, i’ll send details and ofcourse give credit

  3. stumbled on the site today from good tuts, its grt cheers :D

  4. Tirath says:

    Awesome tutorial with nice Web layout
    Thanks so much for posting it
    I lean a lot form this tuts
    Keep up good work
    God bless you :-)

  5. Veronica says:

    Hi, i was very interested in this tutorial, but i would like to know, how can i upload this design at my blog (blogger, by gmail.) if you can answer me that i will be very happy

    have a nice day, or night

    • Subhadeep says:

      you can hire any pro from freelancing site to create you a blogger template out of it, check top freelancing site article for list of freelancing site. :)

  6. I cannot believe this is true!

  7. Eire says:

    Hello, I am using this tutorial as an inspiration and to learn how to use different tools when creating designs. I must thank you for taking the time making this tutorial, I have learned much already :)

    It’s just one thing..

    When you mention to make the logo 76 pt big, the text disappears ’cause it is too big too fit in the text box. So I have to use 24 pt (which you said to use on the slogan; which btw is on 6 pt).

    I find this a bit odd and I am wondering why you can make them so big in your tutorialdesign whilst I have to make my slogan, logo etc much, much smaller.

    I also have the right width and height (1020 x 1550 pixels).

    Maybe there is something that I haven’t thought of, but I’m a bit confused. Would be grateful for helpful advice, thanks.

  8. Web Design says:

    Great tutorial and one slick looking theme :)

    I’m still not sure how to create the little blue arrows for the sidebar?

    Keep it up,

    Louis
    .-= Web Design´s last blog ..Amazing Free Webmaster Tools =-.

  9. Michelle says:

    stumbled on the site today from good tuts, its grt cheers :D

  10. Nice post… I especially like the 1px lines effect, something I’d seen many times but never really got down to figuring out. :)

    Good post, I’ll pass it on to a few pals too. Keep it up!

  11. Steve says:

    Awesome tutorial with nice Web layout
    Thanks so much for posting it
    I lean a lot form this tuts
    Keep up good work
    God bless you :-)

  12. [...] more readers. The light wordpress themes seams to keep your readers more on your blog. Title : How to design a Blog In Photoshop Description :Create a grey-blue blog theme from scratch using photoshop, learn different techniques [...]

  13. [...] more readers. The light wordpress themes seams to keep your readers more on your blog. Title : How to design a Blog In Photoshop Description :Create a grey-blue blog theme from scratch using photoshop, learn different techniques [...]

  14. Very helpful tutorial….thank you.

  15. by says:

    Good post,….thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>