Pixel Animation, Lesson One
Pixel Animation and Motion Design are mesmerizing and fun to watch on web pages if you like text and art dancing around your website like I do.
So, I made my first pixel art animation, Fishy, Fishy in the Sea. Plot: Fish are happily swimming on an idyllic day when a seemingly peaceful air balloon floating overhead is piloted by a fisherman who pulls out a fishing reel and plunks a lure into the water. Water splashes. Fish scatter. End of story. The animation loops endlessly.
Learning from Pro Motion Designers
Over a 3-day time span, designers worked in their favorite Adobe animation programs and with their favorite tools and plugins.
On Day 1, watching Lucile Patron’s live stream, I caught the bug to design a pixel art animation.
Lucile Patron, AKA Fulifuli, made pixel art animation in Photoshop look so easy and fun, I thought, Why not me?
Hosts Rufus and Michael invited viewers to submit samples of their animations and motion design for critique and to win a year’s subscription to Adobe CC. I wanted to join the Adobe party and created Fishy, Fishy, in the Sea.
I plan a sequel in the future. Until Fishy, Fishy, in the Sea II, I remain a starry-eyed duck, counting the stars!
Subscribe to Behance to Watch Live Streams & Replays from Adobe
Watch Pixel Art and Motion Design video replays at YouTube and search AdobeLive. Search videos of motion designers to see their workflow, i.e., Made By Radio; Alexandra Lund; Lucile Patron; and Cyril Izran.
Viewing Tips for AdobeLive
- Subscribe to Behance so you can be alerted of upcoming live streams and participate in chats.
- Live streams are 3-days, Tues. – Thurs.
- Join the chats during live streams to grow your art community, enter design art contests, and win prizes.
- Create an Adobe Behance profile with your art, illustration, design, animation, etc. It’s easy. I did.
- Thursdays include portfolio reviews. Hosts invite viewers to send links to their Behance profiles. Submit your Behance profile for a rare opportunity to be reviewed by the pros.
- Alert: Video sessions are recorded in real-time as if a film crew watched you from the start to the end of a piece of art, so plan to spend some time if you don’t want to miss the tips and tricks scattered throughout the filming.
- When you watch replays, it’s best to watch in sequence, Day 1 of 3 first, as guest artists often continue one project over three days, making it more rewarding to follow from Day 1. On the contrary, other guests start and end a project same day, completing two to three projects in three days.
- BONUS: Live streams from Paris film guest artists and designers from Spain, Great Britain, Italy, France, Australia, Belgium, etc., presenting a wonderful international glimpse into today’s trendy digital art world. Also, English is not the native language for international guests, making live streams even more dynamic as often they are working on computers with interface labels in French, Italian, etc. [Note: Michael and Rufus are multi-lingual, making perfect international hosts.]
Tips for creating pixel art animations in Photoshop CC from Fulifuli, streamed live from Paris
- When you open Photoshop, change the Edit > Preferences settings from the default settings. In Units & Rulers, set the Rules & Type to Pixels; in Guides, Grid & Slices, set Gridline and Subdivision to “1” Pixel.
- Fulifuli cautions to start small with your first pixel art animation. Example: for one character, use a canvas size in the neighborhood of 56 pixels by 56 pixels.
- View>Show>Grid will show you the pixel grid as you work. Toggle shortcut to show and hide the pixel grid is [ctrl + ‘ ].
- Work in the Motion workspace for animation rather than the default Essentials workspace.
- You will need to work with the Timeline window visible, which isn’t visible by default unless you are in the Motion workspace. If you prefer to work in a custom workspace, you can access the Timeline panel from the Window’s drop down menu.
- In the Timeline panel, select Create Frame Animation as your are creating a frame-by-frame animation through layers.
- Export and Save for Web (alt+ ctrl+shift+s) your digital art animation as a gif.
- Regarding number of frames needed for an animation: you can always add or subtract frames. It takes at least eight frames to loop a walking sequence as Fulifuli demonstrated on Day 2.
- On export, to enlarge your gif animation in the Save for Web panel, increase the pixels by whole percentages, i.e., 200%, 300%, 400% 600% … do not increase by 430%, for instance.
- Also, generally there is no need to change other gif defaults on export. You will want “nearest neighbor” and other standard defaults.
For a study in the art of color and color palettes, notice Fulifuli’s Color Swatches panel in Photoshop as you watch the video. Her swatches caused much excitement during live streams. Also, enjoy Fulifuli and Rufus as they banter about swatches and pronunciation of gif vs. jiff.