web 2.0

Business Card Design Project (KARTVİZİT HAZIRLAMA)

Printed business cards

Business card design process

This business card project follows on from the initial logo design that was created a couple of months back. With the business cards requiring this branding, the vector logo files were opened up in Adobe Illustrator.

Business card design process

A new Illustrator document was created at the size of 88mm by 55mm, the standard size of business cards at the print firm I use. The color mode is set to CMYK for print purposes and raster effects at 300ppi (although no effects are used in this project it's worth remembering the setting).

Business card design process

Being a print project the document required bleed at 3mm on each side of the document, therefore a rectangle of 94mm by 61mm was drawn and centred on the artboard. This was then filled with 45C, 100M, 55Y and 40K to continue forward the Visibility Driving Tuition brand colours.

Business card design process

To add a little visual interest and depth to the card a slight gradient effect was added using the Gradient Mesh Tool. The highlight was given the same colour swatch but minus the black (K) ink, this means there is a solid coat of cyan, magenta and yellow but the gradient of black giving the overall change in tone.

Business card design process

Before placing any text or content on the card, a set of guides were placed. A guide was positioned on each side of the artboard, then using the Move command they were positioned 5mm inwards.

Business card design process

The logo was placed on the front of the card, then scaled down to fit within the content area. Being sat on a dark background the logo needed a light colouring, pure white was too brash and contrasting so this was softened with 30% magenta.

Business card design process

The web address of the Visibility Driving Tuition website was then set in News Gothic, the font chosen as part of the Visibility branding. Using a mixture of light and bold variations the important section of the address was made to stand out.

Business card design process

Being an address of three parts a small amount of spacing was added between each word, this helps differentiate the three making it easier to read with a passing glance.

Business card design process

An 88×55mm rectangle was drawn and positioned centrally on the artboard, this was then used as a base for the crop marks using the Filter > Create > Crop Marks command.

Business card design process

With the front of the business card complete the file was saved.

Business card design process

The document was then stripped back to the basic structure, and a copy saved as the rear of the card on which the main details would be held.

Business card design process

Using a similar process, a grey rectangle was drawn (including bleed) using a fill of 80% black.

Business card design process

Using the Gradient Mesh tool, a single point at a lighter shade of 60% black was added to the top left corner. This again helps add a little depth and interest to the design. With the rear containing fine text, the single black ink ensured the printed reproduction was extremely crisp.

Business card design process

An area at the base of the card was to be sectioned to include the three main services, this was drawn using a large circle to produce a subtle curved edge.

Business card design process

Using a temporary rectangle at the size of the document the large circle was trimmed to size using the Pathfinder tool.

Business card design process

The colour scheme used on the front of the card was continued in this bottom area, adding a slight gradient across the width of the card and a thin stroke across the top edge.

Business card design process

The logo was placed onto the document and positioned within the margins in the top right corner.

Business card design process

The name, job title and contact details were then laid out in the chosen font. For the name in particular, the design style of the logo was continued through by setting the text in lowercase with a mixture of bold and light weights. After some feedback an alternate version was also created for comparison with normal capitalisation and spacing, but it was decided that the little tweaks added that little extra to the design and were carried forward.

Business card design process

The three main services of driving lessons, pass plus and driver improvement were added to the lower section using this same type style, aligning each one to the left, right and centre.

Business card design process

To separate each item, a small circular point was drawn, aligned with the text and filled with the colour swatch used on the stroke for consistency.

Business card design process

With the crop marks set in place the rear of the card was then complete. The design was soon approved and ready for printing. All text was converted to outlines to avoid font troubles.

Business card design process

Each file was then saved as an EPS.

Business card design process

The two EPS files were then converted to PDF files using Adobe Distiller's Press Quality setting.

Business card design process

To save sending two separate files, the two PDFs were then combined into one file using Adobe Acrobat.

Business card design

With the two files combined into one high resolution print file the business card artwork was ready to be sent to print.

Business card design process

One final check was made using the Output Preview option within Adobe Acrobat by heading to Advanced > Print Production > Output Preview. Each plate can be viewed individually to check for stray colours and the reproduction of gradients. The Total Area Coverage also highlighted that there were no areas that risked over inking, with the exception of the crop marks that were set in registration black.

Business card design process

The files were packaged up and emailed to the printer, the order for 250 double sided cards with a matt lamination on both sides was placed.

Printed business cards

In just a few days the cards arrived by post, all the colours looked fine, the text was nice and crisp and the gradients had been reproduced as planned, adding a nice soft variation of tone across each side of the card.

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

Bu yazıyı ilk değerlendiren siz olun

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

PhotoShop | Resimli Anlatımlar

Photoshop İcon Yapma Dersleri

Adobe Photoshop CS3 Icon

How to quickly make a slightly altered looking Adobe CS3 Icon.

Angry Emoticon

Learn about special effects while converting an ordinary orb into a fantasy art piece.

Create a Glossy Home Icon

Learn how to design your very own glossy home icon in Photoshop

Perfect Shine Button or Icon

How to create a cool looking button or an icon to suit your need.

Create a High-Gloss Graduation Hat Icon Design

How to make a professional, shiny, clean graduation hat icon.

Create a Jaguar Style Folder Icon

How to cover an object in a Jaguar style fur texture.

Create A Mockingly Smiley

Simple way to create a glossy mockingly smiley in Photoshop.

Create a Shiny Lock Icon Design

Wherever you wish to place a lock icon, this tutorial will show you how to create an attractive one for you to use!

Create Icons tutorial

Create a glossy looking icons.

Creating a Cool Yellow Helmet Icon

Create a helcom icon from photograph.

Creating an XP Style Monitor Icon

Create a simple monitor icon in that style.

Design a Glossy Download Icon

You want the graphic to be eye-catching, yet smooth and small enough so it doesn’t dominate your layout. This tutorial will teach you how to create a graphic that does just that.

iTunes Icon in iPhone

This tutorial will show you how to effectively create the iTunes icon found on all iPhones and iPod Touches.

Draw magnifying glass

Learn how to create magnifying glass, which you can use it as button or as icon

Vista Aero Thumbnail Icon

Create the glossy border around most of Vista’s icons.

World Icon Tutorial

Create world icon in Photoshop.

Glossy RSS icon

In this tutorial we are going to create a colorful RSS icon for your blog.

Glowing Orb With Dial

Experimenting with layers and styles to create a cool glowing orb and dial effect.

Home Icon

In this tutorial, you will learn to create a home icon.

How to Make a Folder Icon

Learn how to create a nice folder for your desktop or a website.

Illustrate a Traffic Cone Icon in Photoshop

Drawing a traffic cone, another handy icon for "under construction"

iTunes Icon

The challange of this tutorial is to use various Blending modes and blending techniques to replicate the iTune icon.

Mac Os X Mail Icon Style

Learn how to make the Mac OS X Mail’s icon in a easy way.

Making a Photoshop Shield!

Use the Path Tools in Photoshop to draw a shield-like shape.

Designing a Safety Icon

Design safety icon in Photoshop.

Pyramid Icon Design

How to use your pen tool to create a simple and easy triangular icon design that can be used as your logo or a bulletin.

Custom RSS Feed Icons

Two ways to make your Feed Icons custom.

Photoshop Video Game Mario Icon

How to Create Photoshop Video Game Mario Icon.

Recreate the Famous Yahoo! Smiley

How to recreate the famous Yahoo! smiley face.

Skype Buddy Icon

 skype  with this tutorial.

Skype Logo

Learn how to create in easy steps logo for Skype.

Stylish Search Icon

Learn how to design a professional stylish search icon.

QuickTime Icon

Design Quicktime Icon in Photoshop.

Clock Icon

Create simple clock icon.

Mac Sphere icon

Create Mac Sphere icon.

The Making of an Icon

Insights into the process of making icons.

Creating a clock icon

Yet another clock icon tutorial in Photoshop.

TV Icon

In this tutorial, you will learn to create a tv icon.

Vista Error Icon

How to create Windows Vista icons using a few basic layers, creative layer styles and some web 2.0 gradients.

Vista Firewal Icon

Design a Vista Firewall Icon

XP Style Woman Icon

Learn to draw a xp style woman icon

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

Bu yazıyı ilk değerlendiren siz olun

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

PhotoShop | Resimli Anlatımlar

Web 2.0 Buton Yapmak

 

Create a  at about 500px (width) x 400px (height) to start off the button design. Create a new layer call ‘bg01‘. Select the Rounded Rectangular Tool, hold SHIFT and draw a round  square . Any color is fine at the current stage.

Call up the Blending Options of ‘bg01‘ and adjust the following styles:

Drop Shadow

  • Opacity: 40%
  • Distance: 0px
  • Spread: 0%
  • Size: 6px

Gradiant Overlay

  • Color stop: 0%, #d00031
  • Color stop: 100%, #ff2b5d

Hold CTRL, left click on ‘bg01‘ Layer Thumbnail to select its shape. Go Select -> Modify -> Contract and enter the value ‘2px‘. This will shrink the selected area by 2 pixel.

Create a new layer call ‘bg02‘ and filled the highlighted (after shrink) area with any color. I use #000000 black here. double click on ‘bg02′ to launch up the Blending Option and tweak the following style.

Gradiant Overlay

  • Color stop: 0%, #c6002f
  • Color stop: 100%, #c6002f

Create another new layer for text, call it ‘txt‘. Insert your button’s text. I’ll use an alphabet to represent. The font styles I’m using here are as follow:

  • Rounded Arial Bold
  • 150pt

Same, after deciding your text, double click on ‘txt’ to launch the Blending Options and tweak the following styles.

Drop Shadow

  • Opacity: 25%
  • Distance: 0px
  • Spread: 0px
  • Size: 5px

Inner Shadow

  • Opacity: 10%
  • Distance: 0px
  • Choke: 0
  • Size: 10px

Bevel Emboss

  • Depth: 1px
  • Direction: Down
  • Size: 0px
  • Softten: 0px
  • Highlight Mode Opacity: 32%
  • Shadow Mode Opacity: 32%

Gradiant Overlay

  • Color Stop:0% #d2d2d2
  • Color Stop:100% #f0efef

Button is almost done. Let’s give it a little glow over the top part. Hold CTRL, left click ‘bg02‘ Layer Thumbnail to highlight the outer shape; choose Eclipse Marquee Tool. Now hold ALT, with Eclipse Marquee Tool selected, drag is across to minus out bottom half of the highlighted area. Refer to image above.

With the top portion highlighted and Eclipse Marquee Tool still selected, right click and choose Feather; enter 15px for the radius.

Create a new layer, call it ‘glow‘ and fill the highlighted part with white [#ffffff]. This should add glow effect to the top part of your button. Final product should look something like image below.

 

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

Bu yazıyı ilk değerlendiren siz olun

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

PhotoShop | Resimli Anlatımlar