How To Design a Simple and Flat vCard in Photoshop

Advertisement

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:
Flat vCard Photoshop Tutorial

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
Flat vCard Photoshop Tutorial

On the layer tab, choose ‘create new fill’ and choose ‘Solid Color’
Flat vCard Photoshop Tutorial

Pick a solid colour to #759523
Flat vCard Photoshop Tutorial

Now, create a gradient effect in a new layer
Flat vCard Photoshop Tutorial

With the brush tool, paint it on the center of layer
Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

Change the ‘blend mode’ to ‘Overlay’ and fill to 20%
Flat vCard Photoshop Tutorial

Here the result:
Flat vCard Photoshop Tutorial

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

Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

And it would look like this
Flat vCard Photoshop Tutorial

Then lock the guide
Flat vCard Photoshop Tutorial

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

Flat vCard Photoshop Tutorial

Create a new guide at position, Horizontal: 310px.
Flat vCard Photoshop Tutorial

Please right click with mouse on ‘shape 1’ and duplicate it
Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

Change the color object ‘shape 1’ to #666666
Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

Move layer ‘shape 1’
Flat vCard Photoshop Tutorial

Create a new guide again at position, Horizontal: 320px.
Flat vCard Photoshop Tutorial

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

Move the layer
Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

Step 3: Create the main form

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

Create a new guide at position, Horizontal: 250px.
Flat vCard Photoshop Tutorial

Duplicate the layer ‘back2’ and give it a name
Flat vCard Photoshop Tutorial

Change the color object ‘front’ to #eeeeee
Flat vCard Photoshop Tutorial

With the ‘pen tools’ delete some point at object ‘front’ and move it
Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

Duplicate object ‘front’ change the color to #000000
Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

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
Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

Create a new guide at the position Horizontal: 245px.
Flat vCard Photoshop Tutorial

Drag the point to the new guide
Flat vCard Photoshop Tutorial

Move object ‘front shadow’ and change the fill to 20%
Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

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

Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

Step 4: Fill the main form

First, create a new guide at position, Vertical: 120px
Flat vCard Photoshop Tutorial

Do that again in position, Vertical: 210px, Vertical: 230px, Vertical: 380px, Horizontal: 130px, Horizontal: 220px
Flat vCard Photoshop Tutorial

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

First add a profile picture, create with rectangle tool and color #FFFFFF
Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

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
Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

Now double click on that layer and add your image
Flat vCard Photoshop Tutorial

Open your image, copy and paste on smart object. Then save it
Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

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

Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

Add some text
Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

Flat vCard Photoshop Tutorial

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

With the ‘rectangle tool’ create a new object
Flat vCard Photoshop Tutorial

Add and move some point with the ‘pen tool’
Flat vCard Photoshop Tutorial

With ‘custom shape tool’, create star object with color #FFFFFF
Flat vCard Photoshop Tutorial

Here the result:
Flat vCard Photoshop Tutorial

Step 5: Fill the footer link

Create new group and name it
Flat vCard Photoshop Tutorial

Create a new guide at position, Horizontal: 275px
Flat vCard Photoshop Tutorial

Do that again in position, Vertical: 150px, Vertical: 200px, Vertical: 250px, Vertical: 300px, Vertical: 350px
Flat vCard Photoshop Tutorial

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

Flat vCard Photoshop Tutorial

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.

Flat vCard Photoshop Tutorial

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 –

1 Comment

  • […] How To Design a Simple and Flat vCard in Photoshop […]

Leave Your Comment