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.
What you need?
Free Vegur font: http://www.dotcolon.net/download_counter/dcnt.cgi?n=1
- 1. First, create new document (CTRL+N) with 1500x2350px size.
- 2. Create new layer (“gradient”) (SHIFT+CTRL+N), set #000000 as gradient.
- 3. Pull gradient from top to bottom.
- 4. Change opacity to 7%.
- 5. Create new layer (“first line”) (SHIFT+CTRL+N), with fixed 960x1px size. Click right button on mouse and fill layer with #E1E1E1. The press CTRL+D to deselect selection.
- 6. Now select “first line” and “Background” layer, align this layer “horizontal centrals”.
- 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. 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. Create new custom shape (you have to turn on “All”, with #898989 as foreground, place it under “blog” link.
- 10. Create Rectangular Shape, with #FFFFFF as foreground and 100% opacity, change Blending Options as in screenshot.
- 11. Create new group, and place there 11pt Arial size #959595, Anti-Alias: None, and some desaturated icon.
- 12. Make new group, with settings from screenshots. With links – use icons.
Text colors: header “About this blog” – #363636;
content: – #636363;
links: – #898989;
- 13. Repeat 12th step, but change a bit “boxes”
- 14. Repeat 5th step, but change line size to 272x1px. Place lines between boxes.
- 15. Create new group, and place there next gray line (510x1px), 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. 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. Create new text box, Arial 11px #959595, non-anti-alias, then make squares with custom shape and duplicate it.
- 18. Now you create new rectangular box with foreground #111111.
- 19. You make header text (18pt; Vegur Medium, Crisp, #FFFFFF) and content (#555555) with properties from screenshots.
- 20. Finish the footer.
- 21. If you want, you can add in background brush with #000000 as foreground, from:
Click here to download the PSD.