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

VCard design tutorial

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:

vcard-3_stroke
vcard-3_color_overlay
vcard-3_bevel

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.

vcard-4_ruler

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.

vcard-5_result

Step6

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

vcard-6_gradient
vcard-6_inner_shadow

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):

vcard-8_guides

Step9

For the darker glyphs, use the following layer styles:

vcard-9_gradient
vcard-9_drop_shadow
vcard-9_Inner_shadow
vcard-9_color_overlay

Step10

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

vcard-10_gradient
vcard-10_inner_shadow
vcard-10_drop_shadow

Step11

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

vcard-11_text_settings

Use these Layer Styles:

vcard-11_gradient
vcard-11_drop_shadow
vcard-11_inner_shadow

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

What we’ve got so far:

vcard-11_result

Step12

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

vcard-12_example

Add these layer styles to it:

vcard-12_drop_shadow
vcard-12_color_overlay
vcard-12_Inner_shadow

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:

vcard-14_inner_shadow
vcard-14_drop_shadow
vcard-14_gradient

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.

vcard-14_slider

Result so far:

vcard-14_result

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:

vcard-15_ellipse

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:

vcard-15_result

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.

vcard-16_text_settings

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).

vcard-16_inner_shadow

Step17

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

vcard-17_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):

VCard design tutorial

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:

vcard-bonus_text_settings1

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

vcard-bonus_drop_shadow
vcard-bonus_gradient
vcard-bonus_innershadow

Outcome:

vcard-bonus_george_clooney

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:

vcard-bonus_text_settings2

Use the color #5C5C5C.

This all should be positioned like this:

vcard-bonus_textresult

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:

vcard-bonus_inner_shadow
vcard-bonus_coloroverlay
vcard-bonus_dropshadow

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:

vcard-bonus_result

26 Downloads