eLearning: Creating Flat Design Images from PowerPoint's Clip Art

by AJ Walther  

 

Want to design something that looks fresh and modern? You may want to consider Flat Design. Flat design is an aesthetic that rids the design of any three dimensional attributes. Generally, drop shadows, gradients, outlines, and textures are avoided. When gradients are used, they subtly fade from one color to a slightly different hue of the same color. It is common to see a heavy reliance on icons and banners with close attention to the color palette and font choice.

Many of us are working with shoestring budgets while creating eLearning. This means we are often relegated to the world of free clip art for our eLearning images. Here are a few examples of how clip art images can be reimagined into flat design. For these examples I just used shapes without lines, gradients, or shadows to create new, flat images resembling the original clip art images.

  

The great thing about flat design is that with careful attention to detail, most anyone can produce their own form of attractive flat design. All of the redesigned clip art images above took very little time, effort, and PowerPoint technical expertise. But, want to know a secret? You could even take an existing clip art image and bend it into your own flat design creation without building anything from scratch. Let's look at an example.

1. Find a clip art image that you like, but that could use a bit of help.
     
2. With the image selected, press [ctrl] [shift] [g] on your keyboard twice to ungroup the image.
   
   Note: The first time you ungroup, you will be asked if you would like to convert the image to a drawing object. Click yes and then ungroup again.
   
    
3. Select and delete unwanted elements. Here, I deleted each of the black lines.
     
4. Working one shape at a time, right-click and select Edit Points to smooth each shape by editing its points. When possible, I like to get rid of as many points as possible and to set the majority of the remaining points as Smooth Points. For this particular image, I also adjusted the point of the tack to be pointier and extended the "metal" part so that the green section overlapped it.
   
      
   
   Note: New to editing points? Check out this quick tip here.
   
    
5. Apply your color scheme to the image by selecting each shape individually, right-clicking, and choosing Format Shape.
     
6. If you're going for more of a Jony Ive look (a la iPhone's OS), you can take this a bit further by adding a subtle gradient to the shapes.
     
7. Integrate the image into your design.
     

Need some more flat design inspiration? Check out the Flat UI Design site.