Scribd
Upload
807 views

Layers of Reality: Lesson Idea

This document provides instructions for a lesson where students create a layered artwork in Procreate and then use basic coding principles in Swift Playgrounds to turn it into an augmented reality experience. The lesson explains how to sketch ideas, develop the illustration using different layers, export the layers to photos, and then use the Swift Playgrounds app to code an augmented reality experience from the artwork.

Uploaded by

Robert Smoothop
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
807 views

Layers of Reality: Lesson Idea

This document provides instructions for a lesson where students create a layered artwork in Procreate and then use basic coding principles in Swift Playgrounds to turn it into an augmented reality experience. The lesson explains how to sketch ideas, develop the illustration using different layers, export the layers to photos, and then use the Swift Playgrounds app to code an augmented reality experience from the artwork.

Uploaded by

Robert Smoothop
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

LESSON IDEA PART ONE

Layers of reality
ART & DESIGN CODING

Learn with
Jarom Vogel
Illustrator

The artwork and Swift Playgrounds


workbook that accompany this lesson
idea were created by American Illustrator
Jarom Vogel.
Jarom has created artwork for clients including
Disney, Procreate, Spotify, Facebook, Pepsi,
Peugeot, Adobe, HarperCollins, Skillshare, and
others. He loves creating experiments that bring
together illustration and code in Swift.
To see more of his work, including more Code
and Creativity experiments, visit jaromvogel.com
or look up @jaromvogel on Twitter or Instagram.

Use this Lesson Idea to spark your imagination for


using Procreate in the classroom. Feel free to take
the activity further and make it your own. Share using
#LearnWithProcreate or @ProcreateEDU.
Layers of reality
In this lesson students will create
a layered artwork in Procreate,
then use basic coding principles in
Swift Playgrounds to turn it into an
Augmented Reality experience.

All you need is an iPad


and the following apps:

Procreate

Swift Playgrounds

Educational Value
Students will gain an entry-level
understanding of programming
fundamentals.

Students will implement and modify


programs with user interfaces involving
variables and functions in a general-
purpose programming language.

Students will gain an understanding of


the intersection of digital technologies
and creative processes.
In this guide 1 What is AR?

2 Getting started

3 Sketch

4 Refine

7 Final artwork

8 Export

9 Part 2 - Code
What is AR? 2.

Augmented Reality
AR stands for Augmented Reality. It is
technology that puts information such as
pictures, words or sounds, over the world
around us.
In this lesson you will create an artwork that has
a background layer, as well as a few midground
and foregound layers. You will use some basic
coding principles to make your midground and
foregound layers hover over your background
through AR.
Getting started 3.

Creating a custom
canvas
To bring your artwork into Swift
Playgrounds later, it will need to be in
the range of 1000px.

In the Gallery, tap the + symbol to create


a new artwork.

Then tap the dark rectangle with a small +,


symbol to create a custom canvas.

Make sure your units are set to Pixels.

Enter your dimensions. Let one of these


dimensions be 1000px, and the other be
close by (e.g. 1000 x 1300 px, if you'd like
it to be in portrait orientation).

TOP TIP:
If you're looking to adapt a previously made
artwork for this activity, you can resize your
canvas by tapping Actions > Crop and Resize >
Settings > Turn on Resample canvas, and enter
your new dimensions.
Sketch 4.

Thumbnail sketches
Explore the composition of your artwork in a
few quick thumbnail sketches. For now, sketch
everything on one layer, but consider:

LAYERS
Think about how your layers will relate to each other
and make a plan about what parts of your illustration
should be grouped together. Things that you want to
float together in AR should be drawn on the same layer.

BACKGROUND
When planning your background composition,
consider how it might be framed, and how
the other elements of your artwork will interact
with the edges.
Experiment with keeping a clear boundary or edge
to your background, and drawing additional elements
that are 'breaking free' from this.
If you'd like to use a physical AR target and don't
have access to a good printer, you may like to use a
background anchor file we've created for you. You can
create any artwork on top of it, as long as this image is
inserted as your background layer in Swift Playgrounds
in Part 2 of this lesson.
Download from procre.at/layersofreality.
Refine
SELECTION TOOL
5.

Select your
preferred design
Tap the Selection Tool, and tap Freehand.

Draw around your preferred design and tap


the arrow to enter Transform mode.

Swipe down on the canvas with three


fingers to open the Copy & Paste menu.
Tap Cut & Paste.

Tap the icon with the two squares in the top


right corner to open the Layers Panel.

Tap the tick next to your original sketching


layer to hide it from you.
TRANSFORM LAYERS PANEL
6.

Transform and scale


Tap the arrow to use the transform tool to
adjust the size of your chosen design.

Tap the two squares to open the Layers Panel,


and tap the N on your selected design.

Drag the Opacity slider to the left to make your


design fainter, so you can draw on top of it.
7.
Layered illustration
Now illustrate each of the elements of
your artwork on their own layer.

The elements that you would like to be


in the foreground need to be in the top
layers. The elements that you would like
to be in the back need to be closer to the
bottom background layer.

FOREGROUND

MIDGROUND

BACKGROUND
Final artwork 8.

Color and texture


Experiment with different brushes from
the Brush Library, add color to bring your
artwork on each layer to life.

REMEMBER
You'll be able to see behind objects at some
angles in AR, so don't leave any 'holes' in you
artwork. Draw each layer completely, even if an
object sits in front and covers parts of it up.
Turn your layers off and on using the tick boxes in
the Layers Panel to check your work as you go.
Export 9.

Export layers
to Photos
Once you've completed your artwork, tap
the wrench icon to open the Actions menu.

Then tap Share.

Under Share Layers, tap PNG Files. This will


export all of the layers in your artwork as a
separate image to your Photos app.
Part 2 - Code

Create an Augmented
Reality Experience
Congratulations! Your artwork is ready to be
coded into your very own AR environment.
Make sure you have the Swift Playgrounds
app installed on your iPad from the App
Store, to do the second part of this lesson.

Swift Playgrounds
Download options
Subscribe in
Swift Playgrounds
If you subscribe in Playgrounds you will
automatically see all lessons published by
Procreate in the Swift Playgrounds App.

Open Swift Playgrounds

Tap See All at the bottom right of the screen


to find more lessons.

Scroll to the bottom of the More Playgrounds


screen, and tap Enter a Subscription URL.

Type in swift.procre.at and tap Subscribe.

Tap Subscribe in the confirmation pop up.

The lesson will appear in the above feed.


Tap Get next to the Layers of Reality lesson.

Swift Playgrounds
Import via Playground
Book download
Alternatively, you can download the
Playground Book file straight to your iPad or
computer for distribution.

Go to procre.at/layersofreality, and tap Part 2


to download the .zip file.

Save to your Files App and tap to unzip.

Open the unzipped file in Swift Playgrounds,


or use Airdrop to distribute to the class.
Create
Artistic expression helps make
education meaningful, memorable
and fun. Find more creative lesson
ideas at education.procreate.art
To dive deeper into the full creative
potential of Procreate, see our
Handbook at procreate.art/handbook

Learn with

You might also like