Download Lightroom presets and LUTs, absolutely free. Use the presets to add creativity and style to your photos.
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
- 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.
Thanks for this tutorial !
Wollte Euch einfach mal in diesem Gaestebuch einen Gruss
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!
Thanks for this tutorial !
i learned a lot =)
welcom on free photoshpp online
i have no words this tutorial
Awesome thank you
for this tutorial.
how to export it html and css.. thank you
Thank for your tutorial.
Can i ask something...
How to convert the psd to xml files so its can be use in
Thank you for a tutorial !!
thanks a bunch!!!! awesome! very generous of you