Art & Code: Create and Code an Interactive Parallax Illustration
In this class you'll create an interactive parallax illustration using Procreate along with HTML5, CSS, and JavaScript. I've tried to organize it from simple sketching and drawing to more complex coding things at the end, so hopefully no matter how far you make it, you can learn something! Also make sure you check out the project section for completed example code that you can compare to.
A few things we'll cover along the way:
• QuickMenu, Layer Select, QuickShape, and more in Procreate
• Some Basics of HTML5, CSS, and JavaScript
• Touch and mouse events in JavaScript
• Accessing the gyroscope in JavaScript
• HTML5 canvas and requestAnimationFrame
Tools used in this tutorial include:
• iPad Pro 12.9" w/ Apple Pencil and Smart Keyboard Folio
• Procreate (you can use any layer-based illustration software, but I prefer Procreate)
• Coda (a free alternative for iPad is JavaScript Anywhere, but I don't go into as much detail on how to use it)
• Safari on iPad
While I try to keep things as simple as possible, this will be easier if you have some basic familiarity with web development. Here's some helpful HTML, CSS, and JavaScript resources:
• w3schools.com
• Codecademy — Introduction to HTML
• Codecademy — Learn CSS
• Codecademy — Introduction to JavaScript
Let's Go! Use layers and code to add a new dimension to your artwork!
Jarom Vogel is a freelance illustrator who occasionally dabbles in motion, design, and development. He enjoys beaches, fine ice creams, vanilla coke, technology, skiing, and making things. He graduated with a BFA in illustration from Brigham Young University in 2015. Previous clients include Apple, Procreate, Nobrow/Flying Eye Books, First Round Capital, HarperCollins UK, Aquila Magazine, Harmonix Music, and Cotopaxi.
Jarom Vogel, Digital Illustrator
@DesignBoard — живой канал для UX/UI дизайнеров с уникальной лентой: клёвые решения в интерфейсах и UX дичь, интересные находки, мысли за дизайн и около того.