Final Image Preview

Here’s a preview of the front side, click the image to enlarge

And here’s how the back side would look, click the image to enlarge

As we go through the many steps of the tutorial we’ll create a beige colored design, and at the end of the tutorial I’ll show you how to easily change the beige one into other color schemes.

Tutorial Details

• Program: Adobe Photoshop CS4
• Difficulty: Intermediate
• Estimated Completion Time: About one hour

External Sources

Images:

You’ll need this abstract piece, which I’ve created for this tutorial (download the image to your computer).

Fonts:

We’ll be using Rockwell as the main typeface. You can of course replace Rockwell with your favorite slab serif typeface!

Step 1

We’ll start by creating a new document, according to the following image.

In order to view our Rulers, go to View > Rulers.

Also the guides should be viewed. So, I’ll go ahead an click View > Extras.

Finally, we’ll go to View > Snap.

Step 2

We’ll drag four new guides at the top, bottom, right, and left edges of our artboard. Which will work as the crop lines.

We’ll add a bleed area of 0.25inch. In order to do that, go to Image > Canvas Size. Then adjust your settings according to the following image:

Our artwork should extend behind the four guides.

Step 3

We’ll start creating our background by drawing a rectangle over the whole artboard using the Rectangle Tool (U). Then we’ll fill it with this color value: #c5ab78 (please note that we’ll be able to change this color later on).

Apply a Gradient Overlay to this layer. Use the image below for reference:

Step 4

Using the Rectangle Marquee Tool (M) create a selection over the whole artboard, set your foreground color to white (#ffffff) then click Shift+Backspace to fill it.

Create an ellipse using the Elliptical Marquee Tool (M) and fill it with black (#000000).

Select the pixels of the ellipse, then go to Edit > Define Brush Preset.

Open up the Brushes panel, make sure to select the brush we’ve just created, and adjust the Brush Tip Shape settings according to the following image:

Adjust the Shape Dynamics settings:

Scattering settings:

And finally, Other Dynamics settings:

It’s pretty good so far, save it for now, we’ll use it in the next steps.

Step 5

Go ahead and download this abstract piece. Then go to File > Place > Locate to where you’ve downloaded it > Place.

Reduce this layer’s Opacity to: 55%, and set its Blend Mode to Linear Burn.

Duplicate the abstract stripes at the bottom, flip it, and place it at the top of your artboard.

Nudge it up a bit, then finally reduce its layer’s Opacity to around: 40%.

Step 6

Now let’s brush some Bokeh using the brush we created in step four. Select the Brush Tool (B), choose the brush we created, set its Opacity down to: 10%, then finally set your foreground color to white (#ffffff).

Create a new layer and start brushing some ellipses. See the image below for reference:

Brush some smaller ones with Master Diameter of: 20px.

Set this layer’s Blend Mode to Soft Light.

Step 7

Create a new layer. Then brush some more ellipses with an opacity of: 100%/40% and Master Diameter of: 200px/70px/30px.

Again, brush some even smaller ones with an opacity of: 100%/40% and Master Diameter of: 30px/10px.

Reduce this layer’s opacity to: 20% and set its Blend Mode to: Overlay.

Step 8

Duplicate the Bokehs we’ve created in the previous step (the ones at the top right side) and place them down on the left side. You can of course make some changes to them at this point!

Always make sure to keep your document tidy and organize your layers. Here’s how mine looks.

Step 9

It’s time to add some information/text! Using the Horizontal Type Tool (T) type your name with the following character settings:

• Font Family: Rockwell (get it here)
• Font size: 130px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: #e3e3e3

Give it a Drop Shadow. Use the image below for reference:

Write your job title using the following character settings:

• Font Family: Rockwell
• Font size: 60px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #e3e3e3

Also, give it the same Drop Shadow we’ve given the previous one.

Group the two text layers. Call this layers group whatever name – I called it: “info“.

To make sure our text is well-aligned, select the “info” group and the background layer, then click on Align vertical centers and Align horizontal centers.

Step 10

We’re done with the back side! Let’s move on to the front side. We’ll start by dragging four new guides according to the following image:

Again, type your name and job title according to the following image:

Step 11

Using the Rounded Rectangle Tool (U) create a rectangle of: 40×40px, with Radius of: 5px, fill it with white (#fffff), and set its Blend Mode to Soft Light.

Add some Layer Style to it according to the following image.

Type the letter “t” (represents “telephone“) using the following character settings:

• Font Family: Rockwell
• Font size: 40px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #82734a

Then type your telephone number next to it, using the following character settings:

• Font Family: Rockwell
• Font size: 30px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #ffffff

Make some copies of what we’ve created so far – in this step.

One final word, don’t forget to keep your layers organized. Look at mine:

Creating More Color Schemes

Very easily you can adjust the color value that fills the rectangle in the background to make more color schemes.
Here are some color schemes I came up with!

That’s All, Folks!

We’re done! We’ve created a print-ready, double-sided, Bokeh/abstract business card, and we’re able to create various color schemes for it. I hope you enjoyed this tutorial, please feel free to leave a comment below

About the author:

Mahmoud is a young web and graphic designer from Egypt. He’s also a blogger and tutorial writer. Send him a tweet @MahmoudKhaled, connect with him on Facebook, or visit his blog/site called mkhaled.com.

unique and creative designs. There is no exception about the

business cards. Here are some business cards  that I have come across

the best ones.