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.
Famous Motion Designers Demonstrate Their Work Process, Live
Earlier in March, AdobeLive from Paris streamed video of motion designers working with animation. Designers included: Made By Radio; Alexandra Lund; Lucile Patron; and Cyril Izran. During the 3-day broadcasts, the designers worked in their favorite Adobe animation programs and with their favorite tools and plugins.
During Lucile Patron’s video on Day 1, I caught the bug to design a pixel art animation. I wanted to join the party. During the live stream, hosts Rufus and Michael encourage viewers to submit samples of their animations and motion design for critique and to win a year’s subscription to Adobe CC.
You know how I love contests, so I worked relentlessly during the 3-day stream to create my first pixel animation to post on Twitter.
Lucile Patron, AKA Fulifuli, made pixel art animation in Photoshop look so easy and fun, I thought, Why not me?
I bravely opened Photoshop CC to create my first pixel art animated masterpiece. I can do Photoshop, I thought.
Surprisingly, pixel art animation turned out to be work. Hopefully, I will make another animation in the near future after a tad more practice. Until then, I remain a starry-eyed duck, counting the stars!
Subscribe to AdobeLive to Watch Live Streams & Replays from Paris
Watch Pixel Art and Motion Design video replays at AdobeLive or on YouTube 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 AdobeLive so you can be alerted of upcoming live streams.
- Watch at AdobeLive.com during the live streams to join the chat and to be eligible for prizes, and receive portfolio review when offered.
- During the stream, hosts may give the option to submit on Twitter/#adobelive samples in whatever field of design is being spotlighted during the program for a portfolio critique.
- Bonus: Adobe Illustrator celebrates its 30-year anniversary in March 2017, and some AdobeLive streams offer a giveaway of a 1-yr free subscription to Adobe Creative Cloud, drawn at random by the Nightbot robot.
- The live stream format is to film each guest artist at work in three, 2-hour cycles, over three days – so pop some popcorn and relax.
- The 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.
- Once the 3-day live streams end, the videos from the stream are available as replays on AdobeLive and on YouTube.
- When you are watch replays, it’s best to watch them chronologically, Day 1 of 3 first, because some artists spread one project over the three days, and it’s good to watch from the beginning. However, other artists start and end a project same day, and will present an entirely different project each day.
- BONUS: The live streams from Paris film guest artists and designers from cities in 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 given language for most guests, which makes the program even more dynamic as often they are working on computers with interface labels in French, Italian, etc.
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 the live stream. Also, enjoy Fulifuli and Rufus as they banter about swatches and “gif” vs. “jiff.”