How to Design a Stylish Blue VCard Layout In Photoshop

vcard

Promoting yourself on the internet, which is the biggest place where you can do it, is a great idea. Actually, is a must if you`re working on the internet as a freelancer, for example. There are many ways to do it, through personal websites, portfolios, online CV and virtual cards or vCards. I decided to design a nice and clean vCard in Photoshop and I`m going to explain you step by step what you need to know to build your own vCard.

Step 1

Create a new file, and name it “vcard”. Give the width : 922px and height : 780px
Create vcard

Now, let’s we make a layout with a width 500px, the first step is create a guides, open View > New Guide, in the box that pops open select vertical and enter 211px.
Create vcard

Then go to View > New Guide, in the box that pops open select vertical and enter 711px.
Create vcard

Step 2

Apply the gradient to your “background” layer. When applying the gradient start from the top-middle of the canvas and drag half way down, this should give us a nice sized effect. If you hold down the Shift key while dragging the gradient down it will lock the gradient line vertically.

Create vcard

Create vcard

Step 3

Next is to make the object box, using the rounded rectangle tool, Width: 500px, Height: 500px, Radius: 10px, dan Color: white (#ffffff)
Create a vcard

Now add these layer styles, change the Fill of Opacity to 20%, add Drop Shadow, Inner Shadow,and Gradient Overlay
Create a vcard

Create a vcard

Then edit Gradient on Gradient Overlay
Create a vcard

Step 4

The next step, duplicate the rectangle layer using [ ctrl ]+[ j ] or choose menu layer > Duplicate Layer, then send backward layer using [ ctrl ]+[ [ ].

Next, sliding down the object.
Create a vcard

Change the fill of Opacity to 20%, and edit the layer style.
Create a vcard

Create a vcard

Step 5

Again, duplicate the rectangle layer using [ ctrl ]+[ j ] or choose menu layer > Duplicate Layer, then send backward layer using [ ctrl ]+[ [ ].
Then change Fill Opacity to 0%, and edit layer style.
Create a vcard

Step 6

Now we’ll make the header, the first step is add your name at this header
Create a vcard

Change the Fill of opacity to 50%, and edit the layer style.
Create a vcard

Create a vcard

Then, please add a little description about us.
Create a vcard

Creat two lines below the title (your name) with a height 1px, for the first line give the color: #95b6c3 dan the second line color: #dcf2fa.
Create a vcard

Create a vcard

Then we add the logo and label to the righ side.
Create a vcard

Step 7

Now we add some heading text “About Me”.
Create a vcard

Then change the Fill of Opacity to 70%, and edit the layer style
Create a vcard

Next please add some text below the heading “About Me”
Create a vcard

And create a dividing lines, like that we created on step 6
Create a vcard

Step 8

Create some heading text again, below the lines with same style as on step 7
Create a vcard

Give some text below the heading “Links”, change the Fill of Opacity to 80%
Create a vcard

Give the dividing lines
Create a vcard

And add the icon like teh picture below
Create a vcard

Step 9

Again let’s create some heading “Skills” text with same style as on step 7
Create a vcard

Then add some text, change the Fill of Opacity to 80%
Create a vcard

Give the dividing lines
Create a vcard

And add the icon like the picture below
Create a vcard

Step 10

Finally, for the last step is create a footer. We’ll add some text and change the Fill of Opacity to 80%
Create a vcard

Conclussion

There we have it! Hopefully you should have something like this:

Download the PSD file with the icon

Please download the zip file here (0.8Mb) : FavoriteLinks of The Week (0 downloads)

0 I like it
0 I don't like it