Design a Multipurpose Blog Layout In Photoshop


Design a Multipurpose Blog Layout In Photoshop

A quick tutorial on designing a multipurpose PSD blog layout in Photoshop.

Section One - Setting up the document

Step 1.

Start by opening Photoshop and creating a blank layer with the settings seen below. After creating the theme layer background, double-click the layer in the layers panel and click Ok, to unlock it.


Step 2.

Next add some guidelines for spacing. I don't always use a grid for smaller blog layouts, but setting some guidelines will ensure neatness and will help to define the blogs width. Use similar guides to the image below and make sure the vertical centre guide sticks to the centre of the layout when placed.


Step 3.

For organisation, create three layer groups named Header, Content, Sharing and Footer. To create these groups go to Layer > New > Group… and give each new group the title as mentioned.

Tip: For quick creation of a group, simply click the 'Group' icon.


Section Two - Designing the header

Step 1.

Inside the Header group draw any colour rectangle shape using the Rectangle Tool (U). This will be the base of our header.


Step 2.

Now its time to add imagery. Open a high quality image into photoshop and drag it into the layout document ordering the image layer above the rectangle layer just created. Rename the image layer to 'Header-Image'. Don't worry if your image looks too large, we will resize it later.


Step 3.

After dragging the image into Photoshop, hold down the Alt key move your mouse between the Header-Image layer and the header background until you see an arrow. When you see the arrow, release the mouse. This creates a Clipping Mask for you image to sit into. Now, simply press CMD+T and resize the Header-Image layer to fit your needs.

Tip: hold down Shift key to transform proportionally.


Step 4.

Now we're going to darken the overall image to produce a better background for text or logos to stand out clearer on. To achieve this, slightly blur the Header-Image by selecting Filter > Blur > Gaussian Blur. Set Radius to 3 pixels. Using a slight blur effect helps eliminate sharp image details and helps your eyes to focus on other elements, in our case the blog logo and message.


Step 5.

Create a new layer above the Header-Image and make this a Clipping Mask too (as shown in the previous step). Fill this new layer with a black shade and reduce opacity to 50% to make the image appear darker but still visible. Rename the new layer 'Dark Filter'.


Step 6.

Next create a new group inside the Header group and name it Logo. Pick the Horizontal Type Tool (T), Choose a text colour of white and pick a font and write the title of your blog. We're using the font Avenir, with the font size of 13pt.

After, using the shape tool draw around the blog text and remove the fill colour. Using the below image as reference, set the stroke colour to white and size to 1px. This will create a rectangle around the text. When drawing the rectangle, be sure to leave some space around the text for a less condensed appearance.



Step 7.

In the header group (not the logo group) type your blog message and subheading over the Header-Image layer. Using any font and colour (preferably white) make sure the header text is larger than the subheading text underneath.

I've used the font 'Big Carlson' with the font size of 13pt for the head, and 6pt for the subheading. I also moved the logo higher to allocated space for the head and sub-header text.


Section Three - Designing the Content Area

Step 1.

There are a lot of groups in this next section.. but it help you out later on.

Now its time to fill our theme. Start by setting the main theme background to a light grey - I've used #f2f2f2. Next, move the Content group below the Header group. We will now be creating layers inside the Content group.

Create a new group inside the Content group and name this 'Information Section'. Inside this, create another group named 'Section One' - we will work in this group.


Step 2.

Crete a new text layer and write something about your blog. Resize the text to around 3-4pt and add a Bold title at a size of 5-6pt. Be sure to set the text paragraph text to align centred.

It should look similar to this example..


Step 3.

In the 'Section One' group, select the shape tool and draw a small circle icon removing the inner fill colour of the circle. Set the stroke colour to orange with a 1px size. After this, rename the layer 'Icon'. Duplicate 'Section One' twice and spread the groups equally across the layout, renaming the new groups 'Section Two' and 'Section Three'.

Tutorial -14

Step 4.

Now we can create the portfolio items, for tutorial purposes I'm using the same image and text to save time. However you can use different text and images.

Start by creating a new image box using the same method as our header. Click and drag a box using the Rounder Rectangle Tool. Down worry about the colour, but you can add a rounded corner by setting the shape stroke width to 4pt. Similar to before, open an image into Photoshop, drag the unlocked image to our layout screen and place the image above the box just created. Hold ALT and hover your mouse between the image and connect box to find the arrow, then release. You can resize your image now.

it should look similar to this so far. Copy the group and layer names seen in our example..


Step 5.

Add text below the image layer making sure you line the paragraph text and title up with the image above. You can also add a small 'next' icon (lined up with the right corner of the image) by using the shape tool. I used two triangles linked together in an orange shade. All you need to do now is duplicate the groups similar to before and spread the groups equally across the layer. Copy the group names in the example below.


Step 6.

In this step duplicate the whole 'Portfolio Section' and drag downwards pressing shift for alignment to produce a 3x2 thumbnail gallery.

Remember you can change your images. It should look like this..


Step 7.

Moving onto Our 'Sharing' group we can copy the step of the header section. Using the guidelines, create a section similar to this one i created for the Slider.


Step 8.

Similar to the head section, select the rectangle shape tool and draw a background area across the screen for an image to sit into. Find a high-quality image to open in a new document and drag the unlocked image into the main document. Create a clipping mask by pressing ALT and moving your mouse between the layers, looking for the arrow and realising your mouse to drop the image in the background area.

You can now resize your image and using the shape tool. Create a shape layer over the image with the fill colour #f18431. Now lower the opacity of the shape layer to 85% which will give you the base layer of your slider section. You can rename this layer 'Slider Colour'.


Step 9.

So far we've created a lot of content, so now Im going to add the comment title and subtitle name to the slider to finish off this section. Using the font 'Big Carlton' at 13pt with a subheading of 6pt you can type the quote over the slider in white.


Section Three - Designing the Footer

Step 1.

The footer is rather simple to create, start by using the guidelines to line out where you want the footer to be placed. I have cut the bottom of the layout off using the cropping tool and dragging the crop selection to the bottom of my guideline.

Follow this example..


Step 1.

Finally you can add the footer background using the shape tool set to the colour: #1c1d1d. Above this layer add the copyright text info and theme name in colour: #4e5153, highlighting any important links with the theme colour: #f18431.



In this tutorial I have walked you through the process of creating a simple and multipurpose blog layout. The layout is great for design blogs and is highly customisable. I hope you enjoyed this tutorial and you are welcome to ask any questions in the comments section below.