To see the tools I’m speaking of, click on the Pen Tool in Illustrator and hold the left mouse button down. You’ll see the Pen Tool, Add Anchor Point, Delete Anchor Point, and Convert Anchor Point. In addition to these tools, there is another complementary tool. The second tool on the toolbar is a white arrow named the Direct Selection Tool. This will also be used to help your work.

First, the Pen Tool is responsible for creating points and creating curves as you work. The problem is that many of us can’t see how many points we need, where we need them, and how the curve needs to bend as we work. That’s why these tools are helpful – if we don’t get what we need at first, we can use them to clean up the mess and realize our vision of the picture.

The Add Anchor Point Tool is simple enough – if, as you’re creating your graphic, you realize that you need a point somewhere you did not initially draw it, you can add the point later. This is very helpful because if you don’t have a point to work with, you can’t bend at that spot. See the example below for pointers.

The Delete Anchor Point Tool should be self-explanatory, but many people question the need for it. The reason you would remove anchor points is this: as you’re working, the more anchor points you have – the more potential you have for lines bending, stretching, and skewing. If you don’t need the power of a point in a given spot, you really don’t want an extra point sitting there. It makes your life more complicated. The animation below shows how removing an anchor point can resolve an issue.

Now we get to the fun tools. A common problem I’ve had to deal with over the years is my inability to get curves right the first time. The Convert Anchor Point Tool and Direct Selection Tool allow me to change a curve many times over, including creating curves that the Pen Tool by itself can’t create. Let’s start with the Convert Anchor Point Tool.

The Convert tool allows us to create a curve where there wasn’t one in the first place. In the example below, I actually create a straight line out, then back. Afterward, using the Convert Anchor Point Tool, I create a curve by clicking on one of the end points and pulling out; then clicking the other end point and pulling out.

The Direct Selection Tool allows me to click any point and do one of two things – either change an existing curve, or move the point altogether. Simply click on one of the extended poles coming from a point and drag it back and forth to see the change of the curve, or click directly on a point to shift that point. It is extremely valuable when you realize, for example, that a dog’s snout is far too long!

Finally, if you return to the Convert Anchor Point Tool – it also allows you to create a curve that is different on either side of the point. If you want a wave instead of an arc, that’s how you do it.

Stick Around

In the next installment of this tutorial, I’ll show how to use the Pen Tool to create some very interesting characters.

Until then, please feel free to check out our classes in Adobe Illustrator to give you more experience with these tools.

Del.icio.usDigg

Pen Tool Basics

The Pen tool is otherwise known as the Bezier curve tool. The Bezier curve was invented to draw smooth, curved car lines for the automotive industry, and now has been used for any curved drawing in digital format. The basic idea is that a computer would prefer the ’shortest path between two points’ – drawing a straight line – instead of an arc of some kind. What came about was a system of points with an added component – direction and velocity. With direction and velocity, a computer connects points the same way a car driving quickly would – long, sweeping curves.

To draw with the pen tool, not only click to draw a point, but also hold the mouse button down and drag. This will add the directional component to the points.

With this tool at your disposal, you can draw nearly anything you can imagine – you just need to know how to make it work for you.

Click and Drag – Where?

The idea of click-and-drag with the point is to give the line that ‘leaves’ that point a direction to go. If I click and drag up, like the image above, the line wants to leave the point going up. Then, when drawing the second point, dragging up means two things – the line ‘leaving’ the point goes up, but also, the line entering the point comes in from the bottom. That’s why the animation above has an S-curve. The line leaves the point at the left going up, and goes into the point at the right from the bottom. The line must bend in the middle to make that happen.

Basic Drawings: The S-Curve

To draw a basic S-curve, the line must leave the first point in a single direction, and enter the second point from the opposite angle. This necessitates the S-bend in the middle of the line.

Basic Drawings: The Horseshoe

Drawing a horseshoe, a single bend, can be done two different ways. Possibility #1 – create 2 points, and have the line that leaves both points go in opposite directions. Possibility #2 – create 3 points, and only bend the point in the middle.

Stick Around

In our next installation, I’m going to discuss how to make the pen tool a little more user-friendly. When I was starting to get the hang of things, using the complimentary tools to the pen really helped ease the transition.

To learn more about the Pen tool and Bezier curves, try out our classes in Adobe Flash, Illustrator, and Photoshop. You’ll see it in action until it becomes second nature!

Del.icio.us Digg

This site is fairly one-dimensional, but it delivers on its dimension. As you can see, there are two panels on the screen. The one at left represents the ‘visual’ of your finished product. The panel at right is the code that creates that product. In most WYSIWYG web editing programs, you can pull sliders and enter values to change the formatting. Now, however, you have a real-time view as to the results.

When working with CSS, probably the biggest problem first-timers have is a desire to work ‘outside the box’ too often. While it is true that CSS permits a very wide range of formatting, the problem is that we are all constrained by what our users can support. That means that if you pick a weird font, and the viewer of your website doesn’t have it, the viewer won’t see it the way you drew it up.

The best recommendation I can give to the beginning CSS artist is – work within the simplest of solutions, but do it creatively. An example of this is that, while Arial and Verdana are the most widely-used fonts on the Internet, you can still keep them fresh. See the shot below:

By adding a slightly different value in ‘line-height’, ‘word-spacing’, and the like, you can get something that barely resembles the text of so many others’ websites. And you get it with only a .00001% chance that the user will see something different. That’s really important.

Oh, and of course the reason I love the site so much: I didn’t have to pull 1.5 em, 2.2pt letter-spacing out of thin air!

To further discuss web standards, best practices, and great websites, check out our 8-hour session call Web Design Theory and Best Practices. It’s worth your time, I promise.

About the Book

Nancy Duarte is the CEO of Duarte Design, a Silicon Valley company focusing on presentation design. They are the group that helped Al Gore with his famous ‘Inconvenient Truth’ presentation. Nancy knows her stuff.

She set out to write a book that “covers how to create ideas, translate them into pictures, display them well, and then deliver them in your own natural way. It is NOT a PowerPoint manual.” Indeed, it is anything but a PowerPoint manual. Instead, she focuses on what makes a good transition vs. a bad transition; how to let the slides speak for themselves; and how to best integrate yourself into a presentation experience – instead of making your presentation into a ‘read the bulletpoints’ exercise.

There is so much about successful communication and successful graphics in this book, that it really is two things: a business communications book, and a design book. Pick it up for either of those two reasons.

Contents

Slide:ology begins with chapters entitled ‘Creating a New Slide Ideology’ and ‘Creating Ideas, Not Slides.’ These are two important chapters for getting you off the metaphorical couch and into the game. If you aren’t ready to communicate in a new, more effective way after these chapters, you should reevaluate a little. They get at the heart of what is wrong with presentations in today’s world, and set the stage for some really important chapters regarding graphics and animation.

Once you get through the beginning, planning phases, this book becomes less about business communication and more about the fundamentals of good design. Chapters regarding how to effectively display diagrams and data lead off – if you’ve ever put up a slide trying to tell someone about ‘the numbers’ going up or down, PLEASE read these chapters a couple of times. Then, there are five chapters simply about color, alignment, pictures, and movement. These chapters pertain to anyone hoping to design anything. These chapters are why I wholeheartedly recommend this book not only to presentation designers, but beginning designers of all kinds. If you’ve ever wanted to know why a particular color made you feel a particular way, Nancy addresses it.

Finally, there are two chapters that bring it back home to business communication. The first is interacting with your slides. As this blog goes on, I’ll be addressing presentation skills – but I think Nancy does a really great job of beginning the process. We don’t all have time to seek out a public speaking coach. For the rest of us, we need to pick up some skills and hints from anywhere we can. The last chapter is simply Duarte Design’s manifesto – the five theses of the Power of the Presentation. They are simple and to the point, and I think they are right on the money.

My Favorite Points

As someone who straddles the line between public speaker and design professional, I’m sucked in by nearly every word in this book. However, here are my three favorite individual pages:

Page 72: Highlighting What’s Important

I think we all fall victim to the ‘I need to get this done’ mentality from time to time. When this happens, we start thinking that we are communicating successfully… but something falls flat. People leave the presentation without a drive, a motivation. Why is that?

It’s because we don’t focus properly on what’s important. On pages 72 and 73, Nancy focuses on how to emphasize the important information in a chart. Her lessons, though, can be applied to literally anything. With the correct focus, even given only a short period of time, we can deliver the crucial information to our audience.

Page 186: Taking Lessons from the Movies

I legitimately had never considered what gave me uneasy feelings while watching animation. Pages 186 and 187 dissect what movement does to the viewer, and I think it really adds to my skillset.

Page 253: Treat Your Audience As King

This is a very simple directive, and one that I remind myself of at least twice a week. This pertains to many things in life beyond the presentation stage, and I have to hope that I’m treating you, my reading audience, as king. Please feel free to comment on our postings anytime – we’d love to hear what you think!

In Conclusion

I’m sure you can guess by my gushing here that I wholeheartedly endorse this book. To summarize, I think that it is stunningly effective at delivering a huge amount in concise form. I’ll try to strive for that goal in this blog, as well.

Slide:ology is a powerful book for designers and communicators alike. If you’d like to learn to communicate more effectively in a business environment, try out any of our Professional Development sessions; I’m particularly fond of Presentation Skills for the Professional. Also, as a designer, you may be interested in classes about Web Design or Print Design.

(1) Animation

You may feel you’ve heard it all before about animation. When trying to create an effective presentation, it is important not to overanimate. This gets pushed by a lot of people to the point where they simply make the statement: ‘Don’t use animation.’ I won’t say that.

Animation can be a punctuation to your presentation that helps drive a point home. The most important thing you can remember regarding any kind of design is that you shouldn’t use a particular tool because you can. The tool should be used to its best effect. In the case of animation, too much animation just becomes noise. If everything is animated, you can’t tell what’s important.

So, what’s the right amount and type of animation?

The right amount: I’m not going to cop out and say ‘enough.’ There is a lot of ‘feel’ involved in using the right amount of animation, so try two things – first, try animating no more than two items in your entire presentation. One is better. If you do this, you’ll start to train yourself about what’s most important, and what can use the animation the most. Second, surf the internet. Look at the really professional websites out there – then write down ‘how much’ animation was used, and what was the ‘right use’. You’ll find the animation is still used very sparingly.

What is the right type of animation: the right type of animation is very simple.

Does your animation assist in telling your story? Communicating the information you need? If the answer is no, you’re using the wrong animation. Animations that build one idea on top of another, or that develop the relationship between two things, are good things.

One last pointer: speed up your animation. Do it now. Every person who is new to design creates animations that are interesting to them, but too slow. It’s because we like to watch the animation and make sure that it works the way we want. For the person watching the presentation, though, it comes off as ‘look what I can do!’ Every professional animation you see on TV happens faster than you’d think.

(2) Text Quantity Per Slide

Unfortunately, one of the most-asked questions in presentation classes is ‘how much text should I put on the slide?’ Everyone’s heard the ‘Seven bullet points with seven words’ or ‘No more than four bullet points’ or ‘no less than 32pt font’ rules. Immediately forget every one of them.

The problem with having a lot of text on your slide is that your audience reads your slide instead of listening to you. If they can’t hear your message because of other things distracting them – that is the definition of noise.

I recommend to every student to put no more than a single idea on a slide. That’s not a single word, or even a single phrase – a single idea. An idea can be the comparison between three things, but only that comparison should be on the slide. If you make the slide busier by trying to explain a second idea, your audience will lose the message.

The biggest complaint I hear after that recommendation is that the audience will be taking the slides away with them, and they need to contain all the content. To that I simply answer – put it in the notes field of the presentation. If it is on the slide and it detracts from your communication, find another way to provide that information.

(3) Design vs. Decoration

I know what a lot of readers are thinking after reading my request to reduce text on slides; you’re waiting for me to tell you to use a big, pretty picture on the slide. I’m not going to do that.

Sometimes, a big picture of something is exactly what the doctor ordered for your presentation. However, never, never put anything on your slide that conflicts with your message. If you’re telling people in your company that a new product will make a significant profit, a picture of a woman in a field smiling does not help the message. Either your slide communicates, or it detracts from your communication.

One of the easiest ways to keep yourself sane when designing is to ask the question: ‘Is this for decoration?’

If the only purpose of something in your slide show is to make it prettier or more interesting, remove it. If it helps communicate, then it is part of your design.

To hammer this point home, I couldn’t find a single reason to add a picture to this post. So I didn’t.

If you’d like to have a longer conversation about effective presenting, please check out our classes on PowerPoint, PowerPoint 2007, Presenting Data In PowerPoint, or Presentation Skills for the Professional.

“The human brain likes patterns.”

When I say that, I don’t mean that we like paisleys or flannel; I’m saying that our brains latch onto repetition. Here’s a real-life example:

Let’s say I have a quarter. What are the odds I get heads when I flip it? 50-50 – even odds. What about the next time? The next time? The point is, that no matter how many times I flip the coin, I always have the same chance of getting heads and the same chance of getting tails.

But, in real life, when you flip ‘heads’ three times in a row, most of us would bet on tails ‘because it’s due.’ In reality, nothing about the pattern of three ‘heads’ in a row has any bearing on whether the next one is heads or tails. Our brains latch onto patterns, even when there isn’t one there!

How do we use this in design? Simple. The more patterns we repeat in our design, the more our audience ‘figures out’ what we’re doing. The more you can figure out a design, the easier it is to use. Now, how do we apply that to typography?

One of the simplest, and most repeated examples of bad typography choices is the constantly-changing font. I just received a promotional email earlier this week that included 7 different fonts. I can tell you from personal experience – it was not a good-looking email. I spent most of my time reading the email thinking ‘why is this so strange?’ By keeping a consistent font throughout a design, we cause less confusion with our audience. Our brains calm down because they can recognize the repeated choices.

At the same time, if your entire document contains only one font, pretty soon you’ll start to feel bored. There’s a fine line between calm and boring, and you don’t want to end up on the wrong side of that! So how do you spice it up? You choose a complementary font.

It’s very important to understand the idea of a ‘complementary font.’ To see this in exercise, check out the figures below. In the first graphic, your brain again is confused, and you may not be able to pinpoint why. In the second, there’s a clear distinction between the different pieces of text.

The reason the second figure is so much clearer than the first is this: the two bits of text in the first figure are from the same ‘family’ of fonts, the sans-serifs. One is Arial, the other Verdana. They’re so similar to one another, with subtle differences, that you’re more focused on the distinctions than the text on the page. By selecting one serif and one sans-serif (Times and Arial in this case), we create a clear difference between the fonts that’s easy to see. It calms the brain, while at the same time creating enough difference to make it interesting. Again, the most important thing to remember here is – create patterns the brain can easily identify, and your design will be more widely useable.

Try out the following ‘complementary’ font choices in your next design, and you’ll see it come together a lot more easily.

To have further conversation about font choices in design, try out our courses Web Design Theory, the Guided Web Design Lab, or the Guided Print Design Lab. You’ll be able to discuss directly with someone who has practical experience in the field.

Photo editors are continually faced with the need to correct color in photographs – making a vacation photograph less ‘reddish’; turning a cool picture Black & White; bringing out the bright colors to make a picture ‘pop’. Until version CS3, your option was to click the Image menu, slide down the menu to Adjustments, and make a selection. There are a lot of very powerful tools on this menu, but the drawback is this – if you realize it’s a mistake, you’re left Undo-ing backwards until the change comes off the photo.

The new alternative: Adjustment Layers. Many of the same tools on the Adjustments menu are available through an Adjustment Layer, and the benefit is that you can simply alter the layer, or delete the layer. It makes an already powerful tool powerful AND dynamic. To give you an example, I’ll try turning a photo Black & White:

First, find your Layers palette on the right side of your screen. Then, click the button that looks like a black & white cookie at the bottom of the palette. You’ll see options for Levels, Color Balance, Black & White… a lot of the good features you need. Let’s try Black & White.

Notice that you get all the same options from Image -> Adjustments -> Black & White. However, when you click OK now, you have a new layer sitting on top of your original layer. And there are four very powerful options at your disposal.

#1 – you realize that you need to alter your choice. Bring your mouse to the layer with the Black & White choices, and double-click. You’ll get the exact same panel, with the same choices you made earlier. Make an adjustment and click OK – you’ve got a different flavor of Black & White.

#2 – you’re working on the file, and would really like to see the photo in full-color again (temporarily) as you’re working. Go to the layer with your Black & White adjustment, and click the ‘Eyeball’ icon. You’ll get your full-color version back, and you can always turn the ‘Eyeball’ on again to see the Black & White version.

#3 – You realize, three weeks from now, that you actually need the file full-color. Click the Adjustment Layer, and click the ‘Trashcan’ in the bottom-right corner to Delete the layer. No matter when you need to undo – you can.

#4 – You want to do one of those trendy photos where part of the photo is Black & White, and the other part is full-color. Simply click the Adjustment Layer’s Layer Mask icon, and paint with a black paintbrush anywere you want to see color again.

I think that if you use Adjustment Layers, you’ll find the flexibility really benefits your end product. If you’d like to get some practice with the tool, try out our Adobe Photoshop course. Good luck!

The website Kuler from Adobe (pronounced ‘color’, if you can believe that) is a very powerful tool for the forces of beauty and useability. Try out this link to see what I’m talking about: Awesome Color Picker. You’ll need the latest version of Flash Player to get it to function for you. Let me walk you around some of the possibilities:

First, at the very top – do you want to register on this site? That’s a good question. The short answer is ‘not yet’. You can use the functionality of Kuler without a registration. If you’d like to save color schemes for later use, or to throw them out to the community, you’ll need an account. Let’s not get ahead of ourselves.

Next, what is the color scheme that I see in front of me? It happens to be one of the more popular saved schemes that a user has created recently. If you look at the list of schemes directly below it, you can see that clicking one of your options on the list changes the scheme above. Pretty nice, to be able to use color schemes that others have created and still others have voted in.

Finally, you have the bottom-left corner. You can see that you’re currently in the Themes section and browsing some Highly Rated schemes; you can also search by key terms for a scheme that does what you need it to do. Anytime you like, click the button that looks like color sliders (see inset), and you can get the number values (HSV, RGB, CMYK, HEX) that represent the scheme you like. Then use those number values to input into the program of your choice (Photoshop, Dreamweaver, the like). One of my favorite features, though, is the button that says ‘Create’. I’ll click there and dive into more possibilities.

As you can see, you’re currently creating a color scheme that adheres to a color theory rule called ‘Analogous’. This means that the colors within the scheme are all on the same part of the color wheel, and all have the same base color. As you can see, this results in a scheme that works, but is very one-note. This can be perfect for deciding which colors to use in addition to white, black, or brown.

If you change rules, you’ll see that the markers on the color wheel slide around, giving you greens with reds, or even yellows and blues with your reds (Superman color scheme!). Then, when you think you’ve seen enough from the red end of the spectrum, feel free to grab the markers on the wheel and begin pulling them around the wheel, or in and out. A color from the outside part of the wheel is very ’saturated’, or has a lot of pigment, whereas the ones from the center of the wheel are washed out, or ‘desaturated’.

Between these two possibilities (using someone else’s scheme or creating your own), you should be pretty well set on colors for most of your designs. However, there are times when you need a little something more. For example, if you’d like a design that feels ‘beachy’ or one that reminds you of a warm autumn afternoon in the Northeast, you may not be able to find the exact colors that ring true. For that purpose, you have the option to Create your color scheme From an Image. Simply click that option on the left, then upload the photo of your choice. Kuler automatically pulls complementary colors from the photograph. It’s a beautiful thing.

Learn iT! offers courses that use these tools regularly. You may want to check out our Adobe Illustrator line, or perhaps come into our Guided Web Design Lab. This will give you ample opportunity to select complementary colors and see if they work for your designs!