How To Design a Simple and Flat vCard in Photoshop

vCard or Virtual Card is a very simple Portfolio Website. There are only a single page portfolio, with your photo, your name and your specialiation also some social accounts. So to help you in designing your own vCard, in this tutorial we’ll be creating a simple vcard in flat design with the time estimation is 45 minutes. Let’s get started!

Preview

This is the final result of our vcard:

Tutorial Asset
You’ll need the following social icons, free downlonad here: Hexa Icons.

Step 1: Creating the Canvas

Create new file, Open menu ‘File’ -> ‘New’. Set Width: 500px, Height: 400px

On the layer tab, choose ‘create new fill’ and choose ‘Solid Color’

Pick a solid colour to #759523

Now, create a gradient effect in a new layer

With the brush tool, paint it on the center of layer

Change the ‘blend mode’ to ‘Overlay’ and fill to 20%

Here the result:

Step 2: Create the base form

First, we’ll create the guide. Choose menu ‘View’ -> ‘New Guide’ and fill it with this:

• Vertical : 100px, 400px
• Horizontal : 100px, 300px

And it would look like this

Then lock the guide

Create an object with ‘rectangle tool’ radius:10px and color: #919191

Create a new guide at position, Horizontal: 310px.

Please right click with mouse on ‘shape 1’ and duplicate it

Change the color object ‘shape 1’ to #666666

Move layer ‘shape 1’

Create a new guide again at position, Horizontal: 320px.

Duplicate again the ‘shape 1’ object and Change the ‘blend mode’ to ‘Multiply’ and fill to 20%

Move the layer

Step 3: Create the main form

First move these 3 layers into one group. select the layer and drag to new group

Create a new guide at position, Horizontal: 250px.

Duplicate the layer ‘back2’ and give it a name

Change the color object ‘front’ to #eeeeee

With the ‘pen tools’ delete some point at object ‘front’ and move it

Duplicate object ‘front’ change the color to #000000

With the ‘pen tool’ we will edit object ‘front shadow’ with add a point. But before that, create a new guide at the center of the canvas

Create a new guide at the position Horizontal: 245px.

Drag the point to the new guide

Move object ‘front shadow’ and change the fill to 20%

Give a layer style to ‘front’ object, right click on mouse at ‘front’ object and chose ‘blending option’ then add the style

Step 4: Fill the main form

First, create a new guide at position, Vertical: 120px

Do that again in position, Vertical: 210px, Vertical: 230px, Vertical: 380px, Horizontal: 130px, Horizontal: 220px

Create a new group and give a name. In this group we will add every element for main area

First add a profile picture, create with rectangle tool and color #FFFFFF

Convert rectangle form to smart object with right click on the mouse at rectangle form and choose ‘Convert to Smart Object’. With smart object you can change your profile picture easily

Now double click on that layer and add your image

Open your image, copy and paste on smart object. Then save it

Now back to “virtual card” file. add some style to layer with smart object there

Add some text

Add element on top the object. first create a new guide at position, Vertical: 350px

With the ‘rectangle tool’ create a new object

Add and move some point with the ‘pen tool’

With ‘custom shape tool’, create star object with color #FFFFFF

Here the result:

Step 5: Fill the footer link

Create new group and name it

Create a new guide at position, Horizontal: 275px

Do that again in position, Vertical: 150px, Vertical: 200px, Vertical: 250px, Vertical: 300px, Vertical: 350px

Put some icons with the size 32px. You can download the icon for free here

It’s done!

Conclusion

In this tutorial, I showed you how to create a simple vCard from the beginning to end. I hope you found this tutorial is useful. And if you have a problem in following this tutorial, don’t hesitate to ask with me in the comment below.

I’m creating a bundle of 1000+ social icons in flat design style. Follow us on Twitter: @OmahPSD or like our Facebook page to hear more about the icons and get a discount when it released.

– Written by R.Yahya –