Design a Dark, Contemporary Minifolio in Photoshop

by TutsArena - Templates, Tutorials

Portfolios are nice, but what if your clients want a quicker, lighter way to see what you can do? A Minifolio is a hybrid between a full-scale portfolio and a business card. It’s quick to design and it gives an idea of your style and a little of your background information without all the bells and whistles.

Business cards are a great way to publicize yourself. So are portfolios. Why not combine the two and make a Minifolio? This little guy is a quick way to give your potential clients an overview of you, your services and your past work.

maximilianschoening timvandamme rogieking chriscarey

Final Product:

vcard

Step One:

Create a new Photoshop document, 1000×730 px and fill it with #121b29.  This is your background layer.  To give it a little juice we’re going to add some Lighting Effects.  With your background layer selected, go to Filter > Render > Lighting Effects and use these settings:
vcardlightingeffects

Now we’ve got a pretty background and notice the lighting effects have darkened the rest of the background, that’s okay.

Step Two:

Now we’re going to make the title bar.  Select the Rounded Rectangle Tool (U) and use these settings:vcardroundedrectangle
Now create a new rectangle sized about 450×65 px.  If you used the same settings, you’ll only see an outline of your new rectangle.  To make it an actual layer you need to click the Paths box and right click “Work Path” then select “Make Selection”.  This will make a new selection based on the shape of your path and you’ll see the marching ants.  Make sure to create a new layer for this shape (Layer > New > Layer)!
vcardpaths

Select the Gradient Tool (G).  Set your color pallette to the following:  Foreground – #252e3b and Background – #121b29.  Use these settings:
vcardgradient

With your new selection still activated, drag the gradient from the top to the bottom of the selection.  You should now have your title bar.  We’re going to cut off the bottom of this new layer to make it flat.  Cut off just enough to change the curved corners to 90° angles.  Like this:
vcardtitlebar

Now we’re going to add a shadow to make it appear to pop out of the background and over our content box (we’ll add that later).  Select the Polygonal Lasso Tool (L) and create a selection like this:
vcardshadow2

Create a new layer for this selection and fill it with #0e141e.  You can burn/dodge it to give it a more realistic look but it should look fine as is.  Put this layer underneath the “Title Bar” layer we previously made.  Duplicate it and flip it horizontally (Edit > Transform > Flip Horizontal), move it to the other side and you’ve got your shadow effect.

Now we’re going to add the “content box”, or where we’ll be putting images of our latest design work.  Create a new rectangular layer and fill it with #dbe2ed. Put this layer underneath the “Title Bar” layer and the “Shadow” layer we just made.

Now we’ve got this:
vcardlarge

Let’s add our name to the “Title Bar”.  We used the “Titillium” font and typed our name, but if you don’t like this font simply use another.  A large, heavy font works best.  Use the color: #0c121b.
vcardfont

Type your name onto the title bar and style it like this:
vcarddropshadow
vcardinnershadow

Oooohhh.. pretty.

Step Three:

Here’s the important part… the contact information.  We’ve added a “Favs” and a “Get in touch” area beneath the design so people will know some of our frequented websites and a little information about us.  We’re also going to add some images to the content box, sort of like a quick portfolio.

We simply dodged the area behind the “Favs” and “Get in touch” text to make it stand out a little more.  This is a completely voluntary step.

We’re done and you should have something like:
vcard

Now, you can have this coded but it’s really not necessary… all of your information is available on screen, however, to make it more user friendly, clickable links are pretty nice. =)

Don’t forget to download the PSD!
Download the coded version!

Check out these other tutorials we’ve written:

Download!

About the author

TutsArena is dedicated to providing the best, free web design tutorials.


Visit TutsArena's Website | All Articles From This Author

11 Comments


Add your comment - (need a gravatar?)

Enable CommentLuv?

Sponsors

Sponsors

Recent tutorials

Sponsors

Write for us!

Write tutorials for us and make money! Check out the details and submit your tutorial.