BlogmyQuery – BMQ

Web typography has evolved a lot over the last years. Today we see rich, accessible typography, a plethora of type design choices for the web and a number of remarkable, type-based web designs. It’s a great time for web design, and it’s a great time for web typography. Still, being as excited as we are, we should not forget about the foundational principles of good type design on the web and use them properly within our projects. Great choice is good, but, most importantly, we should be making meaningful typographic choices in our designs.

In this post we present an extensive overview of educational resources, tools, articles, techniques and showcases all related to web typography. Please notice that the overview presents resources which we have stumbled upon, discovered, collected and reviewed over the last six months. This round-up is quite long, so save some time for a thorough study.

We believe that such round-ups are valuable because they present many useful pointers in one place. From time to time we have many inquiries about such round-ups and we gladly prepare them for our readers, along with in-depth articles which are regularly published on Smashing Magazine.

Educational Typography Resources

So You Want to Create a Font
Alec Julien’s introductory piece on how you can create some beautiful fonts with a little hard work, a lot of knowledge and a little inspiration. The series covers font editing software, transition from paper drawings to screen drawings, vertical and horizontal metrics and kerning. Don’t forget to check out part 2 as well.

Kerning Type and Great Typography
There are lots of tips on the best way to perfectly kern a piece of type. As with all designs, kerning can be subjective, but some are just plain right or wrong.

Perfect your Kerning Skills
Kerning is the art of spacing individual characters in a word so that they sit in correct relationship to one another, creating a subtle harmony and rhythm. In this article, Tom Sewell gives some recommendations for good letter spacing.

Font Hinting
Hinting, or screen optimising, is the process by which TrueType or PostScript fonts are adjusted for maximum readability on computer monitors. This article compares different ways of hinting (black & white, grey-scale, ClearType, DirectWrite) and explains the behaviour of fonts under different rasterisers. You may want to read Font Hinting Explained By A Font Design Master and TrueType Hinting as well.

Type Rendering On The Web
This article introduces a series of posts about type rendering on the Web. The translation of a font’s outline into pixellated text of varying quality, consistency and sharpness is not straightforward. It involves both a font and a rendering engine, and only so much can be controlled by type designers and web designers. Also, check design of fonts for the web.

Type Rendering: Web Browsers
Every great web browser has a layout engine that explicitly decides how to turn our markup, stylesheets and scripts into living, breathing websites. Layout engines have everything to do with how our web designs are generated and visualized. However, for the specific task of type rendering, layout engines almost always defer to the operating system’s text rendering engine. This article looks at how type rendering is affected, or not affected, by each popular web browser. Also, check operating systems.

Four Ways to Mix Fonts
H&FJ’s excellent article about ways to combine fonts in your designs. “Building a palette is an intuitive process, but expanding a typographic duet to three, four, or even five voices can be daunting. Here are four tips for navigating the typographic ocean, all built around H&FJ’s Highly Scientific First Principle of Combining Fonts: keep one thing consistent, and let one thing vary.”

Mixing Typefaces (PDF)
A handy overview of typefaces that fit and do not fit together when combined in a design. A September 1992 issue from the “International Journal of Typograpics�.

Font Metrics and Vertical Space in CSS
If you have ever wondered why some fonts look smaller than others at the same typeset size, or why the vertical space between lines of text is such a guessing game, this one’s for you.

Fundamentals: Combining Type With Helvetica
An interesting article presenting some choices that work well with Helvetica, presented by the German typographer Indra Kupferschmid.

The Ails Of Typographic Anti-Aliasing
As printed typography enjoys the fruits of high-DPI glory, proudly displaying its beautiful curves and subtleties, its on-screen counterpart remains stifled by bulky pixels, living in a world of jagged edges, distorted letterforms and trimmed serifs. Until display manufacturers produce affordable 200 or 300 PPI monitors, we’ll have to rely on software advances to fix these problems. Anti-Aliasing is the next best thing to a world of higher-resolution monitors.

An Introduction to OpenType Substitution Features
John Boardley’s beautiful article about OpenType substitution features. The article explains both pasic and more complex features and ideas. All examples should be considered starting points, just to pique your interest.

Beginners Guide to OpenType
Using OT technology, you can substitute your characters for different glyphs using many different methods. This beginners guide will help to illustrate some of the more common features found in OT fonts and when they should be used.

The Beauty of Typography: Writing Systems and Calligraphy of the World
Pick any language you like: Arabic, Chinese, Japanese, maybe Nepali? Each is based on a different writing system, which makes it interesting to figure out how they work. This article covers five categories of writing systems. This may sound tedious and academic, but it’s not. If you take the time to understand them, you’ll find that they all give us something special. Check part 2, too.

Linux Font Equivalents to Popular Web Typefaces
Linux distributions each ship with their own font libraries. This article focuses on similar typefaces you can use within a font-family to help make your design look better across operating systems.

The Grammar Cheat Sheet
When you know the correct way to structure a sentence, the world becomes a scary place — you start to notice how many people get it painfully wrong. The ease of content creation that the web now affords us is making the problem worse, so why not get a basic understanding to help make your text a little more professional.

Typographic Marks Unknown
There are many typographic marks which are familiar to most, but understood by few. Most of these glyphs have interesting histories and evolutions as they survived the beatings given to them through rushed handwriting of scribes and misuses through history. This article is an overview of typographic marks often seen or used, but not well known. Take a look at part 2 which discusses ligatures and blockquotes.

eXtreme Type Terminology
Paul Dean’s detailed introduction to type terminology. The series explains the various kinds of typefaces, their properties as well as general typographic terms.

Better web typography with OpenType features
In this article Ralf Herrmann shows some of the typical features of OpenType fonts and how they can be used in Firefox. The article describes the support of small caps, figure sets, descretionary ligatures, contextual alternates, case feature, stylistic sets and fractions.

Best Practices of Combining Typefaces
Creating great typeface combinations is an art, not a science. Indeed, the beauty of typography has no borders. While there are no absolute rules to follow, it is crucial that you understand and apply some best practices when combining fonts in a design. When used with diligence and attention, these principles will always yield suitable results. This Smashing Magazine’s article takes a close look at some the best practices for combining typefaces — as well as some blunders to avoid.

Some Typographic Rules to Remember (PDF)
A nice compact set of typographic rules, adapted from The Mac Is Not a Typewriter by Robin Williams. The document also contains a typographic checklist.

Making Geometric Type Work
For graphic designers beginning to experiment in type design, a geometric or modular typeface is a natural starting point. Illustrator and other programs offer a simple collection of elements such as circles, squares, and triangles which can be combined to create a passable alphabet. Dissatisfied with the limits of commercial fonts at the time, this designer twisted and distorted each character to fit into a few simple, very strict rules of construction. Invariably this produced a wide range of exotic letterforms, some more legible that others.

The Typographic Scale
A detailed introduction to the typographic scale, its history, relationships of hierarchy, its implications and practical applications.

Serif Font Guide
A useful slideshow for those interested in the history of serifs and their usage in design. Prepared by Rob McMinn.

Choosing the Right Font: A Practical Guide to Typography on the Web
Typography is an huge field. People devote years of their lives to this ancient craft, and yet there’s always something new to learn. In this article, the major points that you should consider when selecting a typeface for a website will be reviewed.

Useful Typography References

Typedia: A Shared Encyclopedia of Typefaces
Where do typefaces come from? Who made them? If you want to learn about type and share your own knowledge, Typedia is the right place. It’s a community website and resource to classify, categorize, and connect typefaces. Anyone can join, add, and edit pages for typefaces or for the people behind the type.

Typography Primer: all you need to know in one PDF
This informative PDF from Adobe concisely covers all the basic terms about typography. Among others: Serif and Sans Serif, X-Height, Alignment, Spacing and Choosing and Using Typefaces. A quick download for a nicely designed and easy to read boost to your typography skills.

Typographic Sins
Smart quotes instead of dumb quotes and when to use hyphens instead of a en dash. The most common typographic errors you want to avoid. Here they are all gathered together in one place. Worth saving and re-reading every once in a while.

FontShop Type Education
FontShop provides useful educational resources for typographers and designers interested in typography. The documents are formatted for easy downloading and printing, perfect for the classroom or studio.

Typography for Lawyers
Matthew Butterick prepared a very detailed overview of typographic rules, guidelines and examples for legal documents (e.g. court rules regarding the format of pleadings). As a result, the website is useful not only for lawyers but for everybody who is interesting in typographic rules and its subtleties. The overview is also available as a physical book.

Fonts for iPad & iPhone
Michael Critz gives you a long and handy reference table of the most popular typefaces available for the iPad and iPhone and their classifications.

The Great Typekit Table
Finding a good Typekit font for long blocks of text is hard, but this site made it a little easier. The guys behind Sleepover sifted through the Typekit library and pared it down to the list according to two simple rules: first, the font had to have lowercase, upper case, bold, italic, and bold italic; second, the font couldn’t be hand writing, script, or mono space.

Useful Typography Tools

TypeSet
An implementation using JavaScript and HTML5 canvas elementm which is meant to optimally set justified text in the new HTML5 canvas element, and ultimately provide a library for various line breaking algorithms in JavaScript.

Lettering.JS
Here is a nicely developed lightweight and easy-to-use jQuery plugin for radical Web Typography.

Web Font Specimen
Real web type in read web context. Web Font Specimen is a handy, free resource web designers and type designers can use to see how typefaces will look on the web. Prepare your own web font specimen in three easy steps.

Type Folly
TypeFolly allows designers to easily create beautiful, HTML/CSS3 “type follies�. The tool gives designers the freedom to create beautiful type compositions and test new font combinations. TypeFolly supports the following CSS properties: font-family, font-size, color, letter-spacing, word-spacing, font-style, font-weight, text-decoration, text-align, z-index, line-height, width, height, opacity, moz/webkit-transform, text-shadow and font-face.

Awesome Fontstacks
Easily create bundles of beautifully matching, free web fonts, with failsafe font stacks to back them up. Including ready-to-go CSS code!

Soma FontFriend
A bookmarklet for typographically obsessed web designers. Enables rapid checking of fonts and font styles directly in the browser without editing code and refreshing pages, making it the ideal companion for creating CSS font stacks.

Font-Family.com
Here is a site you can turn to in case you’re wondering what font family a particular font type belongs to. Preview available as well.

EmChart
Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when you want to resize text in your browser. Constantly reaching for a calculator to compute the correct EM value to use every time you need to is also a great way to drive yourself mad.

FontFonter
High quality, screen-optimized fonts that are designed specifically for web use. FontFonter uses custom CSS and other techniques to temporarily replace a site’s font styles with Web FontFonts.

Good Web Fonts for Online Text
In case you don’t manage to find the time to test web fonts, you’ll be happy to discover this site.

Font Previewer
A preview is available to let you see how a font looks like once its size, variant, shadow have been changed. It is also possible to transform, decorate and add spacings. Font family names and their designers provided.

TypeIt
If you have the need to type anything in a foreign language which has accents and other strange-looking characters, and you only have a US keyboard, your life used to be miserable.

Letters & Ligatures
Scroll through and find the letter you have been or are still looking for. Simply by clicking on it, you can paste it into your text or your personal collection of letters.

JavaScript / CSS Font Detector
A JavaScript code that detects availability of a particular font in a browser using JavaScript and CSS.

How to Detect Font-Smoothing Using JavaScript
Some fonts look bad in certain browsers without font-smoothing enabled in the operating system (e.g. Win XP systems don’t have the ClearType font smoothing activated by default). This post provides a way to detect whether or not font-smoothing was being used using JavaScript.

Type-a-file
This tool provides a few looks or “flavors” for beautiful typography on the Web. These “flavors” make use of Typekit for their special font faces.

A Typekit Colophon Bookmarklet
This bookmarklet produces a colophon that gives you the name of the Typekit fonts used on a site. After adding this bookmarklet to your bookmark toolbar, click on it and it will open the site’s colophon. If the site doesn’t use Typekit, it’ll pop up a little alert to let you know.

50 Useful Design Tools for Beautiful Web Typography
When chosen wisely and used carefully, typography can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce very beautiful typography, while others prefer CSS alone to get the typography just right.

@font-face face off
The wast arrey of font delivery services can be confusing at times. @font-face Face Off comparison table offers an overview of many of those services and what they offer. Including number of fonts, foundries and payment models.

50 Helpful Typography Tools and Resources
A roundup of beautiful typography with great typographic techniques and tools. Here is the place you can find a fresh dose of further typography-related resources.

Altfontprev – Project Hosting on Google Code
A JavaScript bookmarklet that allows you to preview how any website would look if a particular font was not available or a different font chosen.

wp-Typography
A plugin for your WordPress engine that helps you improve your web typography including hyphenation, space control, intelligent character replacement as well as CSS hooks.

Type-Related Articles

Ode, a Fresh Start for a Broken Script
This article describes the origins and development of the typeface “Ode”. From the article: “When designing a typeface, I prefer to explore a construction principle rather than revive an existing typeface idea. These principles or writing models are based on the tools and techniques originally used. Understanding these workings are often a great source of inspiration for me.”

‘Dreams’, ‘Stars’ & ‘So Much To Do’
A look behind the design process of prints “Dreams”, “stars” and “So Much To Do”. From the article: “I’ll show all three prints in this article, but for practical purposes I’ll focus primarily on ‘Dreams’, one of my most ambitious prints to date. What follows is an outline of what I wanted to achieve, the lettering styles I developed, and why I produced it.”

The Origins of ABC
A world full of A, B and Cs, but how did they come to being? The Latin or Roman alphabet, the world’s most prolific, most widespread – where did it all start? This site lets you travel much farther back in time when even (agricultural) civilisation emerged itself.

History of Arabic Type Evolution from the 1930′s till present
The origin of the Arabic script goes back to the first alphabets which were created by the Phoenicians. The Phoenicians were living on the costal area of Lebanon, Palestine and Syria. Since the Phoenicians were business traders sailing the Mediterranean, the alphabet influenced all the Mediterranean nations.

The Art and Tradition of Typography
Here is a brief overview of some of the highlights of ‘typographic engineering’Â� from the past 500 years. Usually, it is the development of type and typography for Latin based scripts that are discussed; in this post however, you will learn that there is an equivalent rich history of other type scripts throughout the world as well.

Web Fonts at the Crossing
Latest browsers all known to us have rolled out roughly comparable implementations of @font-face font linking, making it possible for us to experiment with numerous and different fonts on our websites. Richard Fink describes the state of the art, explains various formats and the possibilities currently available for web designers.

What are the Origins of the World’s Most Important Typefaces
Here you can find a selection of stylistically related letters that make up a family of alphabetical letters used in typesetting as well the origins of the most famous typefaces used throughout the centuries.

Why Did I Start a Type Foundry?
Christian Schwartz tells us his story about how he started a type foundry. A pretty successful one.

A few things I’ve learned about typeface design
Gerry Leonidas talks about ‘design’ having memory and being iterative, scale concepts that are not intuitive, tools as concepts and the fact that the Latin script is the odd one out.

Free Fonts: Free Is Not Always Free
They are everywhere – pre-installed on every computer, bundled with software, and offered by the thousands on free font websites. Let’s take a look at the different types of “free” fonts out there.

With Beautiful Type Comes Great Responsibility
Many free fonts can be extremely beautiful. The trick is knowing how/when to use them, their history, your message and how it’s being stated with the type of personality you select.

The Changing Typography of the Web
An article on how the typography of the web has changed, is changing and getting even better!

What is Typography Today?
Kilian Muster talks about how most people think that typography is only about designing and selecting fonts. This is true as far as architecture is about designing or selecting furniture. In reality, neither is a purpose but a means to an end.

Thirteen Ways of Looking at a Typeface
Here Michael Bierut talks about the reasons why one should choose a particular typeface. Helvetica (naturally), Futura, Garamond No. 3, Century Expanded and Bodoni were the only five fonts he had mostly used between 1980 and 1990.

Technical Articles

Using HTML Symbol Entities
Some characters are reserved for HTML markup. In order to display these characters as text, you must enter the HTML entities in the source code. Pass by to learn more.

Adding Subpixel-Hinting to Your Photoshop Text Layers
The usual way to smooth text in Photoshop is to choose one of the different anti-aliasing techniques in the drop down menu. The downside as you know is, that the smoothing of the text is done by grayscale and not by blending different channels.

Using @Font-face for Icons
Conceptually, if we deconstruct a font down to its basic elements, we can make use of @font-face for things other than type, icons. Fonts at their most basic molecular level are a series of vector glyphs packaged up into a single “glyph archive�. We can then reference each glyph by its corresponding character code. With this in mind, the glyphs we reference can really be any vector-based single color image.

@font-face Gotchas
A few worthwhile notes on @font-face that are worth reading over if you geek out about this stuff. Collected by Paul Irish.

How to Use CSS @font-face
This article by Tim Brown prepares typefaces for use on the web, goes through @font-face CSS line-by-line, and get the experts’ take on browser support. Updated with Paul Irish’s new syntax.

Typography Magazines and Inspirational Resources

Type Theory
Type Theory is a journal of contemporary typography featuring news, views, reviews and interviews.

Typecasting
This article provides a good overview of how period type has been used in different ways. The typeface of a film title, for example, usually reflects the era in which the film takes place. Beyond titles, every movie depicts a wide range of props and set pieces, such as newspapers, brochures and sign boards. How can one distinguish between a well-made film and junk?

Pressing Letters
Pressing Letters is an effort to catalog and promote creativity in the letterpress community. The goal is to collect and display references and progressive letterpress design as it is published or found. The creators of the site encourage designers and individual to submit their images, references or ideas, too.

We love typography
Oldie but goodie: a growing showcase colleting type, typography, lettering and signage. Visitors of the site are encouraged to submit their images, too.

Web Font Awards
The Web Font Awards showcases beautiful examples of how Web fonts are being put to use in the design community. Very inspirational.

Letterpool London
Letterpool London is a mass public art project, a celebration of the city’s urban art and architecture, looked at through its typography — the brands, graffiti, instructions and ideology.

Letterpress Daily
David Wolske is collecting printing equipment and wood type and documents his continually expanding collection online.

U&lc back issues to be made available
Fonts.com regularly releases volumse of the classic journal “The International Journal of Typograpics” which was first published in 1974. Herb Lubalin was the editorial and art director of the first issue and his sem­inal design set the stage for future issues of trend set­ting and award winning editorial creations. Volume 1 is currently available for free download.

Type Union
Another place for anyone to share their type work.

A Typographic Anatomy Lesson
Typographers refer to elements of a letterform using a variety of terms that align naturally to architecture or the human body—eye, ear, foot, arm, lobe, leg—and this poster captures many of them. Simply beautiful.

Typo/graphic posters
Typo/graphic posters is a directory of typographic and graphic posters, a passionate project focused on the design community. The goal is to be a timeless source for studies, inspiration and promotion of good design through poster culture and cultivation of typography and pure forms of graphic design.

Trend roundup: Typographic home decor
The best thing about type in print is that it is incredibly versatile — be it small or large scale, blocks of text, single words or single letters, it all looks great in the right context. The same goes for type design in home decor, which explains why there are almost as many great font-related design objects as there are typefaces. This page is a round-up of some pieces of furniture and home accessories that incorporate type in some way.

Typography Served
Typography Served is a collection of sites that showcase category-specific content from the Behance Network.

Typographic Maps
These unique maps accurately depict the streets and highways, parks, neighborhoods, coastlines, and physical features of the city using nothing but type. Only by manually weaving together thousands upon thousands of carefully placed words does the full picture of the city emerge. Every single piece of type was manually placed, a process that took hundreds of hours to complete for each map.

Last Click

TypeWar
A fun site to learn more on web fonts. Note that you will get more points for correctly answering one that other people had trouble with than one that most people got right.

Type Memory
The fun but quite difficult game of Type Memory.

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Inspiration, references, techniques, typography

In this post we will take a drawn design, scan it and clean it up in Photoshop, then trace it using the Live Trace feature in Adobe Illustrator. Live Trace was introduced in Adobe Illustrator CS2 but is still a powerful tool available in Illustrator CS5. This process really gives an artist the freedom to digitally experiment with drawings of any kind. The vector art it produces can be used in numerous ways and is easily customized. My motivation for trying this was originally to make a “growing vine”-type animation in Adobe After Effects. I will show a link to the resulting animation at the end of this tutorial, but for now, let’s get started.

Scan and Clean Up

Scan your sketch and bring the image into Adobe Photoshop. Make sure that the image is Grayscale (Image -> Mode -> Grayscale). Begin by adjusting the image using Image -> Adjust -> Brightness/Contrast -> Levels (Cmd/Ctrl + L)  and/or Curves (Cmd/Ctrl + M) to improve upon the sharpness and contrast if needed. Clean the image using the Eraser Tool (E), trying to get the white areas as clean as possible. Paint the black areas, and alter or redesign any shapes so you are happy with the overall design.

Cleaning up the image is important for getting a good trace in Illustrator. There are a number of techniques that help get rid of unwanted specks and imperfections, here’s the method I used:

Go to Select -> Color Range:

• Sample Colors: Select from drop-down.
• Localized Color Clusters: Leave this deselected in the beginning.
• Fuzziness: Play with this setting to get the edges less, or more, sharp.
• Selection Preview: Select None.
• Invert: Choose this if you would rather preview selected pixels as black instead of white.

Use the Eyedropper Tool to click on your image and to sample the colors you want included. Because we chose the Selection preview (and Invert is not selected), you will see the selected pixels as white, so white = selected. Using the Eyedropper Tool, zoom into your main drawing (Cmd/Ctrl + Scroll) so you can see the pixels you are selecting. View the results on the Color Range preview.

• Add to Sample and Subtract from Sample: Use these Eyedropper Tools (to the right of the main Eyedropper Tool) to select or take away from the preview image.

If you have trouble areas, you can select the Localized Color Clusters box and this will help add or take away from localized areas (not the whole image). When you are happy with the selection, click OK; you should now see dancing ants. Make a new layer and click on that empty layer. Go to Edit -> Fill (Shift + F5) and fill with black.

Turn off your previous layer. The result should be a much cleaner version of your image. It may take a few experimental tries, since every drawing is different. When you are done, save the image as a .PSD file (this is important for editing it later in Illustrator).

Lastly, take the Eraser Tool (E) and separate parts of the image that run together, isolating each component image or shape that you want separated. An alternative is to select small shapes with the Magic Wand Tool (W) and add a 2-4 pixel white stroke (Edit > Stroke) to slightly separate shapes. This is to avoid having large groups of your drawing connected with anchor points when it is converted to vectors. There are methods to cut and separate these areas later (which will be explained), but it’s a good idea to try to achieve this early-on.

Tracing in Illustrator

Open a document in Illustrator and place your clean PSD image. Click on the image to select. Click the small box to the right of the Live Trace button called Tracing Presets and Options and scroll down to Tracing Options.

The Tracing Options dialogue box will open. There are many preset selections to choose from but we’re going to use our own settings to get the best possible trace:

• Check Preview: Now you can see the effects live as you change the settings.
• Check Ignore White: Now the white background is not present.
• Set the Mode: Select Black and White. Leave Raster set to No Image and Vector set to Tracing Results, and check Fills.

Since you can see the results live, it helps to play with the settings a bit to get used to what effect they have. The way to think of the settings is that the left side (Adjustments) resembles Photoshop, and is conditioning the raster image before it is traced; the right side (Trace Settings) resembles Illustrator, and is taking the conditioned rasterized image and converting it to paths. Let’s look at what the most relevant settings do.

• Threshold: This value determines which pixels are white and which are black. Any pixels lighter than the Threshold value are turned white and all pixels darker will become black. For instance, making the threshold higher means that more of the darker pixels will be included in the vector shape.
• Blur: This blurs the original image before its traced, which helps smooth out jagged edges.
• Resample: This may come as a surprise to some, but with Live Trace, a higher resolution doesn’t necessarily translate to a better traced result. In many cases, a high-resolution file can add unwanted complexity to a traced file. So play with this feature to see if your image might do better using a lower resolution.
• Path Fitting: The lower the number/setting, the tighter the image will be traced. If it’s too low you could get a jaggy effect. The higher the number/setting, the smoother the effect, but you lose detail.
• Minimum Area: Defines the minimum area that will be traced, which helps get rid of the imperfections or “dirty” areas you don’t want to capture. This setting determines the pixel minimum area, so anything smaller won’t be traced.
• Corner Angle: Sets the sharpness of the corner angles. The lower the number/setting, the sharper the corners.

When you are happy with the settings, be sure to first Save Preset. This is on the right of the Tracing Options dialogue box and will come in very handy if you need to make some other changes before tracing again. Once you’ve saved, hit Trace. You will then need to hit the Expand button or Object -> Live Trace -> Expand to see the actual results.

Edit and Tweak the Results

Separate Grouped Vector Objects

Be sure to Ungroup (Shift + Cmd/Ctrl + G) (Object > Ungroup) as many times as necessary to make sure everything is ungrouped.

In the above images you can see that I did some editing to my original trace. Some shapes were unwittingly grouped together, despite my efforts in Photoshop to keep them separate. Luckily, should this happen, there are a few easy solutions.

Revise the Original Image:

It is easy to go back and quickly edit your image in Photoshop with a click of a button. The Undo (Cmd/Ctrl + Z) command will need to be applied until you return to the raster image (hence saving the preset, so we can use it again here):

Go to the Links panel (Window > Links) and click on the little pencil icon in the lower right corner. It can now be instantly edited in Photoshop. When the editing is done, close the window and when prompted, choose to update/save the changes in Illustrator. You can now use your preset to re-apply the trace in Illustrator.

Use the Knife Tool:

Another solution is to simply use the Knife Tool (pictured above, it is part of the Eraser group on the tool bar) to cut grouped anchor points apart. It helps to View Outlines (Cmd/Ctrl+Y). You can also hold down Alt to have the knife tool cut a straight line. Zoom in by scrolling while holding Cmd/Ctrl. The Delete Anchor Point Tool (Pen Tool + minus sign) is another tool for deleting anchor points and separating grouped objects.

Live Paint (see “Inspirational Suggestions” section below):

This feature doesn’t actually alter any of the vector groupings; instead it allows the coloring and texturing of any lines or shapes, regardless of how they are grouped.

Reduce the Number of Anchor Points

Live Trace tends to produce an extraneous amount of anchor points in some places. To get rid of some of these we can use the Smooth Tool (pictured in the above image). Click and drag to simplify and reduce the anchor points and to smooth curves.

Touch-Ups

If some shapes did not trace properly (as with the circles in the example below), they can quickly be redrawn. It’s helpful to lock down the original raster art on the background at around 20% opacity.

Final result.

Animated illustration

Design Techniques

At this point you can alter, delete or add to your vector design as you creatively see fit. I experimented with patterns, textures and backgrounds. The main thing is that you now have your art in vector form and can easily alter it in many creative ways. Here are a few brief suggestions for techniques that are useful:

Adobe Kuler

An extension handy for anyone using Illustrator, Adobe Kuler puts a pallet of suggested and popular color combinations that can be added to the swatches panel. This tutorial shows a way to create and load your own Kuler swatches from the Kuler website to your Illustrator library. Another great informational video tutorial: Learn CS4 Design Premium: Using Kuler Color Themes.

Live Paint

Live Paint deserves a tutorial of its own, as there are many features; a quick mention is worth it here, because Live Paint can easily fill in shapes without having to alter the vector groupings:

Select your artwork and go to the Object menu. Select Live Paint > Make. Select the Live Paint Bucket (K) and fill the cells with the desired colors.

Recolor Artwork

Great for playing with color combinations. This feature takes the existing colors and provides complimentary color options which can be viewed instantly. To open the palette, select your artwork and click the little colorful circular button on the top menu, or choose Edit > Edit Colors >Recolor Artwork.  This is pretty intuitive to use, but here is a great tutorial from Mordy Goldman if you’re interested in an in-depth look.

Credits, Links and Resources

• Fridays with Mordy
  I’ve seen Mordy Golding pop up, over and over again, in video tutorials about Illustrator. He has a great deal of valuable information. This link takes you directly to his “Fridays with Mordy: Live Trace in Illustrator” podcast.
• Lynda.com
  This website has many useful video tutorials, including ones on the Live Trace feature. Access them by subscription, or by signing up for their 7-day free trial.
• Creating Vector Content Using Live Trace
  This PDF download has an in-depth description of Live Trace.
• Tweak to Get the Perfect Trace
  From the Adobe website, this gives an in-depth explanation of all the options in the Trace Settings feature.
• Live Trace Tricks in Adobe Illustrator
  This video tutorial from Layers Magazine is more about using Live Trace for color photographs, but I thought I’d include it since it’s a nice variation and describes the Live Paint Bucket feature very well.
• Applying Custom Texture in Illustrator
  This is a nice, simple tutorial for adding textures.

(rk) (ik) (vf)

© Sharon Hart for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: drawing, illustrator, sketch, tracing

Walk into any design classroom, at any college in America, and you’ll see a comfortable mix of male and female students. Turn your attention to the front of the classroom, or down the hall to the faculty and staff offices, and that wonderful gender balance starts to skew. Travel outside the campus, and there’s really no balance at all.

But why? If there are design classrooms across the country with a 50/50 blend of men and women — and in many classrooms, there are more females than males — then why doesn’t the design field represent the same ratio? Why does creative employment still showcase a male-dominated presence? What happens to these passionate and educated females? Certainly, there must be more to it than child-bearing — or is there? Is a more gender-balanced field really all that important? Why, or why not?

Gender disparities in the design field is a controversial as well as a complex topic. Image credit: Choichun Leung

These questions and many others accompanied me to a design and technology conference this past fall. Minnebar, an annual Twin Cities conference that celebrates vision, niche technology and collective wisdom, provided the perfect platform for such inquiries. I hosted a session aptly named “The Equal Sign� to pitch the dilemma of the field not representing the classroom. I played the role of discussion facilitator, and was eager to see where the conversation would go. What I hadn’t realized, was that I wasn’t the only one perplexed by this phenomenon.

First, the Stats

According to Findings From A List Apart Survey 2009, a poll created by and for Web designers, 82.6% of Web designers are male. Ironically, 66.5% of the same respondents stated there is “definitely not� a gender bias in the design field. Web design is just one segment of the design world, but the statistic is nonetheless chilling.

My audience for the session? Predominantly female. It seems the topic itself is more intriguing for women than men. What these women had to say was sobering. One mentioned that it’s foolish to expect a male-dominated field to be able to design interfaces that appeal to how women want to interact with technology. In other words, young girls put off as consumers of technology aren’t likely to desire to create in that arena.

Another common theme during the discussion was that of heroes. So few female designers exist, and of them, few are known superstars in the industry. Of these, even less are known by individuals outside of the industry. Lack of visible female heroes results in lack of female interest. But there are countless male role models in the field; why can’t they be heroes for young girls with computers? The same reason why I’d rather aspire to be Run DMC, than Mariah Carey.

Second, the Perceptions

In the book Unlocking the Clubhouse: Women in Computing, two researchers at Carnegie Mellon University found that “research shows that both males and females believe that males are better than females at computing� (Clarke, 1992; Spertus, 1991). This finding is nearly 20 years old, but this mindset could easily have been held by the parents of today’s college students. Going to college can be hard, but pursuing a degree with little support from mom and dad makes it even harder.

There is also an unspoken expectation that women are very creative and make great print designers, but aren’t wired to splice the intricacies of new and constantly changing software and platforms — as noted in a Fadtastic.net article written by designer Matt Davies. The field generally represents the occurrence of women holding positions in print, illustration and photography, with noticeable scarcity in more technology-dependent roles such as Web design, animation, game design and programming.

Google used to return the correction “Did You Mean: He Invented” for the search “she invented”. It generated a lot of buzz throughout the Web.

Third, the Conditioning

Conditioning is perhaps the most obvious and potentially controversial (but definitely the most changing) of all the reasons why there aren’t more women designers. Video games and scrapbooks are cliché, but a telling, cultural phenomena. Traditionally, young boys have been fascinated with video games. The constant newness of the technological capacities; the integration with other male stigmas, such as television and computers; and certainly the intense competitive nature of the games, whether against a friend or the software itself, have all catered to masculine characteristics.

Scrapbooking, on the other hand — often a self-involved, self-rewarding, aesthetic, process-oriented affair — has appealed to feminine sensibilities. Great; but what do video games and scrapbooking have to do with gender gaps in creative fields?

Everything. And, it’s changing. In the Newsweek article “’Where’s My Crazy Hot Guy?’ A Female Designer On Women and Videogames,â€� award-winning female game designer Brenda Brathwaite confessed, “There was a time literally, within this decade, when I knew every single female game designer out there. Personally….â€� Video games, or more specifically, the video game format, have found their way into almost every media component of our lives.

Log in to Facebook, and in no time you’ll end up fielding requests from friends to play “Farmville.� Shop your favorite store online, and you may be prompted to click a link and dress a sophisticated cartoon character to help you with your purchasing decisions. Save some time at the grocery store by going through the self-checkout line, and you’re confronted with the all too familiar series of buttons, colors and graphics to ease your way through the credit card swipe and out the door.

Video gaming isn’t just something engaged in by teenage football players. It’s a format that is relevant to men and women, boys and girls, and this inclusion of the female population is invariably causing more females to ask themselves how it all works, and how they can be a contributing factor.

Fourth, the Status Quo

All things design — video games, Web design and graphic arts — can bring two genders together and create acceptance and encouragement, which fosters the potential to level the creative employment playing field. You must ask yourself, “Is this a good thing?â€� There are numerous reasons why more women are needed, and need representation; but is the “female designer dilemma” really all that bad? If a city of people stormed the doors of their school district demanding more male kindergarten teachers, they might be mercilessly scoffed at.

Similarly, few are tooting the horn for more female firefighters, or male nurses. Our culture has built functioning gender-based roles, and has birthed young boys and girls excited to fill them. Why fix it if it ain’t broke? If gender balance is achieved in the creative industry, will it be adding new jobs for females, or replacing jobs that males had? If the latter is the case, what will happen to these men? My audience at Minnebar had blank faces, and empty responses, when I asked them.

All of this matters for one reason: I don’t want to face my female students every day with the thought that more than half of them won’t ever be designers, and of the few that do, what exactly do they have to look forward to? They will have to deal with their peers, employers, clients and families being both impressed and confused when their sisters, friends and coworkers create designs that aren’t “girly” and “cute.”

Lisa Firke, a woman embodying that rare combination of female and Web designer, commented on Zeldman.com: “I’m sure it’s not a coincidence that 90% of my clients are women. Perhaps taking women seriously as designers goes hand-in-hand with taking women seriously as Web consumers.�

Sources

Fisher, A. and Margolis, J. (2002). Unlocking the Clubhouse: Women in Computing. Cambridge, MA. MIT Press.

Editor’s Note

This post is an article from our series of “opinion columns,” in which we give people in the Web design community a platform to raise their voices and present their opinion on something they feel strongly about to the community. Please note that the content in this series is not in any way influenced by the Smashing Magazine’s Editorial team. If you want to publish your article in this series, please send us your thoughts and we’ll get back to you.

— Vitaly Friedman, Editor in Chief of Smashing Magazine

(sp) (rs) (ik) (vf)

© John Mindiola for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: community, Design, gender

by Robert Bowen

Having recently published the Illustrator toolbox, we thought we would continue down the print design path and follow up with our next toolbox in this same arena. Welcome to the Ultimate InDesign Toolbox for all of those designers and graphic artists who use this valuable tool for all of their print media needs. This expansive addition to the Adobe Creative Suite family is often overlooked by many in the community, opting instead to use Illustrator alone in their forays into the print side of the game.

Hopefully, through this arsenal expanding expedition we can not only help those already addicted to this fantastic design tool, but perhaps open the door for some of those who have previously avoided it to give it a shot. Go ahead and start sifting through the various links that we have collected below to see which ones you can use to take your proverbial toolbox to the next level. Start loading up on some effective and essential resources, not to mention learning some new techniques that can increase your skill base!

Websites

As usual, the first stop along the way in this resource compilation are some of the best websites that you can turn to which have dedicated themselves to exploring this design tool. Some you might know, and others you might not, but either way they are a great place to start when you are seeking out InDesign related info and resources.

InDesign Secrets is a wonderful online resource, in and of itself, when it comes to learning the finer points of this dynamic design app. Specializing in all things in InDesign.

The InDesigner is an in-depth and informative blog from InDesign specialist Michael Murphy, that harnesses his expertise to help make this app more approachable.

Tim Cole’s InDesign BackChannel is a site dedicated to InDesign from one of Adobe’s own program specialists. Definitely a great place to turn for more insight into the app.

Instant InDesign is another dedicated site worth stopping by if you are looking to learn more about using InDesign to take on all of your print media needs.

InDesign Talk is a helpful e-mail discussion forum for any and all InDesign users where they can submit to share with and assist one another with this program.

InDesign Central is another site that you might want to have on your go-to list when you are looking for opening up all this design tool has to offer. Plenty of resources to beef up your arsenal.

InDesign User Group is an invaluable site for all of those users who are part of groups dedicated to Adobe’s InDesign that acts as an information hub for their members.

InDesign Magazine is an online based PDF publication that is all about Adobe InDesign. This useful electronic magazine is full of useful scripts, video tutorials, and more.

InDesign Docs is another site straight from the proverbial horse’s mouth. From Bob Bringhurst, one of the lead writers for InDesign, comes a blog aimed at helping users get more from this tool.

Seneca Design and Training has a section of their site that is completely fixed and focused on gathering a large collection of some of the best InDesign resources that web has created and delivering them to you.

And we couldn’t leave out of this section without sending you to one last Adobe site, the InDesign Exchange. Another online community for users from the source.

Tutorials

Next up in the toolbox journey are the InDesign tutorials. From across the vast corners of cyberspace the design community has been filling this demand for insightful content that can take the finer points of this design tool and make them make sense in exciting and accessible ways. For a little bit of a skill builder and refresher course in the program, take a gander through the tuts we have gathered:

Layers Magazine InDesign Tutorials is one of the first places that most users turn to when they are looking for learning opportunities, so we thought we would do the same.

InDesign CS5 Video Tutorials is a list of tuts compiled by the Adobe team that break down this design tool for users to help them learn the app inside and out. Most of the tuts are based on earlier CS versions like 3 or 4, but still apply and work with CS5.

TutsBuzz InDesign Tutorials is a fantastic tutorial site with a dedicated ID section that can assist you on your quest to completely master this dynamo of a design tool.

Tutorial Roundup for Getting Started with InDesign is another awesome place to start when you are just getting going using this design application. If you are a beginner or looking for a refresher then head to Blog Spoon Graphics to fix that.

25 Great Adobe InDesign Guides & Tutorials is a wonderful post from The Web Squeeze that can help get you going on the right track for all of your InDesign needs. Definitely worth going through.

Step-by-Step Guide to Designing InDesign Templates from the knowledgable crew over at Peachpit is a fabulous resource for those looking to work on creating templates for your own and others benefit.

InDesign: Benefits of Using Layers is a basic video tutorial from Fast Cash Design that can help you better understand the ‘whys’ of creating your projects in InDesign with layers.

Quick Tip: Using Nested Styles with InDesign is an interesting little tut from the VectorTuts crew that can help you step up the styling of your text in all of your InDesign projects.

Design a Cool Outlaw Flyer with InDesign is another fantastic tutorial that helps take some of the complexity out of this tool and adeptly guides you through putting together a flyer.

Using InDesign to Create a Designer Resume is another awesome tut by the VectorTuts team that will help you install the style and pizazz that your resume may currently be lacking within its borders.

Creating rounded corner boxes easily with InDesign scripts is another useful tutorial for beginners from the dedicated folks over at The Graphic Mac website.

Create a Grid Based Resume/CV Layout in InDesign is another tutorial from over at Blog Spoon Graphics that can help you to create a custom layout that you can fill and use as you like.

Templates

When it comes to help from the online community, templates are a big way that the online masses have worked to make this application that much more approachable. Not to mention the time they can shave off of a project by setting you up with the exact layout that you needed without having to build them yourself from scratch. So scan through them to see if there are any that can fit nicely into your InDesign arsenal.

If you are looking for templates for ID then you should start by going to InDesign Template. This is a new site whose entire mission is one of offering the masses a place to source out time saving templates.

Design Freebies InDesign Templates is a section of this go-to freebie source website that will assist you in filling your arsenal with loads of useful template goodness.

HP Creative Studio InDesign Templates is a collection of useful print design frameworks from the printing specialists at Hewlett Packard. With pages of layouts for you to choose from, expect to be busy for a while.

Presentation Folder Templates is one of the many templates that you might find in the Design Freebies archives, however in case you missed it, we wanted to highlight this addition to their ID layout collection.

Grid System Templates is a section of InDesign frameworks from the The Grid System team that can step your arsenal of templates up a notch for all of your future print design projects.

Stock Layouts InDesign Templates is another site with a section completely dedicated to delivering the design community helpful free templates.

InDesign Templates for Chinese and Japanese Text is an awesome set of useful and uniquely geared templates from the crew at Trans Pacific Digital.

The Papermill Store Brochure Templates is another set of InDesign templates that you might find to be just the missing brochure pieces from your arsenal.

Speaking of brochures, Brochure and Menu Templates are another set that we wanted to highlight from the Design Freebies site archives just in case you overlooked them.

Brand Aid! Branding Templates is a select set of three free templates from the Inkd team that are specifically geared towards setting up your business branding needs from a range of approaches.

Newsprint Templates is the last entry in our template section, and is a unique set that stands apart from most of the others that we have featured here today.

Scripts and Plugins

Speaking of saving time and making the program more accessible, we come to the final section of the toolbox building experience the InDesign scripts and plugins. If you want to get that much more out of your ID experience then just take your time pouring through the handful of resources we have collected for you below and start adding to your arsenal.

Plugins World is an awesome place to turn when you are looking to score a plethora of InDesign plugins to fill your toolbox to the proverbial brim.

InDesign’s Hidden Scripts is a great source for all the scripty goodness that your ID arsenal can hold. Just head over to the C2 crew’s site and dive right in.

InDescripts, or the InDesign Scripting Playground, is a site that is tightly focused on the scripting practices and plugin developments for Adobe InDesign. Definitely a site worth bookmarking.

Speaking of scripty goodness, InDesign Snippets is another must visit site to load up on a number of invaluable ID shortcuts not to mention helpful insights.

InDesign Plugins from the Power Exchange has pages of plugins for you to sort that with dozens of useful additions for print designers working in ID.

Place Auto Synchronizer is a free InDesign plugin from Rorohiko Workflow Resources that will allow you to create a text or image frame that updates automatically.

InDesign CS4: 10 Free Must-Have Plug-ins is a fantastic post from the Lynda team that has collected exactly what the titles implies. Even if there is one on the list that you do not have already, it is worth the time to stop by and grab it.

That’s a Wrap!

That finishes up this edition of the Adobe toolbox building venture. We hope that you have found some useful additions to your InDesign arsenal, not to mention a few tutorials that will help you take on this tool and wield it with more grace and skill. So where do you turn to now when you are looking to get your InDesign resource fix?

Related Posts

• Getting To Grips With InDesign Part 6: Importing Images: this is one part in a series that can prove beneficial for those looking to learn more about ID.
• The Ultimate Round-Up of Print Design Tutorials: is a collection of tutorials that can help take your InDesign projects up a notch.

(ik)

Do you feel that your front-end code isn’t quite up to enterprise standards? Want some good tips on how to take your HTML, CSS, and JavaScript to the next level? Go to Enterprise CSS, Enterprise HTML, and Enterprise JavaScript for loads of useful tips and best practices.

Note: To eliminate any risk of misunderstanding I think it’s best to add that this is a joke – most of the tips are actually anti-best practice. The sad thing is that the front-end code of many “enterprise-level� sites and content management systems really do look like many of these “tips� have been taken seriously.

Some of my favourite tips are these:

• Store your application’s state as a hash in a single hidden input on the page, because page-weight is not my problem
• Creating forms without the need for cumbersome label elements
• Bullet-proof rounded corners that work all the way down to Netscape 4.79
• Liberally using documentation to describe sections of content
• Every single tag gets an id or class, because how else would you style it?

Read full post

Posted in (X)HTML, CSS, JavaScript.