You can find a lot of tutorials for creating business card but some of them are quite old and don’t look attractive. Here I have collected 10 best looking business card design tutorials. They are very detailed and high quality. You will learn useful design techniques and gain some experience in graphic design.

How To Create A Sweet Bokeh Business Card In Photoshop

In this Photoshop tutorial you will learn how to create a double-sided business card that features Bokeh and abstract effects.

Making a Print-Ready Business Card Using Only Photoshop

In this tutorial you will see how to design a simple business card in Photoshop and get it ready for print with crop marks and bleed.

Design a Print Ready Business Card for Designers

Follow this walkthrough in Adobe Photoshop, Adobe Illustrator and Adobe InDesign to create your own double sided business card design, resulting in a print-ready file to send to your favoured print firm.

Creating a Colorful Vibrant Business Card

This tutorial is really simple to follow to create yourself a really colorful and vibrant business card.

Making a Grungy Business Card

This tutorial will walk you through setting up a vertical grungy business card template, front to back and ready to print.

Design Slick Print Ready Business Card Using Photoshop

This tutorial will show you how to design your own double sided business card in Photoshop and get it ready for print.

Create a Slick Business Card Design with Stunning Typography

This graphic design tutorial will show you a way to create a standard two-sided business card design in Adobe Photoshop that you can take to your printer.

How To Create Print Ready Standard Size Business Cards

In this tutorial you will learn how to create print ready standard size business cards with Photoshop. If you follow these guidelines you’ll soon be able to create your own business cards.

How to Design an Abstract Business Card in Photoshop

In this tutorial you will learn how to design an abstract business card using a combination of Adobe Illustrator and Photoshop.

Business Card Design Project Walkthrough

Let’s look at process for creating the final concept of this business card, resulting in the finished printed product.

Stay tuned for future freebies and useful design stuff. You can follow WebDesignFan on Twitter and subscribe to the RSS feed here.

In photography, bokeh is the blur, or the aesthetic quality of the blur, in out-of-focus areas of an image, or “the way the lens renders out-of-focus points of light“. – Wikipedia.

In this article you will find inspirational showcase of beautiful and very colorful websites with bokeh effect. Also you’ll be able to learn different bokeh effect techniques by checking listed useful and detailed tutorials. For the conclusion you will find a lot of great bokeh resources.

Showcase of Bokeh Effect in Web Design

Wonderful bokeh effect looks very impressive in web design projects. Colorful and abstract bokeh effect gives beautiful, mystery and memorable look for any web project.

In this showcase you will find over 20 beautiful examples of bokeh effect in web design. Some of the featured designs are for sale, so if you like this effect you can buy a website template or even a wordpress theme.

Hybrid WordPress Theme ($32)

Mintozine WordPress Theme (Free)

Envato

Theme Bokeh ($14)

Lisa Maya

404 error theme ($8)

Traffik

Dark ‘n Clean WordPress Theme ($27)

Unuidesign

Javascript Showcase ($10)

Light is Light

Make Photoshop Faster

Onvo Media

Moi Magazine WordPress Theme (Free)

Webexpedition18

Sebcreation

Bitwork WordPress Theme ($27)

Klar

IconDock

72 thinking

Pristilo WordPress Theme (Free)

Newism

Designed by Dave

Tutorials on Creating Bokeh Effect

Here I’ve collected some useful tutorials on creating bokeh effect in Photoshop, Pixelmator and of course with your camera. Most of tutorials demonstrate how to create basic bokeh effect.

Awesome digital bokeh effect in Photoshop

In this Photoshop tutorial you will learn how to create a digital bokeh effect. The process is very easy and you will see how to use the super powerful Brush Engine, one of the coolest things in Photoshop.

Create a Bokeh inspired Background

In this Tutorial we’ll create a really neat background using simulated focus, learn how to simulate depth in Photoshop, and learn a little bit about the Bokeh design Style so popular in many of today’s Photoshop creations.

Awesome Bokeh Effect Tutorial

In this tutorial you will see how to create custom bokeh effect in Photoshop. This tutorial will also teach you how to make your own brush.

Light Bubbles Effect Photoshop Tutorial

This tutorial explains how to create a bokeh underwater light bubbles effect using Photoshop. This will include blending colours using hue and saturation and creating a really cool custom brush.

Sleek Icon Design

In this tutorial we’re going to be creating a colorful image icon from scratch, the icon features a colorful design in a shiny metal like border the icon also used a bokeh effect.

How to Create a Simple Bokeh Effect

This tutorial shows you how to create beautiful bokeh effect in Photoshop.

Create A Perfect Bokeh Effect

This well explained tutorial will help you to create a nice bokeh effect in Photoshop.

DSLR Bokeh Tutorial

Another great tutorial teaching you how to create bokeh effect, this time it’s tutorial for DSLR camera.

The Best 6 Ways To Create Your Own Bokeh

This guide provides a simple technique to shape the bokeh of the unfocused elements in your picture.

Colorful Bokeh Effect in Pixelmator

This tutorial will teach you how to easily create a bokeh effect in Pixelmator.

Pure CSS3 bokeh effect with some jQuery help

Author of this tutorial wants to add another addition to the bokeh “hype”, by creating a pure CSS3 bokeh effect. Learn how to create bokeh effect with CSS3.

Design a Sleek Bokeh Styled Portfolio

Learn how to create and integrate the popular bokeh effect into a sleek, professional website design.

Bokeh Effect Resources

Here you will find a lot of useful resources like textures, backgrounds, photoshop actions and even business cards with bokeh effect. Some of the listed resources are paid, but they are highest quality, unique and worth money.

Bokeh flame card ($6)

This template is a bokeh illustration with fresh colors and gradients. All text layers are editable so you can input your own text.

Bokeh Effect – Deep Sea ($3)

This pack contain 1 Theme with 5 color schemes. Blue Deep Sea (By default), Tropical Blue Sea, Turquoise Sea, Brown Sea and Brown Sea.

Elegant Bokeh Business Card ($5)

Bokeh Business Card – simple & stylish. Easy to modify. This PSD layered files are print ready, CMYK , 300dpi. All text layers are full type and can be easy edited.

Bokeh Photoshop Action ($7)

Unique, custom and never seen before action that throughout smart & studied steps, automatically creates the so beloved BOKEH effect on any photography, any image and any scene.

Circle Of Bokeh ($3)

Fully Layered, Named & Grouped with .PSD File & .JPG Of The Background/Wallpaper. Perfect for all uses! Backgrounds, Wallpapers, Websites, Banners, Headers, Signatures, Badges etc..

Bokeh Effect ($4)

This pack contain 1 Theme with 8 color schemes. Blue (By default), Turquoise , Green, Purple, Gold, Silver, Cooper and Orange.

Blue fiber optic abstract background ($3)

Light on! Backgrounds pack ($4)

Ready to use and changes you can turn off any glow and lines / make a different color by “hue and saturation” tool or add your gradient.

5 Colored Grungy Bokeh Textures (Free)

Free pack with 5 various bokeh textures. Free for personal and commercial use, with no attribution required.

Pass your 350-030 exam in easy going way with world class online training by test-king experts. Get all the required knowledge in single package and pass your 642-901 as well as 70-642 on first attempt guaranteed.

In this tutorial you will learn how to use gradients, textures and layer styles. The result looks modern and can be used as a web design element. Hope you will learn something new and share your opinion in comments.

Final Result

Click on picture below to see the final result in full size.

Step 1: Create new document

For the beginning create new document. Click File -> New… and set width to 920, height to 170 pixels.

Step 2: Navigation bar

Create new layer Layer -> New -> Layer… and name it “Navigation bar“. Set foreground color to #1E1E1E and pick Rounded Rectangle Tool, then set radius to 6 px and draw your navigation bar. Example shown on the picture below.

Step 3: Navigation bar layer style

To customize navigation bar click Layer -> Layer Style -> Blending Options…and click on Outer Glow then apply following settings.

Then select Gradient Overlay and apply following settings. Note: Blend Mode  is Soft Light.

Step 4: Navigation text

For the navigation links (in Photoshop just text) set foreground color to #FFFFFF (white). After that pick Horizontal Type Tool, choose Myriad Pro Regular (or Arial) font 14 pt size and write some navigational words like “Home, About, Blog, Contact”. Then go to Layer -> Layer Style -> Blending Options… and apply following settings.

Your navigation after previous actions should look like something on the picture below.

Step 5: Adding the texture

It’s time to create a grunge look. Download 22 Free High Resolution Textures from Media Militia.

Select Media_Militia_BTOB_005 texture and resize it (CTRL+T) to 25% on width and height, then set rotation to 90 degrees. Then move texture above the navigation bar. After that hold CTRL button and click on “Navigation bar” layer to make a selection.

When you have selected navigation bar click on texture layer and copy selection (CTRL+C) then hide texture layer and paste texture selection (CTRL+V).

After that choose Layer -> Layer Styles -> Blending Options… and apply settings shown on the picture below.

Step 6: Active button

Create new layer Layer -> New -> Layer… and name it Button. Set foreground color to #95009E hold CTRL button and click on “Navigation bar” layer to make a selection. After that pick Rectangle Tool, choose “Button” layer and draw button. Note: “Button” layer must be under the text and “Navigation texture” layers.

Then go to Layer -> Layer Style -> Blending Options… and apply following settings.

Add texture to your background and you’ve done!

Final Result

Click on picture below to see the final result in full size.

Download Modern Grunge Navigation Design PSD (2,5 MB)

Stay tuned for future freebies and useful design stuff. You can follow WebDesignFan on Twitter and subscribe to the RSS feed here.

As I mentioned in my The Third Month of Blogging post this month I want to release my first photoshop tutorial. And this is it. I created it very easily but when I come to explaining phase it took some time to complete. I hope that you like it and you’ll learn something new doing this tutorial.

In this tutorial we’ll use Flavours Icon Set, Nevis typeface and Social Network Icon Pack.

Final Result

Step 1: Background

Let’s start by creating a new document in Photoshop – 1000×885 px, resolution 72 pixels/inch.

Then add guidelines View > New Guide… vertical guidelines at 50px, 950px and horizontal guidelines at 102px, 404px, 497px, 832px.

Now set the foreground color to #5398B8 and fill the document with this color (Alt + Backspace). Go to Filter > Noise > Add Noise and apply filter with parametars shown on the picture below.

Step 2: Header

As the portfolio logo and other icons I’ll use Flavours Icon Set released on Smashing Magazine. Download Nevis typeface it will be used for headlines.

Pick Tablet icon from Flavours Icon Set and place it as shown on the picture below. Then pick Nevis font and write something for example “Portfolio”. Then mark the text and change character options as shown on the picture.

Right click on Portfolio text layer and choose Blending Options. Then apply settings shown on the picture below.

Now place text 40 px above guideline (Shift+4 clicks up) you should have something like shown on the picture.

Create a new group Layer > New > Group… and call it navigation. Then choose 18pt size Myriad Pro (Condensed) font pick #2a2a2a as a color and create your portfolio navigation. For the “Home” choose white color #ffffff. Character options shown on the picture below.

Then duplicate navigation layer (Ctrl+J) and move it below original layer. Then reverse text colors, where was white (#ffffff) change to dark grey (#2a2a2a) and where was dark grey (#2a2a2a) change to white (#ffffff). After that move layer 1 px down and 1 px right. Then change opacity to 40% and will have something like shown on the picture below.

Now create new layer (Shift+Ctrl+N) and move it below text. Then pick Rounded Rectangle Tool set Radius to 5 px foreground color #487f99 and create button. Example shown on the picture.

Right click on created button layer or or (Layer > Layer Style > Blending Options) and choose Blending Options. Then apply shown settings.

Here is example shown on the picture how your navigation should look.

Then set foreground color to #487f99 and pick Pencil Tool. Set Brush to 1 px and create 40 px lenght vertical line. After that set foreground color to #a4bfcc and create same length line 1 px to right from the first one. Example shown on the picture below.

Step 3: Lines

Now create new group Layer > New > Group… and call it Lines. Now do the same actions as creating vertical line but this time create horizontal lines on horizontal guidelines. Example shown on the picture. Tip:  To create straight line with pencil hold Shift key.

Step 4: “My Works” Block

Now create new group Layer > New > Group… and call it My Works. Then pick case icon from Flavours Icon Set and move it 20 px down from first guideline at the top. Then type My Works and apply settings like on Portfolio text in Step 2: Header.

Now set foreground color to black (#000000) and pick Rounded Rectangle Tool set Radius to 5 px and create button like shown on the picture below.

Now reduce Opacity to 20%. Pick blue plus button from Flavours Icon Set click (CTRL+T) and resize W and H at the top toolbar to 60% then move it on button created before. Set foreground color to dark grey (#2a2a2a) and choose Myriad Pro (Condensed) 14 pt size font. Then type “See all works” and move like shown on the picture.

Right click  on “See all works” layer and choose Blending Options… or (Layer > Layer Style > Blending Options…) and apply options shown on the picture below (on the left side shown Character options).

Here is the result with aplied Drop Shadow.

Now set foreground color to #487f99 pick Rounded Rectangle Tool set Radius to 5 px and draw about 190 px height box. Example shown on the picture.

Select button layer from Navigation group and click right mouse button on layer name and choose Copy Layer Style. Then choose previous created box layer in My Works group and click right mouse button to choose Paste Layer Style.

Then copy layer (CTRL+J) and place them like shown on the picture.

After that pick three pictures of your works. Resize them (CTRL+T) and move on the boxes. Example shown on the picture below.

Set foreground color to #2a2a2a and choose Horizontal Type Tool. Pick Myriad Pro (Condensed) font, set size to 16 pt and write brief description of the project. Then apply Drop Shadow options shown on the 2nd picture.

Now copy (CTRL+J) description layer with applied drop shadow and move under other works.

Create new layer and move it under all layers in My Works group. Then pick Rectangular Marquee Tool and select all area between first and second guidelines then fill it (ALT+Backspace) with black (#000000). Example shown on the picture below.

Right click on created layer or (Layer > Layer Style > Blending Options…) and apply Gradient Overlay. Options shown on the picture below.

After that reduce Opacity to 30% and you should get something like shown on the picture.

Pick button fast forward blue and button rewind blue icons from Flavours Icon Set. Resize (CTRL+T) them to 60% and place as shown on the example below.

Step 5: “Twitter” Block

Create new group (Layer > New > Group…) and call it Twitter block. Pick twitter icon from Flavours Icon Set and place it between third and fourth guidelines. Then set foreground color to white (#ffffff), choose Rounded Rectangle Tool set Radius to 5 px and draw about 750 px length and 50 px height box.

Then right click on white box layer and select Blending Options… after that choose Stroke and customize following an example.

Now reduce white box layer Opacity to 20%. Then set foreground color to #245166, choose Horizontal Type Tool and Georgia (Italic) font, set size to 18 pt and write something.

Step 6: “Blog News” Block

Create new group (Layer > New > Group…) and call it Blog news. Then pick screen aurora icon from Flavours Icon Set and place it as shown on the picture. Pick Horizontal Type Tool and write for example “News from blog” and apply Blending Options from Step 2: Header.

Set foreground color to #2a2a2a after that choose Myriad Pro (Regular) font, set size to 18 pt and write blog post headline. Then apply Drop Shadow options from Step 4: My Works like on the “See all works” button.

Then write some text from blog. I used Arial (Regular) 12 pt size font. Leave space for Social media block on the right side.

Create new group in Blog news group (Layer > New > Group…) and call it Read more. Set foregroun color to black (#000000). Pick Rounded Rectangle Tool, set Radius to 10 px and draw button.

Then reduce button Opacity to 20%. Choose check icon from Flavours Icon Set and resize (CTRL+T) it to 60%. Move on button and with Horizontal Type Tool Myriad Pro (Condensed) 14 pt size font write for example “Read more”. Then apply the same Blending Options like on blog headline.

Set foreground color to #487f99. Pick Pencil Tool, set Brush size to 1 px and draw vertical line to separate “Blog news” and “Social media” blocks. Then set foreground color to #a4bfcc and draw same length line but move it 1 px to right.

Step 7: “Social Media” Block

Create new group (Layer > New > Group…) and call it “Social media“. Choose coffee icon from Flavours Icon Set and place about 50 px right from separator. Then pick Horizontal Type Tool, Nevis font 30 pt size and write “Become my friend“, then apply Blending Options and Character options from Step 2: Header same like on “Portfolio” text.

Download Social Network Icon Pack. Then choose 8 icons and place them as shown on the example below.

Set foreground color to #2a2a2a, pick Horizontal Type Tool, choose Myriad Pro (Condensed) 18 pt size font and write social network titles. Then apply Drop Shadow options like on the blog headline text.

Create new layer (Layer > New > Layer…) and move it under all layers in Social media group. Now set foreground color to black (#000000) and choose Rounded Rectangle Tool. Set Radius to 10 px and draw bigger than icon and text button. Reduce Opacity to 20%.

Right mouse click on Read more group in Blog news group and choose Duplicate Group… then move duplicated group to Social media group and place as shown on the example.

Step 8: Footer

Create new group (Layer > New > Group…) and call it “Footer“. Set foreground color to #2a2a2a. Choose Horizontal Type Tool, Myriad Pro (Condensed) 18 pt size font and write something. Then apply Drop Shadow options like on Step 4: “My Works” Block “See all works” text.

Final Result

Download the PSD (5.9 MB)

What do you think?

What do you think about my first photoshop tutorial? Do you understand all steps? I’d like hear your opinion and thoughts. Share your thoughts in comments. Thank you.

1Y0-A17 practice questions and 70-646 pdf cover all the important exam topics that you must go through in order to successfully move on next level. Download free demo of N10-004 online test to practice and learn exam taking strategies so you can easily pass your exam.

All here mentioned links discovered via Twitter. If you’re interested in Photoshop/Design/WordPress follow WebDesignFan on Twitter @webdesignfan.

Creating a Set of Digital Painting Icons Part 1 – Sketchbook with Pencil Icon

Use Sprites to Create an Awesomeness-Filled Navigation Menu

60 Cute Mascot Characters

10 WordPress Security Plugins To Keep Your Blog Safe

How To Create Your Own Crumpled And Torn Wrapping Paper

How To Create A Modern Purple Web Layout In Photoshop

WordPress World Map – Tag Yourself Now

Should you write “List posts” on your blog?