In this tutorial you will see how to create a minimal and clean blog layout using Photoshop. You will also learn some useful methods and practices for creating web layouts in Photoshop.

Preview of Final Results

Download the PSD

Minimalistic Blog Layout.zip | 10.69 MB

Download from Website

Minimalist Blog Layout Photoshop Tutorial

Resources

• Social Icons - Blogperfume
• Paper Texture 1 - Bashcorpo
• Paper Texture 2 - Bashcorpo
• Paper Texture 3 - Personal
• Font - Dafont

Step 1 : Preparing the Canvas

Create a new document. The layout is going to be 950 pixels wide.

Add guides to the right and left borders of the document.

The layout is 950 pixels wide. But we need some extra space for us to work comfortably. So increase the width of the document using the Canvas Size dialog box. Press Ctrl+Alt+C (Image > Canvas Size) to load the dialog box and enter the value.

Step 2 : Create and Organize Layer Groups

Often times we end up with several hundred layers scattered across the palette and hard to locate a particular item, especially when designing layouts. So plan ahead and keep things organized. I classified the layout into several groups that will contain the respective elements. Click on the "Create a New Group" button to create a group. Double click on the group the rename.

Step 3 : Designing the Header

Let's begin from the header. We are going to use a paper texture to create the header. Open up the "Paper Texture 1". We need to isolate the paper from the background. Click on the black background with Magic Wand Tool. This will select the background, invert the selection to select the paper. Press Ctrl+Shift+I (Select > Inverse).

Fine tune the selection using the Refine Edge command to increase the contrast and sharpness of the selection. Press Ctrl+Alt+R (Select > Refine Edge). Adjust the parameters to refine the selection.

Press Ctrl+J (Layer > New > Layer via Copy) to separate the selection.

Drag and drop the texture in our document. Place it in the "Header" group. Select the layer and go to Edit > Transform > 90 degree CCW. Then on the same menu choose "Flip Horizontal". Place it in the header position. I resized it a bit (about 75%). Perform all transformations in one go.

Press Ctrl+U to load Hue/Saturation dialog box. Reduce the Lightness all the way to -100. Now we got a nice silhouette of the texture with all its edge details.