Create a Minimalist Blog Layout in Photoshop

Create a Minimalist Blog Layout in Photoshop
Create a Minimalist Blog Layout in Photoshop

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 | 10.69 MB

Download from Website

Minimalist Blog Layout Photoshop Tutorial


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.

Pages: 1 2 3 4

Create Dot Grid Art in 1 Click

Turn any photo into a dot grid artwork with these Photoshop actions. You'll get great results with dots that change size. They get larger in brighter areas and smaller in darker areas. Free download available.

12 comments on “Create a Minimalist Blog Layout in Photoshop”

  1. Great stuff. I used this tutorial with ExportKit to create a WordPress theme directly from the PSD. I also made another responsive design using your steps - so I made a responsive HTML5 and CSS3 website just for fun too!

Leave a Reply

Your email address will not be published. Required fields are marked *