Giuseppe Longo

Pixel art for Coders: There’s no need to be Van Gogh

www.misbug.com / info@misbug.com

ROME 27-28 march 2015

ROME 27-28 march 2015 – Giuseppe Longo

A misbug in computer programming is an unintended property of a program which should have been

classified as a bug, but which turns out to be a useful feature.

ROME 27-28 march 2015 – Giuseppe Longo

ROME 27-28 march 2015 – Giuseppe Longo

ROME 27-28 march 2015 – Giuseppe Longo

ROME 27-28 march 2015 – Giuseppe Longo

ROME 27-28 march 2015 – Giuseppe Longo

ROME 27-28 march 2015 – Giuseppe Longo

ROME 27-28 march 2015 – Giuseppe Longo

“A video game is meant to be played… not watched.”

Aaron Steed

ROME 27-28 march 2015 – Giuseppe Longo

Aaron is rightAaron is KIND OF right

ARTIST TASKS

• Put the game into context

• Create visual solutions to enhance usability

• Design a basic language to drive the user through contents

• Make the project look cool!

ROME 27-28 march 2015 – Giuseppe Longo

Aaron is KIND OF right

ARTIST TASKS

• Put the game into context• Create visual solutions to enhance usability

• Design a basic language to drive the user through contents

• Make the project look cool!

ROME 27-28 march 2015 – Giuseppe Longo

DESIGN A LANGUAGE

“QAPLA’!” (“I wish you success!”)

ROME 27-28 march 2015 – Giuseppe Longo

DESIGN A LANGUAGE

“QAPLA’!” (“I wish you success!”)

A verbal language finds its origins in atavic concepts that work as basic units

ROME 27-28 march 2015 – Giuseppe Longo

DESIGN A LANGUAGEDesigning a visual language is a bit like creating a verbal language

ROME 27-28 march 2015 – Giuseppe Longo

DESIGN A LANGUAGEDesigning a visual language is a bit like creating a verbal language

ROME 27-28 march 2015 – Giuseppe Longo

DESIGN A LANGUAGEIn a visual language basic shapes are the principal bricks

graphic designers use to build sentences

Hey wait a second… This is a huge PIXEL!

ROME 27-28 march 2015 – Giuseppe Longo

Old Cathodic Ray Tube (CRT) screens where displaying blurry pixels that didn’t look like squares in the general

composition.

High Definition technology shows nowadays the real nature of pixels, giving them back their design function

Crash 'n' the Boys: Street Challenge - Technos Japan (NES - 1992)

ROME 27-28 march 2015 – Giuseppe Longo

High Definition technology shows nowadays the real nature of pixels, giving them back their design function

ROME 27-28 march 2015 – Giuseppe Longo

PIXELS AS DESIGN ELEMENTSHaving access to Pixel Art is really easy. In fact it is an almost no-expense medium that doesn’t

require illustrator/artist skills for basic usage

There’s no need to be Van Gogh! You just need to follow few rules

ROME 27-28 march 2015 – Giuseppe Longo

PIXELS AS DESIGN ELEMENTSThere are three simple rules that can make

pixel art work as a simple design tool to build a visual language with.

• Think of pixels as clusters

• Always start with clean shapes

• Less is more

ROME 27-28 march 2015 – Giuseppe Longo

CLUSTERS OF PIXELS

ROME 27-28 march 2015 – Giuseppe Longo

CLUSTERS OF PIXELSA cluster of pixels is a group of pixels with the same colour that defines a shape and/or an

island of visual content.

you can think of clusters

as they were layers of stencils

ROME 27-28 march 2015 – Giuseppe Longo

CLUSTERS OF PIXELSUnderstanding and controlling clusters is important, as

changing the basic shape of a cluster (even of one pixel) may change entirely the visual message

conveyed by the image

ROME 27-28 march 2015 – Giuseppe Longo

SIMPLE SHAPES ARE THE BEST

ROME 27-28 march 2015 – Giuseppe Longo

SIMPLE SHAPES ARE THE BESTBasic and simple shapes are easy to remember and

their message can be transferred easily to a persistent visual language

ROME 27-28 march 2015 – Giuseppe Longo

SIMPLE SHAPES ARE THE BESTBasic and simple shapes are easy to remember and

their message can be transferred easily to a persistent visual language

ROME 27-28 march 2015 – Giuseppe Longo

SIMPLE SHAPES ARE THE BESTBasic and simple shapes are easy to remember and

their message can be transferred easily to a persistent visual language

ROME 27-28 march 2015 – Giuseppe Longo

SIMPLE SHAPES ARE THE BESTBasic and simple shapes are easy to remember and

their message can be transferred easily to a persistent visual language

ROME 27-28 march 2015 – Giuseppe Longo

SIMPLE SHAPES ARE THE BESTIs good practice to rely on shapes that already

enforced their meaning in common visual languages

Colours also play their part when paired to certain shapes

VVVVVV - Terry Cavanagh (2010)

ROME 27-28 march 2015 – Giuseppe Longo

LESS IS MORE

ROME 27-28 march 2015 – Giuseppe Longo

LESS IS MOREOverdoing never pays off when designing a

visual language

In most cases if it’s simple for the designer to conceive it, it will be easy for the user to understand it

ROME 27-28 march 2015 – Giuseppe Longo

LESS IS MORE

Gunbrick SD - Nitrome (2015)

ROME 27-28 march 2015 – Giuseppe Longo

LESS IS MORE

Gunbrick SD - Nitrome (2015)

Gunbrick - Nitrome (2012)

ROME 27-28 march 2015 – Giuseppe Longo

LESS IS MORE

Gunbrick SD - Nitrome (2015)

Gunbrick - Nitrome (2012)

ROME 27-28 march 2015 – Giuseppe Longo

LESS IS MORE

Ending - Aaron Steed (2013)

ROME 27-28 march 2015 – Giuseppe Longo

SOFTWARES

ROME 27-28 march 2015 – Giuseppe Longo

SOFTWARES

Photoshop (Adobe)

Pro Motion (Cosmigo)

GraphicsGale (HumanBalance)

GIMP Grafx 2 AsepriteEdge

ROME 27-28 march 2015 – Giuseppe Longo

SET UP YOUR SOFTWARE

ROME 27-28 march 2015 – Giuseppe Longo

TIPS AND TRICKS

ROME 27-28 march 2015 – Giuseppe Longo

TIPS AND TRICKS• Use only PNG and GIF formats. JPG is your

enemy!

ROME 27-28 march 2015 – Giuseppe Longo

TIPS AND TRICKS• Rely on Math! Geometric growth and linear

patterns sometimes are the way

ROME 27-28 march 2015 – Giuseppe Longo

TIPS AND TRICKS• Keep the canvas size to a power of two

number of pixels

16x16px 32x32px 128x128px etc...64x64px

ROME 27-28 march 2015 – Giuseppe Longo

TIPS AND TRICKS• Keep the canvas size to a power of two

number of pixels

64x64px

32x32px

32x32px

KB KB

ROME 27-28 march 2015 – Giuseppe Longo

TIPS AND TRICKS• Use few colours and keep track of them while

adding new “concepts” to your visual language. Less colours doesn’t mean less detailed!

Player

Objective

Danger

Walls

ROME 27-28 march 2015 – Giuseppe Longo

TIPS AND TRICKS• For animations always try to move the clusters

that define the main shapes without adding stray pixels

ROME 27-28 march 2015 – Giuseppe Longo

“Like everyone else you want to learn the way to win, but never to accept the way to lose. To learn defeat is to be liberated

from it.”

Bruce Lee

“Comfort zones make you dull. Always try something new, and don’t be worried about taking false steps, because mistakes bring

new things to life.”

ROME 27-28 march 2015 – Giuseppe Longo

Thank you for your attention

ROME 27-28 march 2015 – Giuseppe Longo

www.indievault.it

ROME 27-28 march 2015 – Giuseppe Longo

Leave your feedback on Joind.in! https://joind.in/event/view/3347