Sure You Know the Software,But Can You Paint a Picture?
Written by Gravity Switch Co-Founder Jason Mark, this article is about his experience teaching digital graphic design in 1998 and still hold some useful lessons on how to build a powerful image.
Meet José Delamo. He's got the latest and greatest software for creating 2D and 3D graphics. He's got every new filter, every gadget and gizmo that he needs to transform ordinary images into masterpieces. He calls himself a computer artist. Well, he uses all the fanciest computer software and equipment, so that means he is a computer artist, right? No way José.
José knows how to use the software, but he doesn't know how to develop his idea, which is his main problem. There is more to computer art than just mouse clicks and keystrokes, amigo. This article will discuss the basic principles of image composition, giving you a valuable tool set for creating great work. The concepts here apply to art in all mediums, not just that which is created on a computer. Hopefully, they will help you as much as they've helped our friend José.
A Little Planning
Before starting any new project, you'll want to take a few moments to reflect on what your goal is. This is a good time to think about the look and feel, or style, you want for your picture. What is it that you want it to say?
Suppose you are designing a telephone company advertisement. You may want to communicate the fact that it's a friendly, reliable service that has been there for its customers throughout the years. A good way to show this, is to use old black and white stock photos of people on the telephone or photos of grandparents with kids. Maybe the images could have rough edges and be scattered about the page, like old photographs in the family album. The font should be fairly traditional, and the text should help to convey the message of security and dependability.
On the other hand, the same telephone company may decide to convince customers that they have the most advanced technology with an unparalleled satellite system. The artwork and layout should be very high tech and sharp. The font should be strong and sans serif, and the text should include some catchy words like Internet and World Wide. Folks go for that.
Choosing the best style is important as it will help set the mood for your picture. Although, it can sometimes be tempting, it's generally not good practice to mix the characteristics of different styles. For example, in a lemonade advertisement, suppose you show and old 1920's jalopy bumping along a country road on a warm summer's day with grandpa in the driver's seat. If the text is done in an ultra-modern font, it will detract from the pleasant image of lemonade in the summertime. Remember also to be careful that the style you choose is appropriate for the subject.
A Place for Everything and Everything in it's Proper Place
Once you have determined your goal and have a notion of what style you'll be using, you need to decide what things will go where in your image. It's best to make several thumbnails sketching out the different ways to lay out the picture before starting the "real thing." A thumbnail is a small sketch (sometimes no bigger than a thumbnail) of an image that you're going to make. It doesn't show details, instead it deals with the focus of the image. It can be done on the computer or by hand using pencils or markers or whatever you choose. It will help you to decide where to put things in your picture.
A rough layout of an image can help you to test whether or not the viewer's eye flows where you want it to. Also you can make sure that that viewer's eyes don't get lost and wander off the page.
Making thumbnail sketches is crucial as it gives you a place to determine the flow of your image. The flow of an image is simply the path that the viewer's eye follows when viewing that image. In western countries, text on a page is written so that we start reading in the upper left corner of a page and continue to the lower right corner. So, the flow of a written page is from the upper left corner to the lower right corner, because that is the path our eye takes to absorb the information printed there. In art, good page flow usually starts somewhere on the upper left side of the page since that's where we are accustomed to looking first.
Thumbnail sketches can help you to test whether or not the viewer's eye focuses where you want it to. Also, it's a good place to make sure the viewer's eye doesn't get lost and wander off the page.
The flow should go over any important segments of a page like a logo or a product, and unless there is a facing page to which your image corresponds, it's best not to have the flow continue off of the page.
Generally when planning an image, you should try not to center things. Instead most artists and designers use the Rule of Thirds which says to put the main focus points at 1/3 horizontally and 1/3 vertically in your image.
Landscapes cause us to expect the bottom third of an image to weight an image down, and the top third to float off the page. Doing this is called grounding your picture, and it helps the viewer to feel more comfortable with your image.
The Rule of Thirds says that the main focus points of your picture should happen on the red lines. Even images that are centered usually have something major happening on these red lines.
When I suggested that José make thumbnails he didn't want to waste time planning. He said "time spent planning is time not drawing, so that's time wasted, right?" No way José. I've been teaching José to make thumbnails and to deal with the flow of his image, and lately his work has been 100% better.
I also suggested that José keep a folder of advertisements and photos that he likes. Now, if he gets stumped for an idea, he just flips through examples of images he likes and becomes inspired.
Negative Space
Equally as important as where things are in your image is where things are not. Our eyes are drawn to the contrast between busy and simple or between dark and light. These contrasts are what makes an image interesting. For this reason it is important to have negative space, the part of the image where things are not happening. Because of negative space, the parts of the picture where things are happening stand out better.
The other day José was drawing in Photoshop and created an apple. He was so happy with how the apple turned out, that he created a page full of apples. Notice that it's really hard to focus on any one actual apple. This is because there is nothing immediately surrounding the apples to make them stand out. In fact, you probably already noticed that the apples on the border stand out better than the center apples. This occurs because they are at least partially surrounded by negative space. In this image the black is the negative space.
Often artists will look at the image and do what is called a silhouette test with the negative space. This means looking at the image in black and white, where black is negative space and white is positive space. When you look at your image this way it should make some sort of sense.
Notice how much more interesting the apple is when it's surrounded by negative space. The contrast between the plain black background and the colorful apple in the center is what gives the image flow and focus. Notice that your eye is drawn right to the apple? Even if you consciously start your eye looking in some other place than the center of the picture, it always wants to move to the center to look at the apple. The flow of this image is to the center since that's the path your eye follows when it looks at it.
Negative space can draw the users eye across the page just as easily as bright splotches of color. It can slice through the page, creating drama and motion within a still picture. In the picture below with the man and the sun, the negative space forces your eyes to look right into the sun. No matter where you try to look at that image, your eyes get drawn right back into the sun. In fact, it feels like you have to work to not let your eyes move to the sun. The sun creates its own type of negative space here by being so plain. Unlike the rest of the painting, which is made up of scratchy, busy brushstrokes, the sun is one solid primary color.
The silhouette of this image is very strong. The black tree and person create a negative space that cuts across our foreground.
Negative space doesn't always have to be black. Notice in the picture below of the Indian that the sky is the negative space.
It's important to pay attention to where you put the negative space in every image you create and use that space effectively. Does it draw the viewer's eye to the subject? Or is the subject hard to find? Is the background of your image more fun to look at than your subject? Used correctly, negative space directs the viewer's eye to your subject. As you can see, it is a big player in the flow of your image since it helps to dictate where the eye will travel when viewing an image.
How much do you show?
José finds that when he looks back on his work from the week before, it is usually not quite as good as he remembered it. Sometimes he finishes a picture and looks at it and thinks that something isn't right. He's not quite sure why, but he's not happy with it. Many times, simply trimming down one or more of the sides, can help make an image stronger. This trimming down is called cropping.
Different cropping changes the focus of an image. The focus of the left picture is the face of the Indian. The focus of the right picture is the head of the horse. In the picture of the Indian in the Negative Space section above, the focus of the image is the Native American and the horse together.
Often cropping a picture on one or two sides can dramatically increase the impact it has on the viewer. It adds tension to the picture, as it is left up to the viewer to resolve what is happening off the page. By cropping a picture, you're sending the image off the page, into the viewer's space. It is usually not as effective to show everything you draw because it removes the viewer from the picture.
When an image is cropped off the page it is said to bleed off the page. As a general rule, it's best not to have your subject bleeding off more than two sides of the page. If you let it bleed off too much, your subject becomes so big with so little negative space, that the viewer can't focus on it. Ultimately, some smaller part of your object will become the focus.
It's also a good idea to have subjects face onto the page, instead off of the page. This will help focus the viewer's eye, and keep it on the page. The picture below is an example of a badly cropped picture. Notice that the Indian is facing to the right, but the extra space is behind him. It would make more sense to have the extra space on the right side since that's the direction he is facing. Notice how your eye slips off the page to the left when you view it?
An image that José cropped down. Notice that the Native American is facing right off the page, so the viewer has no idea where he's looking. Also the extra space behind him doesn't make sense.
Many photographers carry around large L-shaped pieces of card board. Using the cardboard L's, they can block off part of a picture, and find the most interesting way to crop an image. One L acts as the upper and left boundary of a photo, while the other L acts as the lower and right boundaries. By changing the size or the open rectangle formed by the two L's, the students can see different pictures. Then they can decide which appeals to them most when printing a picture. This trick can be used for any image you create.
You can move L-shaped pieces of cardboard over your picture varying the size and position to see what it would look like to frame different sections of your image. Cropping is very easy to in programs like Photoshop, and if you don't like the crop, just Command-Z to undo.
Color
Everyone has a favorite color. José is pretty open minded and he changes his favorite color daily. He usually doesn't think too much about what the different colors mean, he just puts down whichever color is his favorite that day.
But color is a very important segment of an image. Each color has certain properties attached to it that we all expect. What do you think of when you think of red, or blue, or green? The same color in a different contexts can have opposite meaning. For instance, green could show sickness and mold or life and growth.
Red: Fire. Passion. Blood. Red is a powerful color. Because it is such an eye-catching color it is used on stop signs, and stoplights. Roses, apples and strawberries are red.
Orange: Cozy. Warm. Orange also makes you think of fire, but its image is more a cozy campfire instead of a roaring inferno. Brown is just a darker shade of orange. Wood, dirt and skin are shades of orange. Construction signs are often bright orange since it is such an eye-catching color.
Yellow: Sun. Flowers. Yellow is not as intense of a color as red or orange. Yellow tints can make black and white pictures seem old and comfortable.
Green: Forests. Life. Sickness. Green can be a comfortable color that makes us think of plants and trees. It can also be eerie and spooky, like a wizard's spell or a monster's brain.
Blue: Sky. Ocean. Night. Blue is a cool impersonal color. Tinting a whole scene blue, with bright white highlights is the best way to make a scene appear to be nighttime.
Purple: Royalty. Sunsets. Like blue, purple is a very impersonal color. It often serves as a bridge from the other colors to blue. It can help draw attention to a segment of a nighttime scene.
There are basically two types of colors: warm and cool. Warm colors are reds, oranges, yellows, and greens. They are daytime colors and make us think of comforting and familiar things such as campfires, grass, and the sun. They jump out at our eye and catch our attention.
Blue and purple are cool colors, and they make us think of nighttime and snow. Cool colors tend to fall into the distance. The sky and the ocean and impersonal things, such as metal and ice are cool colors. Distant mountains and cities appear bluish, even though they may not be blue at all when viewed up close. The color of faraway objects is cooler and less intense.
A little warm color in a cool scene or a cool color in a warm scene really stands out. The contrast between these colors will draw the viewers eye and can be used to create a glowing effect. Look at the blue picture of the house in winter shown above. It uses warm and cool colors together. Notice how the warm colors coming out of the windows really draw your eye across the page?
I've taught José a neat little trick to make his pictures look like nighttime. He used to darken the whole scene in Photoshop by making the shadows and middle tones darker. The problem with this is that it becomes difficult to see things in the scene. A better thing to do is make the whole scene with blues and purples. This gives the impression of nighttime, without making the picture dark. In general, shadows tend to be a cool color, so José now uses dark blue or indigo for shadows. Even in daytime scenes cool shadows can make your final image much more interesting and believable.
Where is your light coming from?
Take a look at the red picture above with a heart. Notice that the heart doesn't cast a shadow on the background, but it still is affected by the light. It has a dark side and a light side. When drawing an image, or composting various images, it's important to remember where your light comes from.
We are used to sunlight or ceiling lamps lighting our world from above. Therefore we expect images to be lit from above. The light helps to direct the flow of an image. Since good flow usually goes from left to right, it's a good idea to imagine a floating light bulb somewhere over the upper left hand corner of the page. Imagine that this light bulb lights every object in your scene giving each object a bright spot in the upper left side, and a shadow one the bottom right. If your image casts a shadow on the background, this shadow will be below and to the right of your object.
Dealing with lighting can be tricky when you're using scanned images. Because the pictures are already taken, you don't have a choice of where the light is coming from. Instead, you have to do your best to line up all the pictures you have, and try to get their light sources to be consistent.
Having lighter and darker sides to objects helps to give a scene weight. The contrast between light and dark makes an image more interesting to look at. By using gradients and different line thickness, technical artists and cartoonists are able to give their subjects weight.
Color Palettes
When dealing with colors it's important to think about which colors work well with one another. You should think about the color palette for your image before you start drawing. A color palette is basically the set of colors that is used in any given image. I've put the color palette next to most of the pictures in this article. Notice that although the artists mix the colors on their palette, none of them have more than 10 colors in their palette. Unlike computer artists who have 24bits of color at their fingertips, painters usually have a very limited number of colors at their disposal. Using a small palette (usually no more than 10 colors) will help to focus your picture towards what you originally envisioned.
When you use an airbrush, or a gradient fill, or pretty much any other tool the computer will automatically mix colors to create more, so even though you only start with a very limited number of colors, you'll be creating images that use a much larger palette.
When designing your palette a color wheel is a good way to consider what colors you will use. Red, Blue, and Yellow are primary colors. These colors can be mixed together to form secondary colors (green, orange, and purple). Every color has a complementary color, which is exactly across from it on the color wheel. Therefore the complementary color of red is green, of yellow is purple, and of blue is orange. Uniforms, advertisements and flags are often designed with primary colors because they stand out strongly. Printers print out images using CMYK colors (Cyan=red, Magenta=blue, Yellow, and blacK).
Using complementary colors is a good way to draw attention to something. Just as a black circle on a white page will stand out, so will complementary colors. In the Van Gogh flower picture for instance, the orange and red flowers stand out well against the blue and green background because they are complementary colors.
Sometimes the effects of color palettes can be more subtle. For example, the other day José got his hands on a new clipart CD. Right away he grabbed an image and added his name to it. Unfortunately, he didn't take into account the palette of the picture. The dark black lettering forces his name to stand out in a jarring fashion from the background image. If José had selected a color that was more consistent with the color palette of the picture, his final image would have worked much better.
Pulling it All Together
Why does something catch your eye? It doesn't just happen by accident. It happens because of the way the elements on the page are placed. It happens because of the flow of the page. All of the other things we have talked about, negative space, color and palettes, lighting and cropping combine to produce the final flow of your image and contribute to the overall success or failure of your picture.
After working on an image for a while it's a good idea to step back at least 5 or 10 feet from your image. Right now you're not paying attention to details, just look quickly. This is about how much attention your audience will probably pay to any given thing you make.
What's the first thing you notice? Then where does your eye go? Does it focus in on any particular section or just float around the page? If it floats around the page does it end up floating right off the page? Does the image make sense? If you saw it on someone else's monitor, or in a magazine, would you stop and look closer?
Of course, the most important question is: What do you want your viewer to see in this image? Should they focus on the product in the center of the page or on the logo in the corner? Do you want them to have a feeling of motion, or is your image of a tranquil resort island?
You should ask yourself these questions to test whether your image is a success or not. Naturally there are very good reasons to break any of these rules when designing an image, but you should be aware of them. If you decide to break these rules make sure you do it for a reason.
A Note About Typography: Serifs vs. Sans Serifs
Gutenberg invented the first printing press in the 15th century. Since then, people have tried to fit as many words as possible on the pages of the millions of books, magazines and newspapers that have been published. Because so much text was so close together it became difficult for the readers eye to follow what was written. The readers eye kept slipping off the line. To fix this problem, fonts with serifs were invented.
In addition to providing decoration, serifs help the viewers eye to follow a line of text. Notice as you read the text in this article, that the serifs at the bottom of letters almost form a line below each word? This line helps to keep your eye on track. A good example of a font with Serifs is Times. Times is the font that was designed for the New York Times newspaper, and the goal was to make the font as small as possible, while still readable.
In the middle of the 20th century there was a big push from Switzerland in graphic design towards sans serif fonts. The Swiss speak French, so they named this type of font sans serif, which is French for "without serifs". Helvetica and Geneva are great examples of a sans serif font. They came directly out of the Swiss school of design and are named after a cities in Switzerland.
Often fonts with serifs are thought of as more professional. They are used by banks, investment firms, newspapers, magazines and books. Sans serif fonts are usually thought of as more fun. Logo's and magazine covers are usually done in sans serif fonts. Also, because of the limited number of pixels on a computer screen, computers usually use sans serif fonts. Fonts like Times and Courier don't look very good on a computer monitor.