Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Appearance may not be everything, but how something looks has a fundamental impact on how it's perceived, what it communicates, and whether it succeeds. In this course, author John McWade of Before & After magazine shares foundational graphic design techniques that will make your page, screen, product, or presentation look and perform its best.
These design essentials can be used by nondesigners as tips, tricks, and shortcuts, and by professionals as building blocks to greater understanding. Each lesson is a short, easy-to-understand how-to that can be applied regardless of the brand of software and hardware you use. This course was created and produced by the Before & After magazine team. We are honored to host this content in our library.
Color is like magic. We are so attracted to color and so repelled by color we don't like that the coolest design in the world could be presented to us, and if we don't like its color, we don't like it. This is true of clothing. It's true of cars. It's true of all kinds of consumer products. They can have the greatest design, the greatest cut, and the fabric, the nicest material, the highest quality craftsmanship.
And if we don't like the color, we're not going to buy it. So what I like to show you here are several ways to get good results using color. These are easy repeatable things that you can do working on really almost anything. In this case we're going to work with an image and make a magazine spread. So it begins with the photograph.
I've picked this photograph on purpose, this particular picture on purpose, because it's quite neutral. Flash tones, light brown hair, neutral. What we want to do is begin by finding the color palette that's in the picture. The easy way to do that is to pixelize this photo. This could be done in Photoshop. It could be done in Illustrator. And reduce it to large squares. This averages these colors together.
Once you get experienced with this, you don't have to take this step. But for now, it's worthwhile. Just select colors from around the picture. You're going to want to get the big colors, meaning that colors there's most of. You're going to want to get some small colors, the colors there is least of. You're going to want to get some shadows and some highlights and some midtones.
Now what you can do is take any of those colors to color the facing page. You could do a medium brown, a dark gray, a light sandy tan color. They all look nice. The reason they all look nice is because they are all native to that photograph. So they just automatically go with it.
You can get great results this way with almost with any photograph. Use colors that are in the photo. Depending on your picture, sometimes you'll find that you need a wider range of colors. In some cases pulling colors solely from the photo can make it look a little flat. To do that you'll need to bring in the color wheel. The color wheel we use is just an old fashion artist's wheel with the three primaries of Red, Blue, and Yellow on it.
It's used for paining. This is not an RGB wheel that's on your computer in Photoshop, or combination RGB/CMYK wheel. It's used strictly as a guide. The wheel that we use has 24 different colors on it and shades from light to dark. Anyway, bring the wheel over and now select a color from the photo. Your first step is going to be to find it on the color wheel. It doesn't have to be an exact match.
This is just a guide, but find it on the wheel and that color will then give you what we call a monochromatic range from light to dark. And you can use any of the tints and shades in that range will work as a color for you. A little wider range of color, the colors we call analogous colors. That's the color that you find in the photo plus the colors immediately to the right or left of it.
Sometimes you can go to two slots to the right two slots to the left. In this case, we're going for a fresh lime green as well as yellow. Analogous colors always work well together. That's because they have a lot of color in common. In this case, all three of these colors are full of yellow. And because the original color came right from the photo, they just will all go naturally with the photo.
If you use colors on opposite sides of the wheel, you have what we call complimentary colors. These have nothing in common. Compliments are the highest contrast colors. Purple and yellow which is what we have in this case also have the highest value contrast of all colors. Purple being very dark, yellow being very light. They, too, will go with your photo, as you can see here.
Purple facing page, light word summer. Again, both go with this kind of neutral image, but they are all based on or both those colors are based on the colors that you see in the image. Similarly, you have the triadic colors. These are colors in thirds around the wheel. In this case because we're starting with yellow, our triad happens to be the primary colors of Yellow, Red, and Blue. These colors always go together also.
Note here that we're using Red, Yellow, and Blue pretty much at full strength, fully saturated, or almost fully saturated. But if we change that, if we keep the Red, Yellow, and Blue, but move the sliders out toward the shades and the tints, we get a much more desaturated look. So it's a lower key look, more sophisticated look. You might call it a classier look, but they are the same basic colors, just different tints and shades.
Here we've stared with a darker shade of Yellow, which changes the other two triads as well. Very handsome results. In this case, we're using a very deep Blue Green and a very light Magenta to go along with the sandy color. Just by changing the two to a lighter blue green, we now change the look of the page as well. All of these combinations are easily used with any photo or in any design.
Remember that you can use light and dark shades of the same color and they'll always work, giving you good-looking repeatable results every time.
There are currently no FAQs about Before & After: Things Every Designer Should Know.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.