Photoshop tutorial: Personal Portfolio Template


Great photoshop tutorial will show you how to create nice Personal Portfolio Template. We will create template with articles sections, section for images, also navigation and search bars. In this tutorial we will use some objects from our previous tutorials.

Final Image Preview

Personal Portfolio Template


Step 1

Let’s start out by creating a new file. I used a 1000×900 pixels canvas set at 72dpi, and I filled my background with #FFF1AE color shade. Then select the Horizontal Type Tool then set the font family to Arial Rounded MT Bold, bold, 48 pt, crisp and #BF7000 color shade. In a new text layer type your website name on the top left side of the canvas.

Step 2

Under Layer Style(Layer > Layer Style) add an Outer Glow, Inner Glow and Gradient Overlay blending options to your website name text layer.

Personal Portfolio Template

Personal Portfolio Template

Result:

Personal Portfolio Template

Step 3

Next to your website name add your navigation links with its own icon next to it. Use font Arial, regular, 14 pt, none and #894000 color shade. You can grab the icon files here.

Personal Portfolio Template

Step 4

Now add a search box next to your navigation links.

Personal Portfolio Template

Step 5

Make a new layer set and name it 'Content Box', in a new layer draw a large white rectangle with 460 x 300 px dimensions below your website name. Then in a new layer draw a dark green rectangle with #051F14 color shade and 460 x 30 px dimensions.

Personal Portfolio Template

Step 6

Under Layer Style(Layer > Layer Style) add an Inner Shadow blending option to your dark green rectangle layer.

Personal Portfolio Template

Result:

Personal Portfolio Template

Step 7

Now add your text such as a title, post details and content paragraph on the content box. Use font arial, regular, none and black color shade for the content paragraph, use white for the title and #00A855 color shade for the link.

Personal Portfolio Template

Step 8

Add another content box design below the first.

Personal Portfolio Template

Step 9

In a new layer draw a small white rectangle with 91 x 21 px dimensions on top of your content box. Then in a new text layer type 'Latest Blog' or the title of your content boxes using font Arial, bold, 12 pt, none and #E20000 color shade.

Personal Portfolio Template

Step 10

On the top right side of your canvas add a section for your latest work. In a new layer draw a long white rectangle with 21 px height. Then in a new layer text type 'Latest Work'.

Personal Portfolio Template

Step 11

In a new layer insert a sample image of one of your work with 520 x 237 px dimensions. Then under Layer Style(Layer > Layer Style) add an Outer Glow and Stroke blending options.

Personal Portfolio Template

Personal Portfolio Template

Result:

Personal Portfolio Template

Step 12

Below your sample image add the details of the work such as website name, date, category etc. Use font Arial, regular, 12 pt, none and #D50000 color shade for the link color.

Personal Portfolio Template

Step 13

Add as many sample work content below each other, 2 is good.

Personal Portfolio Template

Step 14

Make a new layer set and name it 'Footer'. In a new layer draw a large brown rectangle with #371F03 color shade and 980 x 170 px dimensions below your content.

Personal Portfolio Template

Step 15

On the right side of the footer add your copyright information using font Arial, regular 15 pt, none and white color shade. Use #FF0000 color shade for link color. Now add a cardboard box design next to the copyright info, grab the file here.

Personal Portfolio Template

Step 16

Now add your main links on the left side of the footer.

Personal Portfolio Template

Result: Personal Portfolio Template

Personal Portfolio Template

Download Psd file

download psd file
Dainis

About the Author

Dainis is Webmaster of Psdeluxe - Design related website, where you will find newest photoshop tutorials, inspiration for designers and free design resources.

Subscribe to Psdeluxe feed


blog comments powered by Disqus

Sponsored by

PSD to XHTML

Grab Psdeluxe Rss feed

PsDeluxe rss feedGet nicest photoshop tutorials, design resources and articles directly in your email. Subscribe to Psdeluxe Feed and stay be informed about latest design news.

Subscribe by email:
Subscribe by Rss: Add to Google Reader or HomepageAdd to Yahoo pageBookmark Add to Netvibe

Community News

Kicked out of AdSense for all the wrong reasons? Denied from joining the Ad emperor for bleak reasons? Clearly the corporate Ad Empire for content sensitive web advertising is ruled by Google AdSense.

ere, we have collected over 90 wonderful Absolut ads made for different photoshop contests. Use these ads for your inspiration, creativity and even collection!

This tutorial explains how to make your own template for Google's Blogspot platform using Blogger Template Designer for free.Blogspot template designer helps Bloggers in easily making their own template

If you are a photographer or graphic artist and you want to share your art works then personal blog would be an ideal solution. To make your selection process easier we’ve gathered in this collection the best in our view premium WordPress themes, that mig

Even though iphone is ruling the world of smart phones, for some customers just entering the game Smartphone means some basic functionalities and pretty design. Here arises a pair of Motorola Android phones namely Devour and Backflip

Thanks to...

Content Delivery Network Search Engine Optimization Suite for Joomla

The Best Fans on Facebook