Today I will show you how I created this minimal & stylish single page portfolio design in Photoshop, I will show you step by step how I use the 960 Grid System with textures, icons and fonts to build this single page portfolio.
Final Result Preview
This is the finished product of the tutorial. (View Large)
TitilliumText font, @font-face Compatible.
Social Media Icons by Gedy Rivera.
Apple iOS Linen Texture by Orman Clark.
960.gs Grid System.
Set The Canvas
Before you begin designing and creating the structure of your portfolio, it is a good idea to work to set of grid lines, I like to use the 960.gs grid. Once you have downloaded this and unzipped the file contents, you will find the PhotoShop PSD grid in the folder named templates. For the purposes of this tutorial I will be using the 12 column grid template, I find it really useful to turn the ‘Guides’ on, – View -> Show -> Guides.
Open the downloaded grid PSD called ’960_grid_12_col.psd’ and re-size the canvas to width: 1021px and height:1400px. Image -> Canvas Size. Create a new layer and fill this with the color:# f5f2f2.
To add a some more depth to the background canvas I will use the Apple iOS Linen Texture, unzip this and open the PSD called ‘os-linen.psd’. Duplicate all the layers apart from the layer named base color to your PSD file. Select the top four layers and duplicate to your file – Layers ->Duplicate – > Your_PSD_Name.psd. Set the opacity of the two dark textures to 70% and the two lighter top layers to 20% opacity.
The final background texture we will use will look like so:
Creating The Header
Create a new ‘Group’ and name it ‘Header’, - Layer -> New -> Group, whilst inside this new group create a new layer called ‘header _line’, – Layer -> New -> Layer. With this new layer selected, draw the pink line to the dimensions of width:1021px and height: 6px. To create the shape, simply use the the ‘Rectangle Tool‘ and use the color:#ee6d72 for the line. You will be able to see the line dimensions by selecting - Window -> Info from the top menu.
Once you have created this top line you will need to duplicate it, name the new duplicated layer ‘header_line_white’. To duplicate the line select the layer called header _line and select – Layer -> Duplicate Layer. Make this new line half the height but use the same width and move it to the bottom of the layer called header _line, once in place, change the color of this layer to: #ffffff;
The resulting top line will look like so:
Next we will create the typography, earlier I gave you the font I used to create the welcome message and page headings, download TitilliumText and install it onto your PC/Mac. Create a new group whilst still inside the Group you made earlier, call this new Group – ‘Strap Line’. Organizing and naming your layers and groups correctly makes it so much easier navigating around the PSD, it also makes it much easier when you come to code up your PSD into XHTML.
To create the header text, whilst inside inside the Group ‘Strap Line’ I created a new layer, selected the ‘Horizontal Type Tool’ and typed in my welcome message: “Hello, my name is David Martin.
A front end developer/designer from the UK.”. I set the font size to: 11pt and the color to: #000000.
Notice I place my welcome message to the right of the first three columns of the 12 bar grid, this leaves me room to place my logo in columns two and three as I will be leaving columns one and twelve blank. I do not want to create a cramped and confused design.
To help separate the welcome message from what will be the page body, I created a simple divider line, to do this, whilst still inside the ‘Header’ group, create a new group called ‘Line Separator’. Create a new layer called ‘Separator Line Top’ and using the ‘Rectangle Tool‘ draw a line which will cover a full ten columns on the grid. The line dimensions will be – width: 780px, height: 1px and the color of this top line will need to be set to #d5d5d5.
To create the illusion of a letterpress style on the line, select the layer ‘Separator Line Top’ and duplicate it, rename the new layer ‘Separator Line Bottom’ and move this new layer to the bottom of the layer ‘Separator Line Top’, set the color of ‘Separator Line Bottom’ to #ffffff.
Creating The Body Content
The left and right content areas will be created with a width equal to four grid lines each and will be separated by two grid columns.
Creating The Form
Create a new group and name it ‘Contact’, within this group, create a new layer for the heading text “Contact me”. Using the the same font as before ‘TitilliumText’ type the contact message into the grid lines, I aligned it so that the heading starts on grid column 8. The character settings used are – size: 8pt, weight: thin.
The form input fields are created using the ‘Rectangle Tool‘, I create the ‘name’ and ‘subject’ input fields so they start on grid column 8 and have the dimensions – width: 300px, height: 30px. The message textarea has the dimensions width: 300px, height: 130px. For each input field and the textarea I will add a very subtle Inner Shaddow. Select the input field layer and select – Layer -> Layer Style -> Blending Options -> Inner Shaddow. Set the Inner Shaddow settings to - Blend Mode: Multiply, Opacity: 75%, Angle: -90, Distance: 1px Choke:0px, Size: 0px, Color: #ebe9e9.
Keeping consistent with the grid guidelines, I will create the form button to sit between grid columns 10 and 11. Using the using the ‘Rectangle Tool‘ I create the button to the dimensions of – width: 140px, height: 30px.
For the form button I will add a Gradient and Stroke. Select the button layer and tick – Layer -> Layer Style -> Blending Options -> Stroke & Layer -> Layer Style -> Blending Options -> Gradient Overlay. The button color is set to #ebe9e9, the Stroke settings are - Size: 1px, Color: #ebe9e9. The settings I used for the button gradient are – Blend Mode: Normal, Opacity: 100%, Style: Linear, Angle: 90. Set the left Stop Location color to #ebe9e9 and the right color to #f1f1f1, set both the Stop Locations for the gradient sliders to 50% like below -
Creating ‘About Me’
This is, as you can see pretty straight forward, the only thing to note is the font in use which is Helvetica Neue 45 Light. Download and install this font and set the font settings to size: 2.5pt, Leading: 4pt, Tracking: 100, Color: #2a2828. Create a new Group and name it ‘About me’. Within this group create a new layer, using the ‘TitilliumText’ fonthis will create the ‘About me’ heading. The font settings for this font is - size: 8pt, weight: thin. Below this I will create a new layer for the ‘About me’ text blurb. All the text is aligned to the start of the second grid column and will span no more than four columns in total.
Creating the ‘Project Feed’
The project feed will span an entire ten columns of the grid. I create a new group called ‘Project Feed’ and within this two new layers for the heading text and paragraph below. The heading text font is again – size: 8pt, weight: thin and the font settings for the paragraph below is – size: 2.5pt, Leading: 4pt.
I decided that I wanted to pull a feed of images into the page using the Dribbble API, in the future, when I expand on this design I will modify it to show more detailed information about project work. Within the ‘Project’ group I create a new sub group called ‘Feed’. For each feed image the total size will be exactly three grid columns, including the image padding and border.
Create a new layer and use the ‘Rectangle Tool‘ to create a box to the dimensions of – width: 220px, height: 144px. The box background color needs to be set to #ffffff and a 1px stroke will need to be added to this box. Select the layer and click Layer -> Layer Style -> Blending Options -> Stroke. Set the stroke to 1px and the stroke color to #dedbdb. The actual feed images will sit inside this white box, the image size will be - width: 200px, height: 124px.
Creating the ‘Footer’
Creating the footer is very straight forward due to the simplistic concept, firstly create a new group named ‘Footer and create a new layer. This will form part of the two dividing lines at the top and bottom of the footer. Select the new layer and using the ‘Line Tool’ draw a 1px line that spans across a whole ten grid columns. Set the color of this 1px line to #dedbdb and duplicate the layer – Layer -> Duplicate Layer. Change the color of the new duplicated layer to #ffffff and move it to the bottom of the grey line we just created, merge these two layers to create the dividing line so we can duplicate this to use again at the bottom of the footer.
The Twitter and Dribble Icons are courtesy of Gedy Rivera download the PSD ($5 – well spent) and duplicate the Twitter and Dribbble icons into the PSD. I re-sized each icon to 30px by 30px and set the icon color to #dedbdb.
The Final Result
This is the finished product of the tutorial. (View Large)