Dev.tutsplus.com-Design a Stylish Timeline Portfolio Page Using Photoshop

8/13/2019 Dev.tutsplus.com-Design a Stylish Timeline Portfolio Page Using Photoshop

1/22

dev.tutsplus.com

http://dev.tutsplus.com/articles/design-a-stylish-timeline-portfolio-page-using-photoshop--webdesign-17055?

utm_content=bufferceeaa&utm_medium=social&utm_so urce=facebook.com&utm_campaign=buffer

By Tomas Laurinavicius

Design a Stylish Timeline Portfolio Page Using Photoshop

9 hours ago

In this tutorial Ill be using Photoshop CS6 to design a simple, clean, three-column port f olio page, with a

trending timeline. During this process well look at creating custom grids with guidelines, styling typography,and playing with co lors and contrast to achieve the aesthet ics we want. The f inished PSD f ile will be ready

to hand over to a developer for coding up.

Tutorial Assets
http://dev.tutsplus.com/articles/design-a-stylish-timeline-portfolio-page-using-photoshop--webdesign-17055?utm_content=bufferceeaa&utm_medium=social&utm_source=facebook.com&utm_campaign=bufferhttp://dev.tutsplus.com/


2/22

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

Get the Document Ready

Step 1

Begin by creating a new document (File > New) using the sett ings shown below.

Make sure the reso lution is set to 72 pixels/inch

Step 2

Lets set some guides so our layout has enough space and loo ks balanced. Go to View > New

Guideand set the f ollowing guidelines: vertical at 20px, 50px, 115px, 230px, 550px, 570px,

875px and 1180px, and horizontal at 60px.

Tip:You could also use the GuideGuidePhoto shop plugin to make this process even quicker.
http://design.tutsplus.com/articles/setting-a-baseline-grid-with-guideguide-for-photoshop--webdesign-7992


3/22

Step 3

Were going to keep our document well-organized f rom the very beginning, so lets create three layer

groups named Left Sidebar, Descriptions and Work. Sticking to this Photoshop etiquettewill keep things

organized and easy to navigate or edit. To create groups go to Layer > New > Group and give each one

a tit le as mentioned. For quick creation of a group just click the icon.

Designing Left Sidebar Area

The sidebar on the lef t will serve as an area fo r a user prof ile, avatar, social links and primary navigation.

Let's build it!

Step 1

Select the Rectangle Tool (T), change the foreground color to #11171c and draw a 230x1320px

rectangle inside the Left Sidebargroup. It should be placed on the lef t o f the document between the edge

of the document and the f ourth vertical guideline.
http://photoshopetiquette.com/


4/22

Step 2

Create a new group above the previously created rectangle shape and name it Profile Pic. Aft er that, pickthe Ellipse Tool (U)and, holding down the Shift butt on, draw a 100x100px circle and place it right below

the f irst horizo ntal guideline. It should be centered with t he third vertical guideline too.

Step 3

Now head over to uifaces.comand grab one of the avatars available. Alternatively, simply f ind your own

photo and paste it above the recently created circle shape. Aft er that, ho ld down the Altkey and mouse

over the thumbnail of the photo layer until you see a litt le 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).
http://uifaces.com/


5/22

Step 4

Now minimize t he Profile Picgroup by clicking that litt le arrow next t o the group t itle. Af ter that, change the

foreground color to #FFFFFFand 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 25pxbelow the pro f ile picture and make sure it is centered with the third vertical

guideline.

Step 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.


6/22

Step 6

Good. Now let's place some so cial media icons making it easy to connect with the po rtf olio owner. Create a

new group with a f ollowing title: Social Media. Aft er that, head over to Iconf inder to

download Dribbble, Twitter, Facebook and Google+icons as PNG. Drag them to your Photo shop document

and place them inside the Social Mediagroup. Now right-click the Dribbble icon, select Blending Options..

and apply theColor Overlayopt ion. Instead of the default red, set the color to white.

Step 7
https://www.iconfinder.com/icons/104424/google_google%2B_plus_icon#size=24https://www.iconfinder.com/icons/104458/facebook_fb_social_social_media_icon#size=24https://www.iconfinder.com/icons/104461/twitter_icon#size=24https://www.iconfinder.com/icons/104457/dribbble_icon#size=24


7/22

All other icons should be white too, so let's apply the same layer style to the res t of the icons. Simply right-

click the Dribbbleicon layer and select Copy Layer Style. Aft er that, hold down the CMDkey and select

theTwitter, Facebookand Google+layers. Again right- click one o f them and select Paste Layer Style.

Finally, align the icons so there is a 10pxgap on each side and the group is placed 20pxbelow the

description text.

Step 8

Let's change the f oreground color to white #FFFFFF, then pick the Line Tool (U), setweight to1pxand,

holding down the Shift key, draw a horizontal line f rom the lef t document edge to t he fourth vertical

guideline. Move it 50pxf rom the icons.

Step 9

To make our line more visually subtle, let's reduce the line layer's Opacityto 10%.


8/22

Step 10

Let's now concentrate on o ur navigation, so create a new group called Navigationand place it above the

dark rectangle layer. Af ter that, pick a document icon f rom the Free Vecto r Icons f rom Chappsicon set and

drag it to your port f olio document. Hit CMD+T to resize the icon to 13x16px. Af ter t hat, 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 40pxbelow the subtle line and 20pxf rom the lef t edge, so it aligns with the

f irst vertical guideline.

Step 11

Now f or some navigation items. Pick the Horizontal Type Tool (T), choose theLato (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.
https://www.behance.net/gallery/Free-Vector-Icons-from-Chapps/11613275


9/22

Step 12

Change f oreground color to #424a51and, using the same text to ol, write down some categories to go

under work, each one start ing on a new line. Make sure that the line height is set to 24pt so our categories

are easily readable. Place the categories layer 20pxbelow the previously created text layer.

Step 13

We need to indicate the active state o f the link. For the active category use white #FFFFFF, simply click on

the text while Horizontal Type Tool (T)is s till selected, highlight the f irst category and change the color.


10/22

Step 14

Now pick a user icon f rom the previous ly used icon set and resize it to 16x16pxusing CMD+T . Click twice

on t he icon layer thumbnail and change the color to #27b599, rename the layer to User iconso it is easier

to manage our layers. Place it 30pxbelow the last category to give it some negative space which will act as

a separator.

Step 15

Change the fo reground color to green #27b599as used fo r the User iconand pick the Horizontal Type

Tool (T). Select theLato (Bold) f ont, set the size to 14pt and write ABOUT. Place this label right af ter t he

user icon, as you did for the section above. Then change the foreground color to #424a51and entersome link titles f or the "about" section.


11/22

Step 16

Let's now create the last section on our navigation; Contact. Pick the mail icon f rom

Free Vector Icons from Chappsand resize it to 16x13px, af ter that change its color to #088eccand

place it consistently as the icons before, 30pxbelow the last t ext layer of the About section. Having

entered the CONTACTtext, change the fo reground color t o #424a51and write down some link titles f or

the section.

Designing Descriptions Area

Shif ting one block over to t he right, let's now get started with our port f olio items' descriptions.

Step 1


12/22

We'll minimize t he currently used Navigationand Left Sidebargroups by clicking on the litt le arrows next to

the gro up names. Expand the Descriptions group, change the f oreground color to #f7f7f7and select the

Rectangle Tool (T). Aft er that , draw a vertical rectangle shape between the edge of Left Sidebarand the

f if th vertical guideline. This rectangle should be 320x1320px.

Step 2

Now change the f oreground color to #e7e7e8and pick the Line Tool (U). Set the Weight to 1px and,

holding down the Shift key, draw a vertical line from top to bot to m on the f if th vertical guideline. This

should create a better visual separation between the Descriptions group section background and the mainbackground. Hit CMD+;to hide/unhide guidelines. Last ly, rename the line layer to V lineso it makes sense

later.

Step 3


13/22

We're going to draw another vertical line, so change the line Weight to 3px and draw another line across

the document (ho lding down the Shiftkey to maintain perf ect vert icality). Click twice on the layer name to

rename it toTimeline. Af ter that, move the line 24px right f rom the Left Sidebaredge and 30px down f rom

the top o f the document.

Step 4

Change the foreground color to our previously used red #d35136and pick the Ellipse Tool (U). Af ter t hat,

hold down the Shiftkey and draw a 11x11px circle. Place it 20px to the right f rom the edge of the

Left Sidebararea and 20px down f rom the t op o f the document. Our little circle should be nicely placed onthe to p of the recently created line.

Step 5


14/22

Now right-click the recently created circle layer and select Blending Options... . Click onStroke. SetSize

to 3px, Position to Outside and color to #f7f7f7. This background-color stroke will create the ef f ect of

our circle f loating next t o a line.

Step 6

Change the f oreground color t o #11171cand pick the Horizontal Type Tool (T). As ususal, choose the

Lato (Bold)f ont, set the size to14pt and enter a date f or the work e.g. "7 Nov 2013". Then, using the

Move Tool (V), move the date layer 20px to the right o f the red circle and 20px down from the to p of the

document.

You should, by now, have noticed a pattern in our spacing. It is import ant to be consist ent and use rhythmic

spacing f or dif f erent elements so the design loo ks balanced.


15/22

Step 7

Change the f oreground color t o #5e5e5eso it is s lightly lighter than then date. This creates a visual

hierarchy, making reading much easier. Use the same Horizontal Type Tool (T), Latof ont, but this time

change the f ont weight to Regularand enter a f ew lines f or a brief work description. Then, make one line

break by hitting the Enterbutton 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 t hey 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.

Step 8

To duplicate the features we've just made, select the red circle, date and descript ion layer. Then hit CMD+J,

or right-click and select Duplicate Layers..., hitt ing OKthereaft er. Move the duplicated contents a couple

of hundred pixels below the original. We'll adjust t he posit ion of this later, as it will be dependent of the

work image height we'll place next to it.


16/22

Designing Work Area

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

Step 1

We'll begin (as usual) by minimizing the currently used Descriptions group and opening up the Workgroup.Pick the Rectangle Tool (U)and draw a 610x400px sized rectangle between the sixth and eighth vertical

guidelines (color doesn't matter t his time, just make sure it is visible). Place it 20px below the to p of the

document so it has 20px of space all around.


17/22

Step 2

Now pick an image of your work, I'll use the Notebook PSD Templatescreenshot 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 ALTkey, mouse over the screenshot layer name until you see a little arrow

down. When you see it, release t hey key and it will create a Clipping Maskso your image will only be visible

within the area o f the rectangle. Finally, hit CMD+T and resize the image as you like it to be.
http://dribbble.com/shots/1308200-Notebook-Free-Landing-Page-PSD-Template/attachments/182994


18/22

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

Step 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 Raindropsphoto f rom

unsplash.com. After t hat, create a third piece of work and place it 20px below the second one. For the third

work image I've used t he NYC Skylinephoto, again form unsplash.com.
http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_5255bf45a4a45_1.JPGhttp://unsplash.com/http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_5287d4367585d_1.JPG


19/22

Step 4

We now need to go back and make sure everything is lined up properly. Open up theDescriptions group

again and f ind the red circle, date and descript ion layers. Select them all holding CMDkey and move themdown until they align with the top o f the second port f olio image. Duplicate t hese layers by clicking CMD+J,

or right-clicking the layers and selecting Duplicate Layers.... Aft er that , place them next to the third work

image and align with the top o f that image.


20/22

Step 5

Awesome. We're close to the end. Minimize the Descriptions group and open up Workgroup again. Af ter

that , pick the ref resh icon f rom the icon set and drag it to your port f 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.


21/22

Step 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 port f olio website layout, f rom scratch, in an

organized and ef f icient manner. The 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 for the browser.


22/22

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.
http://twitter.com/tomaslau

Date post:	04-Jun-2018
Category:	Documents
Upload:	bm2i89
View:	221 times
Download:	0 times

Dev.tutsplus.com-Design a Stylish Timeline Portfolio Page Using Photoshop

Documents