Design an impressive vCard mini site design in photoshop

Designers, and other entrepreneurs on the Internet are getting their own vCards. That is a website with just a small rectangle on it (usually) displaying the most important information about that person in a compact way.

It gives a visitor a calm impression and most people are more tented to click on tabs to see what?s below, than read a long page full of text.

Designer Tim Vandamme was one of the first persons to come up with this concept (many people state he is the actual first person that made such concept). http://timvandamme.com/

Result Preview

Step1

Create a new document of 942x482px.
That’s what I used, you can use anything your prefer as long as it’s a horizontal rectangle.

Step2

Pick the Rounded Rectangle Tool and set it’s corner radius to 10px. Draw a rectangle with it that exactly fits the document at all sides.

Step3

Add the following Layer Styles to that rectangle:

Step4

Create a new layer. Make sure your Rulers are on (cmd+R / ctrl+R) and you should see the 2 at the top, that’s where you’re going to place a grid on the document. Do that by clicking and holding the left Ruler and dragging it so it is right on the line of the 2.

Step5

The Guide we just placed was set there to measure our sidebar navigation.

Duplicate the rectangle layer we have (cmd+J / ctrl+J or drag and drop the layer on the new layer icon). Now take the Rectangular marquee tool and select everything from the right side of the layer up to the Guide we placed.

Now make sure the duplicated rectangle layer is selected (the top one) and pick the Eraser Tool (E). While still having the selection running, try erasing the inside of the rectangle; a dialog box will pop up. Just press OK and erase the entire content of the selection or press Backspace/Delete.

Press cmd+D / ctrl+D to deselect.

Step6

Apply the following Layer Styles on this sidebar navigation that remains:

Step7

We are going to add some Glyphs on this sidebar, you can try making your own but in this tutorial we’re going to use some free ones and tweak them a little bit.

You can download some at http://blog.twg.ca/2009/09/free-iphone-toolbar-icons/

Step8

Too make the navigation look clean and useable, we’re going to add some guides on it too.
Place the icons you want (or the same ones) like so (ignore the colors and “hire me” text at this step):

Step9

For the darker glyphs, use the following layer styles:

Step10

Pick one glyph that will be highlighted. That should indicate which glyph and thereby page is active.
Use these Layer Styles on it:

Step11

Now for that “hire me” text we need some extra attention.
These are the settings for the text:

Use these Layer Styles:

Use the same style for the bell icon below the text.

What we’ve got so far:

Step12

Create a new layer and draw a long bar with the rounded rectangle tool, like so:

Add these layer styles to it:

Step13

Duplicate this layer we just made and place it to the left of the original, do that 3 times.
(I pressed Shift+Right Button 16 times to get it at its position.)

Step14

Now we’re going to create a bar inside the current bars. Duplicate one bar again and let it be at the original position. Size it down a little by holding Alt/Option and dragging on of the nobs at the sides. Don’t use the corner nobs!!! They won’t make it scale in the right proportions.

Add the following layer styles to this new smaller bar:

You can play around with the Reverse of the gradient, it might suite better with it unchecked, depending on personal taste. (The main difference is that it either looks like an inward bevel or not.)

Do the same thing for the 3 other bars and vary the heights to your own needs.
You can change the gradient color to anything you want, it might be useful to just use the color slider at the left so the color intensity remains the same in all gradients.

Result so far:

Step15

Duplicate the first colored bar, disable all effects, but make sure the color is white.
Pick Elliptical Marquee tool and drag an ellipse something like this:

The selection should only apply on the first (in this case the blue) bar.
Now press ctrl/cmd+shift+I and erase the top part of the white bar.
Then set the opacity of it to 10%

Duplicate this layer again and stretch it bit to the top, so it peeks out a bit above the original white bar.

Duplicate the original once again, but make it slightly shorter, also flip it horizontally (edit>transform>flip horizontal).

As final step, take a big white brush of something like 115px and set its hardness to 0%.
Draw 1 dot at the top right corner of the loading bar (depends on the height, it should be at the top of the colored bar).
Set the opacity to 50%.

Duplicate these layers and scale & move them so they fit the other bars too.
This is what it should look like:

Step16

We’re going to make clear what the bars are about. Feel free to place icons above the bars,
but in this tutorial we’re just going to put some stylized text.

You can use Arial as a Windows alternative. The color is #717171

Now at the top of each bar write what the bar represents, in 1 word if possible to keep it looking nice.

Add these effects to the text and you can either duplicate the original layer and place them on the right place; or right click the layer and “copy layer style” to paste it on another “paste layer style” (not ctrl+c ctrl+v).

Step17

To make clear what the page is about, I added a subtle, but bold text in the background with these text settings:

I then rotated it 90° counter-clockwise and set the opacity to just 9%, that should be just enough to notice it, but it doesn’t distract your attention from the main focus of this page.

After all this, the total work looks like this (notice the typography looks better on 100% zoom):

That’s it, you made a pretty Mini-Card, don’t let this tutorial limit you to the things you’ve learned here. Try out some placement, colors, and effects… yourself! Accidents often lead to great concepts!

BONUS

We are also going to create the simple profile/about page.

At the top I put the name in a big font:

Type the name you desire and place it close to the top left corner.
Add these layer styles:

Outcome:

Make a almost square text block below this and fill it with your own text or some dummy text generated at lipsum.com

Use these text settings:

Use the color #5C5C5C.

This all should be positioned like this:

Now find a good picture, preferably square and place it at the right of the text, vertically in the middle of the document.

Tip: The Lin theory states that showing your left side of the face shows a more sensitive, creative, female, intuitive aspect of you and using the right side is more a logical, reasoning, masculine, analytical aspect of your personality.
On magazine covers they make the person look right in the camera, just because it grabs our attention when scanning fast through the shelves. You can use this method also in web design as a hook to make people focus on a specific spot on the page. (Many people used this method by illustrating mascots that look at you).

Pick the Rounded Rectangle Tool and drag a rectangle that is just the size of your picture. Now with the transform tool (V) make it proportionally bigger (holding Shift+Alt/Option and dragging a corner nob), just a little so you can see something is there. Make sure this rectangle layer is set below the picture.

Add these layer styles to it:

Finally, take a big soft brush with 440px of size and 0% hardness and draw one white dot (in a new layer on top of the rectangle, behind the picture), positioned that the center of the dot is right on the top of the rectangle.

Ctrl/Cmd+click the thumbnail of the rectangle so it becomes a selection, press ctrl/cmd+shift+I to invert the selection and erase the remaining outside the rectangle.

Then with the transform tool (V), move it down just 1 pixel by pressing the Down Button 1 time.

After all that, you should have something like this:

26 Downloads