In this tutorial I will teach you how to design an abstract business card using a combination of Adobe Illustrator and Photoshop. We will be using Photoshop as a base for our business card, all whilst using Illustrator to create some clean, abstract shapes to use in our abstract business cards.
The reason I will be using Photoshop as our base application is because it has some tools which just makes it that little bit easier and quicker to produce the image I’m looking for. Some people think Illustrator is a lot better when it comes to files that are being sent to press, but so long as the image you produce in Photoshop is a large file no less than 300dpi, you should be fine!
Once you have followed this tutorial and finished designing your card, you can get your cards printed. There are some great business card printing services online.
Inspiration
Unless you know exactly what look you’re going for, you’ll probably want to browse some creative pieces to get some inspiration. I personally get inspired from things all around me and the internet, here are a few things I do when I need some inspiration:
-Browse some of my favourite blogs.
-Browse Behance for great digital art
-Browse Flickr for cool photographs
-Flick through some design mags
-Listen to music, go for a walk or read a book
If you’re anything like me and you read blogs and browse the web everyday, your head should be bursting with ideas!
Here are a few pieces I’ve collected that I like:
Sketching
It’s always best to start in the traditional way and sketch some ideas on paper first. Fill a page or two of rough ideas you have floating around in your head. There’s no reason to spend hours and hours sketching ideas, it’s just to help you get started when you first open that nice big blank page in Photoshop.
I scanned in my sketches to show you, here they are:
Going Digital…
It’s time to turn your ideas into a digital piece. Open Photoshop and make a new document. Some printers (especially if you’re getting them printed online) do deals if you go with their ‘standard’ size, so make sure you check that out if you’re planning on using an online printers.
My business cards are going to be 55x85mm, with a few mm’s bleed that’ll make my total document size 58x88mm. Make sure you’re document colour settings are set to CMYK ready for print, and that the resolution is set to at least 300dpi (pixels or dots per inch).
When you first open your new document, you might think it’s absolutely massive – it is, and it’s meant to be, so don’t worry about that. The bigger your file means the better quality it will be when it’s sent to press, which is always good news!
It’s time to get to work. Looking back at my sketches, I’ve decided that I want to use a combination of lines, arrows, circles and typography – although I’m bound to change my mind throughout this tutorial (I like to write my tutorials whilst designing the actual outcome, not afterwards – I think this shows the process I take better, do you agree?).
I’m starting with the front of the card, and am virtually going to fill it with my name, what I do and where I’m based. The other side of the card will be left for some cool abstract shapes and lines, as well as some of my contact details!
The first thing I’m going to do is fill the background, I’m going to use a nice blue, which I tend to use a lot in all of my work!
Before we do anything else, be sure to add some guides to your canvas. The easiest way to add guides accurately in Photoshop is to go to View > Add Guides. I used a 3mm bleed, so I added two vertical guides (3mm and 85mm) and two horizontal guides (3mm and 55mm). I repeated the process to add another set of guides 2mm inwards from the last set of guides – this is to know where it’s safe to put text and images.
My next step was to select the Type Tool, I dragged a big box over my whole business card, making sure it matched my inner guides. Rough out some text inside your box, it doesn’t have to be perfect. I just typed my first name: ‘callum’.
With that done, It’s time to make it perfect. Look through your installed fonts for one you’d like to use. If you can’t find one, there are thousands to download and use in your personal and commercial projects on the web: try browsing behance, deviantart, design blogs, and google – be warned, you’ll be browsing for hours!
I’ve decided to use the font called Hobo Std, which you can buy and download from Fonts.com.
I changed my names typeface to Hobo Std, and changed it’s colour to pure white. With the main typeface chosen, it’s time to perfect our first piece of type. I want the edges of my type to touch the inner guides to make it nice and clean.
Play about with the type settings, such as the point size, kerning and tracking. You can get these options up by going to Window > Character, you might also need to indent your line of text, you can do this by going to Window > Paragraph. Make sure you don’t slack with your type, it honestly is one of the most important aspects of design. Check out ilovetypography.com if you’re not up to scratch with typography, it’s a great site.
I’ve realized now that my type is very tall, so I’m going to shrink it a bit using the Vertical Scale tool that can again by found by going to Window > Character. You don’t want to over do it with this tool, as it can look a bit squashed.
With our first piece of type completely finished, it’s time to add some more. I want to have a little speech bubble in the bottom left of my business card, so I’m going to make a couple of new guides to represent where it’s going to be.
With my new guides, I now know where not to place any text. I’m now going to select the type tool again and type the word ‘is’. The reason I’m only going to do one word, is because I want it vertical. Because I’m playing with vertical text, I find it easier to rotate the canvas by going to Image > Image Rotation, just make sure you rotate the file back afterwards! I also want all my text to be the same distance away from the text on top, to do this I dragged out a Guide to a suitable place (to drag out a guide, you need the rules showing, if they’re not, go to View > Rulers). After playing about with more type settings, this is what I came up with:
The next bit of type I’m adding is nice and easy – the letter ‘a’. I pretty much repeated the previous step without rotating the canvas or playing with kerning and tracking! I also made another guide to make sure my ‘a’ was level with the ‘a’ above it.
It’s now time to add two more lines of text, but this time I’m doing it all in one text box. Type in your text: I used ‘graphic designer illustrator’. I plan to have ‘graphic designer’ on the top line, and ‘illustrator’ on the bottom line. You might find at this point your other text layers are getting in the way when you click on the canvas – to fix this, just lock the layers. To get the text right here, I used a combination of paragraph indents, point sizes, kerning, tracking, and leading.
As you can see from the previous screenshot, guides do come in really handy – I wouldn’t cope without them!
My next bit of text is another single letter (well, symbol in this case!). I’m going to put in an ‘&’ symbol at the end of designer/illustrator – hopefully, it’ll be read as ‘graphic designer & illustrator’, not ‘graphic designer illustrator &’. You know what to do with this bit…!
I want to add a few more bits of text: ‘based somewhere’, ‘in’, ‘the’, and ‘UK’. I won’t walk you through how I did these, give it a go by yourself! 
The next step for me is to add a speech bubble. I want the speech bubble to say ‘hire me!’ but we’ll get to that later. To make the speech bubble, I’m going over to Illustrator. I do this because I find making custom shapes easier in Illustrator – after all, it is for illustrating. When in Illustrator, make a new CMYK document, the size doesn’t matter because the vectors can be scaled as big or small as we want without pixelating, and we’re transferring them over to Photoshop.
Select the rounded rectangle tool, and draw a shape that you think is suitable for your free space in your photoshop document. I’m using a nice green to go with my blue card. Once that’s done, select the pen tool, and create a custom triangle like shape.
Place your triangle shape into the correct position and select your two custom shapes. Go to Window > Pathfinder and select the Merge option. This should hopefully merge your two shapes together, ready for transferring over to photoshop. Copy you shape, and paste it into photoshop as a Smart Object. Pasting it as a Smart Object allows you to scale it up and down without losing it’s quality. Once you’ve resized it and got it into place, Ctrl+Click (or Right Click on a PC) on the Smart Object layer and click Rasterize.
Our business card is looking more like a design rather than some random text now. I’ve decided now that the speech bubble needs to stand out a little more. To add a bit more ‘oomph’ to it (as I like to call it!), I’m going to add a gradient to it. Go to Layer > Layer Style > Gradient Overlay and select a couple of colours you think go with your design. I’m going to use a similar green to what I already had, merging into a yellow, with an Opacity of 60%. Whilst I had the Layers Style window open, I also added a light Drop Shadow set to 5% opacity.
Whilst I’m in the mood of lowering Opacities, I’ve lowered the Opacity to 80% on the following words: ‘callum’, ‘is’, ‘a’, ‘&’, ‘based’, ‘somewhere’, ‘in’, ‘the’, and ‘UK’. I’ve also added a Drop Shadow to the ‘graphic designer illustrator’ layer, using the same settings as the drop shadow I used on the speech bubble.
It’s time to add the text to the speech bubble. Grab the type tool once again and type ‘hire me!’. Edit the kerning until it’s how you want it, and position it correctly. I want the text to appear to have been cut out of the bubble, so I selected the outline of the text by Cmd+Clicking (Ctrl+Clicking on a PC) on the Layers Image in the Layers Window. With the outline of the text selected, hide the type layer and click on the speech bubble layer. Press delete, and you should be left with the words ‘hire me!’ cut out of the speech bubble layer. The shadow on the speech bubble layer should take it’s role and create a pretty cool effect.
Head over to Circlebox Textures and download a Crumpled Paper texture. Either save it and place it into your document, or copy it and paste it into your document. Move the new layer to above your background layer and set it Multiply at 40%. Adding a light crumpled texture to the background of your card creates a really awesome effect and makes it just that little bit more interesting.
I want to add some dark corners onto the front of the card to draw the attention to the text. Make a new layer and select a medium to large sized soft brush. Go round the corners and edges of your card using a blue that’s a bit darker than the background colour. Once you’ve done, lower the opacity until it looks right, I used 25% as I didn’t want to go over the top.
That’s about it for the front of my business card. Make sure you save the file!
It’s time to move on to the back side of the business card, open a new document using the same settings we used earlier – remember to add the outer and inner guides, too! With the file set up, go back to the front of the business card and drag the background, texture and dark corner layers over to your new document – this is just to save time.
Go back over to Illustrator and draw a white circle. Once it’s done, copy and paste it into your Photoshop document. Repeat the process several times until you have a few circles scattered over your business card.
With that done, select all the Smart Object layers and Rasterize them. You can now start playing about with gradients, blending modes and opacities. I used a number of different gradients all going from gray to white to make them stand out from each other. I also used a grey stripey gradient overlay (you should have it as a preset) to make the circles more interesting.
Lower the opacity to about 80% on all of the circles – vary some about though so they’re not all the same. Select the Eraser tool and make sure it’s set to 75% opacity with a large, soft brush. Start erasing some of the edges and sides of the circles.
It’s time to add some lines to the business card. Go back over in to illustrator and select the Rectangle Tool. Make one long thin line with the rectangle tool, and take note to how wide it is. With the shape selected, Copy it and Paste it In Place, with it still selected, press Enter and Move it horizontally by the width of your rectangle plus 5 (mine is 15px, therefore moving it horizontally by 20px). Repeat the prcoess a couple more times to produce a pattern.
Make some of the lines shorter and some longer than the others.
You can now select all of your lines, copy them and paste them into your Photoshop document. Add a grey to white gradient overlay to them, and use the eraser tool to fade them in some places, like we just did with the circles. You can place them beneath some circle layers, and on top of some others. I then decreased the opacity to 30%.
At this point I decided having a grey to white gradient was a little too much, so instead I used a lime green to white gradient.
The next thing I’m going to do is add some thin 1px lines to my card by using a custom pattern. Open a new Photoshop document at 3×3 pixels. Zoom right in as far as you can, and select the Pencil Tool – make sure it’s set to 1px. Using black, draw 3 squares across your canvas.
Go to Edit > Define Pattern and name your new pattern something suitable. Head back over to your main Photoshop document and go to Layer > New Fill Layer > Pattern. Select your new custom pattern, and click OK. Your canvas should now be filled with your pattern.
Play about with the different Blending Modes on your pattern layer, and lower the Opacity to something suitable. You can then use a soft Eraser to erase some areas of the pattern you don’t want.
Zoomed in at 100%, you can see the real effect that this pattern gives.
Head back over to Illustrator and create some more lines, and repeat the process we took earlier to add them to your Photoshop document.
With some more lines added, it’s time to start adding our contact information. I want the type to be more commercial than what was used on the other side, so I’m going to use good old Helvetica (which is what I use for the text inside the speech bubble on the other side of my business card).
Select the Type Tool and draw a text box roughly where you want your text to be displayed. Fill it in with your text, I’m using my portfolio URL, my email and my phone number, all of which are going to displayed on their own line. Neaten it up using the kerning, tracking, and indent settings.
To make your text stand out a bit more, you can use a low opacity drop shadow.
That’s our business card finished. I sent mine to my Inkjet Printer to proof it and am pretty pleased with the result!:
I’d love to see your results from this tutorial, so go ahead and post them below in the comments section!
If you liked this tutorial, you can help support Circlebox Blog by subscribing to the RSS Feed, or tweeting, bumping, digging or mooing this post using the buttons below!
Consider getting your business cards printed by online printing company using the most high-tech printing machineries and technology.
Get update 642-383 questions for practice and pass your 70-648 exam on first try guaranteed. testking offers invaluable 1Y0-A08 training to help you passing exams in easy and fast way.
Nice tutorial… good job.
Yo dude that’s a really nice business card you’ve got there
it wont be long till you get yourself a job man
@Jasmin: Cheers, glad you liked it!
You never know I might be going for one up by you!
@Riccardo: Thanks! When (and if) my other ones ever get used I’ll maybe print these up! I hope so
nice tut! keep up m8!
Nice work. Cool tut.
I like this tutorial and I want know how did you do the last image.
Did you print the card or it is a photoshop manipulation? please if possible send me a tutorial or make one….PLEASE
sorry for the bad english
I really liked the outcome.
@Iris @Bluegrass @Abraham: Thanks!
@Doug: Thanks! The final image was a macro photo of the printed business card (I proofed one on my inkjet printer). I just edited the photo a little (cropped, adjusted contrast etc) and darkened the corners by making a new layer, using a soft black brush and then changing the blending mode to overlay! There’s a program out there called Box Shot 3D which might help you out when presenting work on screen!
Good luck man!! nice tut!!!
This is awesome! Keep up the good work!
very cool, thanks
Hello your photoshop skill and creativeness is quite good. I envy you very much… going.. good luck.
Good tutorial
great step by step procces of how you designed the card. Thanks
Nice tutorial! I like the way this is done. I guess next time I will do my business cards by your step by step tut. Thanks for that!
Nice… definitely coming back to this one!!
need to sort my business cards out soon…
You call yourself a graphic designer and you picked Hobo Std? Just because it’s a free font doesn’t mean it’s a good one. Go learn some typography, moron. Amateurs posting tutorials. Ha.
@The above poster:
I chose a free font because:
a) It’s quite a nice font for a freebie.
b) It’s better to use free fonts in tutorials so that the readers can use the same font without having to fork out lots of cash when they’re just learning.
c) Not all graphic designers know a great deal about typography. It’s something most designers know the basics about, but if you want to specialise in typography alone it takes years of education. I myself don’t know a huge deal about typography, as I specialise more in layout design etc!
Oh, and we’d love to see your tutorials!
thanks
This one is awesome!
Thanks!
Really nice!
Just a quick note:
The link
http://circleboxtextures.com/2009/paper-card/20-crumpled-paper-textures/
doesn’t work for me. The 500 error occurs.
Cheers!
This is a really useful and compact tutorial. It is definitely inspirational and the simplicity of the design makes it more appealing.
Great tutorial Callum. Thanks for that.
But I only have one question. How can you print the texture like it is on your screen? If I print it, it is almost invisible and on the screen it is good visible.
The result it really good. Really good inspiration.
Thanks for the guide. It’s easy to follow and very clear cut.
Thanks again.
hi Callum
Nice and clean card design.Thanks for tutorial.
Wow great guide. This is so easy to follow and makes a really good result. Business cards are so important because they have a huge impact on how people view you. With a bad card they view you badly but with a well made card they have a good first impression.
Great tutorial I will create business card like this one
thanks
Good tutorial! Business cards must have a clean and fresh design.
Tha’s Amagazin Brother
That’s Amagazin Brother.
nice tut dear.
Thanks for a great tutorial on business cards. I have been looking for some new ideas and this was great. Nice effect of cutting out the “hire me.”
Great work. Keep it up
Amazing tuturila … I really don’t undestand photoshop that well … but with this tutorial i’ll make great business cards.
Thank you very much.nice share
great xplaination
Thanks so much for providing individuals with such a pleasant possiblity to check tips from this web site. It is often so useful and as well , jam-packed with amusement for me and my office co-workers to search the blog nearly 3 times every week to study the new guides you have. Of course, we are at all times motivated concerning the unique information you give. Some 1 areas in this post are ultimately the very best I have had.