Quantcast
Channel: Vivid Loaded Designs » tutorials
Viewing all articles
Browse latest Browse all 2

Design Clean and Nice-Colored Portfolio in Photoshop PT.1

0
0

Design Clean and Nice-Colored Portfolio in Photoshop PT

Hello everybody and welcome to new tutorial here on VLD! In this tutorial, we’ll make really nice and colored personal portfolio and this is the first part of the complete series, so I hope you follow the coming ones and catch them all to learn how to make your own impressive portfolio.

The Final result:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Tutorial Details:

Program: Adobe Photoshop

Version: CS6 (you can also do it by CS4, CS5)

Difficulty: Easy

Estimated Completion Time: 2 Hours.

Resources you’ll need:

Aquaticus Social Icons.

Onebit Icons.

Twitter vector 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 Mac)… and let it be with the following settings:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Now make two vertical guides with 100px and 1100px, go to (View > New Guide) and give the value of 100px then repeat that and give it 1100px.

Select the “Gradient Tool” (G) and fill your layer up with the color values shown in the screen shot below (#738424 & #d89223) … then label this layer “Background” … you may get background like this:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Then download the pattern I’ve used from resources above, and make a new layer by going to (Layer > New > Layer) “Shift + Ctrl + N” and fill it up with this pattern. Set the opacity on 8%.

Creating the Header Background:

Set the color value on #dfdfdf then make a new layer by going to (Layer > New > Layer) “Shift + Ctrl + N” and select the “Rectangle Marquee Tool” (M) then draw a shape like the one you see below (it should be 1200px width and 73px height). Set the opacity on 35%.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

The next step here is adding navigation text, it’s so simple. First, select the “Horizontal Type Tool” (T) and type titles using the following character settings:
Font Family: Exotc350 DmBd BT, Size: 24pt, Color: #834b04, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Note: To make sure that your text layers is aligned well; select all these layers then use

This is my result:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Now we’ll type something about each title, exactly under them, using the following character settings:
Font Family: Arial (it’s default), Size: 12pt, Color: #834b04, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Use the same character settings to type your phone number and email, but keep the font size on 14pt.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Note : to keep your final PSD file tidy and organized, select all top header layers and gather them into one folder by selecting (Layer > New > Group from Layers).

Creating the Title:

As you may notice, we just use nice font called “Emmett” with some layer effects to type the title, no images or any other additions. So to do it, you just need to add the font to your PS and use the following character settings to type your portfolio name:
Font Family: Emmett, Size: 36pt, Color: #834b04, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

When you’re happy with it, apply the following “Stroke” settings (go to Layer > Layer Style):

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Another text we’ll be adding, just some info about yourself. Use the following character settings to type:
Font Family: Franklin Gothic Medium, Size: 14pt, Color: #834b04, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Creating the Search Box:

Set the color on value: #dfdfdf, then select the “Rounded Rectangle Tool” (U) with 5px radius and no stroke and be sure to check the option “Align Edges”. Now start drawing a shape like the one you’ll see below regarding the guideline we’ve created before (mu shape is 250px width and 34 height and 38px far from header background).

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Once you finish yours, rasterize the layer and apply the following “Stroke” settings (go to Layer > Layer Style):

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Then reduce the layer opacity to 40%.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Label this layer with “search_bg” then duplicate it and re-label the new one with “icon_bg”, click with the right button and choose “Clear Layer Style” to remove the style.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Now what you have to do is changing the color by apply the following “Color Overlay” settings (go to Layer > Layer Style):

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

 

After that, click “Ctrl+T” to get handles around the shape then hold the “Shift” key and try to get something like that:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

 

Once you’re finished click “Enter” to confirm the new shape. That’s the result:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

 

Add any suitable search icon you like, for me I add this one below and this is my result:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

 

Now, use the following character settings to type to type the word “Search” inside the search box:
Font Family: Arial (it’s default), Size: 14pt, Color: #895d24, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

 

Creating the Info Block:

The first thing we’ll start with here is creating the top separator line and to do we’ll set the color on #ffffff and select the “Line Tool” (U) with 1px weight and draw a line like this:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Reduce its opacity to 18% and you’ll get very impressive look for this one!

Use the “Horizontal Type Tool” (T) to make a rectangle text and type some details about yourself using the following character settings:
Font Family: Cf RotisSansExtraBold, Size: 22pt, Color: #664e0c, Anti-aliasing setting: Smooth, Leading: 30, Tracking: 25.

Once you finish typing, apply the following “Outer Glow” settings (go to Layer > Layer Style):

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

At the left of your text, add some nice photo for you or for your small company considering the main left guideline (let the size be 123 as width and 129 as height). Set the opacity on 45%. This is the result:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

For me, I’m designer and developer, so I’ll add this cool idea here and type two extra texts to tell visitors to chick my work in each field! I’ll use the following character settings to type the words “I Design” and “I Develop”:
Font Family: Berlin Sans FB Demi, Size: 36pt, Color: #4f3f09, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

For the other texts “See me as designer” and “See me as developer”, I’ll use the following character settings:
Font Family: Arial, Size: 14pt, Color: #4f3f09, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Add the icons I added here form the pace I’ve mentioned in resources above, u can use “Ctrl+T” to reduce its size. Then type “Download My Resume”, “Hire me!”, “PDF” and “I’m ready!” texts using the following character settings:
Font Family: Arial, Size: 14pt (12pt for “I’m ready” and “PDF”), Color: #714713, Weight: Bold (Regular for “I’m ready” and “PDF”), Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Creating the Services Block:

We’ll start this by selecting the “Rounded Rectangle Tool” (U) and draw a shape with 299px as width and 237px as height considering the main left guideline. Once you’re happy with it, rasterize the layer and apply the following “Stroke, Color Overlay and Outer Glow” settings (go to Layer > Layer Style):

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

The same settings we’ll do for the other two shapes just be sure to apply the following “Color Overlay” settings for the second one:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

And this for the third:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Now select all the shapes layers and reduce its opacity to 28%.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Note: as you see, you have to consider the main guidelines we’ve made at the top of our tutorial to locate your shapes exactly in it.

Add the following icons above your shapes; you should get something like that:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Next, type title for each shape using the following character settings:
Font Family: Arial, Size: 30pt, Color: (#734008 for the first one, #675c21 for the second and #464f20 for the third), Weight: Bold, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 75.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

And another inside explaining text, using the following character settings:
Font Family: Candara, Size: 14pt, Color: #603a0d for the first, #4e4812 for the second and #3e4516 for the third, Weight: Bold, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

The next step here is to add separators lines using the “Line Tool” (U) with 2px as weight and color #584e3f. Once you finish it, rasterize the layer and duplicate it three times so you can get three similar shapes as you see below:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Other texts we’ll be typing for reading more … use the following character settings:
Font Family: Candara, Size: 14pt, Color: #50320c for the first, #514e0e for the second and #2d3b0a for the third, Weight: Bold, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Once you finish it, select all those layers and reduce their opacity to 72%.

Finally here, add the following plus icon on the right side just like below, you should get something like that:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Creating “From my blog” Block:

Start with typing the text “From my blog” using the following character settings:
Font Family: Berlin Sans FB Demi, Size: 36pt, Color: #434b0f (for “From”), #343706 (for “my blog”), Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Select the “Rounded Rectangle Tool” (U) with 5px radius and no stroke, and draw a shape with 356px as width and 226px as height considering the main left guideline. Once you’re happy with it, rasterize the layer and apply the following “Stroke” settings (go to Layer > Layer Style):

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Now reduce its opacity to 18%. You should get something like that:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Pick up some image and add it above the previous layer, it’s better be 335px as width and 204px as height.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

The title of some post will be type using the following character settings:
Font Family: Bottix, Size: 20pt, Color: #383838, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 25.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Some content of the post will be type using the following character settings:
Font Family: Bottix, Size: 14pt, Color: #292929, #b7b7b7 (for “read more”), Weight: Regular, Anti-aliasing setting: Smooth, Leading: 18, Tracking: 25.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Two more titles will be type using the following character settings:

Font Family: Bottix, Size: 14pt, Color: #383838, Weight: Regular, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 25.

And we’ll add those nice arrows (from icons pack mentioned above) at the left from each one, this is the result:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Creating “About me” Block:

Start with typing the text “About me” using the following character settings:

Font Family: Berlin Sans FB Demi, Size: 24pt, Color: #434b0f (for” About”) #343706 (for “me”), Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Now, select the “Rounded Rectangle Tool” (U) with 5px radius and no stroke, and draw a shape with 537px as width and 117px as height. Once you’re happy with it, rasterize the layer and apply the following “Stroke and Color Overlay” settings (go to Layer > Layer Style):

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

 

Then type some text using the following character settings:
Font Family: Candara, Size: 13.5pt, Color: #171717 (for all) #a7a7a7 (for “read more”), Weight: Bold, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 25.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Creating “Contact me” Block:

As we do for “About me” text, we’ll apply the same settings for “Contact me” one.

Select the “Rounded Rectangle Tool” (U) with 5px radius and no stroke, and draw tow shapes (name and email) with 198px as width and 23px as height. Once you’re happy with it, apply the following “Stroke” settings (go to Layer > Layer Style):

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

The message shape should be 238px as width and 123px as height. Once you’re happy with it, apply the same “Stroke” settings you’ve already done for (name and email) ones.

Reduce the opacity for these three layers to 33%, you should get something like that:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

We’ll make tow more small rounded rectangles with 52px as width and 22px as height. Once you’re happy with it, apply the same “Stroke” settings and opacity ones.

Type the words “Send” and “Cancel” using the following character settings:

Font Family: Arial, Size: 11.62pt, Color: #1c1c1c, Weight: Bold, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

And the following for “your message has been sent!”:

Font Family: Arial, Size: 11pt, Color: #1c1c1c, Weight: Bold, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Add the icons from the icon set I’ve mentioned above … this is the final result for this:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

 

Creating the “Twitter” Block:

Select the “Rounded Rectangle Tool” (U) with 5px radius and no stroke, and draw a shape with 198px as width and 23px as height. Once you’re happy with it, rasterize the layer and apply the following “Stroke, Color Overlay and Outer Glow” settings (go to Layer > Layer Style):

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

 

Reduce the opacity to 25% and you’ll get something like this:

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Add the twitter icon you see below (you can find it in resources above) reduce its opacity to 85%.

For twits, we’ll use the following character settings:

Font Family: Candara, Size: 14pt, Color: #b2c267 (#2a4c5f for links), Weight: Italic, Anti-aliasing setting: Smooth, Leading: Auto, Tracking: 0.

Clean and Nice-Colored Portfolio

Clean and Nice-Colored Portfolio

Conclusion

Our tutorial has done! I hope you find it useful and good-explained … be sure to follow the next part we we’ll continue designing more pages … I’ll be happy to see your comments below and know what you think about it, 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.

Clean and Nice-Colored Portfolio (1.51 MB, RAR).


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images