Design a Business Card, Beginner Photoshop Tutorial
As Robert Rodriguez once said (in “Rebel Without a Crew”), if you want to be a director go and have some business card printed with “film director” as a title. The same holds true for Web Designers, I think.
In this tutorial I will explain how to design a simple business card in Adobe Photoshop. The tutorial is structured in bite sized steps and with a ton of images. It should be easy enough even for absolute beginners.
Below is the final image of business card that we will design in this tutorial -it wont’ win any design prize, but is a great start for beginners to explore many Photoshop functionalities.
Step 1:
Create a new document (File -> New)
width: 600px
height: 400px
Background contents: white
Fill the shape with a light grey color #d8d8d8. I have changed background color to show business card details more visible.
Step 2:
Select “Rounded Rectangle Tool”.
Now set radius to 5px
Set style to none.
And finally set color to #3d3d3c.
and set fixed size of:
width: 540px
height: 300px
Now just click once on the new document and a rounded rectangular shape will be create as shown in below image.
Step 3:
In this step we will try to make the background a little more interesting.
Go to: Filter >> ‘Sketch > > >Halftone Pattern
And enter these values:
size: 1
contrast: 10
pattern type: dot
Now the background will immediatly turn into something more interesting, like this:
Step 4:
Select “Rectangle Tool”.
Set color to #d85302 and draw a shape as shown in below image.
Go to Edit >> Free Transform (CTRL or CMD T).
And rotate the shape little upward as shown in below image. Keep note of the rotation amount, as we’ll rotate some text the same way later.
Apply the rotation. Now we will add shadow effect to this shape. Right click on this layer and selecting blending options. Or you can also select blending options from layer >> Layer Style >> Blending Options .
Now Apply the following layer style to this shape.
The layout now looks like this. Note the subtle drop shadow that puts some distance between the background and the rectangular badge.
Step 5:
Again Select “Rectangle Tool” and use same color that we have used in last step i.e. # d85302 and draw a shape over the first shape as shown in below image.
Apply following layer style to this shape from blending options.
Now our business card looks like this, with the two badges clearly positioned at different depths due to the overlapping shadows.
Step 6:
In this step we will add company name on the card. Create a new layer (Layer >> New >> Layer) just above the layer we created in step 4, i.e. above the first orange rectangle shape layer.
Select “text Tool”.
Type the first word of company with following text style:
Font style: Whatever you like, I used Cracked
Size: 24
Color: #ffffff
And apply following layer styles from blending options to this text.
Now the text will have a subtle gradient, and since this is the rotated layer we’ll have to transform the text just like we did for the box. Use the same rotation angle to keep everything neat and tidy.
Step 7:
In this step we will add second word of company on second orange shape that we create in step 5. Create a new layer (Layer >> New >> Layer) above the layer we created in step 5, i.e. above the second orange rectangle shape layer.
Again select “text Tool” and type second word of company with following text style.
Font style: Same as before
Size: 30
Color: #ffffff
And apply same layer style from blending options to this text as we have applied for first company word in step 6.
Step 8:
In this step we will add a name. Select “text Tool” and write your name (of course Blogger is my maiden name) with following text style.
Font style: A different font, I used a cleaner Lucida Grande
Size: 40
Color: #c0c0c0
Then type your company website address, your email address and your phone number with following text style. Make sure to leave an equal magin between each line. This is a simple tutorial, but the single most important rule about design is to respect margins and symmetry. We’ll talk more about this in some more technical tutorials.
Font style: Lucida Grande
Size: 18
Color: #c0c0c0
Step 9:
In this step we will add icons for web address, email address and phone number. Select “Custom Tool” and add these custom shapes. All shapes should be of same size, and use same color that we have used for text i.e. #c0c0c0
Step 10:
Select “Rounded Rectangular Tool” with radius 10px and color #000000. Draw a shape at bottom of card as show in the opening image.
Change opacity of the layer to 30%. The shape will become slightly transparent. Now select “Text Tool” and type the services your company is offering on the rounded rectangular shape. I have selected three services; Graphics design, Web Design and Multimedia, using the badge’s font. Text should be center aligned with respect to the rounded rectangular shape.
Use following text style.
Font style: Same as Badges
Size: 18
Color: #979797
And now our freelance web designer business card is ready for a run in the printer. Don’t print a thousand of them, as your Photoshop skills will increase, this business card will seem too basic.
But for an absolute beginner it is a rewarding project and something to be proud of.
Happy Holidays to you all from your friendly foxy blogger!
Tags: business card design, diy business cards, freelance web designers, simple photoshop tutorial, step by step photoshop tutorial
This is just amazing read so I just had to say thankyou.
This is absolutely so cool Thanks for posting this!!!
wow what a interesting post , its really
Simplement ha-llu-ci-nant !! et en plus totalement lisible par les moteurs de recherche ! Alors? Elle es pas belle la vie?? ^^
Hey guys! I found a really impressive visual flash online web editor requiring no progamming or design knowledges! Look at the video : create a free flash website. Simply crazy ! And you know what? I’ve just tested it and search engines can read the sites content even if it’s flash! Life’s good no?? lol
Great advice and very true. One of the most important things bloggers, or any business, can do is try not to give up. Even when times are tough it
You made some good points there. I did a search on the topic and found most people will agree with your blog.
Maybe you’ll tell me where the supply of your post is from? I’m inquisitive about learning a lot of about it.
Well I never. I’m a good designer myself.
Have you seen what your site looks like with firefox? It looks a little messed up on mine. Is it just me or? Also, in case you are interested I found a good site to get fast business cards online for dirt cheap
Seems to work fine in Firefox, Chrome and Safari on Mac. Can you please tell me which kind of problem you had?