What we'll be doing today(Click to enlarge):
First step, as usually, open Photoshop and create a new document of 900x600px. A vCard should be smaller than a website, so the width of it will be smaller too. Set "Background Contents" to "Transparent".
Grab the Paint Bucket Tool(G) and paint the empty canvas with white. Prepare the layer for filters by going to Filter-> Convert for Smart Filters. Then double-click the layer and apply the next gradient overlay:
Now go to Filter-> Noise-> Add Noise and add an uniform monochromatic noise of 3%.
We have a background now on which we can build the vCard:
Now let's build the vCard. Select the Rounded Rectangle Tool(U), set the tool in "Shape Layers" mode, the radius to 5px and draw a rectangle of 700x400px.
Stylize the shape with the next layer styles:
The shape has now a nice shadow and a classy stroke:
Let's continue with the logo and navigation. The logo will be the name of the person, in this case, John Doe. I used the very popular Yanone Kaffeesatz typeface which can be downloaded for free from Google Webfonts. Add it at the top of the shape and center it with the rest of the elements.
Stylize the logo with the next layer styles:
This is how the logo should look like:
The navigation will have 4 links, 2 on left and 2 on right side of the logo. I used the same font used for logo but a different font-size of 24px. Stylize them with the same styles used for the logo.
Let's build 2 shadows for the main shape. Select the Pen Tool(P) and create a shape like in the image:
Rasterize the layer(Right-Click-> Rasterize Layer) and blur it with a gaussian blur of 5px radius. Reduce the opacity to 40-50% and you obtain a nice shadow:
Duplicate the layer and flip it horizontal(Edit-> Transform-> Flip Horizontal) so you may add a shadow to the other corner too.
The shape looks much better with those 2 shadows.
Let's populate the interior of the vCard with some content. I'm sure you have a picture of you somewhere on your PC which can be used as a gravatar. Resize it to 140x140px and apply to it a 5px stroke(#ededed).
Add a title and some text on the right side of the thumbnail. use Yanone Kaffeesatz for heading and a standard font(Arial) for text.
Now, split the bottom part which is blank now in 2. In the first half, add some details like "Web Abilities". Explain them using simple progress bars made with the Rectangular Shape Tool.
Now, use the right half to showcase your works. I used some famous logos and stylized them with 1px stroke.
With this step, the design of the vCard is finished and tutorial done. If you have any questions, drop us a comment below. Until then, take a look at what we've done today(Click to enlarge):
