Illustration

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo. Lorem onsectetur adipiscing elit, sed do eiusmod tempo.

Hero Images

Definition: These are larger compositions often found on the top of a webpage and are used to convey a message, general theme, or tell a story.

Rules

Usage:

  • Used as headers on web pages, articles, emails, etc.
  • Meant to be the main visual focus of specific areas.
  • Used as Primary Imagery.

Things to Avoid:

  • Avoid using the same Hero Image in multiple places.
  • Do not use as secondary imagery. It should always be the first thing you see wherever they’re used.

When Creating New:

  • Ask yourself what story are you trying to tell and which objects would best symbolize the themes of your story.
  • If you’re creating a hero image based on an existing spot image, consider the story that is being told through the spot image and how you can expand upon that story.
  • Should have a primary focus on humans (represented by hands, heads, or busts) interacting with each other or with nature.
  • Must have a background container.
  • You can combine existing assets with new assets.
  • Depict all human characters in a respectful manner. When creating a new human illustration, be sure to explore different body types, facial structures, hair styles, and clothing options. Our audience is diverse, so our illustrations should be too!
  • Typically more rectangular in dimensions (as it is a header image).
  • After a general composition is created in Illustrator, the art should be then taken into Photoshop to apply any textures and/or patterns as well as a background container (See Tutorial).

Things to Avoid:

  • Avoid overly cluttered compositions (Show ex)
  • Avoid reusing character heads from previous hero/spot images. Each character should feel different in some way.

Framing Elements

Examples: A single butterfly, a snail on top of binoculars, a hand holding something small, etc.

Definition: A singular artistic element used to enhance, frame, or add color to an area on Edmodo’s platform.

Rules

Usage:

  • Can be used in a multitude of areas including but not limited to: Icons, Buttons, Decorative Elements (emails, articles, etc).
  • May or may not include a background container (depends on context).
  • Some Framing Elements may have multiple items when necessary for clarity, context or creating more visual interest. (ex: snail on binoculars, a hand holding an item, etc).
  • These are used as tertiary imagery after Spot Images.

Things to Avoid:

  • Avoid using the same Framing Elements in too many places (ex: don’t use the same lighting bug for multiple icons or buttons that lead to different places).

When Creating New:

  • Keep your designs simple.
  • Use strong and distinctive/recognizable shapes.
  • Remember that these illustrations are supportive, they can’t be too distracting.
  • Be intentional with color choices. Colors should be used to draw the user’s eye rather than match reality.

Things to Avoid:

  • Do not have overly complex and large framing elements (these would be spot or hero images).
  • Too many anchor points (image becomes too complex).
  • Too many curved lines (image becomes too juvenile).
  • Overly abstract shapes that can’t be recognized at a glance.
  • Over-use of lighting and shadows (mostly not used).

Background Container

Definition: A simple, textured, organic shape used as a background element for Spot and Hero Images to rest on.

Rules

Usage:

  • These are subtle illustrations used to contain the main illustrations.
  • These are reused in multiple instances, you don’t have to make a new one for each illustration.
  • If multiple variations are needed, BG Containers may be flipped horizontally or vertically, rotated 90 degrees, and transform warped.
  • Tone down opacity on BG Containers as needed (lighter BG containers should be set to 50%, while the darker ones should be 35%).

Things to Avoid:

  • Avoid stretching/squashing the background container more than 25%.
  • Avoid using the fill bucket on existing background containers; this will erase the texture. Consider changing the hue/saturation levels instead.
  • Never make the background container crooked.
  • Never layer multiple background containers.

When Creating New:

  • You will need:
  • This brush uses the foreground color as the main color and the background color as a secondary color. The softer you push, the more the secondary color shows through. The idea is to make mostly rectangular or square shapes using this brush.
  • It works better starting with a darker foreground color vs a lighter one as it creates more contrast and is easier to distinguish when at a lower opacity later on.
  • Play around with it and have fun. The more of these background containers we have on-file the better.

Things to Avoid:

  • Avoid making the brush too small. These textures should be large, distinguishable strokes which are easier to distinguish when at a lower opacity later on.
  • Avoid using more than one color + white (don’t put red in the foreground color and yellow in the background color for instance) as this becomes too distracting.

Textures

Definition: A non-tileable image that is used on distinctive inanimate objects to draw attention to a specific object or to break up flat color shapes.

Rules

Usage:

  • Must be used to enhance framing elements and hero images in gentle, non-distracting ways.
  • Textures can be applied to an object by using a clipping mask or a layer mask in Photoshop.
  • Be intentional with texture application, and only apply it to an object that would realistically have a texture.
  • The colors and opacity of these textures can be changed based on the compositional needs. Colors can be changed either with a color overlay set to “color” (in the FX panel) or by locking the transparency of a layer and using the fill bucket to change the color.

Things to Avoid:

  • Avoid using more than 2 textures in a single composition.
  • Avoid using textures on animate objects such as hair, skin, or creatures.

When Creating New:

  • New textures must be created either digitally using natural-looking brushes in Photoshop, or by physically using real-world textures (ex: ink wash, newspaper, etc).
    • Tip: You can find a lot of great textured brushes from Kyle T. Webster’s brush collections. Currently, all existing textures were created using Kyle’s brush sets. They are included with Adobe CC subscriptions.
  • Textures should emulate traditional mediums such as ink, watercolor, paint, charcoal, etc.
  • Make sure textures are high-resolution (300+ dpi) as they may be used for printing as well as web purposes.

Things to Avoid:

  • Never take textural images straight off of google. It is fine to purchase texture images (with permission from Edmodo) from stock websites and utilize them. However, creating textures from scratch is the preferred method.
  • Avoid textures that have high contrast (ex: cracked stones, metal, tree bark, etc.).
  • Avoid using photos as textures.

Patterns

Definition: A tileable image that is comprised of line drawings.

Rules

Usage:

  • Patterns are used to draw attention and add a fun and whimsical feel to a composition.
  • Unlike textures, patterns are based on creating fun line shapes that can be tiled.
  • Must be used to enhance framing elements and hero images in gentle, non-distracting ways.
  • The colors can be changed based on the specific needs of the illustration.

Things to Avoid:

  • Avoid using more than one pattern in a composition if possible.
  • Black lines should be avoided unless at a low opacity.

When Creating New:

  • Patterns must tile seamlessly.
    • Creating tileable patterns by hand can be a difficult process to learn, but once figured out can be easy and fun. See tutorial here for more info on creating tileable patterns in Photoshop.
    • It is very important to test new patterns on a large canvas to make sure that there are no distracting elements that draw the eye. This simply takes trial-and-error to figure out and get right.
  • Linework should utilize a rough, charcoal-like brush in Photoshop.
  • Must be simplistic patterns that can work in multiple applications (scribbles, loops, triangles, etc).
  • Must have a transparent background (absolutely no colors in the background).
  • All linework must be a single color. Black or White work well in most applications and is encouraged but it is fine to use the varying Edmodo color pallets for Indigo, Gold, Yellow, and Coral as-needed for specific instances.

Things to Avoid:

  • Should not contain specific items (ex: no pencils, apples, etc).
  • Avoid using multiple colors in a single pattern.
  • Avoid using any colors for the background of a pattern file. (MUST be a transparent background),

General Rules Overall

  • Contrast: When two colors have similar contrast and are next to each other, they can make the composition look muddled and weak. Before finishing your color selection, create a saturation layer and set the saturation to -100. If your composition is hard to make out, or the grey values are too similar, you will need to change your colors. Choose lighter or darker values when this happens, and you will have a visually stronger composition.
  • Marrying Illustrations with Graphic Design: When applying illustrations to specific graphics, they must work together in a way that fits the specific needs of the graphic. It is okay to rearrange compositions in the illustration to fit a new size. (ex: show ISTE images vs originals)
  • Silhouettes and Readability: Make sure when creating new illustrations that the artwork has strong silhouettes and are readable at smaller sizes. If your object indistinguishable when it is entirely black (silhouetted) or at a small size, try reworking it. If the small size is unreadable, consider removing anchor points or unnecessary details until it is easier to recognize at a smaller size (ex: Hot Air Balloon). You can also create two versions of the same object. One for larger sizes and one for smaller sizes. Below is a good example of proper silhouette instruction:
    https://bit.ly/2E8sHFM
  • Avoid Tangents: Avoid tangents whenever possible. “A tangent is when two or more lines/shapes interact in a way that insinuates a relationship between them that the artist did not intend.” Tangents can create confusing and off-putting compositions. This applies to everything from framing elements to hero images to how illustrations fit on background containers or in a canvas. For more information on tangents, refer to the sources below: