You have been asked to come up with a new course and you need a starting point. That starting point may be one of a few things:
- An image
- A web site you like
- The company web site
- A pre-defined color scheme
If you have a pre-defined color scheme, you already have your answer, so you know what to do. This discussion is about the other three choices. In this post we will discuss starting from an image.
USING THE EYEDROPPER FIL TOOL IN POWERPOINT 2013
One of the tools that really placed PowerPoint 2013 as one of my power design tools is the simple Eyedropper Fill tool, also known as just the Eyedropper. This tool allows you to pick up a color of any pixel in an image on the screen and use it as a color in your presentation. This tool existed in tools like Adobe Photoshop, but I believe this is the first time it has appeared within the Microsoft Office family. If you have used it in some other application, you will see that the one in PowerPoint works pretty much the same. USING AN IMAGE AS YOUR BASE
As you are thinking about the look and feel of your course, you might be struggling for inspiration. As you are feeding your creative mind different ideas and concepts, let’s pretend you came across an image and it strikes you as the inspiration you need. Maybe the image doesn’t have anything to do with your course, but you really like the colors. Now, you can actually use them very easily. For the sake of argument, let’s say this is the image that caught your eye.
You decide you like the mix of green, yellow, blue and the accent of red. You decide you want to use the colors highlighted in the red circles.
CONCEPTUALLY, WHAT’S HAPPENING ?
Here is the end result of what I will create. Then, I will go to the beginning and show you how to get here.
Here is a sample course introduction page using a color scheme generated from the image, and I incorporated the image into the design as well. You don’t have to do that, I just decided to for the example.
WHY DID I USE THE COLORS THE WAY I DID?
I decided to use the yellow to highlight the selected module and I accented the selected module title using the red. This allows the active module to be clearly identifiable, as compared to the other module buttons. The other available module buttons use the light blue from the sky and their titles are the green from the stems. I chose the blue for these because they needed to be obvious to the learner and not blend into the green background. I used the darker yellow/gold for the main course title and the lighter yellow for the subtitle. For the main background of the interface, I created a gradient using the two shades of green.
I certainly could have used the two shades of blue as the gradient and made the buttons green. The reason I did not go with that choice was because the blues would have made the whole interface design a lot lighter because the blues in the sky would have blended with the blue of the interface and it would not have looked as nice.
Because the colors came from the image, it all coordinates very cleanly and looks very nice. To get to this point, you will need to capture the colors in the image. You will have a series of boxes that looks similar to this. You will use this to fill the shapes that make up your interface with color.
CAPTURING THE COLORS FOR YOUR COLOR SCHEME
Let’s me explain something – in this situation, I am using PowerPoint as a design tool, not a presentation maker. The slides are simply stages on which I can do work. The first thing you want to do is create a blank PowerPoint slide and add the image to the first slide. This is the image from which you will pull your colors. By the way, when I say “blank” I actually mean blank. You don’t want any other template artifacts such as text placeholders on the screen to distract you or create problems with your ability to select objects. Next, create a series of about six or seven boxes. It doesn’t matter the color of these boxes. They will eventually hold the colors you capture from the image. This step is not about looks – it is about functionality.
3. With the Eyedropper tool active, click the area of the image that contains the first color you want to capture. In our example, it will be the light blue in the upper-left corner.
DO YOU KNOW RGB?
Before we move on, let’s talk about RGB. RGB is an acronym that stands for Red, Green, Blue. Every color contains some value of each of these three colors. Knowing this information can be very valuable to you as you design a color scheme. The Eyedropper Fill tool provides you with this information as you hover it over a color on the screen. Here is an example of this for the light blue we selected. It’s value is R=150, G=200, and B=255.
Great! Now, what can you do with this information?
Well, you can add it to the color picker to set a definite color value, rather than guessing. That means you can replicate this color over and over without worrying if it was the same. If you needed to, you could even replicate these colors in Microsoft Word if you were going to create a companion guide for your course.
If you intend to use a graphic artist or perform more complex graphic design yourself in Photoshop, you can use this information to be accurate with your colors. The Eyedropper Fill tool makes this really easy! It lifts that RGB value and puts it in the Colors pallet for you. All you need to know is where to find it. With an object selected, choose More Fill Colors and look on the Custom tab.
REPEAT THIS PROCESS FOR EACH COLOR YOU WANT TO CAPTURE FOR YOUR COLOR SCHEME
The next step in this process is to simply capture each color you want from the picture. The more colors you capture, the greater freedom you will have as you design your course look and feel.
If you have variations in the colors (lights and darks) you can even consider using gradients. You can see that I did this with the blues, golds, and greens. It allowed me to create this gradient.
Here’s another cool feature to help with selecting your colors. As you select colors from your image and put them into the boxes, they also go into your color picker as recent colors. You can easily select them later as you design your course.
You have selected colors into color boxes and you are now ready to design your course. How you use these colors is now up to your imagination. But, you do know that your colors will work well together and match what you are trying to accomplish.
LONG-TERM TIME SAVINGS TIPS
The goal is efficiency. Having ready access to your color scheme will give you this. As part of this process, why did we actually capture the colors into the boxes? Now, it’s time to take advantage of the two benefits of this exercise.
- RGB Values – It is a good idea to physically write down the RGB values for each of the box colors. This way, if you ever have to replicate what you did here, you don’t have to start from scratch. This will be a huge time saver. It is also valuable if you are not the only designer on the project. You might even be able to give these color values to your subject matter experts, so they can provide you content already in your defined color scheme. WARNING! There may be a learning curve here you need to address with them.
- Further Use of the Eye Dropper – You can copy and paste these boxes into other presentations to carry your color scheme. This means you can add shapes to the new presentation and use the eye dropper to lift colors from the boxes to the new elements you are creating.
SHOW YOUR COLORS!
Did you create an interface or screen that you want to share using this functionality? Do it out loud and share what you created with us. Your examples will help inspire others to be creative. If you see something that someone else did that inspires you, don’t be shy! Let them know. It’s a nice feeling to know that your work inspired someone else to do something new.