Icons can be a pain when it comes to web design. Designers who haven’t been in the game for long might not have picked up the basic illustration skills that more experienced designers use to create their own icons suited to a project. Similarly, more experienced designers just might not have the time to create a new icon set for every project.

On top of all that, it can be difficult to make sure your work looks different when a combination of current design trends and your own signature design style limits your options. Using great icon sets, available for free, is one way to reduce the similarities between your projects and make them stand out on their own.

Furniture Icons

Social Media Rounded Square Icons

Web Dev Icons

User Icons

Social Media Icons

Simplito

Twenty Icons

gCons

8 Social Icons

Free Social Media Icon Set

Social Media Shields

Web Icon Set

Pictograms

Simple Icons

3D Glossy Icons

Do you have any favorites? Do you use icon sets, or do you prefer to illustrate your own?

Having already written a few articles on typography (here) and (here), I thought I would continue the discussion, focusing on the basic principles of typesetting. When it comes to setting type, text entered straight into Illustrator or Indesign does not cut it. There are a few techniques that designers are meticulously taught that help them implement readable, flowing text that’s compelling and easy on the eyes.

First, the basic of the basics:

Tracking

Tracking refers to the overall letter spacing in an entire line or block of text. You should tread lightly when playing with the tracking sizes – increasing the tracking too much will make the line will feel too light and airy. Leave the letters left floating in space, and they will no longer resemble words, let alone a full sentence. Track things too tightly and the eye will no longer recognize the legibility of the line or word within that dense mass of information. There’s an expectation when dealing with typography; we look at words every day. While they may be set in different formats (a display typesetting for a poster, or a paragraph set in a book), the shapes of our letters are usually pretty standard (even though some font designers like to be “creative” here). When you start futzing with the negative space around each letter, you run the risk of changing that letterform’s look, and thus its meaning altogether.

Leave the creative tracking for large headers or other display type settings that only apply to limited words or phrases. Done well, it can create an elegant, clean appeal. Done poorly, it can be a glaring sign of an amateur.

To perform a quick and dirty test of your tracking, get about 3 feet (or more) away from your computer and squint at the paragraph. If it’s too dark of a gray, it’s too tight. If it’s too light gray, it’s too loose. You want a nice even mid tone of gray for your squint test.

Kerning

Kerning refers to the space between individual letters, also sometimes referred to as “kerning pairs.” Glyphs — either keyed into the computer via font design software or set in a press a la olden days of yore — have a block of negative space attached to them. In order to make the spacing visually correct, the designer will usually have to go in between the letters and kern by manually shifting each letterform to make it feel correct. It is a subtle art of adding and removing white space to improve readability and flow.

A great trick that I’ve learned when working with kerning is to flip the word upside down and backwards. While it may take some getting used to in terms of cursor placement, it’s a great way to examine the letterforms as abstract shapes. This way, you aren’t hung up on what they are saying, but rather just focusing on the spacing of what’s around them. I’ve also found that stepping away from the computer to give the screen a nice squint/glare test to catch any errant spacing works wonders as well.

Leading

Leading, as in that pencil has a sharp point of lead–ing, refers to the vertical spacing of lines within a paragraph. As a general standard, the leading should “always” be set 2 points higher than that of your typeface. So a 10 point typeface size would require a 12 point lead in order to feel legible on the page. Of course, like everything else in design land, designers always want to play with these rules of thumb (not that there’s anything wrong with that).

If you increase the leading too much, then no matter what it is that you’re typesetting, it will read like an English Comp 2 poem. Conversely, if you set the leading too tightly, you’re bound to feel unbelievably claustrophobic when you read the text.

Focus on the piece and its messaging, and don’t go crazy here. One or two points extra is usually plenty.

Setting Large Amounts of Text

When you’re setting a large amount of text, like a book or magazine, you can sometimes take liberties with the leading and tracking to suit the overall appearance of the text rather than focus narrowly on each paragraph as a standalone item. Of course you’ll be going through the text line by line, but you’ll be doing it to keep this unruly amount of information visually sane. One thing you will come across are “rivers,” or wide amounts of gaps in large amounts of text. These are fixed by tweaking the tracking slightly and adjusting the kerning. Lots and lots and lots of kerning.

I learned this lesson in what feels like would be the method from “the old country.” I type set an entire paragraph of an Italo Calvino book. Letter by letter. Painfully tedious you might say? And you’d be right!

But, I learned how to polish my typography, and I guess that is all that matters.

Another thing to watch out for when dealing with large batches of copy are widows and orphans. Widows are the one lonely word sitting on its own line at the bottom of a paragraph, and orphans are lines that are far too short that appear at the beginning of a paragraph or page. Typographer’s are a funny breed, what can I say.

You can rectify these issues the same you would a river, by carefully tweaking the leading and tracking, and seeing where things can be adjusted here and there by kerning.

Hyphens also count against you here, so watch out! You definitely do not want to have three hyphenated words at the ends of three consecutive rows in a paragraph, or shame on your typographic sensitivities (or really, your lack thereof).

Justifications and Rags

If we’re already to the point in our relationship where I can wax poetic on the creative merits of tracking and leading, then let’s get down to business and talk about justification.

Not the kind of justification we’re all used to, but the good kind. The kind that sets type rag right or rag left, or even just straight down the middle. Centered, you might call it.

Rag What?

Rags are what typographers refer to the jagged (or ragged, get it?) line that is created by a paragraph of text.

Rag left is when something is right justified (so that the left edge is the ragged one), but the most common format is the rag right/flush left alignment, with the right edge being ragged.

When you set type with a ragged margin, you need to pay close attention to the shape the paragraph is forming. A bad rag is one that forms a distracting shape — usually “S” shaped, that bulges and buckles throughout the paragraph. A beautiful rag is one that has short differences between the lines, creating a nice even pace throughout the paragraph.

Above is a pretty decent rag right/left justified. I’d say this is the most common in the West as it’s how we set our reading direction (starting left and ending at the right).

I also wanted to show a rag left/right justified above. I also left the rag a bit sloppy so you could see what a pre-set rag looks like. Take a look at how short the 4th line in the first paragraph is, and then the rounded shape of the 2nd paragraph’s rag. This is what typographers pay attention to when getting really into typesetting.

There’s also centered justification, as shown above. Sometimes the computer will force the line or word to stretch out – via extending the tracking – to fill the entire line. You’ve got to fix these ostracized words. Go into the line and restrict the leading until it’s visually the same as the previous lines, fill in as necessary. I also would like to point out the stack of hyphenated words in the last paragraph, and rivers so wide you could take a lovely dip in them without ever nudging anything around it. You fix those by altering the tracking and kerning until they no longer stretch as far and wide as the eye can see.

You can also control the rag edge by having manual page breaks (holding shift and hitting return after the word you’d like to end the paragraph), adjusting the column width, or altering the copy.

No matter what you are typesetting, I promise you that you will always have to correct your computer’s idea of a rag. That is… if you want great typography.

I love talking about typography like this, and would love the idea of continued dialogue. If you have a question, comment, or have seen something you can’t unsee, in terms of typography of course – let’s hear about it!

All of Adobe’s flagship programs have undergone upgrades, and Illustrator is no exception. Illustrator CS6 has gone above and beyond its previous versions with a many major features that long-time Illustrator users have been requesting for a years. While there have been countless enhancements and upgrades in Illustrator CS6, here are the most noteworthy new additions.

The Interface

Just like Photoshop, Illustrator’s interface has undergone a complete overhaul. It is darker and more dramatic, making your illustrations come alive with color. This is very helpful, because it allows you to focus on your work and not have the aesthetics of your Illustrator project contaminated with a lot of outside clutter.

Now, users can name layers without dialog boxes, and every panel has been optimized to provide the best user experience. Also, the icons have been redesigned to be more intuitive, menu placements within each panel have been rearranged, and functions are defined more clearly.

Gradients on Strokes

This is a feature that users have been requesting for a number of years. Not only do they look great and work just like the gradient fill, but you also have extra options and features that really stand out.

The options for these new stroke gradients are great as well. You won’t find the options in the Stroke Panel like you might think; the gradient options for your strokes are actually found in the Gradient Panel. You have three options to control how gradients act in relation to your strokes:

Apply Gradient Within Stroke — This option allows you to create a gradient that spans the area of the stroke as the gradient is shown in the preview.

Apply Gradient Along Stroke — This option wraps the gradient around the contour of the stroke, allowing you to start with one color at the beginning and transition through any number of gradations as the gradient arrives at the end.

Apply Gradient Across Stroke — This is an amazing feature that everyone has been wishing for. The gradient goes across the stroke and bends with it, giving it a dimensional look.

You can also treat the colors of your gradient just like any other gradient. This is amazing, because you can actually control the opacity of each individual color in your gradient. You could create realistic glass and semi-transparent objects quicker and easier in CS6. Combined with the mesh tool, your vector illustrations will look much more realistic.

Patterns

With Illustrator CS6, making custom patterns has never been easier! To find the new Patterns options, go to “Object” > “Pattern” > “Show Options.” A panel pops up and gives you several options for making your own custom repeating patterns.

Your first step will be to click the Pattern Tile Tool icon at the top of the panel. This activates a visual square that shows you the boundaries of the area used to create the pattern.

Next, make sure that “Move Tile With Art” is unchecked, as this can be really annoying when trying to create your pattern. If you do leave this option checked, the tile will move every time you create a new vector object, which doesn’t help at all when you are tweaking your pattern. Anything that you create inside of the square will be repeated and formed into an infinitely repeating pattern. This alone would be great, but there is more to the pattern options:

Under Tile Type, you can specify the type of tiling pattern. The default is grid, which can produce some very elaborate results. Applying a slight gradient on the diagonal lines, you can add some dimension to your patterns. The next option is Brick by Row, which would be very difficult to make on your own, and would take a lot of careful planning and a lot of valuable time to get everything to line up.

There is also Brick by Column:

Hex by Column:

And, Hex by Row:

There are two menus that make a huge difference in the outcome of your patterns. The first one is the brick offset. This determines how each row or column is staggered when using the brick options. ½ offsets each row equally, so if you are looking for a symmetrical pattern, this is the right choice. All of the others offset the previous and next rows by a fraction, making a less symmetrical pattern.

The other option is the Overlap Option, which allows you to determine the stacking order for the parts that make up your pattern. This can drastically change the look of your pattern with a single click. See the example below:

You can also quickly name and save your patterns to use later. The pattern options panel is an amazing tool that will make the tedious task of creating seamless and complicated patterns lightning fast.

Live Trace

Live trace has been renamed Image Trace, and it has been strengthened and optimized over previous versions. There were many times in the past where I have used Live Trace, and the action created way too many anchor points within its tracing, making each vector more complicated. With the Image Trace revamp, your vector tracings should be much more simplified. Also, the smoothness of your high fidelity (photo quality) traces should be much better.

Original

High Fidelity Photo

As you can tell from the examples above, it is hard to tell the difference from the original photo and the vector tracing of it. It also has its own panel that allows you to tweak your changes and toggle between presets.

Text

One small feature that has been in Photoshop for a long time involves the ability to cycle through your typefaces with the arrow keys. Thankfully, they have added this feature in Illustrator CS6. To cycle through your typefaces, highlight any text in your document, then highlight the typeface name in either the options bar at the top or within the Character Panel itself. Then, use the up and down arrow keys to cycle through your typefaces. This is a great feature, because you can quickly find just the perfect typeface for your project. Sometimes you just want to try out different ideas, and now you can do this quickly and easily in Illustrator CS6.

Conclusion

With all of the newly-added features in Illustrator CS6, you will be able to create your work more quickly and more easily than ever before. Many new features that veteran users have been wishing for have been granted. Illustrator has been overhauled from the ground up, and it is built to be faster, more intuitive, and streamlined.

Have you had a chance to explore Illustrator CS6? What do you think of the new features?

Jessica Greenwalt is a freelance designer based in California. She has over 10 years of design experience, and she’s landed a variety of well-known clients, including LinkedIn, SmugMug, and Marvel Comics. Jessica’s work includes a variety of mediums: print, web, mobile, illustration, and even crafting. Earlier this year, Jessica founded Pixelkeet, her own design firm. You can see more of her work on her Behance portfolio and her website, and you can follow her on Facebook and Twitter.

Heal-thy Staffing Inc.

Build a Bird iPhone App

Behr Digital Article: The Arts & Crafts Style

The Alchemist Special Collection Book Design

Ira Meyer Photography Website

Designers often view negative space (or “white space”) as a sign of an incomplete design, or space that needs to be filled with… something. Your simple design work can look stellar already, but if you notice a substantial amount of empty space left, you may be compelled to put in peripheral embellishments that don’t really enhance the design. While the end result may seem like a more complete or thorough job, the reality is that those last-minute additions to the design are often purely there to take up space.

Although negative space is inherently empty, it can strengthen a sense of simplicity in your design, and it even afford the opportunity for some creative, clever design ideas (we’ll get to some of those later in the article). Believe it or not, a design that has a large amount of “white space” can be a favorite for clients and a source of pride for a designer. Don’t be a pessimist and view your negative space designs as “half-empty”; the use of the white space itself can be much more effective than filling it with minutia.

I’ll admit that I don’t use negative space as effectively as I could, or as often as I should, and perhaps you don’t either. To fully understand it, let’s start with the definition. Negative space (or white space) is the empty space in between the design elements of your composition. Whether you are creating a logo, designing a flyer, or assembling a website, negative space is essential to your design. Negative space or white space (I’ll be using them interchangeably) helps create a harmonious balance within your project and helps prevent elements from looking too cluttered. The main reason that a person will avoid negative space is because they don’t know how to utilize it. Below, I have provided some tips to consider (and some examples to admire) in order for you to embrace the positivity of negative space.

Planning

Planning your negative space is important, especially if you’re like me and you’d rather just jump right in and let inspiration hit you when the time is right. Though planning uses up time that we could spend designing, it is completely necessary if you want to create a design with effective white space. Whether you are sketching out ideas the traditional way or the digital way, you’ll want to have some pre-planned idea of what you want to create. Focus on the placement of each element. Assign a square or rectangle to act as placeholders for each design element instead of drawing everything out. Even if you decide not to stick to the placement, you are able to see how much space you will be taking up before you do any actual designing.

When mapping out your placement, try to arrange the design elements in a cohesive manner. Placement by size is always a great idea, and it helps prevent clutter and keeps certain elements from throwing off your balance by taking up too much space. Refrain from filling all your white space with information, logos and, designs, no matter how tempting it may be. Make sure to give each element some breathing room so that the viewer can take everything in at their leisure. Remember, if you are designing for a product, give it the centermost placement as it should be the focal point of your project.

Simplicity

Remember the KISS (Keep It Simple, Stupid) method? Well it applies perfectly to the design world as well. Minimalistic designs have become increasingly popular over the years, and much of it has to do with the clarity that comes with simple designs. Minimalistic designs utilize negative space to the fullest and are often preferred when it comes to web designs and logos.

A great way to keep your design minimal and utilize that wonderful white space is to ask yourself which elements of your design are unnecessary. Look over the design and decide what can be thrown out, cut down, or replaced. Doing this will not only significantly reduce the space you would typically use up, but it will also keep your design simple, clear, and friendly. Consider doing the same for the design assets that you use; if you don’t need fancy artwork or highly detailed textures, then don’t integrate them into your work. You can make up for the absence of intricate details by using a colorful background.

Separate

Negative space is a great element to use as a separator, because it automatically creates balance within your design. As I stated earlier, when it comes to planning, you will want to give your elements some breathing room. Regardless of whether your design utilizes a colorful background or not, white space will easily separate unrelated information or graphics. It doesn’t just act as a separator; it also emphasizes the padded elements of your design and makes them stand out from the background.

Size

Size is probably the easiest facet of negative space to master. Rather than just accepting the size of each element as they arrive in your design, make conscious decisions about how big or small each element could be, and how much white space should be employed. Elements don’t always have to be equally sized or enjoy equal amounts of white space, but any of these asymmetries or imbalances should be thoughtfully and intentionally chosen. Equally-sized, equally-spaced elements can convey strength and stillness, while inequalities in white space or size can often convey motion or energy.

White Space Examples

Below are three remarkable uses of negative space. Despite being just a few simple shapes, these logos are clever, thoughtful, and don’t require any embellishment.

Ogden Plumbing

This logo (by Astuteo) has a rare combination of simplicity and cleverness. Note that the plumber is holding a plunger, which is comprised entirely out of white space.

Black Cat

The Black Cat logo (by Peter Vasvari) offers another creative use of white space (or, in this case, black space). Note the implied cat in the background identified by his eyes.

elefont

The elefont logo above (by Logomotive) presents a seemingly-simple lowercase “e”, but a closer look shows an elephant’s trunk made out of negative space, which reiterates the wordplay within their brand.

Conclusion

No matter how badly you want to just fill up the entire space allotted for your design try hard not to do it. Negative space isn’t negative in the least, and it can make your designs look a lot more professional and thoughtful. But, make sure to use it carefully; too much space can leave your design looking boring and make you appear like a lazy and uncreative designer. With the endless advantages of using negative space effectively (easy readability, more sophisticated designs, positive reception, improved appeal), you should hopefully stop avoiding negative space and embrace it head on. Hopefully I’ve been able to quell your fears about negative space in your designs and you are on your way to creating some stellar design projects.

Do you have any impressive uses of negative space to share? Do you find that thoughtful use of white space can yield better results than just filling the canvas?

Facebook has finally rolled out their version of a timeline page for brands, so it’s time for a template! With this template, you can quickly create a well-composed Facebook presence for your brand that uses the cover photo and the profile pic together for a stunning effect.

Unfortunately, Facebook makes aligning the design a serious pain. The profile pic gets shrunk down during the uploading process, but even more annoying is how difficult it is to locate the profile pic. To save you a wasted afternoon full of a few choice words aimed at Facebook developers (more than likely accompanied by a massive headache), use the following template and instructions to brand your Facebook timeline much more quickly and easily.

Step 1: Download the Template

First things first, you need to download the template for the Facebook timeline and open it up in Photoshop. You’ll see the handily-labeled layers and the Facebook brand colors already in place.

Step 2: Getting the Lay of the Land

The only areas of the timeline we will be discussing are the cover photo (the large, banner-like area over the top of the page) and the profile pic (the small graphic in the bottom left of the cover area).

The cover photo is 851 x 315 pixels, so design your idea accordingly. The profile pic is 170 x 170 with a 10 pixel border and a 1 pixel drop-shadow/stroke effect. You’re stuck with the border and drop-shadow/stroke. Sorry.

Step 3: Selecting the Right Layers

When you’re ready to drop your own design into the template, copy the flattened design (CTRL/CMD + “C”) and start by CTRL/CMD + Clicking the layer mask on the “MASK” layer. I know this may be confusing, so I’ve prepared a picture:

For many, this will be the most difficult part of this tutorial. Good news: it gets easier from here.

Step 4: Paste Into

Now we’re going to use an obscure feature of Photoshop that most don’t use on a frequent basis. It’s the “Paste Into” command. With the layer mask still selected, go to “Edit” > “Paste Special” > “Paste Into.”

Step 5: Align As Needed

Now, you can simply use the Move Tool with the layer you just pasted to position the design as needed.

Step 6: The Cover Photo

With your pasted layer selected in the Layers palette (my “Layer 1″ below), CTRL/CMD + Click the “851x315-cover” layer to select the cover photo area of the template.

Hit CTRL/CMD + “C” to copy this selection, open a new file with the dimensions of 851 x 315, and paste your selection (CTRL/CMD + “V” or “Edit” > “Paste”). Save your selection to a convenient location. Now you have a cover photo at the exact dimensions that you need for your Facebook timeline.

Advanced Step

Your cover photo may end up with a half cut-off logo like mine. To avoid this, you’ll need to approach Step 6 a little bit differently. You’ll place a cover photo into the template that doesn’t have the logo or design in the profile pic area and do Step 6. Then when you go to Step 7, paste the complete design.

Alternatively, put two layers into the template by repeating Step 4, aligning them, and hiding the profile pic area when you perform Step 6.

Step 7: Profile Pic

Repeat Step 6 above, but this time CTRL/CMD + Click the “160x160-profile-pic” layer. (For those following the Advanced Step: make sure the profile pic area has the proper design ready to go.)

This is where things get a little bit tricky. Facebook requires a minimum size of your profile pic to be 180 x 180px. You may notice that I’ve got a 160 x 160px selection area. That’s because Facebook will shrink your 180px down to 160px. It’s truly annoying, but that’s what we’ve got to work with.

So, open a new file that is 180 x 180 and paste your 160 x 160 profile pic into it. It should look something like this:

Using the Move Tool, Shift + Drag it to fill the layer. Save it and you’re ready to go.

Step 8: Uploading the Cover Photo

To upload your cover photo, log in to Facebook and cruise on over to your page. Hover over the cover photo area, and in the bottom right section of the cover photo you’ll see a box appear that says “Change Cover.”

Click it and choose Upload Photo. Navigate to where you saved the cover photo and upload it. You won’t have to reposition it because it’s perfectly sized already.

Step 9: Uploading the Profile Pic

Hover over the profile pic area and click the “Edit Profile Picture” button. Select “Upload Photo” and choose your profile picture (that’s 180 x 180, but it will render as 160 x 160).

That’s it! You’re all set! Your page is now branded with your profile pic and cover photo matching and sharing a coordinated design. Now, send me the links to your FB brand page in the comments to show off your work!

Thousands of today’s websites share a very similar look and feel. Apart from unique logos and color schemes, many of these “standard” websites are largely indistinguishable from their peers. Because of the uniformity found on the web, adding some illustrated elements to your design is a great opportunity make it stand out from the crowd. Today, I’d like to share with you ten unique, fantastic websites that incorporate illustrated images into the design. Some do this with simple PNG and JPEG files, while others use Flash in order to make the page interactive. I hope you enjoy the list.

Alex Buga

This is one of the most original personal websites I have ever seen. Every area of the website can be viewed by interacting with the objects on the home page. Alternatively, you can navigate the site by clicking on the AB logo at the top left corner of the design to make a traditional navigation menu appear. From the clock on the wall that tells the actual time to the music player that lets you play around with beats and sounds, Alex Buga’s website is a fun website to visit and a great example of what he can do.

Meomi

Arguably the cutest website on the web, Meomi has an interactive design that will make anyone smile. Whenever you scroll over the outside of the design (that is powered by Flash), something happens. For example, the little animal on the right side of the page will play his banjo, and the nearby piano will play piano music.

Pieoneers

At the bottom of the Pieoneers design is an illustrated ice cream character smiling on the moon while sitting aboard a spaceship with a fruit-filled pie on top. I have no idea what the connection is between space and ice cream, but the design highly creative and definitely unique.

The Great Bearded Reef

The Great Bearded Reef is a sharp design that was created for the self-proclaimed “bearded one” Josh Willis in order to apply for the position of “Island Caretaker” in Australia.

Hugs For Monsters

Hugs For Monsters is the homepage of designer and illustrator Joe Lifrier. The top of each page has a unique colorful drawing that showcases his unique style of illustrations.

Deborah Cavenaugh

Deborah Cavenaugh’s homepage looks more like a painting than a web design. The colorful aspects blend into the content area, most notably with the painted search button in the top right corner.

Somos La Pera Limonera

A fantastic illustration of three designers sitting under a pear tree.

The Many Faces Of

A hilarious website that looks at the many faces of Lenonardo Dicaprio, the Goonies, John Cusack, and Alan Rickman. Each section contains a large illustration in the header, as well as illustrated images throughout the content area.

K4 Laboratory

The K4 Lab website has been featured on many design lists over the last few years (and rightly so). It remains as a great example of how Flash can complement a website design rather than hinder it.

Platin

Platin features a colorful, interactive Flash-based illustration that was used to promote a new apartment block. The transitions from one section to another are beautiful.

Which illustrated design is your favorite? Do you think it’s generally better to have an unconventional design, or do you think most projects are better suited for more standard, familiar layouts? Would you design a creative layout with Flash, or would you favor other technologies?

Photoshop is obviously a great tool for editing images, but Photoshop’s extensive color capabilities are often underutilized. Depending on your purposes, certain color modes in Photoshop can transform your work from “properly edited” to dazzling, vibrant, highly colorful images. It doesn’t matter if you are a graphic designer, a web designer, or a photographer; you have to be able to manipulate and correct your colors.

Some people choose to work strictly in CMYK mode, which is limiting, because many Photoshop filters don’t work in CMYK mode. Others choose to work in RGB mode and then switch to CMYK mode after they are done. That is fine, but there can be drastic changes to colors when switching modes.

About Lab Color Mode

Lab color mode is a rarely-used (but extremely useful) color correction tool within Photoshop. Lab mode is made up of three channels: the lightness or luminance channel, and the “A” and “B” channels. The “A” channel is for the colors ranging from red to green, and the “B” channel is for the color ranges of blue to yellow. Lab works differently than CMYK and RGB. CMYK is for print, and RGB is for devices such as monitors, but neither color mode is consistent when viewed on different monitors. When working on your projects, you will find that your images will look one way on one monitor, and completely different on another screen. Lab mode is different, because it is consistent regardless of which screen (or how many screens) you are working on.

Lab mode makes altering colors on your images surprisingly easily, and you can achieve effects that you wouldn’t normally be able to produce in CMYK or RGB. You can invert and change colors, emphasize lights and shadows, and highlight reflections. In the example below, we are going to change the sunset to a nighttime image in just a few steps. Download the sample image of the sunset, found here.

The image offers a nice sunset with a lot of orange and contrasting clouds. If you need to change a sunset to a moonlit image, the best sunset image to use is one where the sun is nice and round (as opposed to one that emanates rays of sunshine). This is because you don’t normally see rays of light coming from the moon.

First we need to convert the color mode to lab. To do this, go to “Image” > “Mode” > “Lab Color.”

We are going to turn this sunset to a moonlit photo simply by inverting the colors in the image. If we were in RGB or CMYK color mode, and we hit Command/Ctrl + “I” to invert the colors, it would also invert black to white and white to black. That is not what we want at all, and fortunately, lab mode offers much better control over our colors.

To invert the colors of your images in lab mode, simply add a Curves Adjustment Layer. In our options, we are going to leave the lightness/luminance alone for now.

Instead, our main focus is going to be on the “A” and “B” channels. Select the a channel, and you will see that the curve adjustment is a diagonal line. Simply drag the low side (at the leftmost point) upwards and drag the upper point (the rightmost point) downward to invert the red and green tones.

Then, select the “B” channel and do the same thing, inverting the yellow and blue tones of your image.

Now is the time to go back to the luminance channel of your image and tweak it to give you the best results. I didn’t actually alter the curve segment itself, but I grabbed the black slider and moved it slightly to the right. This darkens the areas that are supposed to be black in our moonlight transformation.

Lab mode works very well for this purpose. While RGB and CMYK store light colors, dark colors, highlights, and shadows together, lab mode keeps colors and luminance in separate channels, which means that you can alter colors without altering highlights and shadows, and vice versa.

Making Colors More Vibrant

Lab mode isn’t just for drastic night-to-day (or, in our example, day-to-night) transformations; you can also perform more subtle color improvements that carefully enhance existing colors. Let’s take this image of a flower and make its colors even more bold and vibrant. You can start by downloading the sample image from here.

This image is already beautiful, but I am going to show you how the make the colors of the flowers even better, just so you can see how much of a difference a few careful tweaks can make.

Open your image in Photoshop and switch the color mode to lab. Then, click on the “New Adjustment Layer” icon and choose Curves.

We are going to leave the luminance channel alone again, and we are going to focus instead on the “A” and “B” channels. Select the “A” channel, and instead of reversing the position of the points, bring them inward equally. You can tell how far inward you have brought them by looking at the input value to the right of the Adjustments Layer Panel under the curves chart itself. The more you bring each side inward toward the center, the more vibrant the colors will be. Observe below how I moved the points inward toward the center.

Repeat the same process for the “B” channel, bringing both sides inward equally until you are happy with the results.

With this technique, you can get some really vibrant and amazing colors. The reason that you must bring the points in equally is so that your colors don’t breach each other, resulting in strange colors or odd halos in your images. But, if you’re looking for unusual colors or exotic halo effects, distorting the lab mode’s color channels can create some really fantastic effects.

Have you tried lab color mode? Do you work primarily in CMYK or RGB mode? Do you have any preferred techniques for enhancing colors?

My past article on finding the right font for any design was met with some great feedback, so I thought I would divulge a bit further and talk about different kinds of “message appropriateness” issues that can pop up while working in the lovely and subtle art of typography. Now, don’t get me wrong, there are a lot of different opinions on what’s deemed “appropriate” typography and what’s considered “off message”, but this subjectivity shouldn’t stop us from sharing opinions. What’s a typographer to do? Defend your opinions!

These are simply my opinions, tacked onto years of scrutinizing typography for art school training purposes (and working with snobby Creative Directors purposes). If there’s anything in here you find interesting, I preemptively extend an invitation to engage further! Typography and all of its ins, outs, and nuances really tickles my fancy.

When it comes to being aware of typography and the inherent messages within the design of the letterforms (the typographer’s term for “letters”), the best way to start is just to look around you and focus on the font choices. Catalogs, email banners, signage, posters, billboards, TV ads, the list is truly never-ending. I cannot help but swoon or grimace at the design of menus, other people’s business cards, you name it! I even let out a loud New Jersey-esque sound of disbelief when someone uses Rosewood at a design presentation. (The circus kind of Rosewood! Are you kidding me?!) Clearly, the person giving this presentation has never realized that fonts can make or break the impression of the words themselves. It’s how your brand communicates without speaking.

Fonts and Their Inherent Meanings

Just like any creative professional, my design choices are fueled by some conceptual or inspirational spark. Fonts are no exception. With every font creation, the designer is aiming to communicate through that medium. How will the font be used? What do the details of the characters speak to the entirety of that font, and how do those details interact with each other? Is it mainly for one media form, or does it work seamlessly through web, print, TV, and huge movie screens? I get newsletters from type foundries whenever they release a new set, and it always includes a blurb about the specifics of that font.

An excerpt from Myfonts.com, Geetype:

“Geetype was inspired by a piece of cigarette pack lettering by A.M. Cassandre, the quintessential Art Deco designer, famous for his travel posters and for his quirky, unique Peignot typeface from 1937. In extrapolating the short text lettered by Cassandre, Cooke came up with a wonderful set of striking, jazzy lettershapes. Letters like ‘C’, ‘E, ‘F’, and ‘Q’ are positively smiling, beaming with glee. And of course, to g-fetishists the peerless lowercase “g” alone is worth the price of the font. One of the most eye-catching display faces in our collection, Geetype epitomizes the 1920s–1930s mood of Hollywood’s golden era; think Greta Garbo, another ‘G’ with strong, emotional screen presence.”

Forgiving the indulgent typography jargon that makes my heart sing, you see my point. You wouldn’t use this font to sell car insurance, but you could use it for an invite to a New Year’s Eve party.

Fonts and Their Contextual Use Creates Meanings

Setting aside the creative force behind the font, a designer also has to keep in mind the context of the font. Will it make sense in the way you’re wanting to use it? Of course there is a near-infinite amount of wiggle room here. Suppose you’re a designer asked to create a flyer for a wrestling show. If the people running the show have a sense of humor, maybe you could play on the macho factor by using a really fancy script font — providing it was copy appropriate — “Not your granny’s wrestling”  (Grandma’s can enjoy wrestling! Mine loved Sylvester Stallone movies), or something along those lines. It would provide a fun twist on the expected take of heavy, masculine typography. Ironic typography is completely game, as long as you know how to manipulate this to your advantage.

This is where people tend to get tripped up when it comes to working with typography. Take for example, a thorn in my spine since I saw it in January — the 84th Annual Academy Awards! Despite being possibly the most glitzy and lavish night in America, the type choice for this year’s presentation was just not doing it for me. I love the font they used, and they even played around with the “84”, which I really do love. But, they used the wrong font for the job. Perhaps it’s because I’m fully aware of the creation of the font, and it’s placed a heavy bias on me, but that’s just the information-flooded world we live in nowadays! Archer Pro, an adorable slab serif created by the type foundry HF+J (Hoefler, Frer & Jones) for Martha Stewart Omnimedia. Obviously, if you’re familiar with Martha Stewart, she conjures up home cooking, crafting, overall hand-made goodery that smacks you clear in the face with its amazing quality. HF+J had quite a feat, but they nailed it. I mean I have been in love with Archer Pro since I got my little hands on it in 2008, but it has its limitations. I read an article on the versatility of this font back in 2010, you can read it here 

I cannot even imagine what the author thinks of it being used in the same space as Angelina Jolie’s gaunt, gothy leg.

This is the only sample I could find for the 2012 Oscars ceremony, but I think it speaks — I mean glitters — loud and clear. I just think a typeface with sleek lines and sharp edges to accentuate shine and modernity would have been much better here.

Comic Sans is the other font I could speak on and on about! Hundreds of designers’ groans later, it’s still something we’re forced to see on a regular basis for some reason. When it’s used for “important” things (notes, signs, or god forbid an actual logo), it really questions the professionalism of the content it’s formatting. Its only appropriate use is for children, who really respond well to the shapes of the letters. That, and well, the speech text bubbles in comics.

I found a site here, that offers some alternatives to the font. Get some help, comic sans lovers!

I feel like this example should speak for itself, but just in case it doesn’t, let me ask you this: Does it look like the message is centered around loving anything like crazy? Is it crafted lovingly? I think you should spend a little more time visually expressing how much you love this person, if you truly do love them so much. I read this, and I instantly felt like this is a sarcastic note about how much this person was not loved. I just hear Steven Wright with his deadpan delivery, instead of the intended honest and sincere declaration of sentiment. Case in point, match the visual execution with the message. I get that it’s supposed to feel personal, but it just feels so “slapped on” that it detracts from the sentiment.

Ranny & Jo must not get that much business with their sign saying more I SCREAM, instead of ICE CREAM. Maybe they thought that the font looked frozen. Either way, it just looks like you should cue the dry ice, the cackling laughter, thunder, and lightning, which is the complete opposite of fun frozen treat time.

Aside from the childish font for a saying that’s meant for adults (I’m assuming here), the composition and spacing of everything just kills me. I found this while searching for typography, and it’s being sold as a poster from a design company. I’m all for spreading the love in the community, but if you’re going to call yourself a designer, you should probably know the rules! I mean, you are at the critical eye of designers like me, and trust me, I am all too aware that I am under the sharp, critical eye of readers like you! Without meaning to offend, If you’re going to jump into an industry, make sure you at least acquaint yourself with the basics. Leading, tracking, and kerning shouldn’t be foreign words if you are wanting to explore typography in an expressive way.

Alright alright, enough with the negatives already. I thought I’d throw in an example of good typography. While I could care less about the choice of typeface (and I am at a loss for why it’s set on an image of mountains), I do enjoy the witty take on the reality of being bipolar. It’s a nice visual contrast combining the linear slab serif of the “bipolar” and the playful script in “Awesome.” The type choices are used to strengthen the message. The moral of the story? Make deliberate, defensible typography choices, and your design will speak loud and clear and support your message well.

What do you think? Have any examples of bad typography that irks your nerves? Tell me all about it! I love engaging people in typography discussions. Even if my opinion differs than yours, it’s still a valid opinion, so share it!

Several weeks ago, I wrote an article defining the ten essential elements of a great resource library. I heard that folks were interested in seeing how one goes about managing and organizing their ever-growing library of resources and inspiration. My answer to this problem is Adobe Bridge. I’m sure that — just like the majority of Adobe programs out there — there are 3 million and one ways to approach any task or dilemma, but I’ll describe how I’ve managed to make Adobe Bridge work for me. I’m sure that quite a few of us received Adobe Bridge as part of Adobe’s Creative Suite, and I bet some have overlooked Bridge and focused more on Photoshop, Illustrator, and the other popular Adobe programs. If you’re one of those who has mastered Photoshop but hasn’t delved into Adobe bridge, I’d highly recommend that you give it a second look. If you work with dozens of clients and hundreds of files, Bridge might be your most important and helpful Adobe app. For Bridge veterans who have some tips on how to make Bridge more efficient, spill em! It’s great, and I can only imagine how much better it can be with your expert advice.

Now, back to how to use it:

Basically, Bridge works like a big, fancy Finder/Explorer window, allowing you to view any folder as a file list, a set of nested directories, or a grid of thumbnails. All file formats are welcome, and Adobe native files (.ai, .psd,etc.) are easily viewable, which is more than we can say for a lot of other programs and operating systems.

Working with Metadata and Keywords

Quite possibly the best of my many favorite aspects of Bridge involves the tagging of individual assets with keywords, which allows for a seamless transition of concept, design, and execution. Embedded through XMP, all of the carefully-written data is layered directly into the files, which will transfer beautifully to, say, a developer needing to access the same information. If a certain file or file type is unable to save the data inside of it, Bridge attaches the information in the form of a separate, attached file containing all of the lovely keywords you’ve attached. Ah, technology, I love how thoughtful you can be! Obviously, this makes searching through media and staying organized a breeze, as long as you’ve labeled your files sensibly.

Creating Collections

Another easy way to organize your design library is through creating collections. Working as an aggregator of sorts, you can create collections in Bridge pretty much the same way you would create a new playlist in iTunes. Come to think of it, think of collections like an Adobe file-playlist creator: it doesn’t move the file from anyplace to anyplace, but keeps all files you select in one searchable, identifiable locale within Bridge. For the sake of this tutorial, I created a collection using some of the inspiration I collected for Eli’s Enlightenments. I use collections for when I am too lazy to individually sort out my burgeoning (or, in some cases, overflowing) inspiration folder, when I need to compare client brands for case studies, or to just look at my media in a solid, organized overview sort of capacity.

Is Bridge Overkill for Your Organizational Needs?

If this whole Bridge thing is too much for you, you can always try the quick and dirty version of organization — labeling the individual file.

Let’s call this file-naming method an organizing pre-step. Sometimes life is just too hectic to organize as you collect, so I have a big catch-all folder on my desktop for all of the ADD-driven inspiration that I collect daily. Every week (or two weeks, or month, or whenever I remember/feel guilty, you know the drill), I go through the directory and try to sort things out. One of the ways that helps me whittle down a huge file list is going through and labeling what it is about the image that I find so inspiring, and why I pulled it. Maybe it’s the lettering, or treatment of that text. Maybe I just enjoy the logo, or the subject matter is provocative or hilarious. Whatever it is that sparked my interest, I write it out. When I need it, I use my search bar like my own personal computer’s Google and have at it, and what I’m looking for will usually pop up– and sooner, rather than later.

(Note: When you’re labeling these files, try to substitute spaces with hyphens or underscores so that you don’t run into any issues with file systems, servers or apps that don’t like spaces within file names.)

Are you an Adobe Bridge veteran, or is it a neglected icon on your desktop? Which Bridge functions work best for you? Do you have some great organizational tips? I know I can definitely use more and more as the days go on!