In this segment, you’ll realize the importance of color knowledge in your graphic and web design sphere. Most of what is discussed below is used in Photoshop color management and image manipulation schemas.

The Basics of Color Theory

Hue

When you look at an object that has color, you ask “What color is that?” Colors come from various wavelengths of light and hue is what defines each unique wavelength. In other words, hue represents different colors. We can have hues of red, orange, green, yellow, blue, and violet.  The ‘H’ in the diagram below represents all of the various hues in the visible color spectrum.

Saturation

You’ll notice in the above diagram there is another variable represented by an ‘S’. This is also known as the saturation. Most of you probably get an idea what saturation does. If you’ve played around in Photoshop, you can saturate or desaturate an image based on your preferences. Referring to the diagram above, when you change an images saturation, you’re also changing the diameter of the hue which is what causes the image to go from full color to grayscale.

Value

The ‘V’ represented in the diagram above tells how much of Red, Green, and Blue to use in the color. In other words, value is also the brightness of color. Values 255,255,255 will create the color white (#FFFFFF). The combination of Hue, Saturation, and Value make up the HSV model used to create a three-dimensional view of color.

Luminosity

Luminosity is also known as how bright a color is.

How it Works in Design

The following diagram shows you how Photoshop and other digital software allow you to use what we’ve just covered:

You see above that we have all the parts we’ve discussed: Hue, Saturation, Luminosity. Photoshop even allows you to create color based on whether you prefer the HSB(V), RGB, or the CMYK models.

In part II of this lesson, we will cover Chroma, Tint, Colorfulness, Shade, Intensity, and other color manipulation techniques.

A color is essentially your groundwork for making your design stand out, look unique, and most of all, look professional.

Primary and Secondary Colors

Sadly enough, there are many self-taught designers who absolutely have no idea what the difference between primary, secondary complementary, and tertiary colors are. This is essentially the groundwork for creating color schemes that match and are compatible with each other.

Primary Colors are your “core” colors. From these colors, you can create various degrees of other colors such as the ones we see in the above picture. Primary colors come in two groups with three primary colors in each morel:

1. Additive Model Colors are colors that are produced from a black background creating three main colors: Red, Green, and Blue. These three colors are the primary colors for the additive model and are also known as the RGB Model. And as the name mentions, when you overlap each of these three colors, you end up with other colors (as seen below).
2. Subtractive Combination coloring is opposite of the traditional RGB model. In contrast to the Additive model, colors in this model are reflected off of a white background, so instead of getting your standard colors Red, Green, and Blue, you see Cyan, Magenta, and Yellow (also referred to as the primary colors of the subtractive system – or the CMY Model).

   QUICK TIP: Most people print on white paper, which is the reason why you have Cyan, Yellow, and Magenta cartridges in your printer rather than Red, Green, and Blue.

Examples of Combining Colors:

• Red + Green  = Yellow ; Yellow + Magenta = Red
• Blue + Green = Cyan ; Cyan + Yellow = Blue;

The Inverse Relation:

• Cyan + Magenta + Yellow = Black
• Red + Green + Blue = White

Secondary Colors

Secondary Colors are also a simple term to understand. Secondary colors are any combination of two primary colors.  This means looking at the color diagrams above, these colors would be where the circles overlap. (i.e. blue, green, red in one diagram; cyan, magenta, and yellow in the other)

Complementary Colors

Another term used often is complementary colors. These are colors opposite of each other on the color wheel as shown in the diagram below.

Tertiary Colors

Finally, in order to make our color wheel complete, there is another color mix we add to the group. This is a combination of a primary color with its adjacent secondary color resulting in what is called a tertiary color.

The Color Wheel

Combining all of the terms above, we now have a complete color wheel which we will explain how to use effectively to create professional color schemes for your designs.

To be honest, I didn’t feel I would make this category, but at one point I had one of those moments where I had a rush of ideas about blogging topics, and most of them fit into the category of web design, so I figured it would be nice to include a category dedicated to these new ideas.

 What Quick Design Tips is all about…

Quick Design Tips is about design tips that will help you improve your Photoshop skills in your daily use. Now this category is specifically for folks who know a little bit about Photoshop (i.e. know how to open it and make a simple drawing). This doesn’t mean you need to be an expert, but this does mean that I won’t be going over what each icon, button, or toolbar in Photoshop does.

What Will We Be Covering?

I don’t want to spill the beans too early, but we’ll be covering a lot of:

• technique
• design
• usability
• placement
• professionalism (colors, fonts, layout)
• other miscellaneous aspects

In closing, this should be a fun experience for everyone and I believe every designer will learn something they didn’t know before and everyone can also be a contributor to these tips via discussion or even posting their own tips.

1. Simplicity - Everyone these days is all about simplicity. Why? Because it works. Simple logos, simple web pages, simple business cards, simple brochures, etc. The reason behind this psychology is because simple a) looks good and b) simple is easy to remember. In math terms, it’s easier to remember 10 + 10 rather than 4+2+1+5+7+1. In both cases the answer is the same, but if asked to repeat the equation, you’d probably remember the simpler one.
   In design terms, it works exactly the same way. We want to get the message across, not how many different effects you can stick on a 150px by 150px area. And besides, businessmen also like the idea that they can actually have a logo on their business card and still have room for their name and company information.
2. Skill – Looking at a design by someone who has only been designing for 3 months rather than someone who’s been doing it for several years, its fairly obvious who designed what.
3. Accuracy – If you’re given a task of creating an auto website, don’t go into eCommerce design. I see this with a lot of web designers that become so engrossed in their own category of design that they find it harder to adapt to another style when they’ve worked so long in one area. I find this to be an issue when you’re working for one or several clients that give you numerous projects in one category of design. Sure working like this helps you become specialized in one area very well, but I find that going out and finding clients in different aspects of web design also helps in the long run by specializing you in more areas and diversifying your portfolio.
4. Compatibility – This is something that comes with experience, but what makes a design stand out is the color compatibility. Choosing wrong color variations and styles, focusing on either the wrong primary or secondary colors (or both) often creates very incompatible and eye-burning designs that are hard to look at. I find it helpful on learning about actual colors before jumping in and designing something without knowing whether it will work or not.
5. Professionalism – You know this when you see it. Any design that stands out is one whose author took the time to make sure the all lines match up to one another. If they’re doing parallel lines ore reflective features, they actually are in perfect position. Any obscure or sharp edges are smoothed out. Slight shadows are added when needed, and so forth. Imagine looking at a design where you have lines or curves that are either a couple of pixels unfinished leaving white space, other lines go out too far, some areas of the design contain too much shadowing….would you want to even look at a design like that?
6. Uniqueness – We don’t want the same old blue colored webpage design with a Tahoma logo having a huge glass reflection and a cross-hatched web 2.0 background. Instead uniqueness shows itself when you go outside the box and add some personal touch to a site rather than create the same generic stuff.

This is how I look at a design that stands out. What factors do you consider in a design that are superb or outstanding?

Let’s take a sample logo design…

…And:

1. Add Your Company Name and/or Website

Adding your company name or website puts more credibility into your design showing that you are a professional who is serious about what they do.

2. Add a Project Description

Adding a description of your project is not only handy for your client because it re-emphasizes the design terms and what the client is getting, but it is also helpful in the organization of your own portfolio. Imagine trying to remember who you designed a logo for a year after you’ve created it.

3. Create a Negative of your Logo

This is a quick 30 second task that is simple, yet very effective. It shows you and the client whether your design will work in a setting other than a blank white space. This is especially great for beginning designers who enjoy creating a logo full of lighting effects, lens flares, and other shadows which look good only on white or black and look terrible in other situations. A negative look of your design will reassure both you and your client that it is a worthy design.

4. Add a Border

Remember, we want the client to focus on the actual logo, not how creative your background, description, or company name is. A border is perfect and easy to add.

5. Add some variation

This is an absolute killer. Adding several variations of the same design is especially crucial for clients you do not know because the variations will help you determine what kind of taste the client has and where to proceed. This is a great time saver when it comes to communication.

6. Add some web 2.0

Sometimes the only thing we need is a subtle gradient to make your design feel at home. Very classic, very effective.

7. Leave the white space

Wait…what? Yep, sometimes it may be better to leave it the way it is and keep all the fancy tweaks out. If adding a gradient, border, name, or anything else unrelated to the logo looks distracting, its better to not include it.

Using a combination of the above things you can do to your design will eventually lead you to create your own style that represents your designing and will act sort of like your branding which is very useful if you’re participating in contests, having your design featured (ie Extreme Designs of the Week), or if you’re designing for a major company.