de v.t ut splus.co m http://dev.tutsplus.co m/articles/design-a-stylish-timeline-po rtfo lio -page-using-pho to sho p--webdesign-17055? utm_co ntent=bufferceeaa&utm_medium=so cial&utm_so urce=facebo o k.

co m&utm_campaign=buffer

Design a Stylish Timeline Portfolio Page Using Photoshop

By To mas Laurinavicius

9 hours ago

In this tutorial Ill be using Photoshop CS6 to design a simple, clean, three-column portf olio page, with a trending timeline. During this process well look at creating custom grids with guidelines, styling typography, and playing with colors and contrast to achieve the aesthetics we want. T he f inished PSD f ile will be ready to hand over to a developer f or coding up.

Tutorial Assets

In order to f ollow along you will need the f ollowing (f reely available) assets:

Get the Document Ready

St ep 1
Begin by creating a new document (File > New) using the settings shown below.

Make sure the resolution is set to 72 pixels/inch

St ep 2
Lets set some guides so our layout has enough space and looks balanced. Go to View > New Guide and set the f ollowing guidelines: vertical at 20px, 50px, 115px, 230px, 550px, 570px, 875px and 1180px, and horizontal at 60px. T ip: You could also use the GuideGuide Photoshop plugin to make this process even quicker.

St ep 3
Were going to keep our document well-organized f rom the very beginning, so lets create three layer groups named Left Sidebar, Descript ions and Work. Sticking to this Photoshop etiquette will keep things organized and easy to navigate or edit. To create groups go to Layer > New > Group and give each one a title as mentioned. For quick creation of a group just click the icon.

Designing Lef t Sidebar Area

T he sidebar on the lef t will serve as an area f or a user prof ile, avatar, social links and primary navigation. Let's build it!

St ep 1
Select the Rectangle Tool (T ), change the f oreground color to #11171c and draw a 230x1320px rectangle inside the Left Sidebar group. It should be placed on the lef t of the document between the edge of the document and the f ourth vertical guideline.

St ep 2
Create a new group above the previously created rectangle shape and name it Prole Pic. Af ter that, pick the Ellipse Tool (U) and, holding down the Shift button, draw a 100x100px circle and place it right below the f irst horizontal guideline. It should be centered with the third vertical guideline too.

St ep 3
Now head over to uif aces.com and grab one of the avatars available. Alternatively, simply f ind your own photo and paste it above the recently created circle shape. Af ter that, hold down the Alt key and mouse over the thumbnail of the photo layer until you see a little down arrow. When you see it, release the button and it will create a Clipping Mask, binding your photo to a circular f orm. Align it however you see f it, using the Move Tool (V).

St ep 4
Now minimize the Prole Pic group by clicking that little arrow next to the group title. Af ter that, change the f oreground color to #FFFFFF and pick the Horizontal Type Tool (T ). Select the Lato (Regular) f ont, set size to 16pt and write the name of our portf olio owner. In my case it is the completely f ictitious Chris Johnson. Place it 25px below the prof ile picture and make sure it is centered with the third vertical guideline.

St ep 5
Now we need a short description f or our portf olio so visitors instantly get a sense of what it's all about. We'll use the same tool; all we need to do is decrease the f ont size to 14pt and write a brief couple of lines about the portf olio owner. To make it look organized and balanced place it 20px lower so it has some space to breath.

St ep 6
Good. Now let's place some social media icons making it easy to connect with the portf olio owner. Create a new group with a f ollowing title: Social Media. Af ter that, head over to Iconf inder to download Dribbble, Twitter, Facebook and Google+ icons as PNG. Drag them to your Photoshop document and place them inside the Social Media group. Now right-click the Dribbble icon, select Blending Options.. and apply the Color Overlay option. Instead of the def ault red, set the color to white.

St ep 7

All other icons should be white too, so let's apply the same layer style to the rest of the icons. Simply rightclick the Dribbble icon layer and select Copy Layer Style . Af ter that, hold down the CMD key and select the Twit t er, Facebook and Google+ layers. Again right-click one of them and select Paste Layer Style . Finally, align the icons so there is a 10px gap on each side and the group is placed 20px below the description text.

St ep 8
Let's change the f oreground color to white #FFFFFF, then pick the Line Tool (U), set weight to 1px and, holding down the Shift key, draw a horizontal line f rom the lef t document edge to the f ourth vertical guideline. Move it 50px f rom the icons.

St ep 9
To make our line more visually subtle, let's reduce the line layer's Opacity to 10% .

St ep 10
Let's now concentrate on our navigation, so create a new group called Navigat ion and place it above the dark rectangle layer. Af ter that, pick a document icon f rom the Free Vector Icons f rom Chapps icon set and drag it to your portf olio document. Hit CMD+T to resize the icon to 13x16px. Af ter that, double-click the layer name and rename it to Work icon. With that done, double-click a layer thumbnail and change the color to #d35136. Place the icon 40px below the subtle line and 20px f rom the lef t edge, so it aligns with the f irst vertical guideline.

St ep 11
Now f or some navigation items. Pick the Horizontal Type Tool (T ), choose the Lato (Bold) f ont, set size to 14pt and write the f ollowing: WORK. Place that in f ront of the second horizontal guideline and make sure it aligns vertically with the Work icon.

St ep 12
Change f oreground color to #424a51 and, using the same text tool, write down some categories to go under work, each one starting on a new line. Make sure that the line height is set to 24pt so our categories are easily readable. Place the categories layer 20px below the previously created text layer.

St ep 13
We need to indicate the active state of the link. For the active category use white #FFFFFF, simply click on the text while Horizontal Type Tool (T ) is still selected, highlight the f irst category and change the color.

St ep 14
Now pick a user icon f rom the previously used icon set and resize it to 16x16px using CMD+T . Click twice on the icon layer thumbnail and change the color to #27b599, rename the layer to User icon so it is easier to manage our layers. Place it 30px below the last category to give it some negative space which will act as a separator.

St ep 15
Change the f oreground color to green #27b599 as used f or the User icon and pick the Horizontal Type Tool (T ). Select the Lato (Bold) f ont, set the size to 14pt and write ABOUT . Place this label right af ter the user icon, as you did f or the section above. T hen change the f oreground color to #424a51 and enter some link titles f or the "about" section.

St ep 16
Let's now create the last section on our navigation; Contact. Pick the mail icon f rom Free Vect or Icons from Chapps and resize it to 16x13px, af ter that change its color to #088ecc and place it consistently as the icons bef ore, 30px below the last text layer of the About section. Having entered the CONTACT text, change the f oreground color to #424a51 and write down some link titles f or the section.

Designing Descriptions Area

Shif ting one block over to the right, let's now get started with our portf olio items' descriptions.

St ep 1

We'll minimize the currently used Navigat ion and Left Sidebar groups by clicking on the little arrows next to the group names. Expand the Descript ions group, change the f oreground color to #f7f7f7 and select the Rectangle Tool (T ). Af ter that, draw a vertical rectangle shape between the edge of Left Sidebar and the f if th vertical guideline. T his rectangle should be 320x1320px.

St ep 2
Now change the f oreground color to #e7e7e8 and pick the Line Tool (U). Set the Weight to 1px and, holding down the Shift key, draw a vertical line f rom top to bottom on the f if th vertical guideline. T his should create a better visual separation between the Descript ions group section background and the main background. Hit CMD+; to hide/unhide guidelines. Lastly, rename the line layer to V line so it makes sense later.

St ep 3

We're going to draw another vertical line, so change the line Weight to 3px and draw another line across the document (holding down the Shift key to maintain perf ect verticality). Click twice on the layer name to rename it to Timeline . Af ter that, move the line 24px right f rom the Left Sidebar edge and 30px down f rom the top of the document.

St ep 4
Change the f oreground color to our previously used red #d35136 and pick the Ellipse Tool (U). Af ter that, hold down the Shift key and draw a 11x11px circle. Place it 20px to the right f rom the edge of the Left Sidebar area and 20px down f rom the top of the document. Our little circle should be nicely placed on the top of the recently created line.

St ep 5

Now right-click the recently created circle layer and select Blending Options... . Click on Stroke. Set Size to 3px, Position to Outside and color to #f7f7f7. T his background-color stroke will create the ef f ect of our circle f loating next to a line.

St ep 6
Change the f oreground color to #11171c and pick the Horizontal Type Tool (T ). As ususal, choose the Lato (Bold) f ont, set the size to 14pt and enter a date f or the work e.g. "7 Nov 2013". T hen, using the Move Tool (V), move the date layer 20px to the right of the red circle and 20px down f rom the top of the document. You should, by now, have noticed a pattern in our spacing. It is important to be consistent and use rhythmic spacing f or dif f erent elements so the design looks balanced.

St ep 7
Change the f oreground color to #5e5e5e so it is slightly lighter than then date. T his creates a visual hierarchy, making reading much easier. Use the same Horizontal Type Tool (T ), Lato f ont, but this time change the f ont weight to Regular and enter a f ew lines f or a brief work description. T hen, make one line break by hitting the Enter button twice, and enter the client and tags f or the work e.g.: Client: Despreneur Tags: Web Design Highlight "client" and "tags" and set the f ont weight to Bold , so they will dif f er f rom the description and will be perceived as links. Lastly, ensure that the line height is set to 18pt so our lines have enough space to breath.

St ep 8
To duplicate the f eatures we've just made, select the red circle, date and description layer. T hen hit CMD+J, or right-click and select Duplicate Layers..., hitting OK thereaf ter. Move the duplicated contents a couple of hundred pixels below the original. We'll adjust the position of this later, as it will be dependent of the work image height we'll place next to it.

Designing Work Area

T he f inal vertical section of our layout is f or the portf olio pieces themselves. Let's build it!

St ep 1
We'll begin (as usual) by minimizing the currently used Descript ions group and opening up the Work group. Pick the Rectangle Tool (U) and draw a 610x400px sized rectangle between the sixth and eighth vertical guidelines (color doesn't matter this time, just make sure it is visible). Place it 20px below the top of the document so it has 20px of space all around.

St ep 2
Now pick an image of your work, I'll use the Notebook PSD Template screenshot I designed earlier. Drag it to your Photoshop document window, and make sure it is placed above the previously created rectangle shape layer. Holding down ALT key, mouse over the screenshot layer name until you see a little arrow down. When you see it, release they key and it will create a Clipping Mask so your image will only be visible within the area of the rectangle. Finally, hit CMD+T and resize the image as you like it to be.

Hold down the Shif t key when resizing to keep the proportions.

St ep 3
Select the rectangle shape layer, duplicate it, and move it 20px below the f irst image. Add another image of your work as we did with one bef ore. For the second work example I've used Raindrops photo f rom unsplash.com. Af ter that, create a third piece of work and place it 20px below the second one. For the third work image I've used the NYC Skyline photo, again f orm unsplash.com.

St ep 4
We now need to go back and make sure everything is lined up properly. Open up theDescript ions group again and f ind the red circle, date and description layers. Select them all holding CMD key and move them down until they align with the top of the second portf olio image. Duplicate these layers by clicking CMD+J, or right-clicking the layers and selecting Duplicate Layers.... Af ter that, place them next to the third work image and align with the top of that image.

St ep 5
Awesome. We're close to the end. Minimize the Descript ions group and open up Work group again. Af ter that, pick the ref resh icon f rom the icon set and drag it to your portf olio document. Hit CMD+T and resize it to 20x20px. Click twice on the icon layer thumbnail and change the color to #a0a2a4. Finally place it 20px below the work image.

St ep 6
Last step! Let's create a dynamic element which will show up when our website is scrolled down and the server is loading up more work. Pick the Horizontal Type Tool (T ), choose 14pt size Lato (Bold) f ont and enter the text Loading.... Place it next to the ref resh icon and move it 10px to the right. Af ter that, select both layers, icon and text and place them in the center of the vertical guideline of the work image.

Youre Done!
So there you have it. We walked through the creation of a portf olio website layout, f rom scratch, in an organized and ef f icient manner. T he f ile we built is ready to hand over to a developer who can pull it apart, f ind all the elements needed, and build f or the browser.

I hope you learned something new by f ollowing this tutorial. If you have any questions, or have dif f iculties please dont hesitate to ping me in the comments section or via Twitter.