2D Background Design For Games - Vector Techniques

Name: 2D Background Design For Games - Vector Techniques
Rating: 4.5 (129 reviews)

Create a unique visual style for your game in Photoshop

Created byGame Art Co

Last updated 10/2023

English

What you'll learn

Research and design a unique visual game style
Learn professional game artist workflow
Ability to test game graphics in the game engine Unity
Apply colour theory knowledge to create eye catching graphics
Use shape contrast to create effective overall design
Create readable thumbnail sketches in black and white

Course content

7 sections • 71 lectures • 3h 12m total length

Course Introduction0:42
Welcome & short overview of the course
We start the course with tips and tricks in Photoshop that are used later in the course to help speed up your workflow.

IMPORTANT: You can download all the assets for the course in
Lecture 68 > Unity Part 4: Adding Sprites & Prefabs & UNITY TEMPLATE DOWNLOAD
Tips & Tricks: Clipping Masks2:42
Clipping mask technique
Controlling the direction of gradients
Using layer blending modes
Tips & Tricks: Recording Actions2:12
Recording an action
Applying a shortcut key
Why Use Actions For Games?0:34
Tips & Tricks: Adjustment Layers3:50
Creating an adjustment layer
Painting on a mask
Useful shortcuts for resetting colours
Useful Adjustment Layers for 2D Background Design2:01
Tips & Tricks: Smart Objects1:59
Converting objects into smart objects
Applying changes
Reasons to use this workflow for a game production
Technique Practice

Vectors Part 1: Tracing a simple half-circle2:39
Controlling bezier handles
Avoiding bad tracing habits
Vectors Part 2: Tracing a cloud4:01
Moving bezier handles individually
Exaggerating shape
Using the Liquify tool to manipulate shapes
Vectors Part 3: Sketching & Tracing your own Squirrel3:51
Sketching out a simplified character
Tracing the base shape
Vector Tool Summary1:38
Statue Shape Exercise3:45
Using different methods such as scale, rotate, squash & stretch to create different statue heads
Character & Statue Shape Exercise
Vector Game Links0:03
Games that allow you to practice using the vector pen tool

Maureen Lukito Artists Work Process2:37
Research Techniques
Vector Process
Tips and Tricks
Creating Assets & Scheduling1:13
The importance of scheduling for a game artist
Maureen Introduction0:35
Game artist overview
Project Tools & Overview1:50
Game project overview
Using Pinterest and Padlet for research
Thumbnails Part 1: Statues & Vines4:33
Sketching the main statue
Blocking out a placeholder character
Creating simplified vines
Thumbnails Part 2: Sketching the Foliage6:25
Sketching Vines
Adding trees and foliage
Thumbnails Part 3: Waterfall & Cliff1:31
Finalising the thumbnails
Preparing thumbnails for the colour phase
Colour Theory Part 1: How We Perceive Colour2:41
Colour Theory History
The Painters Colour Wheel
Hue, Saturation & Value
How our monitors display RGB colour
"YURMBY" colour wheel
Colour Theory Part 2: Contrast and the Colour Wheel4:41
Breaking down a background: light on dark or dark on light?
Digital colouring process
Shape language
Colour Schemes: Complimentary, Split-complimentary, Triad, Square
Best methods for improving colour knowledge
Article Links: Testing & Adapting to Colour Blindness1:05
Techniques to use inside of Photoshop if you are colour blind
Thumbnails Part 4 Adding Colour3:55
Duplicating smart objects so you can alter them individually
Using colour blending mode to apply colour to thumbnails
Blocking out a base colour palette
Colour Theory Chapter Slides0:35

Optimization & Graphics Resolution0:42
Optimization techniques for creating games
Blocking Out the Placeholder Character3:44
Blocking out the body, horns, legs, eyes and mouth
Creating a Tileable Background3:45
Using the offset filter
Fixing problems with tiles
Blocking out the Clouds3:02
Using primitive vectors to block out the first version of the clouds
Layer style effect: Gradient Overlay
Mountains & Waterfall3:16
Blocking out the mountains and early waterfall section
Using straights against curves
Foreground Tree: Trunk & Branches2:20
Creating the main foreground tree trunk
Blocking out the branches
Foreground Tree Part 2: Working on the Branches2:09
Using circle shapes to block out the main leaves
Foreground Tree Part 3: Blocking out the Leaves2:53
Sketching a leaf shape
Applying the leaf shape to the circular sections
Overlaying leaf sections to create depth
Nesting smart objects
Foreground Round Statue Part 1: Base, Eyes & Mouth1:31
Using primitives to block out the rounded statue
Blocking out the eyes and creating a mouth
Foreground Foliage3:27
Creating a foreground foliage section
Main Statue Part 1: First Pass on Base, Teeth & Eyes7:09
Creating the feature statue in the level
Jungle Flower Part 1: Petals and Lighting4:05
Creating the main shapes of the flower based on the sketch
Red Foreground Flower: Quick Simple Flower1:23
Creating a quick simple foreground flower
Testing your graphics in Unity
Midground Trees Part 1: Trunk, Branches, Swirls and Glow4:31
Creating a glowing magical foreground tree
Midground Trees Part 2: Adding Leaves2:06
Adding branches
Creating leaf shapes
Applying gradients
Adding a Moon1:16
Using a vector and effect to block out the moon
Refining the Character4:24
Working on a second pass on the character adding details to the face
Waterfall texture2:54
Creating a square waterfall texture for the template
Main Statue Part 2: Adding Light and Feature Details4:46
Adding further lighting to the head
Creating cracks for the eyes
Main Statue Part 3: Detailing Teeth & Creature Eyes6:21
Adding creature eyes inside of the mouth
Refining the teeth
Round Statue Detailing: Mouth, Nose & Head1:35
Adding the mouth and nose
Creating the head section
Blocking out a New Stylized Cloud1:37
Creating the final indonesian inspired cloud
Adding detail and lighting
Background Bird: Indonesian Rhinoceros Hornbill0:55
Sketching and blocking out a vector bird for the foreground

Part 1: Breakdown of Tiling & Process1:23
Breakdown of the tiling system used for the vine
Overview of the vector process
Creating the Vine Tile Template4:43
Rubber band option for tracing
Subtracting vector shapes
Merging shape components
Part 1: Block Out3:55
Part 2: Adding Value4:19
Adding a base value to the vine
Blocking out the first base vine shapes
Part 3: Adding Lighting & Leaves4:33
Applying shadows
Adding shrubs
Creating a grass section to the top of the vine
Part 4: Adding Grass & Moss2:25
Adding leaf detail to the vines
Creating and refining twisting vines
Part 5: Adding More Leaves3:03
Adding leaf detail
Refining the tiling sections
Part 6: Final Detailing2:01
Adding a soft-light gradient
Checking the tiles work
Placing a decorative twirl to the vine section
Adding a Bat Creature Using Simple Shapes2:30
Blocking out a bat creature
Testing and placing in the environment
Final Asset Tweaking: Blurring Foreground Assets0:36

Adding a Completely New Spritesheet PSD1:52
Unity Part 1: Replacing & Correcting Sprites4:43
Replacing existing graphics with your own
Correcting clipped sprites
Unity Part 2: Parallax & Layer Sorting2:19
Changing parallax speed
Altering the waterfall speed
Sorting layers
Unit Part 3: Mesh Colliders & Testing4:40
Altering the jungle vine mesh collider
Testing changes
Unity Part 4: Adding Sprites & Prefabs & UNITY TEMPLATE DOWNLOAD2:46
Adding a new sprite
Creating a prefab object
Downloadable materials: Photoshop PSD by Maureen Lukito
Unity Template by Yrjö Peussa
Unity Quick Lecture Summary0:49
Wrap Up Lecture0:29
Final wrap up of the course
Bonus Lecture: Link To Articles and Video Reference0:27
A Padlet board with additional links to articles and videos on 2D Background Design

Requirements

Basic drawing ability is a must
Intermediate understanding of Photoshop & basic understanding of Unity
Digital drawing tablet
Software required: Free version of Unity (minimum version 5.5of3) & Trial of Photoshop

Description

Focusing on fast vector techniques in Photoshop you will create a unique looking style for a 2d platform running game. Skills you must have already:

Basic drawing ability
Basic experience with Photoshop
Basic understanding of Unity

The vector techniques covered are simple and effective to give maximum impact in a short amount of time. Using Photoshop smart objects is a key concept of the course a technique commonly used by professional game artists.

Split into two sections first you get familiar with the vector tools and thumbnail process. Then we jump into a mini project called the Golden Antelope inspired by Indonesian folklore. You'll see the whole process take shape from thumbnails to finished image.

*Assignments are included during the course to aid you learning. Feedback is available directly from the instructor who has a track record that spans over twenty commercial game releases.

What is also included in the course?

Full HD Stylized Background made by a Rovio game artist free to use for your game projects
2D Unity game template to test your assets
Links to learning games, articles, tips, tricks & more!

As this course is aimed at those with a basic understanding of Photoshop it moves fast giving you the key concepts so that you can apply the techniques to your own game productions.

Part 1: Nick Sweetman

Guiding you through the basic vector tools and thumbnail process I get you up to speed before you start going through the mini game project. We cover tips and tricks to speed up workflow and look at the main vector techniques with the pen tool.

Part 2: Graphics: Maureen Lukito - Narration: Nick Sweetman

Rovio game artist Maureen Lukito shows the workflow she uses to create a professional 2d game background. We go from scheduling to blocking out the assets and implementing them into the game engine Unity. The template scene gives you the essential elements you need to test your environment: A jumping character, animated parallax layers with basic functionality for you to move through the level. The template is coded by game programmer Yrjö Peussa and is specifically designed for testing and is not a complete game, if you know coding feel free to build on top!

Who this course is for:

Has a basic drawing ability and wants to learn professional game techniques
Hobbyist looking to improve skills

2D Background Design For Games - Vector Techniques

What you'll learn

Explore related topics

Course content

Tips & Tricks for Photoshop Workflow7 lectures • 14min

Photoshop Vector Introduction6 lectures • 16min

Thumbnail Sketching Practice5 lectures • 14min

Project: The Golden Antelope Graphics by Maureen Lukito12 lectures • 32min

The Golden Antelope: Blocking out Colour Vectors23 lectures • 1hr 10min

Creating the Jungle Vine10 lectures • 29min

Unity: Testing out Graphics8 lectures • 18min

Requirements

Description

Who this course is for: