Great Tips on Print Style Sheets

Posted on | February 1, 2010 | View Comments

Print style sheets are important in web design.  Many people do print out articles to read while traveling or when they have no access to the Internet. It follows that print style sheets have definite benefits. For example, reading on paper is less tiring on the eyes than reading on screen.

In this article it is presented great tips on print style sheets.

As a refresher, below is an example on how to set up a print style sheet:

The media="print" attribute ensures that users don’t see any of the styles defined in the print.css file.

Some attention is required, though: if your main style sheet has no media attribute, the print style sheet will inherit its style. To separate them, set your main style sheet as follows:

Tips follow below:

No Navigation

What is the main difference between paper and computer? Paper is static, while a computer is interactive. And to facilitate that interaction, websites have navigation, which becomes useless on paper.

Hide the navigation and other parts of your website that become pointless on paper, such as sidebars that link to other posts. The code for this is very easy: just set the element’s display to none.

#nav, #sidebar {
	display: none;
}

Enlarge Content

With the navigation and sidebar removed, our content is now spread across the page. This makes the print style sheet look more like an ordinary document, instead of a paper version of the website.

All we need to do to expand the content is reset the float, remove any margins and set the width to 100%.

#content {
	width: 100%;
	margin: 0;
	float: none;
}

3. Reset the Background Colors

Most browsers already ignore background properties to preserve ink. But to make sure that the entire background is white, we can set the body to white, and then give every child element still on the page a white background.

body {
	background: white;
}

#content {
	background: transparent;
}

Reset Text Colors

By resetting the background, another problem pops up. What if you have a dark-gray “Author information” box at the end of your posts, with the text in light gray or white? With the background now set to white, this information will invisible.

To fix this, change any light-colored text to something darker: black or, preferably, dark gray.

#author {
	color: #111;
}

Take Sam Brown’s blog above. Could you imagine what this would look like if he didn’t reset the text’s colors? Unreadable indeed.

Display Destination of Links

Because paper is not an interactive medium, readers of course cannot click through on links to gather more information.

Say someone is reading a print-out about a fancy new product. Seeing “Click here for more information” all of a sudden would be rather irritating for them, wouldn’t it? This is easily fixed by adding the link destination after the link text itself, giving you something like this: “Click here for more information (http://hereismore.com/information).”

What’s more, for CSS 2-ready browsers, this can be done with plain old CSS. Here’s the code:

a:link:after {
	content: " (" attr(href) ") ";
}

You can spice things up with a smaller font size, italics or whatever else.

Links Stand Out

Readers need to be able to distinguish links from regular text. Basic usability rules apply here: blue and underlining is preferred, but I prefer to add bolding, too.

Remember that documents are often printed in black and white. Don’t depend only on color difference. Here is the code for sensible printed links:

a:link {
	font-weight: bold;
	text-decoration: underline;
	color: #06c;
}

#0066cc is a fresh blue color, and it looks like #999999 when printed in grayscale. With this, links will look good printed either in color or in black and white. They will also stand out from regular text.

Font Size

In print, 12 points is the standard. But how do we translate that to CSS? Some say setting the font size to 12 points (pt) is good enough. Others recommend setting it to 100%. Still others say not to declare any font size in your print style sheet at all, because doing so would override the user’s preferences.

Personally, I go with a 12-point font size most of the time:

p {
	font-size: 12pt;
}

Fonts

Most people prefer serif fonts because they are less tiring on the eyes, they better lead the reader through the text, and so on. Setting the font-family to serif in your print style sheet is probably a good idea, although some readers may be surprised to find that the font in their print-out is not the same as the one on your website.

Here is the code for a good print font stack:

body {
	font-family: Georgia, 'Times New Roman', serif;
}

One of the benefits of CSS 3’s @font-face property is that your special fonts can be printed, too, making print-outs look a lot more like your website!

If Lot of Comments

Well, this is really your choice. On the one hand, think of all the trees you’d be saving just by adding #comments { display: none; } to your print style sheet. On the other hand, comments are of great value on some blogs and contain some great discussion.

By moving the comments to their own page, you give users the choice of whether to print them. CSS has a property that makes this very easy:

#comments {
	page-break-before: always;
}

For example, if your article is two-and-a-half pages long, the comments would run from page 4 up to, say, 6. Users would be able to choose which pages to print, without losing any information.

Print-Only Message

“Thank you for printing this article! Please don’t forget to come back to mysite.com for fresh articles.” Why not display a friendly message like this in the print-out? Or perhaps ask readers to recycle the paper they have used to preserve the environment.

Here is what that would look like:

Thank you for printing this article. Please do not forget to come back to mysite.com for fresh articles.

#printMsg {
	display: block;
}

You could add a bit of styling, too, like a 1-pixel border. Don’t forget to add #printMsg { display: none; } to your regular style sheet, to avoid confusing visitors.

Showcase

Here are some examples from well-known websites that have thought (or forgotten) about the print style sheet. Feel free to be inspired.

Looks Good:

Here are some websites that do a great job with their print style sheets:

24 Ways: The website for this “advent calendar for web geeks” has a fancy design, but I wondered how it would look in print. The result is really nice. The slick CSS 3 stuff has been removed. The layout is clean and yet still slick. The big branding has been removed, replaced by a simple right-aligned “24 Ways” next to the post’s title.

ThinkVitamin: Carsonified’s blog is a good example of how to do print style sheets. No real weak spots except that the URL’s destination is not shown.

CSS-Tricks: Chris Coyier of CSS-Tricks.com has done a good job with his print style sheet. He has removed all the clutter and moved comments to a new page, so users can choose not to print them.

Could Use Some Work

Here are some websites that are already great but whose print style sheets could use a bit of polish. No offense to anyone in this section.

Webdesign Ledger: Webdesign Ledger seems to have neglected its print style sheet. When you click “Print,” you end up with three pages of advertisements and related links.

The Design Cubicle: Brian Hoff seems to have forgotten about his print style sheet, too. When you print out an article, you get the comment form, too.

Flickr: Being able to print out photos to show to friends would be nice. Flickr could have removed everything but the picture itself and the copyright information in print-outs. But everything appears in plain unstyled HTML.

By Pieter Beulque. webdeveloper

Please feel free to add a comment to this post, by clicking on title. Thank you.

35 Amazing Photoshop Web Tutorials

Posted on | January 18, 2010 | View Comments

Adobe Photoshop is probably the most popular of image editing and enhancement applications.  In these tutorial collections, it may enhance skills as well as mastering the art of Photoshoping layouts for web design.

Create a Sleek, High-End Web Design from Scratch

This tutorial will enable you with the tools to put together a high-end web design layout using clean and beautiful images, as well as well nested elements.

Photographer Design Layout

A simple Photoshop tutorial on how to create a nicely illustrated professional photographer web layout.

Website Gallery Layout Design

This tutorial will help you learn how to make a layout for a css website gallery utilizing Photoshop.

Design Studio Layout

Here you’ll be showed how to create a simple web design portfolio layout. You can also use this layout to create your very own wordpress theme.

Design a Premium Wordpress Blog with Photoshop

In this tutorial you will learn how to create a premium wordpress layout with a special area where you can feature products, apps, or downloads.

Corporate WordPress Style Layout

Create a dark, clean, and usable blog style layout tailored for your corporate needs. Using WordPress, you will also have a section for your blog, which is a great way to reach prospective clients.

Making the “Clean Grunge” Blog Design

With this tutorial you’ll be able to see how to make a clean/grungy layout.

Clean Website Layout

Learn how to create a clean and simple web layout using Photoshop.

Five Looks, One Layout

Learn the swift process of creating a diverse web layout that can embody various design themes.

Watercolored Background Web Portfolio Design

In this step by step tutorial you’ll be explained how to create a Watercolored Background Web Portfolio Design using two brush sets, a icon pack and some basic techniques.

Create a Clean and Colorful Web Layout

This tutorial shows you how to create a clean corporate layout in Photoshop.

Develop a Unique Colorful Site Layout

This tutorial will guide you through the process of designing a professional website with a funky colorful flair. The tutorial features some great colors, effects and layer styles in which you can use over and over for future projects.

Create a Nature Inspired Painted Background in Photoshop

We’ve all seen it, and we’ve dreamed of experiementing with backgrounds featuring nature. This tut lets you do just that, and more.

Design a Beautiful Website From Scratch

Throughout this tutorial, several tiny details and features will be pointed out, they will make your website design look beautiful.

Create a Company/Business Web Layout Using Photoshop

Create a light psd template well fit for a company website layout, business photoshop template, and a portfolio layout.

Create a Clean and Effective Product Layout

This tutorial will show you how to create a clean and effective product design in Photoshop. This template can also be easily converted into a portfolio layout if desired.

Create a Business PSD Layout in Less Than 10 Minutes

Here you’ll develop a crisp business layout in less than 10 minutes.

Create a Green/Eco-Friendly/Environmental Web Layout

You will create a green/eco-friendly/environmental web layout (photoshop template).

Design a Sleek and Modern Hosting Layout

This layout features dark elements with bright text and cool buttons. It’s got a slightly futuristic feeling to it as well.

Create a Nature Inspired WordPress Layout

In this Photoshop tutorial you will create a nature inspired WordPress layout with a number of features such as Free Social Media Icons, a Function Icon Set, and Nature photos.

Web Site Design Tutorial: Wellknown.as Case

This tutorial shows you how the author created the layout using Fireworks. But of course you can do the same thing in Photoshop, the commands will change a bit but the process is practically the same.

How to Create a Sleek and Textured Web Layout in Photoshop

In this Photoshop web design tutorial, you’ll learn how to create a full web page layout that combines the sleek and textured look-and-feel using a combination of beginning to intermediate Adobe Photoshop techniques.

How to Create an Illustrative Web Design in Photoshop

In this web design tutorial, you’ll learn how to create a professional web design with an illustrated “vector” header in Photoshop. You’ll see many techniques here including how to draw using the Pen Tool and a excellent type treatment using layer styles.

Design a Clean and Fresh Company Website in Photoshop

You will be shown how to create a clean and sort of serious web design for a company.

Create an Amazing Layout Using Textures

In this tutorial you will be shown how to create an amazing layout using a simple texture, and some layer styles.

Design an Attractive One-Page Portfolio in Photoshop

You will be designing a one-page portfolio in Photoshop. The portfolio will include some brief biographical information, some sample work, brief description of services, your latest tweets, links to social profiles, and a call to action.

Create a Professional Portfolio Design in 17 Easy Steps

This tutorial teaches you how to create a professional looking portfolio design using very basic techniques.

Design a Simple, Modern Web Template

In this tutorial we will create a beautiful modern web page design with great usability.

Create a Gritty Website Layout

In this tutorial you’ll learn how to create a clean website layout with a grunge background. You can use this layout for a Wordpress blog as well.

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. The result is a modern, crisp and clean webpage layout ready for coding.

Create A Stylish Portfolio Layout

In this tutorial you will be shown how to painlessly create a stylish portfolio layout in Photoshop, and you will also be guided on how to add jQuery functionality.

Create a Web Design Company Layout in Photoshop

Here you will learn how to create a modern looking Photoshop design for your web design company.

Create a Promotional iPhone App Site

In this tutorial you will be creating an iPhone app promotional site by taking our previous Fireworks constructed wireframe and adding color, texture, images, and effects to polish off this design in Photoshop.

Shopping Cart Design Mockup

You’ll be mocking up a shopping cart design layout called shop smart with various useful elements and extra functions.

Design a Dark, Contrasted Layout in Photoshop

In this tutorial you will learn how to create a dark, contrasted layout in Photoshop. This technique makes the top of the layout stand out while the bottom has a dark, professional feel.

Converting Your PSD to HTML Resources

This tutorial guides you through the entire process of converting from Photoshop to completed HTML. You’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme.

Tutorial: Coding a Layout

This is a tutorial from Eratic Wisdom, it does a good job of looking at the process quickly. If you’re interested in going through a shorter tutorial on the subject rather than spending a large chuck of time on all the details, try this one.

Build a Sleek Portfolio Site from Scratch

Within this tutorial you will be taking a good look at PSD files and then learning how to build it with some nice clean HTML and CSS.

From PSD to CSS/HTML in Easy Steps

This is the first in our 4 part series on how to take a PSD file and convert it into a fully CSS based html page. These are the first in a series of tutorials in which we build a fully working Photography site, all in clean Xhtml and CSS.

How to Turn Your Designs Into Usable Web Interfaces

Part Digital Design offers a detailed tutorial for coding a site from a Photoshop file. This tutorial is very detailed, from slicing the interface to the coding.

Please feel free to add a comment to this post, by clicking on title. Thank you.

Inspiring WebSites Showcase

Posted on | January 8, 2010 | View Comments

Feel free to take great inspiration from these sites below:

50 Superb 3D Flash websites You Must See!!!

This showcase consists of 50 3D Flash websites, that really stand out from crowd.

50 Superb 3D Flash websites You Must See!!!

WordPress as a CMS: 30 amazing examples

This post is a showcase of 30 examples of Wordpress as a CMS, inspiring stuff.

WordPress as a CMS: 30 amazing examples

11 Most Popular Blog Design Styles (With Examples)

They’ve rounded up eleven common design patterns seen throughout blog designs on the web. But, just because they’re commonly seen doesn’t mean they aren’t unique and filled with plenty of individuality and creativity.

11 Most Popular Blog Design Styles (With Examples)

40+ Examples of Horizontal Scrolling Websites

This article focuses on horizontal scrolling.  Amazingly, the result is more creative and unique.

40+ Examples of Horizontal Scrolling Websites

The Beautiful Art of Japanese Web Design

Here is a collection of some beautiful examples of japanese websites for your daily inspiration.

The Beautiful Art of Japanese Web Design

By Paul Andrew (Speckyboy).

Please feel free to add a comment to this post, by clicking on title. Thank you.

Amazing Designs Using Smoke Typography

Posted on | January 4, 2010 | View Comments

Using smoke in a design can produce some amazing visual effects, as presented in this collection. Also included in this post are design resources.

Smoke Typography Showcase

Intuition Smoke

By Hautalken

Dissolve

By estheticcore

Smoke+Type

By Daniel Gordon

By Daniel Gordon

By Daniel Gordon

By Daniel Gordon

Smoke Typography

By Richie Thimmaiah

Smoke

By Giampiero Quaini

By Giampiero Quaini

War

By Marcelo Vaz

By Marcelo Vaz

Exhausted

By Mignonne Meekels

Spark Me

By Cam Hilsman

Smoke

By Rick Griemink

Smoke Type

By my-name-is-annie

Smoke Typo

By Canis Azureus

smoke.this

By Matias S. Gonzalez

Smoke.

By Anne Rhodes

Smoke

By pattysmear

Pelican – Typographic Treatment

By Ben White

Smoke Typography Brushes

Smoke Brush Set

Stunning Smoke Effects: 42 High Resolution Photoshop Brushes

Smoke Brushes

Smoke Typography Tutorials

Smoke Type in Photoshop in 10 Steps

Create Smokey Typography in 12 Steps

Create Smoke Text

About the Author

Hakan Nural from Turkey. The author manages resource sites for graphic designers Vectorss.com and Brushess.com.

Please feel free to add a comment to this post, by clicking on title. Thank you.

HDR Photography Toolbox

Posted on | December 21, 2009 | View Comments

Image credit – Winter Wonderland II by Philipp Klinger

Taking amazing photos is something many aspiring amateur photographers strive for. And HDR effects can really make your images pop.

Below is a complete toolbox to get you started with HDR photography on your own. Whether you want to go all out and learn how to take real HDR composite images or if you just want to learn to fake it in Photoshop, the information below can get you started. And, to really inspire you, we’ve also included a showcase of fifty phenomenal HDR images.

What is HDR?

HDR stands for High Dynamic Range. In other words, HDR photos cover a large exposure range, allowing for deeper contrast in both shadows and highlights. HDR photos are striking to look at, but the effect can easily be overdone.

Image credit – Amsterdam II by MorBCN

There are two basic types of HDR photos. The first are true HDR composite photos, created by taking multiple shots of a subject at different exposures and combining them. The second technique involves using Photoshop effects and adjusting the shadows, highlights, and other settings.

Basic Equipment for HDR Photography

If you’re interested in creating real HDR images, you’ll need slightly higher-end equipment than many amateur photographers have. Here’s a list:

• A camera capable of taking images in RAW format
• A good quality tripod
• Software such as Photomatix or Photoshop

The RAW format camera is going to be the main sticking point for many photographers. There are some point-and-shoot cameras out there that can save to RAW (such as the Leica D-Lux 3), but they’re pricier than most other cameras with otherwise similar capabilities. Most DSLR cameras will let you take RAW format images, but it’s something to double-check before purchasing a new camera. It is possible to create decent HDR images using JPEG or TIFF originals, but they won’t be as striking as those created from RAW originals.

If you want to create faux HDR photos, all you really need is a good point-and-shoot (or DSLR) camera and Photoshop. Everything in this technique is done in post-processing, so you’ll just want a camera that’s capable of taking high-quality originals with a good exposure range.

10 Real HDR Tutorials

The tutorials included here are based on combining multiple photos with different exposures into a single HDR image, using Photoshop or other tools.

Photoshop CS2 HDR – This tutorial covers using Photoshop CS2’s automatic HDR function to combine multiple photos into a single image.

The High Dynamic Range (HDR) Landscape Photography Tutorial – This is a huge tutorial that covers using Photomatix and/or Photoshop to create stunning HDR images from as few as three exposures.

Photomatix Tutorial – A short tutorial for creating HDR images with Photomatix.

HDR Tutorial Guide Thing for Photomatix – Another very extensive tutorial on using Photomatix.

HDR: High Dynamic Range Photography – A great tutorial that talks about tonal mapping to create HDR images.

How to Create HDR Photos – HDR/Photomatix Tutorial – A great tutorial from Abduzeedo on HDR photography with Photomatix.

How To: HDR Photography Basics (Part 1) – The first in a three-part series of beginner tutorials.

HDR Photos with the GIMP – A tutorial for creating HDR composite images using the free, open-source GIMP software.

Merging HDR in Photoshop CS3-CS4 Tutorial – A great tutorial from Photoshop Cafe for using newer versions of Photoshop for creating HDR composites.

10 Faux HDR Tutorials

It’s not complicated to create your own HDR-style images using Photoshop or GIMP. While they’re usually not quite as striking as the real thing, you can use virtually any image to create them. Just be careful of overdoing it and creating something that’s obviously fake.

Tutorial – HDR from 1 JPG – An excellent tutorial from Flickr user Christiaan L on creating a faux-HDR image from a jpeg original.

HDR Tutorial – A spectacular, slightly-grungy Photoshop tutorial.

Gritty HDR – One of my all-time favorite HDR tutorials, resulting in a very gritty, grungy final image.

How to Produce Fake HDR Images – A simple eHow tutorial for creating HDR images with GIMP.

How to Easily Fake an HDR Effect in Photoshop – A tutorial from Flickr user KolNedra on creating fake HDR images with Photoshop.

Fake HDR Effect Using Photoshop – A very basic tutorial that offers two separate methods for faking HDR images.

HDR Style Results Using Layers in Photoshop – A great tutorial for using multiple layers to create an HDR-styled image.

Fake HDR Look in GIMP – A very in-depth GIMP tutorial for faking HDR photos.

Fake HDR Photoshop Tutorial – A simple, 8-step tutorial for creating fake HDR images with Photoshop.

Achieve HDR Style Effects Using Photoshop and the Lucis Art Filter – An interesting tutorial that uses a slightly different Photoshop technique for faking HDR.

50 Stunning HDR Photos

Below are fifty stunning examples of HDR photos to inspire you to create your own. Some are “real” HDR, made from composites of multiple images. Others are faux HDR, created in Photoshop or GIMP. Can you tell the difference?

The Cow Whisperer
By caese

The stair of Carlos V
By caese

Cadaqués
By MorBCN

Casa Comalat – Barcelona
By MorBCN

Creek Walk @ Changi Boardwalk : HDR
By Demarcus Romero

Dead Tree
By Subadei

Mist Lifting Off Cedars
By DJSchulte Oxherder Arts

Palacio REal, Nocturno
By R.Duran

G to the G – in HDR
By Jasen Miller

Bremen “Muhle am Wall” HDR
By Maschinenraum

Musee du Louvre – HDR, Museum, Paris
By Al lanni

HDR Landscape
By Paul Stevenson

Back to the Crazy HDR’s
By Footloosiety

Hatley Castle HDR
By Brandon Godfrey

Evergreen Plantation HDR
By Corey Ann

Monument Valley HDR 2
By Chris Isherwood

HDR Barn Door
By Hawleyjr

St. Aidan’s Church, Bamburgh (HDR)
By Left-hand

Victoria B.C Skyline from Mount Tolmie (HDR series)
By Brandon Godfrey

Go Ahead
By Ageel

Let there be light
By Philipp Klinger

Blooming Apple Tree HDR
By Tambako the Jaguar

HDR Kurdi Kurdistan
By Kurdistan 4 all

Hamburg – Speicherstadt – HDR
By Johannes Pape

Feneos Valley HDR
By Leonidas Tsementzis

BRP_HDR_23
By Sporadic

Crater Lake HDR 1
By ArtBrom

Sierra Juarez de Oaxaca (HDR)
By Phylevn

Lake Morning (HDR)
By Iowa_Spirit_Walker

Sagada Pond HDR Version
By Jonicdao

The Tower (HDR)
By Edbrambley

La Vista Dal Mio Giardino (HDR)
By Francesco Sgroi

Laveria Brassey – Abandoned mine
By Joep R

HDR Creek
By Peter Pearson

Tokyo International Forum
By Galactic.supermarket

Ala Moana Evening HDR
By Madmarv00

Broadhaven Sunset – HDR and Tone Mapped
By Pemb Dave

HDR
By Zero159

Lizard Point (HDR)
By Left-hand

Mountainboarding . HDR
By Cest

Darmstadtium
By Philipp Klinger

Houses of Parliament London
By Joep R

Looking out over the Thames
By Joep R

Red boat – Venice
By MorBCN

Time travel in color
By Kris Kros

Remains of the day
By Petervanallen

Lookout
By caese

Stuck in India – Humayun’s Tomb
By Stuck in Customs

Barcelona HDR
By MorBCN

About Author – Cameron Chapman is a professional Web and graphic designer with over 7 years of experience.

Please feel free to add a comment to this post, by clicking on title. Thank you.

Tutorial, Design a Slick Business Card

Posted on | December 13, 2009 | View Comments

Most business people need their very own business card.  In this post it will be shown how to create a standard two-sided business card design in Adobe Photoshop.

Final Result

Set up the Photoshop canvas

1 Open a new Photoshop document that is 3.75 x 2.25 inches. Make the resolution 300 pixels per inch and set the color mode to 8-bit CMYK. A typical business card is 3.5 x 2 inches; however, to optimize the card for printing, there needs to be a quarter of an inch space along each edge called a bleed. Whatever is located in this area will not be shown in the final print.

Apply a radial gradient overlay

2 Fill the canvas with a radial gradient overlay. To add a gradient overlay layer style, double-click on the Background layer, make it editable and then double-click on it again to open the Layer Styles dialog box. Check the box beside Gradient Overlay, and in the Styles option dropdown, select Radial. Use white for the lighter, innermost color, and #c6c5c5 for the darker, gray color.

Creating the red warped rectangle shape

3 With the Rectangle Tool (U) from the Toolbox, draw a long, thick rectangle on the canvas like shown in the following figure. The color doesn’t matter since we will be applying a layer style to it.

4 With the rectangle shape layer selected in the Layers Panel, push Ctrl + T to enter Free Transform Path mode (alternatively, go to Edit > Free Transform Path) and right-click inside the transform box that appears. Choose Warp from the contextual menu, and from the Warp Options bar, choose Rise as Wrap type dropdown menu. Warp the rectangle shape using the transform controls until you have something similar to this.

5 Apply a linear gradient layer style to the warped shape. Use #841618 for the darker color in the gradient and #e82d33 for the lighter color. Once that’s done, use the Move Tool (V) to move the shape near the bottom of the canvas.

6 Duplicate the rectangle shape by pushing Ctrl + J on your keyboard. Then drag the duplicated layer below the original layer to move it behind. On this new duplicated shape layer, apply a linear gradient overlay layer style to the new shape. Use black (#000000) for the darkest color and #2b2b2b for the lighter color. Use the Move Tool (V) on this duplicated warp layer to move it so that only some parts of the top is showing.

Creating the person’s name

7 Use the Horizontal Type Tool (T) and type “John” and “Smith” (or your own first and last name) in black on two different layers near the upper left corner of the canvas. Use 25 pt, bold, Myriad Pro for “John” and 25 pt, Myriad Pro Condensed for “Smith”. This font family comes with newer versions of the Windows operating system, but if you do not have this font, use something clean and professional (a sans serif font family will do the trick).

8 Apply a gradient overlay and stroke layer style to “John” text layer. On the gradient overlay, use #df1f26 for the lighter red color and #811517 for the darker color.

9 Also apply a Stroke layer style on both the “John” and “Smith” text layers. The stroke size is 1px and its position should be Outside. For the Fill Type stroke setting, choose Gradient from the dropdown menu. The gradient used for the stroke can be found in the Metals gradient preset, to access it, click on the rightward pointing arrow in the Presets box inside the Gradient Editor dialog box, this will show a contextual menu where you should be able to find Metals. Replace the dark gray color stops with the color #838484. For the “Smith” layer, just apply the same stroke settings, but don’t apply the gradient overlay.

Creating a text dropshadow

10 Select both name text layers in your Layers Panel (hold down Shift and click on each on of them) and duplicate the selected layers by right-clicking, and choosing Duplicate Layers from the contextual menu that appears.

11 Right-click on these new duplicated layers and choose Rasterize Type from the contextual menu that appears. Right-click once again and choose Merge Layers to combine them into just one layer. Push Ctrl + T to enter Free Transform mode and shrink this layer vertically using the transform controls until you have something similar to shown. This will become the text shadow.

12 Double-click on the text shadow layer to enter the Layer Styles dialog box. Apply a black (#000000) color overlay to the text shadow layer and move it behind the original name layers.

13 Apply Gaussian Blur by going to Filter > Blur > Gaussian Blur. Set the blur Radius to 4px. Then, set the layer’s opacity in the Layers Panel to 30%.

You should have something similar to this:

Creating the text reflection

14 Duplicate the original name layers again. Rasterize and merge the duplicated layers like before (see Step 11). Push Ctrl + T to enter Free Transform mode, right-click inside the transform box that appears, and choose Flip Vertical from the contextual menu. Move this layer just a few pixels underneath the original text on the canvas using the Move Tool (V) and your arrow keys. Select this layer in the Layers Panel, and then drag it behind the original name layers and shadow layer. This will become the text reflection.

15 Get the Gradient Tool (G) from the Tools Panel. In the Gradient Tool Options bar, choose the gradient preset called Foreground to Transparent and select Linear as the Style setting. Set your foreground color to black (you can do this by simply pressing D on your keyboard to reset the foreground and background color to the default). Make sure the reflection layer is the active layer in the Layers Panel, and then press Q on your keyboard to enter Quick Mask mode. Drag the gradient from the top of the reflection layer to the bottom, then press Q once again to exit Quick mask mode. A selection will appear. Press the Delete key five times on your keyboard, then Ctrl + D to end the selection.

16 Change the reflection layer’s opacity to 20% to finish off the text reflection.

Entering the rest of the business card information

17 In black (#000000), bold Myriad Pro, type “marketing expert” (or your own job title) under the name on your canvas using the Horizontal Type Tool (T).

18 Off to the right of the name, type some of the things you specialize in (see example in the figure below) using black, 9pt, bold, Myriad Pro Condensed Italic. Each line should be a distinct text layer.

19 Type the contact information below the previous layers. Use Myriad Pro bold for the beginning word and Myriad Pro Condensed Italic for the following words.

20 With the Line Tool from the Toolbox, draw a small 2px vertical line on your canvas to the left of the information that was just typed.

The back of the card

21 To make the back of the card, first turn the visibility off in all the text layers, leaving only the business card background. Select the entire canvas by pressing Ctrl + A (or Select > All). Choose Edit > Copy Merged (Shift + Ctrl + C).

22 Now, Create a new document (Ctrl + N) with the same settings as the front of the card. Paste the copied selection into the new document. Go to Edit > Transform > Flip Horizontal to flip it so that it’s oriented a different way as the back of the business card.

23 Add your company name and website using the text effect techniques we’ve discussed above. You can use Steps 7 – 16 for the company name.

Download Source Files

• slick-business-card-typography (0.86MB, ZIP)

About the Author

Dave Martinez is an internet entrepreneur living in Dallas, Texas.

Please feel free to add a comment to this post, by clicking on title. Thank you.

Evolution Analysis of Movie Poster Designs

Posted on | December 8, 2009 | View Comments

In this collection, an analysis of how poster design developed over the years.

Scarface

1932

The original Scarface movie uses some good design techniques such as the silhouette-style shadow and some mid-saturated colors.

1983

The typography of the 1983 Scarface remake is elegant and easy to read.

The Mummy

1932

The composition of the original The Mummy movie is great, but it has three-dimensional text that is directly above the 3D text, which seems a bit odd.

1999

The remade movie poster uses superb digital manipulation as well as a great text effect used for the ‘M’ in Mummy. The color schemes for the poster are perfect, reflecting mummies and the desert, a central theme in the movie.

House of Wax

1953

The hand-painted poster combined with neat typography represents the 3D image really well. The warm and dark color scheme sets the theme for this Technicolor film.

2005

The use of subtle grunge at the top of the post draws your eyes into the incredible manipulation effects used on the portrait. Beneath the movie title, you’ll see a blurred reflection that can really play with your eyes – fitting for a horror movie.

War of the Worlds

1953

This movie poster is simple and colorful and has some great artwork.

2005

The typography used on this poster is elegant and simple, but it works well for this movie’s theme. The bright red on pure black works great as an eye-grabbing color combination.

Sabrina

1954

An off-white border, a simple and elegant grid-based composition is the highlight of this poster (and movie).

1995

The 90’s probably spurred some of the worst design trends as shown in this poster design. The composition is poor and none of the text in the bottom right can easily be read.

Ladykillers

1955

This hand-drawn poster presents us with a group of rather scary-looking men running away with what look likes heavy-duty steel cases filled with multi-colored cash. It’s a comical and traditional hand-drawn poster (when Illustrator wasn’t in the market yet).

2004

The low-opacity street scene and lights in the background adds a great feel to the overall poster, and the shadows from the four guys in the background adds depth to the poster. The majority of it is grayscale, followed by neutral browns and beiges, and followed by a great burst of what’s best described as “vintage pink”, bringing your eyes towards the movie title.

Oceans 11

1960

This poster uses a grid-based layout, a popular technique in the 60’s to convey modernity. The silhouette, vector-style illustration at the bottom of the poster is a great touch. The typography is superb, standing out well against the warm yellow background.

2001

The vector/silhouette style illustration used in the poster is so different to almost any other movie poster made in this millennium, that even today, people still have it hanging on their college bedroom walls. Have you noticed how it doesn’t actually say “Oceans 11″ anywhere?

Spartacus

1960

As individual design elements, this poster has some great artwork, such as the drawings, the unique movie title text effect and the duotoned photographs, but the overall composition lacks “oomph”.

2004

After 44 years, Spartacus was remade. The costume and photography is excellent; the sepia-toned color sets the movie’s time period.

The Time Machine

1960

This poster design is presented on a grid and has the classic white border. The typography in this poster (especially the headline) is superb and truly unique for this time period.

2002

The color scheme of the remake seems off, and in some places, appears to be too bright. There are also some parts of the posters that are too busy.

Last Man on Earth / Omega Man / I Am Legend

1964

“The Last Man on Earth” is the original story of what we now know as “I Am Legend”. The poster is a typical 60’s horror movie poster. The designers used a lovely grid-based composition and a very limited dark color scheme.

1971

Seven years later, and the film was remade under the name “Omega Man”. They were still using similar techniques to produce posters, and therefore this poster isn’t too different from the original. The color scheme is still very limited to dark colors, which is great for this genre of film.

2007

The grungy, noisy and tinted feel to the “I am Legend” poster overall is great. The modeling work in the background of the scene is superb, and the small centered typography going directly through the middle of the poster adds a great touch to the poster, making it incredibly unique.

Planet of the Apes

1968

This great poster from the late 60’s perfectly combines the use of a bright and captivating background color gradient against black/white. The warm feel of the poster along with the black and white portrait creates a memorable design. The films logo was such as a success that it has only seen a few minor tweaks in 40 years.

2001

2001 brought us the modern remake of the film, featuring manipulations and montages of several scenes and photographs. The moons in the background tops off the overall feel of the poster. Notice that the movie title logo is still very similar to the original.

The Italian Job

1969

The artwork in this poster is superb contained in a lovely off-white border. White typography lies on a pure black background at the bottom of the poster, making it easy to spot and read. This poster suggests the kind of film it is: business, violence, jokes and getaways.

2003

This poster goes for a cast shot and features some great photography, photo manipulation and type alignment.

Wickerman

1973

This movie poster features a bright color scheme. The typography is simple but does its job well.

2006

The composition of this poster is great, however,the movie slogan “Be careful what you search for…” is difficult to read against the cloud background even with a prominent dropshadow text effect.

Rollerball

1975

The Rollerball poster has smooth glows, dark shadows, some well-placed blurs and an overall aged/worn effect.

2002

This poster design of the Rollerball remake in 2002 doesn’t do the actual film any justice. There are proportion inaccuracies with the characters versus the background, making it clearly obvious that the shot was taken in front of a green screen; the proportion and angle of the floor and their feet just doesn’t match up.

The Omen

1976

Other than the excellent sketch, you can’t get much more simplistic than this poster! The typography is simple yet elegant, easy to read, and the use of red for the movie’s title is a great way to make it unique, memorable and slightly scary.

2006

The typography ruins the poster of The Omen remake, but the color theme used effectively sets up the eerieness of the movie’s plot.

The Hills Have Eyes

1977

Good typography, a lovely border, and a great scene in the background are the highlights of this poster design. The overall color scheme would have easily attracted people walking past the poster.

2006

The blurs, noise and texture combined makes for an excellent poster; this poster design is probably something you can’t miss from a mile away.

When A Stranger Calls

1979

The poster is purely grayscale and used a magnificent macro still shot and some incredible typography.

2006

The movie remake’s poster stuck with the original design concept. The design uses a lot of dead space, leaving you in suspense as to what the movie is about.

Prom Night

1980

That dark silhouette, the glowing eyes, the reflection on the knife, the detail of the glove and the magnificent minimalistic typography on a white background makes for an eye-grabbing design.

2008

The ’smashed up’ feel of the poster, the subtle grunge feel to the otherwise clean, elegant text and the overall tinted-blue effect all help set the mood of the movie. The noise on that portrait is a brilliant detail.

My Bloody Valentine / My Bloody Valentine 3D

1981

This dark-themed poster of My Bloody Valentine creates an eerie look and feel that sets the tone for the movie.

2008

This poster has dark, grungy and noisy elements, again, to set the tone of the movie. The red color works well against the dark background, making the title of the poster pop.

The Hills Have Eyes 2

1985

Although the artwork is quite interesting and eye-catching, that bright yellow blade and beveled typography completely ruins the design (at least for me).

2007

The creators of the remade “The Hills Have Eyes” liked the outcome of their first poster and decided to stick to the same style with the sequel. The dark edges on both the left and right side of the poster really draw your eyes into the main focal point of the poster; the unlucky human being dragged through the desert.

Your thoughts on movie posters

About the Author

Callum Chapman is a freelance Graphic Designer and Illustrator Cambridge, UK.

Please feel free to add a comment to this post, by clicking on title. Thank you.

40+ Excellent Tutorials on Digital Cartoons

Posted on | December 6, 2009 | View Comments

In this post, can find an amazing 40+ tutorials on drawing cartoons with Adobe Illustrator and we hope it would expand your creativity and imagination to be the next Walt Disney.

Happy Sun Character
Learn how to create fun sun character tutorial in Illustrator. This intermediate tutorial is great for logos, children illustrations, and other projects relating to climate change. Moreover, you can easily apply this tutorial to other illustrations, logos, and projects!

Cute Baby Seal
Simple tutorial to teach you how to create a super cute baby seal. At the end of tutorial you will get really nice, cute cartoon seal character.

Cartoon Duck
This tutorial will take you through basic shapes, using basic tools ie pathfinder, knife and eyedropper tools to create a cute duck character.

Furry Vector Monster
Follow these steps in Adobe Illustrator to create your very own super cute fuzzy monster character. We’ll be working with the basic shapes to start, then use a variety of gradients to add depth. We can then finish it off with some detailed fur effects to really lift the design from the screen.

Stinking Zombie Flesh-Eater
In this tutorial, you will learn how to create a cartoon zombie in Illustrator. Starting by creating a fresh corpse, we will then ‘yuck’ it up using a number of techniques.

Cute Hippo
This tutorial will show you how to create cute Hippo Character using simple shapes and a really simple effective drawing technique . This technique has been adopted from recent addition to the store of Animal Head Graphic Set , latest addition to the store.

Owl DiNG
In this tutorial we will walk through taking a pencil sketch into Illustrator and creating vector artwork. Then we’ll bounce over to Photoshop and add some details and give it a washed look.

LeBron James Cartoon Character
In this tutorial, you will learn how using Adobe Illustrator create vector cartoons. Learn how to create Lebron James Cartoon Character.

Leprechaun for St. Patrick’s Day
Create yourself a wee Leprechaun for St. Patricks Day 2009 with this Illustrator tutorial. Easy and interesting Illustrator tutorial.

Cartoon Character with Expressive Lines
This tutorial covers the necessary steps for creating a colored multicolor cartoon character that includes shadings.

Cute Emo Kid

In this tutorial we will go through the process of drawing cute cartoon character. The concept is based on the Emo trend, we will go trough all the steps from sketch to full color vector.

Cute Panda Bear Face Icon
How to create a cute panda bear face icon all from ellipses. The great part about this tutorial, is that you can easily apply the techniques to other icons, illustrations, logos, or other projects.

Gang of Vector Ninjas

Constructing a group of cool vector ninja characters using just the basic shapes and a variety of simple tools, making it a good start for Illustrator beginners.

Cute Bunny Vector Character
This tutorial uses simple shapes and gradients that are easy to apply to other character illustrations.

Cartoon Snail
Lean how to draw snail in Adobe Illustrator with some easy steps. Learn how to with Illustrator basic tools create cute snail.

Killer Chainsaw Bunny Character
This tutorial shows you how to build a Bucket ‘o’ Thought character and add a dynamic background effect.

Cute Vector Monster
Follow this Adobe Illustrator walkthrough on the creation of a cute little vector monster character, beginning with a quick pencil sketch on paper.

Grumpy Dude
Create grumpy dude in Adobe Illustrator with the brush tool. In this tutorial you will learn some digital drawing tips and how to fix little mistakes after you’ve drawn your stroke.

Fat Cat Vector
This tutorial aims to guide you from sketchbook to screen; a “Fat Cat” doodled with biro translated into a neat vector caricature. Intermediate knowledge of Adobe Illustrator is advised.

Freddy the Fish
Follow this tutorial to create your own vector character – Freddy the Fish.

Vector Pirate Cartoon Character
By firstly using the power of pen and paper a character design is created, which is then scanned into the computer to use as a base for tracing with Adobe Illustrator. The final outcome is a colourful cartoon character in vector format!

Twisted Monkey Studio Mascot
In this tutorial author will explain the process that he followed at the time of designing by order the mascot in vector format for Twisted Monkey Studios, producers of horror films.

Blob Monster – The Scream
It is really simple to create Blob Monster and doesn’t take long to complete. This technique can also be used for nearly any type of simple shape / monster.

How to Create a Web Site Mascot
In this tutorial, author will give an overview of how developed a character from the initial brief through to the final site mascot and then to go on to create several poses for different parts of the site.

Create Your Own Monster
In this Adobe Illustrator tutorial author will take you through the process of creating a completely unique, memorable monster that’s not at all humanoid in form.

Adding Dimension to Your Characters
In this tutorial author will show you how to add the illusion of dimension to your vector illustrations by combining the effects of Adobe Illustrator’s versatile linear and radial gradients.

Creating Bart Simpson Vector Character in Illustrator
This is a short beginner tutorial. You will use Layers, utilize the Pen Tool and its sister tools, such as the Convert Anchor Point Tool, Direct Selection Tool, etc, to draw and colorize a vector Bart Simpson in Adobe Illustrator.

How to Create a Vector Illustration and Prepare it for Micro-Stock Sale
This tutorial details a professional workflow for creating vector illustrations and prepping the artwork for Micro-Stock Sales. Author also included a bunch of time-saving tools and tips as well.

Creating Convincing Characters
In this tutorial, you’ll learn some basic skills for converting your character from a pencil doodle to a complete, fully-coloured image – learning some crucial Illustrator skills along the way.

Symmetrical Illustration: Thug Bunny!
This tutorial will go through the method of using symmetry in your artwork. Learn how to do half the work but still get the full benefit from your artwork. We’ll also feature a plugin for AI that speeds up your build time and cover the topic of “Opacity Masks.”

Patch Illustration 2
The following tutorial will show how author go about creating a set of NBA licensed embroidery patches featuring portraits of many of the leagues greatest players.

Basic Shading and Lighting
This tutorial goes over the elementary fundamentals when it comes to shading and lighting within a digital illustration.

Create A Vector Art Twitter Bird Character Icon In Adobe Illustrator
This tutorial will walk you through the steps from sketch to vector in creating an original cartoon-style character vector illustration.

Vector Tutorial: Anime Coloring
In this tutorial will be detailed explain how in Adobe Illustrator coloring sketches, in this tutorial author will use anime sketch.

Adobe Illustrator Cartoon Bug Tutorial
Here is one more cartoon characters tutorial in Illustrator. This time you will learn how to create nice fly cartoon.

Adobe Illustrator Cartoon Tutorial with a Wacom Tablet
In this Illustrator tutorial author will explain how using Wacom tablet you can at first draw cartoon sketch and than create vector cartoon.

Adding Gradients to Illustrations in Adobe Illustrator
In this tutorial you will learn how to use gradient tool in Illustrator. Author will explain how to add gradient to illustrations.

Monster Character Series Part 1
First of two Spoongraphics mini-series of tutorials on how to create a set of simple monster characters. This is very simple tutorial, so if you beginner of Illustrator, you can learn some basic tools.

Monster Character Series Part 2
Here is second Illustrator tutorial from Spoongraphics mini-series of monsters tutorials where you will take a look at the Dumb Blue Sucker Monster! Again, using mostly the basic tools and shapes making the tutorial suitable for beginners to Illustrator.

Create a Twitter Style Bird Mascot
Using some basic shapes, effects, and gradients author will show you how to create a Twitter mascot for your blog or website.

Maintaining Rhythm and Flow in Vector Character Design
In this tutorial you will break down the basic process of creating a character from sketching through to the final vector file. Whether you’re interested in creating vector mascots for branding design, or making interesting characters to use in your animations, you’ll find these techniques helpful.

Create a Traditional Japanese Koi Carp Illustration
Koi Carp have been painted and illustrated by the Japanese for centuries and are familiar to people all over the world. This tutorial will take the intermediate Adobe Illustrator user through the techniques and processes needed to imitate what the Japanese have perfected.

A Cow As Chinese New Year Zodiac For 2009
At the begining of 2009 – Cow year, Kailoon.com create special new year Illustrator tutorial, where you can learn how to draw 2009 year symbol – Cow. Very interesting tutorial and result is amazing – very cute Cow .

The Making of a Chocolate Bar Character.
In this tutorial Author take the concept from sketch through to vector final. You will learn how to create sweet cartoon character – Chocolate bar character.

Character Illustration
The following tutorial will walk you through a project, a character design for Fanta soda to use in their Halloween promotion.

Ilias Sounas’ Condomunity Member Illustration Tutorial
It’s basically a character design tutorial like many others out there – just that Author wanted it to be more like an illustration and possibly also an rss icon. Author picked 5 illustrators to hand in an artwork in their own typical style.

How to Create a Cute, 3D, Vector Robot
If you want to learn how to create a rounded robot character from sketch to finished vector art, then we have an awesome tutorial for you.

Please feel free to add a comment to this post, by clicking on title. Thank you.

How to Make Beautiful Photoshop Typography, a Tutorial

Posted on | December 1, 2009 | View Comments

In this Photoshop type treatment tutorial for beginners, you’ll discover a quick and easy process for making captivating gradient text.

Final Result

Below, you can see what we’ll be creating together. You can click on the image to see the full-resolution version.

Set up the Photoshop document

1 To start, let’s set up the Photoshop document. In Photoshop, Press Ctrl + N to create a new document (this should open the New Document dialog box). We’ll create a rectangular canvas that’s 600px wide and 300px tall.

Design the background of the text

2 We’ll use a dark blue background. First, we’ll need to make the Background layer editable because it’s locked by default. Double-click on the Background layer in the Layers Panel to open the New Layer dialog box. By default, the Name option is set to Layer 0, but to keep things organized, name it to something more descriptive like Background.

3 We’ll apply a color overlay layer style onto the Background layer. Start by double-clicking on the Background layer’s thumbnail in the Layers Panel to open up the Layer Styles dialog box. Check the Color Overlay box to apply the layer style.

4 Change the color overlay by clicking on the Set color of overlay option which will open the Select overlay color dialog box for you to choose your colors in.

5 In the Select overlay color dialog box, choose a dark color. I’ve chosen a dark blue color (#032d50).

Create a lighting effect in the background

6 The background should now be a dark blue color. Let’s make it a little bit more interesting by creating some lighting. First, create a new layer by clicking on the Create a new layer icon at the bottom of the Layers Panel. Then rename the new layer (by default it’ll be Layer 1) to something intuitive like Lightsource.

7 Set your Foreground color in the Tools Panel to white (#ffffff). Grab the Brush Tool (B) from the Tools Panel.

8 In the Options bar, open the Brush Preset picker by clicking on the downward pointing arrow. Scroll down and select the Soft Mechanical 500 pixels Brush (or choose any brush tip that has a soft edge). Adjust the Master Diameter option to a large value, 700px will do the trick.

9 In the Layers Panel, make sure you’re still on the Lightsource layer. With the Brush Tool, click somewhere in the middle of your canvas to apply the brush. It’s OK if the brush edge is outside of the canvas, it’ll create a nice effect that way.

10 The brush is too prominent so we’ll want to lower the layer opacity to make the lighting effect subtler. Lower the Opacity of the Lightsource layer to somewhere around 35% in the Layers Panel.

Placing the text on the canvas

11 Let’s type in the text that will have the gradient effect. We’ll use a bold sans-serif font–Arial–which really works well with the gradient typography style. Begin by choosing the Horizontal Type Tool (T) in the Tools Panel. Then in the Options bar, select Arial, set the font size to 72px, set the anti-aliasing method option to Sharp, and choose a color that we can easily see, such as white (#ffffff) (it doesn’t matter what color we choose now because the gradient overlay that we’ll be applying later on will take care of this).

12 Type some words onto the Canvas like “Gradient Type“. Don’t worry where it is on the canvas because we’ll center it in the next step.

Centering the text

13 To center the text horizontally, first create a marquee selection around the entire canvas by pressing Ctrl + A (or going to Select > Select All).

14 With the Gradient Type text layer the active layer in the Layers Panel, go to Layers > Align Layers to Selection > Horizontal Centers. This should center the text in the horizontal middle of your canvas.

15 Next, we’ll want to center our text vertically as well. The rectangular marquee selection around the canvas should still be active, but it not, make sure it is (and press Ctrl + A if it isn’t) and then go to Layers Align Layers to Selection > Vertical Centers.

Applying the layer styles for the gradient type effect

16 Time to actually create the gradient type effect. Double-click on the Gradient Type text layer in the Layers Panel to open the Layer Styles Dialog box.

17 First layer style we’ll add to our text is a gradient overlay. We’ll want a color transition that’s white at the top and light gray at the bottom. It will be a subtle gradient type effect. So click on the Gradient Overlay checkbox to apply it. By default, it will be a Black to White color transition, so we’ll need to modify it.

18 Click on the Gradient option to open the Gradient Editor dialog box.

19 In the Gradient Editor, click on the left color stop to open the Select stop color dialog box. Change the color to a light gray color (#d7d7d7). Make sure that the right color stop is white (#ffffff), by the default it’s white, but in case you have changed the settings, you should verify.

20 Next, we’ll add a drop shadow layer style. Check the box beside Drop Shadow. Lower the Opacity of the drop shadow to about 50% so that it’s subtler. Change the Angle of the drop shadow to 90% so that our light source comes from the top of the canvas. Set the Distance to 3px (which means the drop shadow is offset by 3px at the bottom of the text) and the Size to about 8px. Play around with the settings to see what works best for you.

21 The final layer style we’ll apply is a white inner stroke. This is a subtle effect but really helps complete the whole gradient text effect. Open the Layer Styles dialog box again by double-clicking on the Gradient Type text layer. Check the box beside Stroke. Set the Stroke Size option to 2px. Set the Position option to Inner so that it’s applied at the inner edge of the type. Finally, lower the Opacity percentage just a tad, to about 90% So that the stroke is not too overpowering.

We’re done!

That’s it, below, you’ll see what I ended up with. I hope you enjoyed this tutorial and learned a trick or two!

Download the source file

If you’d like to download the Photoshop source file used in this tutorial, grab it as an archived ZIP file below.

• gradient-typography.zip (ZIP, 0.2MB)

About the Author

Jacob Gube

Please feel free to add a comment to this post, by clicking on title. Thank you.

Five Amazing Graphic Designs

Posted on | December 1, 2009 | View Comments

In this post a fantastic collection five recent articles that showcase the art of amazing graphic designers.

The Magnificent Art of Adi Granov

One of the most incredible modern illustrators is the Bosnian Adi Granov. He first came into the spotlight in 2004 when he worked on the Iron Man miniseries Extremis. Since then, he has created the comic book covers for a whole list of Marvel’s comic books. In 2006 he was hired to help create the Iron Man armor for the first film which turned into such a huge success that he was called back for more conceptual art for the second Iron Man film to be released in 2010. There are more than 40 incredible illustrations in this gallery so wait no more and let your jaw hit the floor!

The Weird Artwork of Tariq Sheshani

Tariq Sheshani is a graphic designer based in Amman, in this portfolio article they showcase his amazing, and strangely weird, typography and montage works.

Beautiful Illustrations by Diego Morales

Diego Morales is a graphic designer student from Bauru, Brazil. In this article, from Abduzeedo, they showcase his creative, unique and colorful art work.

The Art of Illustrator Arthur Depins

Arthur Depins is a genius. Plain and simple, his illustrations are so human and filled with subtle expression, it is hard to describe how amazing this guy’s portfolio is. In this article he offers a series of sexy and cute posters, and several art books that are showcases his infectious illustration style.

Featured Artist – Martin Rud

Martin Rud is a Danish Art Director with nearly 10 years of experience working advertising, design and marketing. His portfolio is truly amazing and shows his use of photography and manipulation to the max.

By Paul Andrew.

Please feel free to add a comment to this post, by clicking on title. Thank you.

« go back — keep looking »

Recent Posts

• Tutorial Portfolio in Photoshop
• CSS3 Detailed
• How to Have a Successful Website
• Best of Web Menu Inspiration
• Amazing Original Case Designs for the iPhone
• Amazing Photoshop Text Effects Tutorials
• 50 Best Freelance Job Sites
• Great Resources for Valentine’s Day Design
• How to Continue to Develop as a Designer
• Resources Inspiration for Colour Design

Latest Followers

Friends: 10433 Followers: 10408

Business Information Technology

• Web Server Optimization Tools
• Wordpress or Expression Which to Choose?
• How to Quickly Increase Your Website Conversions
• Announced Better Marketing Analysis on Facebook
• 30+ Free Online Multimedia Editors
• How to Create Creativity
• User Interface, Innovation
• How to Make Money from Online Video
• Microsoft’s New OS – WinMo 6.5.3
• Real-time Web Data Analysis

YODspica Ltd on Facebook

Web Technology Breaking News

• Google Under Pressure by China
• Easily Embed Documents from DocStoc
• Import your Facebook Contacts into Yahoo!
• Realtime Search Startups helped by Twitter
• MySpace Stream, Similar to Facebook
• Why Facebook Acquired Octazen
• Google Loves Shopping for Startups
• Twiangulate, User Twitter Analysis
• Speaker at TED is criticized by Organizer
• Facebook Email Project Suggestions