Design Your Complete Clean, Elegant and Colorful Portfolio Pt. 1

Hello all friends, another day and another tutorial here on HV-Designs! Today you will be learning how to create your personal elegant portfolio depending on only Photoshop amazing tricks and techniques. I’m proud to share this very detailed, step by step tutorial which will be divided into two parts with you exclusively on HV-Designs! This tutorial will let you practice on the basics of Photoshop through covering almost more than 25 amazing PS techniques! A lot of colors will be used to creating this portfolio with complete pages design as well, so I suggest you to don’t waste time and start designing with me now!

The Final result:

(Click on the image to see the full size)

Tutorial Details

Program: Adobe Photoshop
Version: CS5
Difficulty: Intermediate
Estimated Completion Time: 2 Hours

Resources you’ll need:

Mini Social Icons Set by design deck.

Twitter Icons PNG

Onebit 1 & Onebit 2

Abstract IV

Fonts Pack

Creating the Background and the General Design Look:

Open up a new Photoshop document by going to (File > New) “Ctrl + N” (That is Cmd+N on the Mac). and let it be with the following settings:

Now go to (View > New Guide), then apply the following 4 main guides as you see below:

The next step is to make a gradient using the colors values #e34a10, #fce700 … you can either use “Gradient Tool” (G) or apply “Gradient Overlay” layer style (Layer > Layer style > Gradient Overlay) just like below:

Now, make a gradient and label the layer with “Main Background” and create a new layer above it and label it “Smooth noisy light” then fill it up with white color: #ffffff, then go to (Filter > Noise > Add Noise) and give it an amount between 30-32% … then set the opacity on 25%.

Creating the Top Page Navigation Bar:

Let’s start making this nice red navigation bar at the top of our layout, select the “Rounded Rectangle Tool” (U) with 5px radius and draw a shape like the one you see (69px height), use any color because we’ll change it in the coming step. But make sure to draw your shape inside the area that limited by guidelines … just as you see below:

Now, rasterize the layer and label it “topnav_bg” then apply these “Outer Glow”, “Inner Glow” and “Color Overlay” layer style settings:

It’s time to type some page titles for our portfolio, use “Type Tool” (T) and the following character settings:

Font Family: Caslon224 Bk BT, Size: 24pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #ececec, Leading: Auto, Tracking: 0.

Download the “Onebit” icon set (you can find it in resources above), then add the following icons to your layout and make sure to use “Ctrl + T” to get control handles around each one so you can control the size. The dimensions between text and its icon should be almost 15px.

What you have to do now is selecting all those layers together (topnav_bg, text layer and icons layers) to group them together (go to Layer > New > Group from Layers), name the group “Top”. This step will be repeated all over this tutorial, you’ll finally end up with tidy and organized PSD file.

Creating the Abstract Colored Breaks for the Top Page Navigation:

Now, we’ll goanna use “Abstract IV” brush set (download it from resources above) to add some abstract breaks behind the top navigation bar, the first thing to do here is hiding the folder we’ve already create it “Top” by just clicking on the eye symbol at the left side of it.

Make a new group (go to Layer > New > Group), I’ll label it “TopBackBreaks” then make a new layer (Layer > New > Layer or “Shift + Ctrl + N”). Select “Brush Tool” (B) and add the brush set you’ve downloaded to your Photoshop, pick up some color then select one of the brushes and make spot like that:

Repeat this step for several times, make sure to select different brushes and colors for each time and make a new layer for each spot as well, that will help you controlling with size and opacity of each one (you’ll see what I mean when you download the final PSD and take a look to this). Once you’ve finish doing this, close up the group and reduce its opacity to 56%.

Now, you’ll get colorful breaks just like that:

Note 1: To add PS brushes set, click on the small arrow at the top tool bar, then open up the menu by clicking on the other one (shown below) and select “Load brushes”, you’ll get a window which allows you to add the new brushes easily by choosing the required brush set then click “Load”.

Note 2: You can merge all of the abstract colorful breaks layers into one after you find them well and happy with the final look; select them all then press “Ctrl + E”.

You can show the “Top” group again, by re-clicking on the eye symbol to get the final result:

Creating the Title and Short Description:

Create a new layer then use the following smooth brush (with size 250px, white color: #ffffff) and make a spot like below, then reduce the layer opacity to 44%.

It’s time to use “Type Tool” (T) and type a title for the portfolio; I’ll just type my name using the following character settings:

Font Family: CF Charlemagne, Size: 36pt, Weight: Bold, Anti-aliasing setting: Smooth, Color: #544014, Leading: Auto, Tracking: 0.

Once you’ve happy with the text, apply the following “Outer Glow” layer style settings:

Keep selecting the “Type Tool” (T) and type some description about yourself (the portfolio owner), using the following character settings:

Font Family: CF Colosseum, Size: 14pt, Weight: Bold, Anti-aliasing setting: Smooth, Color: #544014, Leading: Auto, Tracking: 0.

This is my result:

Creating the Twitter Widget:

Show up the guidelines (if it’s not) by pressing on “Ctrl +;” then select the “Rounded Rectangle Tool” (U) with 5px radius and color value: #ffffff (white), draw a shape like the one you see (435px as width, 91px as height, 54px far from top navigation bar) considering the right guideline. Once you’ve happy with the shape, rasterize the layer then label it “twits_bg” then apply the following “Stoke” layer style settings:

Now, reduce the opacity of this layer to 40%. This is what you should get:

Download the Twitter Icons PNG from resources above, then add the following on to your layout, you can use “Ctrl + T” to get control handles so you can get the size you want. Then select the “Type Tool” (T) and type your twitter username using the following character settings:

Font Family: Arial, Size: 16pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #2c2b2b, Leading: Auto, Tracking: 0.

You should get something like that:

Again with “Type Tool” (T), type some twits using the following character settings:

Font Family: AXtMashtour, Size: 14pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #1e1e1e (and #10b7c7 (for links)), Leading: Auto, Tracking: 0.

Finish this part by grouping all layers together into one group, label it “Twitter”.

Creating Summery about the Portfolio Owner:

We’ll start up here with making new guide by going to (View > New Guide) and make horizontal guide with 518px, like following:

Type text that says “Hello there!” with “Type Tool” (T) using the following character settings:

Font Family: Vani, Size: 72pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #8a6d0a, Leading: Auto, Tracking: 200.

After that, apply these “Outer Glow” layer style settings on your text:

It’s time to type some summery about yourself (portfolio owner), just use the “Type Tool” (T) to make a rectangle text then paste the summery you want inside it, using the following character settings:

Font Family: Vani, Size: 24pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #725a0a, Leading: 32pt, Tracking: 10.

Apply the same “Outer Glow” layer style settings you’ve do it for the previous text “Hello there!” on this text as well. You should get a result like that:

Now let’s begin making the “Download my resume” button. First, make a new layer (Layer > New > Layer or “Shift + Ctrl + N”) then select the following two brushes (make sure to set the color on white #ffffff) to make something like that:

Label this layer with the name “Light” and then reduce its opacity to 55%.

Next, select the “Rounded Rectangle Tool” (U) with 5px radius and whatever color (we’ll goanna change it later), draw a shape like the one you see (230px as width, 47px as height) considering the far from the right guideline which is 44px. Once you’ve happy with it, rasterize the layer and label it “download_bg” then make some styles by applying the following “Inner Glow”, “Gradient Overlay” and Stroke” layer style settings:

With “Type Tool” (T) type the text “Download my resume!” using the following character settings:

Font Family: Alberta, Size: 17pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #37731f, Leading: Auto, Tracking: 0.

Note: notice that we keep the far between the guideline we’ve created at the beginning of this section and the download button about 42px.

Creating Works Block:

We’ll begin here by making some colorful breaks just as we’ve done previously for download button, so select “Brush Tool” (B) and make some abstract breaks and use different colors for that and be sure to let every single spot on its separate layer so you can get more control options, you may need to reduce the opacity of some layers (as you’ll see in my final PSD at the end of this tutorial).This is how my result:

Note: I apply some “Gradient Overlay” styles on some of the abstract breaks to get high styled result.

Now, we have to set new guidelines for locating the main works container inside them. As usual, go to (View > New Guide) then make 548px horizontal one and repeat that to make another one with 771px, like following:

Select the “Rounded Rectangle Tool” (U) with 5px radius and whatever color (we’ll goanna change it later), draw a shape like the one you see considering all guidelines (the shape should be located inside the four guidelines. Once you’ve happy with it, rasterize the layer and label it “Works_bg”.

Apply the following “Outer Glow” and “Color Overlay” layer style settings:

It’s time to add our works screenshots, but after that let’s make some holders for the screenshots; I believe it would be nicer like that!

Select the “Rounded Rectangle Tool” (U) with 5px radius and white color: #ffffff, draw a shape with 272px (width), 149px (height). Once you’ve happy with it, rasterize the layer and apply the following “Stroke” layer style settings:

Reduce the opacity to 15%, then duplicate this shape twice, you should get tow more copies from it, locate them like below.

Note: to be sure that those shape are aligned well together, select them all then go to the top tools options bar and click “Distribute Horizontal Centers”.

Now, add the screenshots you want (it should be 257px as width and 135px as height), I’ll just add some of works here.

The next step is to add some text under each work that tells to know more about that works or visit the related website (if it’s exists). Select the “Type Tool” (T) and use the following character settings:

Font Family: Bitmap Police, Size: 14pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #f0f8f8, Leading: Auto, Tracking: 0. When it’s done, reduce the opacity of these texts to 35%.

Now, we’ll goanna make the rounded selected circled down the main container, set the color on value: #ce5a20, then select the “Ellipse Tool” (U) and draw circles like the ones you see below, rasterize the layers once you’ve finished. You’ll need 5 copies from the main circle, duplicate it and drop the new copies one by one horizontally while you’re holding down the “Shift” key.

Apply the following “Outer Glow” layer style settings on all circles layers:

And the following “Color Overlay” layer style settings (plus to previous “Outer Glow” one) on the first circle which is the active one:

The result:

Creating the Special Quotes Block:

Again, use the brush set (from resources above) to make new abstract breaks using different colors. For me, I made three ones just like below:

Select the “Rounded Rectangle Tool” (U) with 5px radius and any color, draw a shape with 726px (width), 66px (height). Once you’ve happy with it, rasterize the layer and apply the following “Outer Glow” and “Color Overlay” layer style settings:

This is what you should get:

Now, select the “Type Tool” (T) and type the title that says “Special Quotes” using the following character settings:

Font Family: Calisto MT, Size: 24pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #2c2b2b, Leading: Auto, Tracking: 0.

And the following ones for “… That I Love” text:

Font Family: Calisto MT, Size: 18pt, Weight: Bold, Anti-aliasing setting: Smooth, Color: #2c2b2b, Leading: Auto, Tracking: 0.

And the following ones for the content text:

Font Family: Comic Sans MS, Size: 16pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #edceb6, Leading: Auto, Tracking: 0.

Note: notice the far between the main container for special quotes and the main works container, it is 116px.

Creating the “Keep in Touch” Footer Block:

First, we’ll goanna make a new guide, go to (View > New Guide) and set the horizontal value 1074px as you see below, we’ll use this guide to set the title for this section:

Let’s begin doing this by selecting “Type Tool” (T) and type the title “Keep in Touch” using the following character settings:

Font Family: Centaur, Size: 30pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #a33e1b, Leading: Auto, Tracking: 25.

Once finished, apply the following “Outer Glow” layer style settings:

Now, add your phone number and email id using the following character settings:

Font Family: Acropolis, Size: 16pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #a7430a, Leading: Auto, Tracking: 0.

Once finished, apply the same “Outer Glow” layer style settings that you’ve already done for title text.

It’s time to download the Mini Social Icons Set and add the following icons to your layer:

Type the links of your socials using the same previous character settings (that we’ve done for phone number and email), but with small font size here, 14pt. As well as, apply the same “Outer Glow” layer style settings that you’ve already done for title text, phone number and email.

Creating the “Skills” Footer Block:

As we’ve done before, we’ll goanna make a new guide, go to (View > New Guide) and set the horizontal value 1042px as you see below, we’ll use this guide to set the title for this section:

Type the title by selecting “Type Tool” (T) and using the same character settings that you’ve done for “Keep in Touch” text, but with font size: 30.55pt. Then apply the same “Outer Glow” layer style settings that you’ve already done for “Keep in Touch “title text.

Add the icon you see near the “Skills” text from Onebit Icon set (download from resources above), you can use “Ctrl + T” to get control handles and control the size.

Now, set the color on value: #95542c, then select the “Custom Shape Tool” (U) and choose the following shape from options above (it’s default). Draw a small shape like below and once you’ve happy with it, rasterize the layer then duplicate it several times (as much as skills you want to add), and this is my result:

Select the “Type Tool” (T) to type the skills you want using the same character settings you’ve done for title text, phone number and email, but with small font size here, 16.08pt, as well as apply the same “Outer Glow” layer style settings that you’ve already done for title texts, phone number, and socials links.

Creating the “Send Message” Footer Block:

As we’ve done before, we’ll goanna make a new guide, go to (View > New Guide) and set the horizontal value 1008px as you see below, we’ll use this guide to set the title for this section:

Type the title by selecting “Type Tool” (T) and using the same character settings that you’ve done for “Keep in Touch” and “Skills” texts, with font size: 30pt. Then apply the same “Outer Glow” layer style settings that you’ve already done for “Keep in Touch “and “Skills title texts.

Add the icon you see near the “Send Message!” text from Onebit Icon set (download from resources above), you can use “Ctrl + T” to get control handles and control the size.

The next here, is to make some abstract breaks just as we’ve done before, this is my result:

Now, let’s begin creating the contact form by selecting the “Rounded Rectangle Tool” (U) with 5px radius and color value: #87ba36, then draw a shape with 189px (width), 28px (height). Once you’ve happy with it, rasterize the layer and apply the following “Stroke” layer style settings:

Label this layer “name_bg” then reduce its opacity to 50%.

Note: notice the far from right edge of the layout, 221px.

Duplicate the “name_bg” layer and re-label the new one with “email_bg” then drop it down while you’re holding the “Shift” key for almost 16px, you should get something like this:

With the “Rounded Rectangle Tool” (U), 5px radius and color value: #87ba36, draw another shape for message, it should be 260px (width), 97px (height). Once you’ve happy with it, rasterize the layer and apply the same “Stroke” layer style settings that you’ve applied for “name_bg” and “email_bg” layers, label this one “msg_bg”.

Add some icons from Onebit Icon set (download from resources above), you can use “Ctrl + T” to get control handles and control the size. Once finished, reduce the opacity of all these icons to 58%. This is what you should get:

Now, type some text with “Type Tool” (T) and using the following character settings:

Font Family: Arial, Size: 12.54pt, Weight: Italic, Anti-aliasing setting: Smooth, Color: #fce7d9, Leading: Auto, Tracking: 0.

Reduce the opacity of all these text layers to 60%.

With the “Rounded Rectangle Tool” (U), 40px radius and color value: #87ba36, draw the send button, like the one you’ll see it below. Once you’ve happy with it, rasterize the layer and apply the following “Stroke” layer style settings:

Now, type the word “Send” using the following character settings:

Font Family: Arial, Size: 16pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #fce7d9, Leading: Auto, Tracking: 0.

Reduce the opacity of this text layer to 73%.

Next, add the following alert icon from Onebit Icon Set, and then type text that says “your message has been sent!” using the following character settings:

Font Family: Acropolis, Size: 12pt, Weight: Regular, Anti-aliasing setting: Smooth, Color: #954416, Leading: Auto, Tracking: 0.

Then, apply the same “Outer Glow” layer style settings that you’ve done before for title texts, phone number, and socials links.

Conclusion

The first part of this tutorial has done now! We’ve just created the home page for our complete portfolio, so don’t forget to follow the coming parts which we’ll continue designing the other pages and of course exclusively on HV-Designs … I’ll be happy to see your comments below and know what you think, as well as see more results of your work.

Download Source Files

Download the free PSD for this tutorial that is licensed under the Creative Commons license. Of course, attribution is required and appreciated.