Attractive Modern Blog

Create an Attractive Modern Blog Design in Photoshop

Create an Awesome Blog Design in Photoshop

Today I will show you how to create a vibrant and colorful modern blog layout in Adobe Photoshop. Beginning with a blank canvas we’ll go through the process of creating the entire structure and effects from scratch. So let’s have a try…

Preview of Final Product:

Create an Awesome Blog Design in Photoshop

This particular design is one I’m currently producing as a WordPress theme for Springy Developments, in the future we’ll take a look at the coding process and see how the site is pulled together into the final product.

Bear in mind that during the original creating of the concept, the process was much less clear cut that the following tutorial steps. Plenty of experimentation was conducted and elements were often recreated to test out what worked the best. However this walkthrough will hopefully give a good understanding of what tools and techniques are used during the creation of this chosen layout from scratch.

Create an Awesome Blog Design in Photoshop1

Open up Adobe Photoshop and create a New Document. I like to work on a large document that reflects the larger widescreen resolutions. Remember to use the RGB color mode with the site being viewed only on screen, and a resolution of 72dpi.

Create an Awesome Blog Design in Photoshop2

The first area I tend to work on is the page background; this is where a little interest can be introduced which fills out the space for those on higher resolutions. Choose a solid color for the background, and then drag out a radial gradient from the top centre. Obviously the choice color palette is down to you, but here I’m using a mix of green and cyan.

Create an Awesome Blog Design in Photoshop3

Open up a brown paper resource from a recent post, this will be used to add some interest in the form of texture to the background.

Create an Awesome Blog Design in Photoshop4

Desaturate (CTRL+SHIFT+U) the texture, then add quite a broad Gaussian Blur to remove much of the finer detail.

Create an Awesome Blog Design in Photoshop5

Position the texture over the gradient and change the blending mode to Overlay. Alter the opacity to 90%.

Create an Awesome Blog Design in Photoshop6

When working in website design the range of user monitors plays a large part in the layout of a site. Unless otherwise required, I will accommodate resolutions down to 1024×768, therefore guides are drawn in to represent a 960px width in the centre of the document, and this gives an approx 40px space at either side as a little padding before elements run beyond the confines of the screen.

Create an Awesome Blog Design in Photoshop8

Using the Rounded Rectangle Tool draw in a content area filled with light grey (#eeeeee) with 20px corner radius. Notice in this case the rectangle doesn’t span across both margins, this is to allow for a little design touch later down the line.

Create an Awesome Blog Design in Photoshop9

Double click on the rectangle’s layer and add an 8px white stroke. Change the Blend Mode to Overlay and drop the opacity to 30% to give a cool transparent effect.

Create an Awesome Blog Design in Photoshop10

Add a slight Inner Glow to the rectangle, using white at 5px in size to give a very slight beveled edge effect.

Create an Awesome Blog Design in Photoshop11

Finally add a subtle Outer Glow using black at 15% opacity to give a slight shadow to the content area.

Create an Awesome Blog Design in Photoshop12

On a new layer, draw another rounded rectangle, this time with 10px corners at the same width as the original. Add a little gradient fading to grey at the bottom.

Create an Awesome Blog Design in Photoshop13

Right click on the Effects of the grey content panel and select Create Layers. On the newly created layer that consists of the stroke, use the eraser to fade out the stroke halfway down the document.

Create an Awesome Blog Design in Photoshop14

Add a little extra touch to the stroke by drawing a 1px line with the Pencil Tool vertically up the entire edge. Hold Shift to constrain the axis to give a crisp straight edge.

Create an Awesome Blog Design in Photoshop15

Fade out this line using the eraser to match how the rest of the border fades away into black.

Create an Awesome Blog Design in Photoshop16

The content area so far has a large flat area of grey that gets slightly darker at the bottom. The top corners are a larger radius than those at the bottom and the border has a transparency that shows the underlying background and fades out towards the middle.

Create an Awesome Blog Design in Photoshop17

Position a copy of the paper texture of the top half of the content area. Use the Hue/Saturation Tool (CTRL+U) to give a blue/green coloring.

Create an Awesome Blog Design in Photoshop18

Press CTRL and click the thumbnail of the content layer to create a selection, inverse the selection (CTRL+SHIFT+I) and delete out the excess. Also use the erase to slightly fade out the texture leaving a strip across the top.

Create an Awesome Blog Design in Photoshop19

Use the Pencil Tool to add a horizontal 1px white line under the heading.

Create an Awesome Blog Design in Photoshop20

Create a selection from the content area again, and then press ALT while dragging the Rectangular Marquee across the document to exclude the majority of the selection. On a new layer draw a white to transparent gradient downwards and adjust the opacity to 90% add a glossy highlight across the header.

Create an Awesome Blog Design in Photoshop21

Use the Rectangular Marquee Tool to draw in a sidebar that extends past the main content area. Fill this with the grey background color (#eeeeee).

Create an Awesome Blog Design in Photoshop22

Add a transparent border effect to the sidebar using the stroke option from the Layer Style window.

Create an Awesome Blog Design in Photoshop23

Use the Outer Glow option to add a very slight grey border, adjusting the Spread to the max will turn the default glow into a solid strip of color which helps add this double stroke effect.

Create an Awesome Blog Design in Photoshop24

Use the Inner Glow option in a similar manner to add a thin white stroke effect to the inside of the sidebar. The Choke option set to max also makes the glow appear as a solid block.

Create an Awesome Blog Design in Photoshop25

Finally add a gradient to the sidebar spanning from white to the light grey background to add a little interest and dimension.

Create an Awesome Blog Design in Photoshop26

Split the sidebar into individual sections, the plan is to have separate sections for each set of menu items.

Create an Awesome Blog Design in Photoshop27

A similar approach will be used on the post area of the blog design, each post will be enclosed in its own container. Draw a rectangular selection to simulate one of these containers.

Create an Awesome Blog Design in Photoshop28

Fill the area with white, right click on the sidebar and copy the layer style. Paste this layer style onto the container to quickly add the same border effects.

Create an Awesome Blog Design in Photoshop29

The structure of the layout is almost complete. Now mockup the textual elements of the page for  test out colors and sizes.

Create an Awesome Blog Design in Photoshop30

Create a navigation area by creating smaller selections and adding a fading gradient above the header. Type in the links with the Text Tool.

Create an Awesome Blog Design in Photoshop31

Taking the content of an upcoming blog post, paste in the information and adjust the color and sizing of the text to give the appropriate hierarchy. The title is the most important element therefore must be large in size and bold in color. Whereas the meta information isn’t so important, so it can be smaller in size and lighter in color.

Create an Awesome Blog Design in Photoshop32

Draw a rectangle with a subtle blue gradient at the bottom of the post container.

Create an Awesome Blog Design in Photoshop34

Using the fantastic icon set from Function, add secondary information such as the comment count and a link to read the whole article. Highlighting these in their own strip separates them from the content but gives useful information to the viewer.

Create an Awesome Blog Design in Photoshop35

Finally add other page elements such as subscription options. The RSS icon here can be found in the form of a tutorial or as part of a free icon set

Create an Awesome Blog Design in Photoshop Result

With a good selection of information presented on the page it gives a clear picture of what the overall website will look like. In a future post we’ll look at exporting elements of this design and coding up the layout into a real web page.

I hope you like this tutorial. I would really appreciate if you like this technique.

You can leave your comment and suggestions below.

Have fun… :-)

Credit: blog.spoongraphics.co.uk

Mahmudur Rahman
[email protected]
1 Comment
  • Espresso Machine
    Posted at 16:12h, 06 May

    Just desire to say your article is as astounding. The clarity in your post is just great and i can assume you are
    an expert on this subject. Well with your permission let me to grab your RSS feed to keep
    up to date with forthcoming post. Thanks a million and please keep up the
    rewarding work.