Line25

How To Create a Blog Theme Concept in Photoshop

Read the full post

In the next few tutorials posts we’re going to go through the process of building a WordPress theme, starting today with the initial design concept in Photoshop. Follow this step by step walkthrough of the creation of the design concept for my Ticket Stub theme, which is based on a movie review type blog. We’ll create a full page design ready for coding up into a fully working website.

The theme we’ll be building over the next couple of posts is named Ticket Stub. It’s a clean and simple blog layout that’s set up as a movie review blog, but is generic enough to be used for any kind of website.

View the large scale blog theme concept

We’ll start by creating the background texture tile. Open up Photoshop and add a spot from a subtle grunge brush in the centre of the document.

Grab the rectangular marquee tool and draw a square selection somewhere in the centre. Invert the selection and delete out the excess. It’s trial and error to find a section that repeats without any obvious edges.

Reduce the opacity of the texture to around 30%, then see if it repeats correctly by duplicating the square to cover a larger area. Use the Clone tool to delete any unwanted particles in the original file.

With the original texture file selected go to Edit > Define Patterns to save the swatch. Fill the background of your web design file with this newly created pattern file.

Outline a 960px centre area in the document and fill it with white. I use the marquee tool by right clicking a selection and choosing Transform Selection. In the top bar you can then enter specific dimensions.

Add a very subtle Drop Shadow effect to the content rectangle. I’m using settings of 6% opacity, 0 distance, 0 spread and a size of 10px. Also give the layer a very fine 1px grey stroke to help define the edge.

The theme’s default logo can be added to the space in the header area. Fill a rectangle with a deep red.

Add a Gradient Overlay using the Overlay blending mode. Reduce the opacity in order to tone down the impact of the gradient to leave a subtle change of colour.

Add a 1px Stroke using a darker shade of red, then add an Inner Glow effect using a lighter shade. Adjust the options so the Inner Glow has a normal blending mode, 100% choke and 1px size.

Use the subtle grunge brushes to add a textured overlay to the logo using both light and dark red tones.

Add a spot of text to the logo. Here I’m using the American Typewriter font, with size and tracking adjustments on the word ‘Stub’.

Paste in a couple of star graphics from Illustrator and add a subtle drop shadow to the text to finish off the logo with a retro style cinema ticket stub appearance.

Add a couple of icons to the upper right area of the header for RSS and Twitter links. All text will be set in Helvetica in this design, while a deep red has been selected as the global link colour.

Use a guide to highlight a margin from the edge of the content area, then begin fleshing out a sample blog post with header and post image. Set the header to uppercase to help add typographic emphasis to these elements.

Generic dummy text can be used to represent the introductory content for the post. Set up the font at a legible 14px with a generous line height of around 24px to help with readability. Black on white would be way too contrasting, so a mid to light grey is selected for the body text.

Blog posts also have snippets of information that are displayed with every post. These can be included in their own panel. Draw a grey rectangle across the width of the column and add a 1px stroke of the same colour.

Set up an Inner Glow effect using the Normal blending mode, white, 100% choke and 1px in size to create a double border effect.

Use the same body copy text styling to add the date, category information and read more link for this sample post. Don’t forget to highlight links in the red link colour.

The date and category can be grouped together, separated by a little star graphic, while the read more link works well aligned to the right to suggest that it leads further.

Group all the elements that make up a sample post, then make a duplicate and position it underneath. Adjust the title to something much longer to plan how a longer sentence would wrap.

Use the same panel styling used in the post excerpts to create button elements for the older and newer post links.

The same button styling can be used in the sidebar to allow for more prominent links to the blog pages and categories. Align the text to the right in these elements.

Create a search bar using a finely outlined rectangle, then replicate the style of the icons in the header with a grey circle.

Use an Elliptical marquee as the base for a magnifying glass icon. Right click and select stroke to give the selection a 2px white outline, then finish off the icon with a handle using the Line tool.

It’s important to provide consistency throughout any design, using the same link colour, button styling and similar icon designs.

A short About excerpt in the sidebar helps fill out the empty space and provides another link through to other areas of the website.

The sidebar currently blends into the content area a little too much. Draw a light grey rectangle down the right side of the design to enclose all the sidebar elements. This helps the content with its brighter white background stand out with more prominence alongside the slightly darker grey.

Finish off the design with a back to top link, again creating a little icon based on the same style as those in the header.

This leaves our concept for our blog theme homepage complete. Next time we’ll begin chopping up the design and creating it as a coded webpage with HTML and CSS.

View the large scale blog theme concept

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

34 Comments

  1. Oren says:

    To avoid the trial and error on the pattern edges, you can offset 50% right and 50% top, and then blur/smudge the middle "+" that was once the edges. This method guarantees smooth repeating edges.

  2. María Lc says:

    Awesome, as always :)

  3. Great design, and I love the way you used the colors. I also love the way the way you approached making a pattern.

  4. 123 says:

    FYI

    The button that says "View the large scale blog theme concept" opens the modal popup with the same image 4 times

  5. David says:

    Chris, great tutorial. The gangsta Lorem Ipsum is nicely slipped in :)

  6. Danny says:

    Great tutorial. Always find some things I haven't done that way.

  7. Kevin says:

    How did you get the drop shadow on the logo red background? It appears to bend and its just the bottom 2 corners. Please explain how!

  8. Leonardo says:

    Hey chris!, Could you next time code it into wordpress theme? :), i mean for practice ;D.

    Thanks!

  9. TechHello says:

    Hey Chris, thanks for another inspiring tutorial. As always, your work is well presented and nicely finished!

  10. Thanks Chris, Great creative design

  11. Aries says:

    I am in love with the final result of your tutorial, do you share the WP theme for free? Or if you want it to sell it I will buy, as long as the price it's reasonable and thank you.

  12. Awesome tutorial! Thanks for sharing this techniques. The best thing I have found about some of these techniques is how often you have to use them in other projects.

  13. Another great concept tutorial, thank you!

  14. Good tutorial. Bookmarking for my design team. Thank you for this helpful post.

  15. Mizko says:

    Great. One tip would be using vector shapes in Photoshop. This will allow you to re-size shapes (circles, squares etc) easily and not lose quality down the track.

    But Awesome!

  16. Cunsna says:

    <a href=http://goo.gl/JNppB>Steve Jobs: From college dropout to tech visionary</a>
    <a href=http://goo.gl/k2Z6B>Rebel government pushes for funds as hunt for Gadhafi continues</a>
    <a href=http://goo.gl/I4G7L>World's 12 worst tourist traps</a>
    <a href=http://goo.gl/aBZQD>Online dating? Why no one wants you</a>
    <a href=http://goo.gl/l81Yc>Facebook makes its privacy settings act more like Google+</a>

  17. Another great tutorial, thanks for the tips

  18. Where is the second part meaning making it web page adding html and css

  19. ABDUL JANOO says:

    cool work……….
    it look simple but at the time of making real effort will come 2 know.

  20. Umer Malik says:

    i just love this post.

  21. Wish I had these kind of articles when I was learning web design!

    Good work Chris

  22. Maan says:

    very neat and clean blog design. thnx to share your tutorial with us.

  23. Suhas says:

    Hi, I am a newbie Photoshop user. Will I be able to follow this tutorial ?

  24. It’s actually extremely informative tutorial, I truly would like to thanks to you. With the help of your blog I find out a new object in Photoshop. :)

  25. shan says:

    Nice tutorial,keep it up!!!!

  26. Vaishakh says:

    thanks for this inspiring article.. worth reading

Comments are now closed