logo

Art & Code: Create and Code an Interactive Parallax Illustration

feature icon

Self-paced course

Price

Rating

Overview

Use layers and code to add a new dimension to your artwork!

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

This is an advanced class—I don't spend a ton of time going over how I work in Procreate, but if you're looking for something more like that, check out my previous Skillshare class here. (There is a bit of new stuff in this one though!)

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:

(Also I was a little sick while recording some of this, so please excuse any weird sniffles

Similar courses

course image
Watercolor Pines
logo
Skillshare
course image
10 Procreate Quick Tips for Artists & Illustrators
logo
Skillshare
course image
Create A Food Package Design - A Graphic Design Project for Beginners
logo
Skillshare
course image
Motion Graphics: Master Motion Graphics in After Effects & Illustrator
logo
Skillshare
course image
Procreate for Beginners: Learn the Basics & Sell Your Artwork
logo
Skillshare
course image
Intro to Procreate: Illustrating on the iPad (UPDATED for 2022)
logo
Skillshare

Featured articles

Sep 12, 2022

WATCH these YouTube videos if you can't start learning a language

5

0
1
4K

Sep 12, 2022

How Memrise works + reviews [2022]

6

0
1
4K

Sep 12, 2022

5 tips to learn languages with YouTube videos [2022]

7

0
1
3K

Sep 12, 2022

How I Became a Marketing Manager at Microsoft

8

0
1
2K

Sep 24, 2022

How Edureka works + reviews [2022]

3

0
2
2K

Sep 27, 2022

How Codecademy works + reviews [2022]

3

0
2
2K
course image
feature icon

4419 students

feature icon

English

feature icon

Advanced

Provided by

Authored by