Credit Card Tutorial, Intermediate - Advanced Rating Options

[alias.infnit]

In this tutorial I will teach you how to create a credit card.

This Tutorial is for personal use for graphics on your website DO NOT use illegally as you may find yourself in prison lol

You can also grab this in our RSS Feed :: Here ::

The final result would be similar to:

My results ^

Step 1

First open a new document, 500 x 500.

Step 2

Then draw 2 Credit Card shapes using the “Rounded Rectangle� tool with a radius of 10px.

The top colour should be whatever the base colour for the front of your credit card should be and the bottom should be the base colour for the back of the card.

Step 3

Duplicate both layers and then apply the following settings to the new layers. Move both of these to the top and make sure that they are always above all other layers. Also set the fill of these layers to 0%.

Step 4

Now get the stock that you’ll be using on you’re credit card, cut out out in your favourite method (I used masking) and place it on top of the top card shape like so:

Step 5

Now we want to add that long number that sticks up. Type in any number (4 groups of 4 numbers) using any “square-shaped� font as seen below (I used Square 721 BT). Then add the following blending options.

Step 6

It’s time to add a few bits and bobs to give it the “credit card� feel. I added a bank name, logo, cardholder’s name with the same blending options as above and then a MasterCard and VISA logo.(Unusual combination isn’t it)

Step 7

Onto the back. Because the number is stood up on the front there’d be an indent on the back side so we copy the number. Move it to the same position on the bottom card and flip it horizontally. (Edit->Transform->Flip Horizontal). Then add the following blending options:

Step 8

Now you can figure out the spacing for the magnetic strip and signature line. These are both just Rectangles(Magnetic strip is black foreground and the signature line is an off-white foreground)

Step 9

Now again just add a few bits and bobs that will just give it the right look. I added some contact information, a web address, a signature, some watermarks on the signature line and a user agreement.

The final result was:

Remember you can experiment as much as you’d like, it’s your credit card so go wild. Before you Save for Web check that those duplicated card shapes (with the blending options) are above the other layers.

Created by InFnit (Ludwig Wendzich) for 13dots.com - this tutorial may not be replicated in any shape or form. If you'd like to trackback to this tutorial please use this link "http://www.13dots.com/forum/index.php?showtopic=7988".

Results by Members:







This post has been edited by InFnit: Aug 17 2005, 08:05 PM

[spdfreak_95]

Awesome stuff...... and well explained.

Many thanks for posting such a wonderful tut

Regards,
spd

[MIHAI1984]

Thanks for this tutorial. It's very good

[StarSkreem]

Great tut, InFnit!

Also, excellent work on creating the credit cards... very well done.

[alias.infnit]

Thanks all

@STAFF - Sorry bout the delay - had to learn a song

[*D*]

Now I seriously hope no one goes off and tries to create real credit cards lol

Lovely Tutorial InFnit, Gabe should be happy with this.

[alias.infnit]

@Trueer


Lol, never thought of that :S

and thanks, I hope she will

[Bramuzz]

nice great tut InFnit

[Eddie_K]

Great tut! Thanks for creating it.

Eddie

[alias.infnit]

Its alright