Background Design - Color
Overview:
Revise background line art based on feedback received.
Add color to your background(s)
(1) Download the Universal Design Tools
(a) Download and Import The Universal Color Palette
The color palette comparison below demonstrates how the I-See- U universal palette matches the red's and green's color attention to the color-blind simulation. The full-color palette shows how, when not adjusted, the red's and green's attention factors will not translate correctly for a red-green color-blind person. These Universal Palette Colors are restricted to those that can be achieved using the CYMK offset printing process. You can use more saturated versions for these color in your designs.
Download the I-See-U Universal Color Palette Here (external link). Then, reference this Adding Colors Demo (external link) for importing it into Adobe Animate.
I-See-U Universal Palette
Red-Green Color-blind Simulation
Full Color Palette for print & web
(b) Download one or both of these color-blind simulators
(1) Chromatic Vision Simulator
This color-blind simulation mobile app (external link) runs on both the Android and iOS smart phones. 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. (free)
(2) Color Oracle Simulator
A native app for MAC and PC that simulates colorblindness for anything currently showing on a display (external link)y(external link). (free)
(2) Review this Background Color Guide
Utilize atmospheric perspective and warm/cool color contrast to create a stronf visual hiearchy.
Road Crew background by Bill Fischer (created with Adobe Animate)
App background design by student Tina Uhazie
With Color Oracle colorblind simulation
(3) Create Your Background Design (1 Scene)
Choose a scene that contains a significant amount of environment/background elements
The scene should also have your main character featured in it. You will be illustrating the character later.
You can import a sketch that you have created in other software or on paper. Then, 'ink' over it in Animate.
Once this scene has been approved, all of the other scenes will be style-matched to it later.
(a) Watch all Bill's Demo
Viewing them in YouTube will provide access to a table of contents. Think of that table of contents as a checklist of things to do.
(3) ColorYour Background (start at 5:20)
(b) Follow these Instructions
Create art in the same file that contains your line art.
Upload your file into your 'Design and Production Art' Folder. Name your file like this: YourName-Backgound-color.fla
(c) Upload Your File
Upload it to your Design & Production Art Google Drive folder and name the file: FirstnameLastname-Background.fla
Optional Textured Background
A quick method for creating a lot of background information is to overlay a paper texture
Perform a Google image search: 'paper texture free download'. Then, click 'tools' and choose size: large. The minimum pixel dimension on the long side should be 1920 pixels. However, larger is better.
Additional Technique Demos (for optional viewing)
Just watch these, don't do them. Use them as reference for methods that you may choose to use in your illustrations
Filling a line with a gradient
Adding Bitmap Textures using masks
Adobe Animate coloring - advanced
Import a Complete Illustrator File
Import a layered Adobe Illustrator file into Animate while preserving all of the layers.
Copy and Paste Assets Directly From Adobe Illustrator
In Illustrator, copy the asset.
In Animate, paste the asset using the settings below.
If the asset is not pasting correctly, choose it with the subselection tool in Illustrator, then paste it into Animate.
