Creating a tech blog layout in Adobe Photoshop

In this tutorial, you’ll learn how to design a “Premium” blog layout in Adobe Photoshop, from A to Z. If you have any questions about this tutorial don’t hesitate to ask in the comments.

Creating a tech blog layout in Adobe Photoshop

Author:

Jean-Baptiste Jung

Category:

Photoshop

This is what the result will look like:
Creating a tech blog layout in Adobe Photoshop

1 - Let’s start by creating a new document. The size is 1280*1200 pixels. Fill the background with black (#000000).

2 - Create a new layer named content. Pick up the Rectangular marquee tool and draw a 976px wide rectangle. Fill it with white (#FFFFFF).

3 - Still on the content layer, use the rectangular marquee tool to draw the sidebar. The width is 331px and background color is #E9E9E9.
At this point, your design should look like this:
Creating a tech blog layout in Adobe Photoshop

4 - Create a new layer set named header. We’re now ready to create a nice header background. To do so, I have first downloaded this picture and imported it into Photoshop. Once the picture is imported, select Filter, Blur, Mottion blur and apply the effect with the following parameters:

5 - Once done, import the modified picture in the design. Crop it to 972*188px. Then, go to the Image menu and select Ajdjustments, Color balance. Add blue on highlight, shadows and midtones.
The header should look like this:

6 - Time to draw the navigation menu. Pick up the rectangular marquee tool and draw a 972*53 pixels rectangle in a new layer called navigation. Fill it with #080808.

7 - On the Layers window, right click on the navigation layer and choose Blending options. Once the Layer style window is open, add a Gradient overlay. Setting are 65% opacity, #000000 on left and #3F3E3E on right.

8 - Now, select the text tool and start adding navigation links on the nav bar. I chose Arial bold, 18pt. Color is white.

9 - For the active/hover state of the navigation links, select the rounded rectangle tool and draw a shape around one of the links. The rounded rectangle radius is 10px and the background color is #6589A7.

10 - It’s time for us to add a logo to our blog design. I have chose the Futura bold font with 72pt font size and black color (#FFFFFF). Simply type the text you want, and duplicate the layer once you’re done with typing.

11 - On the layers window, make sure the first text layer (Not the copy) is selected, right click and select Blending options. We’re going to add a nice, very “technology-like” gradient on the text. Select Gradient overlay and add the gradient. Left color is #EEEFF0 and right color is #4E4D4D.

12 - Once you’re done with the gradient, select the copy of the layer (which is plain white). Pick up the Move Tool and use the keyboard arrows to move the layer 1 pixel on the right and 1 pixel on the bottom.
After the 3 latest steps, your blog logo should looks like this:

13 - We’re done with the header, and it’s time to create our posts. The first thing to do is to create a new layer set named post. Then, get three or four 200*200px images to illustrate the posts. Such images can be found on my other blogs Cats Who Code and WpRecipes. Import one 200*200 pixels image into the design, and place it 18px from the edges of the white container.

14 - The font used for the titles is #222222 Arial, bold, 36pt. Type the text you want for a post title, and select it using the Text Tool. On the Photoshop menu, go to Window and select Paragraph. Set the AV to -75, according to the screenshot below:

15 - Pick up the text tool again and write the author name, the post category, the number of comments or anything else. Select white (#FFFFFF) 12pt Arial bold font.

16 - Select the rectangular marquee tool and draw a rectangle around the text you just entered. Fill the rectangle with #6589A7. Make sure the text layer is above the shape.

17 - For the post excerpt, I have choosen Arial font, 12pt, Italic. Color is #555555.

18 - Select the Line Tool and draw a #CCCCCC line below the post. The post should looks like the following:

19 - Copy the post layer set as many times as necessary to fill up the content space:

20 - Time to create a cool sidebar for our blog design. Let’s start by creating a new layer set named sidebar. The first thing to add to the sidebar is some 125*125px ads. Download some from your favorites blog and import it into the design. In the psd, I have choosen to display 4 ads, but of course it is just an example.

21 - In order to draw a sidebar widget title, create a new layer set named widget, pick up the rectangular marquee tool and draw a 342*40 pixels rectangle on the sidebar, starting from the left edge. Fill it with #6589A7.

22 - Use the Zoom Tool to zoom on the right side of the newly created rectangle. Pick up the Polygonal Lasso Tool to draw a shape like the one in the screenshot below. Fill the shape with #4F667A.

23 - Add some text in the widget title. The font used in the example is 12pt Arial bold. Color is white (#FFFFFF).

24 - Add some text below the title. Font used is #222222 12pt Arial bold. Once done, your sidebar widget should look like this:

25 - Duplicate the widget layer set as many time as needed to fill up the sidebar space.

26 - Our design should now looks like the screenshot below:

27 - Finally, the last step of this tutorial is to create a simple, but nice looking footer for our blog design. Start by creating a new layer set, named footer. Then, Create a new layer (Also named footer) and draw a 972*34 px rectangle using the Rectangular Marquee Tool. Fill it with #6589A7.

28 - Add your copyright message (or whatever) to the footer. The font I used was Arial bold, 12pt. The color is white (#FFFFFF). Once done, align the text to the right part of the footer.

29 - Repeat steps 10,11 and 12 in order to have a smaller version of your logo in the footer. You should also dusplicate the logo layers and scale it, of course.

30 - You’re done! Look at what you just created:


Get a commercial/public use licence for this PSD (More info)

Show Some Love
Thank you for your support

40 Responses

  • Lenin

    Nice work jean…, Thanks for the tut.

  • Frank J

    Very cool tutorial. Thank you for sharing this great how to.

  • Jean-Baptiste Jung

    You’re welcome guys, glad you enjoyed the tutorial!

  • Murray

    Great tutorial, very fun and clean. I liked the little trick with the mountain picture as the blur.

    The only little detail I didn’t like was the final logo at the bottom left as well. It just barely seems misplaced.

    Otherwise, awesome tutorials, always a fun time doing them, learning design really fast :D

  • bitlimakina

    thanks for nice tutorial

  • Jean-Baptiste Jung

    @Murray: Glad to read you had fun with the tutorial! I personally like the small logo on the bottom left part of the design (I did it on my other blog Cats Who Code) but sure thing, it depends of you rpersonnal tastes :)

  • Sumesh

    Nice tutorial, this looks a bit like Catswhocode redesign, doesn’t it? :)

    The little 3D effect on sidebar titles is cool, much like out-of-box designs.

    And I agree with the comment above about the logo at the bottom, it lacks contrast and spoils the footer. Otherwise cool :)

  • Lenin

    @jean-Baptise, yes i agree with you. There is no such rule that a design must be look like this or should have to be like one and it solely depends on personal taste and clients requirement, the only thing that the designer must know is how to be creative.

  • Jean-Baptiste Jung

    @Sumesh: Yes, it was inspired by the new Cats Who Code design :)

  • Marcell

    Great tutorial! You should code it now ;)

  • Pavlow Vinelli

    Great work! And additionally a search field and a little informational footer will be nice for this theme.

  • Matt

    It’s alright, nothing really special about it though. And the header isn’t very nice, very bold and is just text (bad font too…) with a gradient slapped onto it, I just don’t see how it’s a ‘premium’ layout. Some typography lessons are needed here I think. Something like http://www.giselejaquenod.com.ar/blog/ would be considered premium. Sorry if I sound harsh, it’s just my opinion as a fellow designer.

  • Jean-Baptiste Jung

    @Matt: No problem to give out your opinions :) A design can’t please anyone anyways.

  • Mark

    Can you make a tut to use this as a WordPress theme?

  • tirath

    Awesome web layouts with nice step by step tutorial
    Thanks a lot for your kind effort & your valuable time for making & sharing awesome tutorials always.
    I learn lot’s of new technique because of your awesome web layouts tutorial
    your all web layouts tutorials are awesome & valuable. keep up good work
    Only things is that the view & opinion of each individual is different

  • CgBaran Tuts

    Nice layout thanks for this tutorial

  • irenraj

    This is by far the most incredible set of resources in one place I have ever come across. Well done and thank you so much

  • creative

    That was fantastic – quick and well explained. I will be using the ribbon effect on upcoming work.

    Also interesting technique for creating random banners.

    Well done.

  • 3rdGear

    Nice layout.. Good usage of contrasting colors..

    I do have one question thought.. I’ve created a couple of layouts just playing around be recently decided to use one for a website for personal use and have run into an issues of I don’t know how to implement it into a site..

    any help would be greatly appreciated.

  • Kelly

    Nice layout, I’ve always liked themes with preview images in the main listing.

  • psdlovers

    nice tut.but can you code the theme and give us? :P

  • Ferlyn Adison

    I like your 3d effect on the sidebars.
    I will try to make this tutorial and see if it really works best if I’ll do.

  • photo retouching services

    Great layout tut! I`m off to try this at home.

  • Web Design Beach

    Really professional, simple and effective layout for tech blogs. Thanks for sharing.

  • Abdurrahman

    Wow, super layout, thanks for share

  • kurra

    HI CAN ANYBODY TELL ME HOW CAN WE CONVERT A PSD FILE INTO A XML FILE PLZ

  • Mr Hoang

    Good posd!
    Can I post in my blog? thank

  • zenaire

    How can I thank you..I really need this tutorial cause I want to build a blog soon and happy to find about your techniques. I will try my best.

    Thanks

  • Lance

    Great tutorial. Thanks for taking your time to show this to us.

  • Porter

    That’s a nice looking layout. I definitely need to update my photoshop skills, too long have I said I’m not that good at it, time to change that up.

  • Alecsandr

    I’m from Russia city of Rostov on Don!
    Very nice work.
    Thank you for your work!

  • Patrick Culverton

    I never knew this one. thanks for the help. hehehe mybe i could apply this in one of my blogs. great!

  • Tutorial Lounge

    really professional way for design an professional layout design.

  • ali

    l must try this, because looks easy, can be my first one

  • Kamal

    Thank you so much boss

  • Mike @ PCTECH

    Very nice tutorial. The end result is very clean.

  • WOLF BESPREDEL

    thanks! will need to draw, something like that as soon as free time!

  • Jitendra Kumar

    I am a novice in slicing designs to HTML. If you could provide a tutorial on how to slice it to HTML..then it would be great. :)

  • Joel

    Good layout but poor tutorial. The dimensions you explain in the early part of the tutorial don’t add up.

  • Joel

    Nevermind… I figured it out.

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors