Advertisement
Complete Websites

Create a Clean and Minimal Portfolio Design (Plus a Free PSD!)

by

In this design tutorial, we’re going to create the portfolio design "Smart Portfolio" by Curt Ziegler, available on ThemeForest as a WordPress or HTML theme.

About the Author: Curt Ziegler, also known as Cudazi, is a web designer specializing in WordPress theme development with 10 years of design experience, a number of highly successful products and over 6000 sales at ThemeForest! You can also find more of his work at cudazi.com.

The Smart Portfolio theme design has sold nearly 1000 combined times, and helped pave the way for many other minimalist template designs. This template will walk you through how to create the design yourself, but more importantly, we'll also be discussing why it works. Once we're done, we hope you'll be able to create your own version of this sleek, professional design using your own style, fonts and colors!


Step 1

Start by creating a new Photoshop document. 1000px wide, 1200px tall, 72 pixels/inch. The height may be a bit excessive for our home page but I would rather have too much room vertically than not enough and have to go back and adjust.


Step 2

Set the foreground color to f3f5ec and fill the background layer by pressing Alt+Backspace.


Step 3

Let’s create a guide mid-way across the page to help keep things aligned. Instead of manually dragging a guide onto the canvas with the move tool, let’s be more exact.

  • Go to View > New Guide...
  • Select Vertical
  • Position: 500px

Step 4

At the very top of your canvas, create a rectangle using the Rectangle tool in the vector shapes area of the toolbar. Create it as wide (or wider) than the canvas and 7px tall. Since this is using the vector shapes tool, double click on the colored thumbnail to set the color to 51767c, a nice green.


Step 5

Add a simple line to the bottom by double clicking your layer above and adding a stroke in the Layer Style window.

  • Size: 2px
  • Position: Outside
  • Color: 8baaaf

Since your header line is full-width and at the very top of the canvas, you are only going to see the lighter green line at the bottom - just what we wanted to accomplish.

Why not just draw another line below the 7px line? There’s no right or wrong way but I prefer to use the same shape, if I want to change or move this area, it is one less layer to track down.

Put your new header line in a folder called Header to keep things organized.

What’s with the vector tools and layer styles? Using layer styles and the vector tools is one of the many ways you can apply styles, colors and shapes with the freedom to change down the road.


Step 6

The logo for this site is standard, editable Photoshop text with a few different layer styles applied.

Start by choosing the text tool and click on your canvas, typing out the words: Smart Portfolio.

Highlight the text and apply the following settings in the character tools:

  • Font: Georgia
  • Weight: Regular
  • Size: 58pt
  • Tracking: 0

Color (left side): 51767c

Color (right side): 514829


Step 7

Now, let’s apply some layer styles to turn things up a notch, double click on the text layer and add the following:

Apply a Drop Shadow, Gradient Overlay and Stroke:


Step 8

Now we need to center the text on the page to align with the center guide we placed at 500px.

As with anything, there are many ways to accomplish the same task. One failsafe way is to use the align tools.

Choose the move tool from the main toolbar.

Click once on your text layer to be sure it is active.

Press Control+A (select all) - your entire canvas should have a selection around the perimeter.

In the align toolbar, select align horizontal centers.

Your text will jump to the center of the page, now we need to place it 40px from the header.


Step 9

Choose the move tool from the main toolbar.

Double check that your text layer is still selected in the layers panel. If not click once on it.

While holding down the shift key, click on the text and carefully move it up so it rests up against the bottom of your header lines. (Holding down shift ensures you will stay on your vertical center line)

Now, with the move tool still active, hold down shift and press the down arrow on your keyboard four times. This will bump the text down in 10px increments totaling up to 40px away from the header.

You could have set another guide and measured but this is a very quick way to get things where you need them. Again, there are many ways to accomplish the same task.

Place the logo in its own folder titled Logo to keep things organized.


Step 10

Now it’s time to add a tagline under our logo.

Using the text tool, add the following text:

Welcome to the online portfolio of Jane B Doe,
Ph.D. student, designer in Cityname, State.

The text settings are:

  • Text-align: center
  • Font: Georgia
  • Weight: Regular
  • Size: 26pt
  • Tracking: 0
  • Leading: 38px
  • Color: 51767c

Step 11

Using the same techniques as the logo above, we first need to center this text on the page and move it to be 40px below the bottom of our logo.

Place the tagline in its own folder titled Tagline to keep things organized.

A bit of a side note here: It’s important to be consistent with your spacing of elements both vertically and horizontally.

If your elements are different distances apart, they should be that way for a reason. Elements that are close together imply a sense of relation to one another where items placed farther from one another feel independent.


Step 12

The divider bracket is what it appears to be, a gigantic bracket, rotated on it’s side.

This specific one is ImprintMT Shadow but feel free to use any style you feel appropriate if you do not have that specific one installed.

For ImprintMT Shadow, the font-size used was 440pt.

The color of the bracket is 51767c with the layer opacity set to 10% to tone things down, otherwise the bracket dominates the page and is intended to merely lead your eye down to the lower sections of the home page.

You have two options when adding the bracket, choose the standard type tool and rotate the text 90 degrees with the transform tool (Control+T) or to use the vertical type tool. I prefer the first option since it’s just a single element on the page and rotating it isn’t that big of a deal.


Step 13

Center the bracket on the page and place it 40px below the tagline just like we did with the logo and tagline above.

Place the bracket in its own folder titled Bracket to keep things organized.


Step 14

Now we can create some small items to lead visitors into the various sections of our site. In my example, I used three columns, each with its own icon but you can add more or even two rows if need be.

The icons I used can be downloaded free of charge from wefunction.com.


Step 15

Since we’re getting used to centering items on the page, let’s start by creating the center column and work our way out.

Using the standard text tool, create the first item, Education. The font settings are:

  • Font: Georgia
  • Weight: Bold
  • Size: 24pt
  • Tracking: 0
  • Color: 51767c

Before we get to centering anything on the page, we need to also add the icon.


Step 16

There are multiple ways to get an image in your project but I like to use File > Place.

Choose one of the icons downloaded from wefunction.com, I chose paper_content_pencil_48.png.

When you place the icon on the page, you will notice the resize handles, while you see those, you can set the width and height to 70% since they are a bit large for our design.

You can always go back and do this by selecting the layer and pressing Control+T to use the transform tool.


Step 17

We need to align the text with the icon before aligning both overall with the page.

Make sure your layers for the icon and text are next to one another in your layers panel and then select both by clicking and holding down shift.

Now, in the align toolbar click align left edges and then click align vertical centers. We’re almost set.

Select your icon layer and using only the left arrow, move it 10px away from the left edge of your heading.

Place your heading and icon in their own folder titled Section to keep things organized and to use for additional alignment.


Step 18

Now we need to align the “Section” folder with the page.

Click once on the folder titled Section to select it.

Press Control+A (select all) - your entire canvas should have a selection around the perimeter.

In the align toolbar, select align horizontal centers.

Your text and icon in the folder will jump to the center of the page.

Using the same techniques as we have all along, move this folder 40px below the divider.


Step 19

The sections I show also have a small description on the home page. Inside the section folder, add the following text as an example:

Lorem ipsum dolor sit amet,
consectetur adipiscing elit.

Proin molestie posuere.

The font settings are:

  • Font: Arial
  • Weight: Normal
  • Size: 13pt
  • Tracking: 0
  • Leading: 22pt
  • Color: 858872

Step 20

Center this text on the page and move it 40px below the title and icon.

We now have a completed section we can duplicate for the other areas.

Select the Section folder, it should contain the icon, title and text we just added. Under Layer, choose Duplicate Group... and enter a name. Do this once more so we have three total, all stacked on top of one another.


Step 21

Select one of the duplicated layers above and using the arrow keys, move the layers an equal distance from the center. This distance will vary depending on how wide your sentences are and how long your titles may be but keep the distance between the three columns consistent.

Swap out the icons and text in each section to customize further.


Step 22

Now that we have an idea of how “tall” this page will be, we can add in the background.

Click on the background layer so the next layer created will appear just above this, otherwise it will appear above all our content.

At the very top of your canvas, create a rectangle using the Rectangle tool in the vector shapes area of the toolbar. Create it as wide (or wider) than the canvas and tall enough to go behind all the items we have created so far, mine is 620px tall. Ideally, it will be 40px taller than the bottom of the three sections we just added. Use the ruler tool in the main toolbar to check and adjust the background height accordingly to hit 40px.

Rename this layer body solid background.


Step 23

Double click on the colored thumbnail to set the color to ffffff. (White).

Double click on the layer to bring up the layer styles window and apply the following settings:

Drop Shadow and Gradient Overlay

This will create a nice fade at the top edge of the background.


Step 24

Now we can add some simulated paper-like texture.

Create a new layer above the background we just added and fill it with solid color: f5f7ed.

Double click on the layer and add a Pattern Overlay layer style. (Pattern library: Artists Surfaces > Granite)

Set the opacity to 15% and hit OK to apply, you will notice the pattern takes over the entire page - let’s fix this in the next step.

Rename this layer body texture overlay.


Step 25

Select the body texture overlay layer and then click add a vector mask from the bottom of the layers panel.

Now, select the gradient tool from the left toolbar and double check you are using the default white-to-black gradient from the toolbar.

Layer masks don’t “see” in color but instead use black and white to determine what to hide (mask) or what to show in the layer the mask it attached to.


Step 26

While holding down shift (to keep it perfectly vertical) drag down on the canvas from the upper green bar at the top of the page down just about 100px. This will fade out the granite pattern into a solid page background, adding a touch of paper-like texture to the site without becoming distracting.

Place the body solid background and body texture overlay layers in their own folder tiled Body Backgrounds to keep things organized.


Step 27

The social media icons are not from a set but created from the actual logos. A great source of the icons and logos is www.iconfinder.com - find the ones you would like to use and apply the following changes to each item:

Set the layer mode to Luminosity
Set the opacity to 10-40% depending on the logos used
Resize each so they are all of equal height.


Step 28

Add the footer text centered and placed 20px below the social media icons with the following settings:

  • Font: Arial
  • Weight: Normal
  • Size: 11pt
  • Tracking: 0
  • Leading: 22pt
  • Color: 858872

Final Product


Bonus!

The PSD download also includes a bonus portfolio style page!


Conclusion

That’s it! I tried to keep everything as simple as possible for those of you just starting out but with any design there are multiple ways to accomplish the same results. If you are interested in the final HTML or WordPress versions stop over to my ThemeForest portfolio!

Related Posts