most inspired

I came across this wonderful minimal blog design recently and managed to talk the designer into writing a tutorial on how he created it. You can also download the PSD file at the end of the tutorial.

You can see the final result here (click to enlarge):

What you need?

Free Vegur font: http://www.dotcolon.net/download_counter/dcnt.cgi?n=1
Icons: http://www.iconfinder.net/

Step-By-Step Instructions

1. 1. First, create new document (CTRL+N) with 1500×2350px size.
   
2. 2. Create new layer (“gradient”) (SHIFT+CTRL+N), set #000000 as gradient.
   
3. 3. Pull gradient from top to bottom.
   
4. 4. Change opacity to 7%.
   
5. 5. Create new layer (“first line”) (SHIFT+CTRL+N), with fixed 960×1px size. Click right button on mouse and fill layer with #E1E1E1. The press CTRL+D to deselect selection.
   
   
6. 6. Now select “first line” and “Background” layer, align this layer “horizontal centrals”.
   
7. 7. Turn on grid (SHIFT + ‘ ). Make 2 text layers: [“Yourblog” - #363636; 40pt; Vegur Bold, Crisp/ “.com”; #959595; 20pt; Vegur Bold, Crisp] and [“In turpis viverra elit. Proin id mi. Donec porttitor interdum.” #959595; 12pt; Vegur Medium with caps, Crisp]
   
8. 8. Turn off grid, if you want (SHIFT + ‘), make next text layer with “Home page” and use this icon – http://www.iconfinder.net/icondetails/34226/16/. Connect that into new group – “#home” (CTRL + G, select two layers). First you have to desaturate (SHIFT + CTRL + U) icon, insert text (Vegur Medium, 14px, #363636, Crisp). Duplicate “#home” group, but change icons and text properties to (Vegur Regular, 14pt, #555555).

   

9. 9. Create new custom shape (you have to turn on “All”, with #898989 as foreground, place it under “blog” link.
   
   
10. 10. Create Rectangular Shape, with #FFFFFF as foreground and 100% opacity, change Blending Options as in screenshot.

    
    
    

11. 11. Create new group, and place there 11pt Arial size #959595, Anti-Alias: None, and some desaturated icon.
    
12. 12. Make new group, with settings from screenshots. With links – use icons.
    Text colors: header “About this blog” – #363636;
    content: – #636363;
    links: – #898989;
    
    
13. 13. Repeat 12th step, but change a bit “boxes”
    
    
    
14. 14. Repeat 5th step, but change line size to 272×1px. Place lines between boxes.
    
15. 15. Create new group, and place there next gray line (510×1px), and header text (this same properties as in 16sm.jpg) “Welcome! This is First Post Here!” – #363636; place there some content (you can use 11pt or 12pt Arial). Under the line place three links with icons (Date, Comments, More) – Arial 11pt #959595 non-anti-alias. Under the first portion of text place some image (width: 510px).
    
    
    
16. 16. You can duplicate group from previous point, because it’s very similar with it. You have to decrease size of text box and line.
    
17. 17. Create new text box, Arial 11px #959595, non-anti-alias, then make squares with custom shape and duplicate it.
    
    
18. 18. Now you create new rectangular box with foreground #111111.
    
19. 19. You make header text (18pt; Vegur Medium, Crisp, #FFFFFF) and content (#555555) with properties from screenshots.
    
    
20. 20. Finish the footer.
    
21. 21. If you want, you can add in background brush with #000000 as foreground, from:
    http://physicalmagic.deviantart.com/art/Abstract-Lines-58385193
    

Click here to download the PSD.

Author: Maciej “Metody” Bis from POLAND, www.bisek0.deviantart.com, bisek0@o2.pl

If you enjoyed the tutorial, be sure to subscribe to our RSS Feed or follow us on Twitter.