Vector Graphics for Icon Design (Gravit)

This is a project-based class, intended to help students learn how to create a project, not necessarily to learn an entire program. This lesson is tied directly to its associated badge. Students will be able to earn a badge based on the project they complete in this class.

Objectives:

  1. Students will be able to create an icon using a vector graphic design program.
  2. Students will understand the importance on sketching to create visually pleasing icons and graphics.

Lesson:

Use the Vector Graphics for Icon Design files

  1. Explain the shape and color tools. Practice creating shapes and giving them colors
    1. Organizing and Combining Shapes
      1. Briefly go over where shape tools are and how to use them (alt, shift, click and drag, etc.)
    2. Shape Manipulation:
      1. Union: combines two shapes to create one
      2. Subtract: takes away the section of the top shape
      3. Intersect: keeps where the two shapes intersect
      4. Difference: makes two shapes one, taking away the section where they overlap
    1. Alignment Tools:
      1. On the right side of the screen
    2. Layers Panel:
      1. Organizing layers
    3. Activity: practice organizing shapes.
  2. Pull up an icon image for reference, either on your canvas or in a separate tab.Image > Insert
  3. Look at what basic shapes and colors are in the logo. For example, the Target logo uses red and white circles. The Walmart logo uses rounded, tapered yellow rectangles.Shape, color, and convert to path tools will be helpful for this. I would recommend beginning with a simple logo, like the Target logo, then moving on to something more advanced. Make sure to practice the logo you’ll create in the class!
    1. Some examples you might like to try: Target, Walmart, Mastercard, Chanel, Nike, Dominos, Adobe
  4. Color
    1. Fills vs. strokes/borders
    2. Eyedropper tool
    3. Opacity
    4. color.adobe.com
    5. Gradients
  5. Sketching
    1. Why is sketching important?
      1. If you sketch first, you get all your ideas out on paper and are less attached to them. You can easily make changes and get feedback.
      2. Activity: have everyone make a few sketches of an icon or logo. They can recreate one of the logos from the files or come up with their own. Ask a few people to share their sketches with the class.
  6. Activity: give everyone the rest of the class to make their logo or icon. Be there to give feedback or assistance.

Sample Questions:

  • What are some other benefits of sketching you can think of?
  • Review: what do each of the shape manipulation tools do?
  • How might you use color.adobe.com to make designing logos and icons easier?