When you’re building your business, the ever overlooked business card is a piece of marketing material that I feel is very valuable. Today, people are focused on social media promotion and interacting with their clients over the internet, but what about when you come across a person in ‘real life’ who wants to know more about your business?

Do you stop, write your website, name and email address down or do you just whip out your business card? I hope that you’re wanting to utilize a business card for your business. Today’s photoshop tutorial will take you through the step by step process on how to design your very own business card (front and back). I’ve also included a couple of extra options in the downloadable photoshop file so you can play with them, edit them and make them your own.

Step 1: Setting up your document

Below you will see the spec’s were using for today’s tutorial. First, create a new document and plug these specs into your document and click ok.

Business Card Photoshop Tutorial

Step 2: Creating your bleed guides

For your business card, the background design you use will touch the edge of the document, but for the text, you’re going to need to keep it within a ’safe zone’ in case things get cut different during the printing process. You don’t want to order 1,000+ business cards, only to see that half of your email address or phone number is cut off.

You’re going to create a new layer and name it “bleed”. We’re going to make a selection that is 38 pixels away from the edge, all the way around and add a 1px stroke in red. We’re going to have to keep our text and/or logos within this space so it doesn’t get cut off during the print process.

Business Card Photoshop Tutorial

Note: The official bleed space for different printers differs. Please ensure that the safe zone you’re setting up works with the printer that you’re going to use.

Step 3: Setting up the background of our business card

First, we’re going to fill the background layer with a dark brown color (#311504). After you do this, create a new layer and name it “texture”. We’re going to fill this layer with a default texture that’s in adobe photoshop cs4 (seen in the image below) and changing the layer blending mode to multiply.

Business Card Photoshop Tutorial

Step 4: Adding in your company name

Now that we’ve got the background set up, we’re going to add the company name. In this tutorial, we’re just going to use, you guessed it, Company Name, so make sure you add your business name in. For the font, we’re going to use the free font, You Are Loved from DaFont. We’re going to type in 24pt size and use two colors, one for each word of our company name. The first color is #de4549 and the second color is #d8a728.

Business Card Photoshop Tutorial

Step 5: Adding in your information

Now that we’ve got the company name added into the top left, we’re going to add some more text onto the document. Create a new layer and name it ‘info’. In this layer, use your type tool and type in the following information, using the character options seen below. The color we’re using is #de4549. Make sure your text is aligned to the right so the right side of the text gives a flush area for you to put your information against.

Business Card Photoshop Tutorial

Next, we’re going to make a new layer and name it ‘my info’. In this layer, we’re going to be putting in your personal information. The color for this font is # and we’re going to use the same character information as above, aligning the font to the left.

Business Card Photoshop Tutorial

Step 6: Setting up folders for “front” and “back” designs

Now that we’ve got the business card designed and set up, we’re going to create a new folder for our layers to sit within. We’ll be naming this folder “Back”. Start by clicking the new folder button in your layers palette.

Business Card Photoshop Tutorial

Now you’re going to place all of your text layers into this folder. It will look similar to below.

Business Card Photoshop Tutorial

Next, create another new folder and name it “Front”. In this folder, you’re going to create a new layer and name it “company name”. Grab your text tool and type “CompanyName” just like we did in step 4. This time, we’re going to make the font 36pt.

Business Card Photoshop Tutorial

For the front, we’re going to want to keep things clean and mostly logo centered, so we’ll have your company name in a large font like this and we’re also going to add in a quick line of text to explain what you do. For this, you’re going to want to create a new layer and name it “info”. We’ll be using the same font we’ve been using, but making it 14pt and #e14f09.

Business Card Photoshop Tutorial

Now, you’re going to select the “Front” folder and then hit SELECT > ALL. Now, you’re going to head to LAYER > ALIGN LAYERS TO SELECTION > VERTICAL CENTER. This is going to ensure that your text is centered properly from top to bottom.

Business Card Photoshop Tutorial

At this point, you’re ready to save your work. Check with your printer to know what file type they’re after (TIFF, JPG, PSD, AI and so on). You’re also going to want to ensure that the bleed layer is invisible so you don’t have a bright red border around your business card.

Business Card Photoshop Tutorial

Business Card Photoshop Tutorial

Some extras for you, all included in the downloadable psd file

Below are screenshots of a couple of other styles I created using this same basic set up. They’re all in their own folders in the psd file. Have fun with them :)

Business Card Photoshop Tutorial

Business Card Photoshop Tutorial

Download the Photoshop file here

In only 11 individual lessons this WordPress Theme Tutorial is going to show you how to build a powerful, up-to-date, WordPress Theme from scratch. As we go along I’ll explain what’s happening including (for better or worse) my thinking on certain techniques and why I’m choosing one path over another. Essentially, I’ll be teaching you everything you need to know about WordPress Theme development.

Skip to the Table of Contents.

tutorial-graphic-large

Here’s the list of features your finished theme will be able to boast of:

  • All the search-engine optimization you’ll really need
  • Including google-supported Microformat markup
  • Valid and logical semantic markup structure than can be used to create ANY layout
  • Smart default CSS layouts
  • Dynamic Body, post and comment classes
  • Separated trackbacks and threaded comments
  • 2 widget areas coded to disappear when they’re empty
  • And all the typical WordPress stuff you expect from a theme

I think that’s kind of impressive—for any WordPress Theme.

At the end of this tutorial, with code in hand, you’ll be able to do almost anything you want. You can even think of the finished Theme as your own personal website development framework for WordPress.

I’ve already used it to start another project of my own, The Shape Theme. Download it and check it out if you’d like to see some of the finished code we’ll be going through, live, in action. Alternately, you can browse through the up-to-date source code for the entire tutorial on Google Code.

WordPress Theme Tutorial Table of Contents

Ready for a WordPress Theme Tutorial that will show you how to create a powerful WordPress Theme from scratch? Read it from the beginning and code yourself up something awesome.

  1. WordPress Theme Tutorial Introduction
  2. Theme Development Tools
  3. Creating a Theme HTML Structure
  4. Template and Directory Structure
  5. The Header Template
  6. The Index Template
  7. The Single Post, Post Attachment, & 404 Templates
  8. The Comments Template
  9. The Search Template & The Page Template
  10. The Archive, Author, Category & Tags Template
  11. The Sidebar Template
  12. Reset-Rebuild Theme CSS & Define Your Layouts

Web Design field is growing very fast and as a modern web designer you should know new design techniques such as CSS3 and Web 2.0 . A visitor to your website is going to decide to stay or leave your website in just a few seconds. If the design looks out of date, there is very little chance of that visitor staying at your site, because the design has convinced them that your site is not relevant.Take a look at this tutorials & articles which speaking about Modern Web Design and tell me what do you think?

1.Trends in Modern Web Design Portfolio Websites

Trends in web design are hard to get away from, one minute we’re all web 2.0, the next we’re scrolling jQuery galleries and textured backgrounds. Lets take a look at some great trends implemented by web design agencies and freelancers on the web today.

2.30+ Outstanding Character Illustrations in Modern Web Design

Having a unique design is a must to get your visitor’s attention. Vector characters can establish a memorable image of your site in the reader’s mind. So if you are looking for inspiration for your web design, here is an amazing collection of over 30 Vector illustrated websites.

3.Data Tables In Modern Web Design

Being able to organize data and information is a skill not to be overlooked. The way you organize content and text, generally referred to as copy, has a direct effect on how that content is received by users. You must find a way to organize information so that it is scannable and can be quickly absorbed by the reader.

4.80+ Perfect Ending of Modern Website Design- Footers!

A perfect layout, A Good Design and Nice resource can produce a creative output. Layout, textures and patterns are used more often than one may think but the outcome of different combination can result verity of designs.

5.Create a Clean Modern Website Design in Photoshop

Build a complete website design mockup for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements.

6.16+ Top JavaScript/Ajax Effects for Modern Web Design

Currently there are a lot of JS scripts available for web developers. But all of them are not handy in the modern web design. Nowadays, web designers use some special effects more and more in their projects because those effects give usability and practicality as well as elegance to their projects.

7.Textures In Modern Web Design

Textures in Web design can be very subtle, so that the visitor hardly notices, or they can be a focal point of the design. In some cases, textures are used to emphasize certain parts of the design. Because of the versatility of textures, they can be used in combination with many other design elements, such as typography, lighting and colors.

8.Modern Clean Style Layout

9.Design a simple, modern web template

A tutorial by Dedrick Payne on how to create a simple, but modern web site template from scratch in Photoshop.

About this blog

We are graphic and Web design company located in Maryland, USA. We serve small and medium businesses to strengthen their identity. We take customer service and creative very seriously

Photostream

RSS Astagram Studios RSS Feed

  • How to design a print ready business card design in photoshop March 9, 2010
    When you’re building your business, the ever overlooked business card is a piece of marketing material that I feel is very valuable. Today, people are focused on social media promotion and interacting with their clients over the internet, but what about when you come across a person in ‘real life’ [...] […]
  • How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial March 8, 2010
    In only 11 individual lessons this WordPress Theme Tutorial is going to show you how to build a powerful, up-to-date, WordPress Theme from scratch. As we go along I’ll explain what’s happening including (for better or worse) my thinking on certain techniques and why I’m choosing one path over [...] […]
  • Weekend Inspiration #9 March 7, 2010
    Web Design field is growing very fast and as a modern web designer you should know new design techniques such as CSS3 and Web 2.0 . A visitor to your website is going to decide to stay or leave your website in just a few seconds. If the design looks out of [...] […]

Posts Archives