June 26, 2019

Art & Code: Create and Code an Interactive Parallax Illustration

🌟 View Demo

📥 Download Source

🔗 Skillshare Link

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:

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!

Intro. Jarom Vogel · Start

Drawing. Part 1 · Concept and Thumbnails

Drawing. Part 2 · Refining Your Sketch

Drawing. Part 3 · Blocking in Colors

Coding. Part 1 · Preparing Your Layers

Coding. Part 2 · HTML, CSS, and JavaScript

Coding. Part 3 · Drawing to the Canvas

Coding. Part 4 · Touch and Mouse Controls

Coding. Part 5 · Motion Controls

Coding. Part 6 · Finishing Touches

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 дичь, интересные находки, мысли за дизайн и около того.