How to Create a Realistic Credit Card in Photoshop

Design

September 3, 2010

Credit cards have become a part and parcel in our everyday life. Credit card has become indispensable whether you buy or travel. Here we bring to you a few tips that would help in creating a credit card using Illustrator and Photoshop.
Image Credit and Idea psd.tutsplus

Step 1

We well start by putting together a few basics in Illustrator in order to speed up the entire process. Create a 3.5in by 1.9in rectangle. Thereafter, fill this object with a gradient or color of your preference.

Now, sketch out some lines in a curvy shape with the help of a Pen tool. Thereafter, go to Object > Blend > Blend > Blend Options > Specific Steps and enter 30 and click on OK. You have to make two lines with different shades.

Select the line art created by you and and apply a clipping mask using the credit card shape. It is important to ensure that the shape of edit card is placed on the top of the line art. In addition, you have to duplicate the background of the credit card as well.
Important Note – In case you are making use of Illustrator CS5, select credit card and then click on the Draw Inside option to Paste (Cmd or Ctrl + V) in the objects.
Clipping Mask

Using the Pen Tool, draw the ribbon as shown below.

Step 2

Completing the above mentioned steps, we are finished with Illustrator. Now, begin by opening Photoshop. Make an all new canvas that is larger than the Illustrator document. Then copy and paste each element made by you in Illustrator. At this pint of time, it is extremely important to have some graphics and logos to be placed on the card. If you do not have some then create them.

Step 3

Now you can add the text. Opt for the Oval Typeface using #f1efed. Then, type some random numbers and games. Next, apply the following layer styles.

Step 4

Now, it starts appearing more like a credit card. In order to make it more realistic and authentic add some shadows to it. Now, duplicate every layer and change colour of the font to black and turn off the layer’s style. This will provide you the base shadow. In the next step, you have to move the shadow numbers three to five pixels towards the right and three pixels down. Then, now go to Filter > Blur > Motion Blur, then type in Angle: -34 and Distance: 10px; adjust the Layer Blend to Multiply and 50% Opacity. Go ahead to give final touches to the front side and check out you reference credit card. Thereafter, add an expiry date and your front side is completed. Create a new folder and place all the layers in it naming it FRONT.

Step 5

Now, let us start working on the backside of your credit card. Duplicate the base of the credit card moving all the layers to the Front folder, thereafter Right Click on the layer and convert it. Select it and fill it with the same colour you used on the Front Side. Make sure you do not use gradients for the backside.

Move to the Front Folder and duplicate all the text layers used by you in Layer Styles (expiration, name and credit card numbers) and take them to the BACK folder. Thereafter, turn them horizontally and modify the text colour to the colour of the credit card’s backside.

Next, you have to modify the Layer Styles of the text layers in order to make them appear like stamped and similar to the reference credit card. For doing this, double click on the layer and modify the values. Repeat the same procedure for other layers as well.

Step 6

Now the credit card appears just like your reference. Move ahead and organise the remaining elements you created for your credit card’s backside.

A few elements such as the signature rectangle can be created using Photoshop, in case you have your own logo, it can be rotated to 45 degrees and duplicated various times for making a pattern. Select each one and modify the color with Saturation and Hue (Cmd/Ctrl + U) and merge them together. In the next layer, create a rectangle of the size you want for the signature and fill the same with white color. Make a selection of rectangle > select the pattern layer and click on (Cmd/Ctrl + Shift + I) to the selection made by you and Erase. Thereafter, merge both the layers.

For making another layer, select a black brush and create a random signature. Lastly, you can add security codes to it.

Step 7

If you want, you can simply add the tutorial now. However, you can also consider adding a few perspective to your credit card. Duplicate every folder, Right click on the group folder selecting the Merge group. Repeat the same for every folder. Now, you would have two layers, one for the back and for the front of the credit card. Select both the layers and click on Cmd/Ctrl + T to change and decrease their size. Thereafter, rotate them slightly and Right click on them to select Perspective and modify them as desired by you.

Step 8

Select credit card’s layer and duplicate it, select it and fill it with a light grey colour, thereafter move about 2 pixels towards the right. In order to create credit card’s shadow, duplicate it and select it filling it with a black colour. Now, click on Cmd/Ctrl + T to transform >, right click and select Distort modifying it as desired by you. Go to Filter > Blur > Gaussian Blur > 10 px radius and arrange the Layer Blend in order to Multiply at thirty per cent Opacity.

For creating the Reflection, you have to duplicate both layers of the credit card. Select the layers and turn them perpendicularly (Cmd + T > Right Click > Flip Vertical) setting them on the credit card’s tip. Select a soft eraser brush with about 30 percent Opacity and erase every layer for making the reflection.

Step 9

Now is the time to create some shadows and lights. Select the credit card and create a new layer. Select a soft brush having twenty percent Opacity, then on the top left corner add some light. Thereafter, modify the colour to the black and make sure to add shadows on the lower right corner.

Final Image

Lastly, create a background to complete the process. For making images on each side of the card, you have to turn off the layer of the front side. It is important for you to keep in mind that turning the corresponding reflection layer off and on is equally important.
So, using these ten steps you can create card icons. You can design different colours of credit cards by using Saturation and Hue.

(2 votes, average: 4.50 out of 5)

Loading ...

CLICK HERE "for double your traffic"

One Response to “How to Create a Realistic Credit Card in Photoshop”

Anabolic Supplements Says:
15.04.15 at 3:04 pm
Credit cards have become a part and parcel in our everyday life.Here we bring to you a few tips that would help in creating a credit card using Illustrator and Photoshop.

How to Create a Realistic Credit Card in Photoshop

One Response to “How to Create a Realistic Credit Card in Photoshop”

Leave a Reply

News and Updates

Articles Under Apple Section

Articles Under Design Section

Articles Under Media Section

Articles Under Microsoft Section

Articles Under Marketing Section

Articles Under Reputation Management Section

Articles Under Copy Writing Section

Articles Under Gifts Section

Love