Design Slick Print Ready Business Card Using Photoshop

    written by Nikola Lazarevic

    Today I’m going to show you how to design your own double sided business card in Photoshop and get it ready for print. Recently there was a business cards giveaway here on, and that inspired me to write this tutorial.
    If you go through this tutorial you will have print ready files you can use for a company offering Business Card Printing Services.

    Here is the outcome.


    STEP 1

    Depending on where you are planning on getting your cards printed, you may need different dimensions. The print firm I use produces business cards at 90×50mm, with 3mm bleed. So when creating the image, instead of making it 90mm high we are making it 90mm + 3mm bleed on the left + 3mm bleed on the right = 96mm. Similarly with the width, we’re making it 50+3+3 = 56mm. Resolution should be set 300dpi and Color Mode should be set to CMYK.


    Add guides to show us where the edges of the business card are and where the bleed starts. Go to View -> New Guide and then give it a Horizontal position of 3mm. Repeat again with a Vertical position of 3mm. Then repeat twice more with Vertical at 53mm and Horizontal at 93mm.


    You should now have a blank canvas similar to the one below with four guides, each 3mm away from the edge.


    STEP 2

    Set foreground color to #ff5500, choose Rectangle Marquee Tool (M) and create rectangle like shown on the picture. Create new layer and fill with foreground color (Alt + Backspace). Clear the selection by pressind Command + D on keyboard. Name this layer “card background”.



    Create new layer above “card background”. Pick up Elliptical Marquee Tool, click and hold on the Rectanglar Marquee tool to activate the flyout menu and select the Elliptical Marquee tool from the list. The keyboard shortcut for toggeling between the Rectangular and Elliptical Marquee tool is holding the shift key and pressing the letter M.
    From the menu at the top of the page select Fixed Size from the style dropdown and then type 40px in the Wide field and 40px in the Height field. This will make our selection exactly 40×40 pixels. Make sure that Intersect with selection is selected form menu at the top. Click close to the top left corner but just a few pixels away like below. Tip: with your arrow keys you can move the selection around until you get it right where you want it.


    Fill the selection with #f6c464.


    By holding down the Shift key while we hit the arrow keys we can move our selection 10 pixels at a time. So hold down the Shift key and hit the Right Arrow key seven times, and this will create nice distance from the first circle. Fill this selection again with #f6c464. Repeat this until you fill whole card area. Name this layer “circles”.


    Change Blend Mode to Overlay.


    STEP 3

    Duplicate “card background” and “circles” layers and merged them into one layer. Choose Rectangle Marquee Tool (M), set Feather to 10px and make selection like on the picture below.


    Inverse selection (Command + Shift + I) and hit Backspace key on keyboard. Go to Filter -> Blur -> Gaussian Blur, set radius to 5px and click ok. Next, add Stroke from Layer Style:


    We should have something like this:


    Name this layer “name background”.

    STEP 4

    Set foreground color to #ffffff, pick up Horizontal Type Tool (T), for font choose Graublau Sans Web (if you don’t have it, you can download from here), set the font size to 14pt and type your name. Add Inner Shadow from Layer Styles.



    Front is finished. Save this file as business_card-front.

    STEP 5

    Let’s continue with creating a back. I want it to create back simple and minimal as possible. We’ll be using the same page setup, so fill the back of a business card with #ff5500.


    Make sure that foreground color is #ffffff, pick up Horizontal Type Tool (T), for font choose Graublau Sans Web, size set at 12pt, type webdesinger and place it in the middle. Then set the font size to 8pt and type your phone, email and website address. Add 5mm or so margin to keep any design elements away from the edges.


    Apply Inner Shadow from Layer Styles to all the text layers.



    And there we have it! All done…


    The test king offers you best quality self paced training resources to help you become expert in web designing. Download the 350-030 design tutorials and SY0-201 design guide to lean best practices in web designing.

    Authored by

    Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of You can find me on Twitter.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

  • NIkola

    Pozdrav, jedno pitanje u vezi posta – zashto si ostavio prepust od 3mm sa svih strana za obrez a da nisi upustio pozadinsku boju u isti?

  • colaja

    Uh, zato sto sam napravio previd. Hvala!

  • NIkola

    Nema na chemu:-)

  • Maikel

    When you provide bleed you are supossed to fill it, no?

  • colaja

    Yes, I made a mistake 0-)

  • juday


    website design

  • Business Cards Custom

    This is a really great tutorial! I’m going to bookmark it. thanks for sharing the knowledge. I like the overall design and the color. Great business card :)

  • Cardview

    Simple but straightforward tutorial!

  • Chicago Web Design

    Very nice =) Helped a lot!

  • Eoin

    Hey, this is an excellent tutorial.

    I tried it out to see just how easy it was, and well, you made it easy as pie! so thumbs up from me.

    I hope you don’t mind me posting a link to it from my blog for so others can view it and learn from it.

  • Imroz

    This is an excellent tutorial to follow and create a nice business card.

    Professional Web Design Company

  • Ava Green

    i love to make business cards at home, you can make a nice one by just using an inkjet printer*,-

  • cheapwebdesign

    Great tutorial, really easy to understand, thank you for sharing.

  • Essex Website Designers

    Oh a very good tutorial! It really shows how much you can do ourself, without having to hire someone to do it for you for example.

  • Web Design

    Great instruction – Thanks!

  • web design manchester

    I keep checking the website for new tuts but this one has been very interesting and knowledge full . GREAT guys keep it up