2D Game Artist: Design Pixel Art From Scratch

 Section 2 Introduction

• Well done starting section 2
• Going from 64 to 1024 pixels!
• New topics: Work to spec, transparency, consistency
• New tools: layers, gradient fill, selection
• Be Able to work from a Spec
• Produce in-game icons for inventory or abilities
• Get on the App Store with an icon like Terraria

(Unique Video Reference: 1_GI_GMP)

Working To A Specification

• Generating your own spec
• Make consistent icons within your game
• Understanding how some choices naturally change others
• Really good resources
• Google & Apple

• Looks real, or is iconised
• 3D or 2D in appearance
• Transparency- are parts of image see through?
• Shading- flat shading through to ‘realistic’
• Square Edged, rounded square, circular etc.
• Axis of Symmetry / Mirroring

• Rules are meant to be broken?
• Break little things whilst keeping to the idea of the rule
• Slipping too far from your specification will lead to inconsistency
• Consistency is important with a collection.

(Unique Video Reference: 2_GI_GMP)

Drawing Straight Lines

• How to draw a straight line in GIMP

(Unique Video Reference: 1a_GI_GMP)

Introduction To Layers And Alpha

• Layers enable a non-destructive workflow
• Creating a new layer
• Layer ordering
• Layer opacity
• Understanding the arrangement is important

(Unique Video Reference: 3_GI_GMP)

Using The Eraser

• Reverting a GIMP file
• Brush type and hardness
• Hard edge

(Unique Video Reference: 4_GI_GMP)

Using Pallets For Consistency

• What is a Palette?
• Adding palettes to our work space
• Viewing and editing a palettes
• Creating a palette of your very own

(Unique Video Reference: 5_GI_GMP)

Using The Paintbrush And Airbrush

• There are 9 brush tools
• Pencil, Paint Brush and Airbrush are very similar
• Quick colour picker and straight lines
• Overview of the tool options

(Unique Video Reference: 6_GI_GMP)

Quickly Selecting An Existing Colour

• Introducing the Color Picker Tool
• Only active layer vs sample merged
• Selection methods
• Using CTRL with other brush tools has persistent settings

(Unique Video Reference: 6a_GI_GMP)

Filling An Area With One Colour

• Bucket Tool
• Switching between FG and BG Colour
• Pattern Fill
• Affected area
• Threshold
• Affected area
• How it is used with transparency
• Filling based on other layers
• Challenge

(Unique Video Reference: 7_GI_GMP)

Using The Selection Tools

• What is selecting?
• 7 different selection tools!
• Focus on: Fuzzy and By Colour
• Selection modifiers
• Inverting selection
• Other tool options
• Moving your selection
• Challenge

(Unique Video Reference: 8_GI_GMP)

In this quiz we'll test your knowledge up to this point to help ensure you understand the key concepts covered in the course.

Moving Images And Layers

• Moving Layers
• Linking Layers
• Layer Transforms

(Unique Video Reference: 9a_GI_GMP)

• Use the skills you have just learn to create a new game icon
• Consider moving your layers to re-compose an image
• Link layers when necessary
• Share with us your new game icon

(Unique Video Reference: 9b_GI_GMP)

Modifying Your Selections

• Rectangle select and ellipse select
• Shrink, Grow and Border

(Unique Video Reference: 10_GI_GMP)

Using Selection Modifiers

• Create 4 new 32x32 images

• Use the selection modifiers in each one

• In one of your images use shrink selection

• In another use grow selection

• For the 3rd image use border selection

• The final image use whatever you like

• Share at 64x64!

(Unique Video Reference: 11_GI_GMP)

Combining Multiple Images

• Dragging and dropping one image to another

• Opening other images as layers

• Layers can be different sizes than the canvas

(Unique Video Reference: 12a_GI_GMP)

Making A Composite Image

• Bring together 2 Or more images into one new image
• Share your work with us!

(Unique Video Reference: 12b_GI_GMP)

Moving Selections

• Sections can be used like stencils
• Similar to moving layers
• Growing and shinking selections

(Unique Video Reference: 13a_GI_GMP)

Drop Shadows And Reflections

• Make a drop shadow for one of your icons
• Make a silhouette of one of your icons
• Try making a reflection
• Think of other uses for your selections
• Share your work!

(Unique Video Reference: 13b_GI_GMP)

Floating Selections

• Cause of frustration in GIMP
• Why float a selection- Often another layer is used.
• See a floating select as a "temporary layer"
• Floating a selection manually
• Some actions create floating selections automatically
• You cannot perform actions on other layers whilst a layer is floating
• Anchoring the floating selection.

(Unique Video Reference: 14a_GI_GMP)

Keeping Yourself Organised

• This is an ideology that doesn't have a right answer
• Naming will depend on Project, Team and many other factors
• Naming Layers as you create them
• Keeping your folders tidy
• Be open and expecting of change as you progress
• When working in a group accept that naming and filing will often be group focused rather than personal
• Embrace deleting old and out of date work

(Unique Video Reference: 15_GI_GMP)

Creating A Game HUD

• Open up the Bottom HUD from your resources
• Pick your chosen from the ability inspiration table
• Assemble your HUD and share!

• Optional: Edit ours or make your own HUD
• Optional: Invent your own abilities

(Unique Video Reference: 16_GI_GMP)

In this quiz we'll test your knowledge up to this point to help ensure you understand the key concepts covered in the course.

Section 2 Wrap Up

• Well done!
• Got to grips with many of the basic brush tools 
• You have mastered the basics of Pixel Art 

Challenges: larger composite images, improve your emoticons, offer to help community.

(Unique Video Reference: 99_GI_GMP)

• Michael Introduces what it coming up in Section 3

What Is Animation

• Animation is an illusion of motion
• Images are our Frames
• The images are shown to us at a regular interval, called frames per second.

• Layer Order
• Previewing the animation
• Exporting as a GIF

(Unique Video Reference: 3_AS_GMP)

Deciding On Frame Rate

• Direct impact on output

• Yes can be changed later and in game

• Higher FPS means inserting frames, lowers means cutting them to keep the same animation.

(Unique Video Reference:  4_AS_GMP)

Layer Animation Parameters

Different Layer Options

• (ms) eg (100ms) : Time that the frame will be showed for.

• (combine) : Mixes the current frame with the one before it- useful with alpha layers

• (replace) Replaces the previous frame regardless of any layers having an alpha layer

Note, the order matters as do the brackets and spacing
Recommended Example:  LayerName (100ms)(replace)

(Unique Video Reference: 5_AS_GMP)

Layer Boundaries

• Controlling and optimising layer boundaries

(Unique Video Reference: 6_AS_GMP)

Squash And Stretch

• We won’t cover them all in this section.

• Recommended book: Disney Animation: The Illusion of Life

• Start with squash and stretch and apply that to an animation.

(Unique Video Reference: 7_AS_GMP)

Making a Bouncing Ball

• Create a 2 second animation, at 10fps.

• Ball falling off a ledge and hitting the ground

(Unique Video Reference: 8_AS_GMP)

Multi Layer Images And Animation

• You can have a layered animation by using Layer Groups
• Layer Groups respect previous layer visibilities

Straight Ahead And Pose To Pose

• Neither of these techniques are exclusive, mixing them is fine.
• Picking the appropriate one can be a huge time saver

Straight Ahead

• Very goof for unpredictable animation like flames water and smoke
• Works because it requires the previous frame for the current one

Pose To Pose

• Gives the most control
• Get a good idea of the whole scene early on, catching any issues
• Helps keep consistency throughout an animation
• Your character or object ends up in the right place

GIFs And Layer Groups

• How to organise layer groups so that your animations can be layered

• Workflow ideas to speed up multi-layer animations

Ref: 11_AS_GMP

Slow In And Out

• How to make animation seem less robotic and more natural
• Techniques for creating more convincing movement

Two Different Feeling Animations

• Steady vs Fast

Colour Change Over Time

• Smudge Tool

• Workflow thoughts

• Using Opacity

• Preventing out of memory errors

Ref: 14_AS_GMP

Making An Animated Sunset

• Creating An Animated Sunset

What Is A Sprite?

• Sprite: an image that’s integrated into a larger scene
• Sprite sheet: many of sprites combined in one image
• Typically associated with 2D animations and GUI elements.
• A “texture atlas” is essentially the same thing but has a different use

What Is Power Of Two?

• Talking specifically about the pixel x pixel size
• In brief 2^n, where n is a positive integer
• Typical ranges in graphics are from 2^0 or 1px to 2^12 which is 4096px
• The X and Y dimensions can be different
• Usually not necessary, but recommended to prevent uncontrolled blurring or border issues
• Not Power Of Two is referred to as NPOT

Packing Sprites

• Go for ease of use and organisation rather than all optimisation.
• How is your sprite sheet is going to be read?
• Know your target platform’s maximum texture size
• Recommend no larger than 2048 x 2048 in general
• Avoid mixing different sprite sizes

Aligning Your Work

• Power of two image/sprite isn’t necessary.
• Be aware that NPOT sprites can bleed into one another and have border issues
• Consider packing sprites into POT cells or with extra padding
• For sanity recommend sticking with POT sprites and sprite sheets, then everything fits in properly!

(Unique Video Reference: 16_AS_GMP)

What Is A Sprite?

• Sprite: an image that’s integrated into a larger scene

• Sprite sheet: many of sprites combined in one image

• Typically associated with 2D animations and GUI elements.

• A “texture atlas” is essentially the same thing but has a different use

What Is Power Of Two?

• Talking specifically about the pixel x pixel size

• In brief 2^n, where n is a positive integer

• Typical ranges in graphics are from 2^0 or 1px to 2^12 which is 4096px

• The X and Y dimensions can be different

• Usually not necessary, but recommended to prevent uncontrolled blurring or border issues

• Not Power Of Two is referred to as NPOT

Packing Sprites

• Go for ease of use and organisation rather than all optimisation.

• How is your sprite sheet is going to be read?

• Know your target platform’s maximum texture size

• Recommend no larger than 2048 x 2048 in general

• Avoid mixing different sprite sizes

Aligning Your Work

• Power of two image/sprite isn’t necessary.

• Be aware that NPOT sprites can bleed into one another and have border issues

• Consider packing sprites into POT cells or with extra padding

• For sanity recommend sticking with POT sprites and sprite sheets, then everything fits in properly!

(Unique Video Reference: 17_AS_GMP)

What Is Your Output?

• Think of your output first, that filters back to everything else.
• Where is your image ending up?
• In Game?
• On the Web?
• In Print- Box Art and Manuals?

Types Of Images

• RAW- Uncompressed eg data straight from a camera sensor.
• Uncompressed (lossless): e.g. BMP, TIFF, TGA...
• Compressed
• Lossy: e.g. JPG
• Lossless: e.g. PNG, GIF*
• GIF is an 8bit indexed (per frame), has transparency (either ON/OFF)

Program Specific Files

• XCF - Gimps own format, Game Engines and most other programs do NOT understand this file type
• PSD - Photoshop document

When To Convert Image Types

• Creating all of your images as PNGs will make your project consistent and save space
• Avoid resaving a JPG, each time you do that you will lose more information
• Converting JPG to PNG is great if you need to edit
• If you are having an issue with PNGs
• sIf the target destination needs it in another format

(Unique Video Reference: 18_AS_GMP)

Testing Our Sprite Sheet

• This lecture is all about testing your work straight away
• We’ll search for a tool
• Use it to test that our sprite sheet behaves as expected

(Unique Video Reference: 19a_AS_GMP)

Manually Installing GIMP Add Ons

• How and where to install script and python files
• Mac installation at 3 mins
• Challenge at 5 mins

(Unique Video Reference: 20_AS_GMP)

Add On: Fuse Layers

• How to use the fuse layer filter we just added
• The caveats and things to watch out for when using it

(Unique Video Reference: 21_AS_GMP)

Add On: Sprite Sheet

• How to use the sprite sheet filter we have added
• Really easy to use, but just makes one long strip, which might be problematic

(Unique Video Reference: 22_AS_GMP)

Easy Repeating Elements

• How to use graphical elements to repeat work

(Unique Video Reference: 24_AS_GMP)

Building a Modular Wall

• Fleshing out the wall
• Creating a variation using the wall as a base

(Unique Video Reference: 25_AS_GMP)

Mocking Up A Scene

• Mocking up our scene to get an idea of the final animation
• Important to make the scene more interesting

(Unique Video Reference: 26_AS_GMP)

Nested Layer Groups

• Essential for managing animation with multiple elements
• Helps keep elements separated and organised

(Unique Video Reference: 27_AS_GMP)

Blending Animation

• A Filter that can help smooth out your animations
• Unfortunately it has a couple of drawbacks

(Unique Video Reference: 28_AS_GMP)

End Of Section Challenge

• Finish making your end animations
• Produce a final animation for your scene
• Make it between 2-5 seconds long
• Keep it simple and straightforward

(Unique Video Reference: 29_AS_GMP)

• Michael Introduces what it coming up in Section 4

(Unique Video Reference: 1_CS_GMP)

• Art Style
• Actual Character

• No real dimension requirement

• Start from the ground up

• Human
• Line art
• Focus on form

(Unique Video Reference: 2_CS_GMP)

Section focused on principles of character creation

Drawing Choices

• Digital stylus
• Pen and paper
• Touch screen
• Trackpad / Mouse

(Unique Video Reference: 3_CS_GMP)

• Practice your basic shapes
• This will give you confidence with your art
• Also provide you with a strong foundation
• Experiment combining shapes to make new shapes

(Unique Video Reference: 4_CS_GMP)

• Super useful for drawing curves especially long ones!
• Especially if you don’t have a stylus.

(Unique Video Reference: 4a_CS_GMP)

• Use them!
• Gather many references
• Help with inspiration
• Essential communicating and convincing your viewer
• Get source material wherever possible
• Take care with references

(Unique Video Reference: 5_CS_GMP)

• Putting together basic shapes to make more complicated forms
• Used for building up an image
• Used for breaking down an image
• Used with layers / lighter grey

(Unique Video Reference: 6_CS_GMP)

• Learn about the 6 Toolbox Transforms

(Unique Video Reference: 6a_CS_GMP)

• Understanding the foundations of a character
• Allows sensible posing and animation

(Unique Video Reference: 7_CS_GMP)

• Using the head technique for proportions
• Allows you to construct humans of differing sizes
• Helps maintain consistency through your drawing

(Unique Video Reference: 8_CS_GMP)

• Even though we are working 2D
• Often our subjects are not flat
• Practice your basic 3D forms

(Unique Video Reference: 9_CS_GMP)

• How to import drawings you have done
• Tips on getting the best import

(Unique Video Reference: 10_CS_GMP)

• Some Larger projects can be difficult to stay motivated on
• Michael Given some tips on how to maintain your momentum

(Unique Video Reference: 10a_CS_GMP)

• A sense of Depth can be achieved though multiple ways
• Use of Value
• Affordance through surface lines/shading
• Almost like faked ambient occlusion

(Unique Video Reference: 11_CS_GMP)

• Isolating parts of an image
• Other method can be just as quick

(Unique Video Reference: 12_CS_GMP)

• The use of layering and overlap
• Using Surfaces to place objects

(Unique Video Reference: 13_CS_GMP)

• Using shapes to define boundaries of a drawing

(Unique Video Reference: 13a_CS_GMP)

• Size differences of same objects
• Foreshortening

(Unique Video Reference: 14_CS_GMP)

• Introduction to direction lighting

(Unique Video Reference: 15_CS_GMP)

• Tangents occur when two or more lines converge
• Avoiding tangent is key to keeping an illusion of depth
• Aids clarity and readability

(Unique Video Reference: 15a_CS_GMP)

• Drawing done in preparation of a final piece
• Use to understand the challenges of your work
• Plan elements to be Used
• Studies can be focus on a tiny part of drawing or whole form as we have been doing
• Other studies might focus on lighting, colour, perspective and general composition.

(Unique Video Reference: 16_CS_GMP)

• Gives a fundamental understanding of how bodies are constructed
• Makes it easier to construct hybrids
• Helps with creating a realistic physique

(Unique Video Reference: 17_CS_GMP)

• Understanding the overall shape of the head
• Learn quick ways of drawing the head in multiple positions

(Unique Video Reference: 18_CS_GMP)

• Getting eye just right
• What to avoid when drawing eyes
• How the eyes and brow communicate

(Unique Video Reference: 19_CS_GMP)

• Michael draws an eye study

(Unique Video Reference: 19a_CS_GMP)

• Getting nose made using a couple of circles and lines
• The nose is poorly define with few hard edges
• Most of the form is made through shading

(Unique Video Reference: 20_CS_GMP)

• Shape of the mouth is highly flexible
• How the lips interact and overlap
• The Shape and position of teeth

(Unique Video Reference: 22_CS_GMP)

• The Hands are as complex as the entire body in their structure
• They can be positioned in many configurations
• Best built from bones and then manipulated
• You usually have access to one whilst drawing- use it as reference.

(Unique Video Reference: 24_CS_GMP)

Testing you knowledge up to this point in the course...

• Well done you have completed the section!

(Unique Video Reference: 99_CS_GMP)

Michael Introduces what it coming up in this Bonus Section

(Unique Video Reference: 1_TT_GMP)

What Is A Digital Image?

• Zooming Right In
• Digital Images are a numerical representation of an image
• This means maths can be used on our images
• Don't be scared by numbers!
• Open photo
• Make image grayscale
• Use the color curves

(Unique Video Reference: 2_TT_GMP)

Colour Channels

• RGB images
• 3 grayscale channels each 8 bit 24bit colour space
• Alpha channel is another grayscale 8 bit
• Working on each channel separately
• Channel information to layers

(Unique Video Reference: 3_TT_GMP)

Layer Math Modes

• Changing the layer mode
• Understanding the maths options
• Making Layer Groups
• https://docs.gimp.org/en/gimp-concepts-layer-modes.html

(Unique Video Reference: 4_TT_GMP)

(Unique Video Reference: 5_TT_GMP)

Quick Win Tiling Textures

• Not Much Control of the output

• What happens when you tile a texture?

• What does seamless mean?

• How to tile a texture in GIMP

• Creating an automatic seamless texture in GIMP

(Unique Video Reference: 6_TT_GMP)

• Michael wraps up the Tiling Textures section

(Unique Video Reference: 99_TT_GMP)

• Congratulations!
• Well done for completing the course
• Onwards and upwards from here
• Build out your portfolio

(Unique Video Reference: 100_TT_GMP)