Art

Character(s)
Hi-lite color (like the blue sleeves) to draw attention to important narrative areas
Effects (to give emotion or energy to the character's strengths or event actions)
Word balloon for a quote

Variation Not Allowed

Realistic character proportions
Character lines: dark variable stroke (automatically scales)
Paper background with dark edges (does not animate)
Background lines: dark thin non-variable stroke (don't allow scaling)
Neutral color fills
Non-neutral colors can be used for accents and effects
Narrator text box: rectangle with dark brown background and large, light text (min contrast ratio of 7:1)
Speech bubble: curvilinear (can be hand drawn or geometric) with light brown background and large, dark text (min contrast ratio of 5:1)

Variation Allowed

Paper texture
- Paper texture resources can be found here. Consider starting with textures.com (we have an account).
Font selection (adobe or Google fonts only)
Hi-lite colors, shapes, fill types, and styles
Effect colors, shapes, fill types, and styles (can even be text, "Crack!")

One way to approach shading

Black and white illustration showing a low angled shot of man facing military tanks on a moonlike surface and stars in the sky, implying outerspace.

Indochine - Nos Célébrations by Feed Me Light Studio

Incorporating 3D shapes and shading

This technique involves rendering soft images from a 3D program and rotoscoping lines over them

Note: Rotoscoping can be very time consuming!

Greyscale image of example of rotoscoping of a 3D rendered image that shows the interior of a car with hands of someone gripping a steering wheel.

View at Timecode 0:49

Greyscale image of example of rotoscoping of a 3D rendered image that shows the interior of a car with hands of a deconstructed car loosely sketched.

View at Time Code 0:45

You can cell (toon) render environments from a 3D program
lines would need to be added to match the style guide

You could do 3d with toon shading to have 1 -3 levels of shading and line.

Some Character Line and Shading Examples

Shading variations other than these examples are possible

Lines have slight variation in width
Lines are thicker around the area that is important
- - Shading is done with hatching

Lines with Effects
Lines are consistent
- - Shading is one tone that has slight gradient

Tutorials

Figures and important objects

Variable stroke width (pencil tool)
style: solid
width: width profile 1
Line Color: dark browns
Thick lines around major shapes
Medium lines in interiors of major shapes
Some medium to dark flat tone fills

Figures and important object pencil line settings

Screenshot example of the Animate program and the variable stroke tool.

Draw figures and important objects using aVariable Width Pencil Tool

Stroke Style: set to 'Solid'
Width profile: 'Profile 1'
Note: lines will scale automatically

Use transparency to lighten an image that you will draw over

2. This is a Style Guide for Line and Color use

3. Style Guide: Line for Figure and Effects: Using pencil tool

Click go to youtube to see the table of contents.

4. After you are done with your characters that need rigging here is a review on rigging from Bill. See the full Animation Processes section on setting up a rig.

Environments

Consistent stroke width (pencil tool)
Thin line set to not scale
Line color: medium to light brown
Some light flat tone fills

Environment Style Guide

Environments pencil line settings

Screenshot example of the Animate program and using the consistent width pencil tool to apply to environments.

Draw environments using a Consistent Width Pencil Tool
Stroke: set to 'Solid'
Width profile: 'Uniform'
scale set to none
stroke size = 3
Set smoothing to 100
Smooth and optimize to reduce points
Minimal Tones are done with the brush for shapes that are offset from the lines

Price-Playback-Issue.mp4

Simplifying Lines in Environment after they are making Animate have issues because they are not simple enough.

Environment Smoothing Settings for Pencil

Effects

Effects Properties: Choosing a style and width variation - add to the styles by clicking on the brush library in the tools. This is made with a pencil and only has 2 points.

Effects Guide: Middle of this Video 5:30

Closer view of the line effect in the previous image, this time emphasizing the fact that this was created using two points.

This effect is a line with 2 points. This allows us to scale the effect by giving it a thicker stroke very easily. It will also allow easy animation using a shape tween.

Give a line a style:

Make the line first with a pencil or line tool or pen
Then select the line with the black arrow tool
Go to properties > object
click on the 3 dots to the right of the style
Choose Brush Library
Choose a style like artistic
select the stroke style by double clicking it
then it will add it to the line you have and into your stroke style library for this file.

line tool in animate with a dotted line and a brushy looked line for effects

Using the line tools (pencil pen and line) to make a line with points that can have a Color and Style that uses the brush library - that still has one interior line that can be manipulated - video coming soon.

Universal Design Guidelines For Art

Universal Color-Blind Palette

This color palette ensures that saturated reds and greens are not used for accents (that color-blind persons cannot see). It also limits the color gamut to accommodate the four-color printing process. The animation may be converted to print media in the future.

Download: I-See-U universal color palette (external site)

Diagram showing effective of colorblindness on the color red

Example of a red accent that does not work for color-blind persons.

Set up Universal Color Swatches for Animate

Get the Swatch .clr file

Testing Your Color Combinations

Use the Chromatic Vision Simulator (external link) to ensure that the color combinations work for color-blind persons. It is a mobile app that runs on both the Android and iOS mobile operating systems. with the app running, designers can simply aim their phone camera at any digital display, physical print, object, or environment and it will simulate three types of color-blindness (with side by side options). (free)

Picture of a person's hand holding a phone to a laptop, and using an app to test color blindness. The screen on the phone is split showing two variations of the image on the laptop showing different types of colorblindness.

Reducing Cognitive Load

Images come and go quickly, so images need to have clear focal points

Punch important images off their backgrounds using complimentary color (This also helps with color-blindness efficacy as illustrated in the bottom image).

Shows image from ipad showing a game before implementing focal point emphasis. This image features a orange/yellow tiger leaping in a jungle. With a menu at the top implying that an ipad game is being played reading: "Rules: Time 00:15: Score 2157" and a pause icon next to it.

This image shows an example of implementing the idea of using complimentary colors to allow the most important image to bounce of background. The background is now blue tinted while the tiger is orange.

Configure background layouts to direct the eye to the focal point

Screen shot from Incredibles with arrows drawn on top of it to highlight the areas in the background that enforce the focal point of the still image.

Universal Color 3 to 1 Ratio for images

Color Picker Chrome Extension (external link)

Web Aim Contrast Checker (external link)

Prepping for Animation

How to prep your imaging files for the animators by making symbols and using the library and the frame picker.