Codemotion pixel art for coders - Codemotion Rome 2015

Giuseppe Longo

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

www.misbug.com / [email protected]

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.


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

Aaron Steed


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!


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!


DESIGN A LANGUAGE

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


DESIGN A LANGUAGE

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

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


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


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!


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)


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


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


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


CLUSTERS OF PIXELS


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


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


SIMPLE SHAPES ARE THE BEST


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

their message can be transferred easily to a persistent visual language


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)


LESS IS MORE


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


LESS IS MORE

Gunbrick SD - Nitrome (2015)


LESS IS MORE

Gunbrick SD - Nitrome (2015)

Gunbrick - Nitrome (2012)


LESS IS MORE

Ending - Aaron Steed (2013)


SOFTWARES


SOFTWARES

Photoshop (Adobe)

Pro Motion (Cosmigo)

GraphicsGale (HumanBalance)

GIMP Grafx 2 AsepriteEdge


SET UP YOUR SOFTWARE


TIPS AND TRICKS


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

enemy!


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

patterns sometimes are the way


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

number of pixels

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


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

number of pixels

64x64px

32x32px

32x32px

KB KB


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


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

that define the main shapes without adding stray pixels


“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.”


Thank you for your attention


www.indievault.it

http://www.indievault.it


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

https://joind.in/event/view/3347

Codemotion pixel art for coders - Codemotion Rome 2015

Documents

Transcript of Codemotion pixel art for coders - Codemotion Rome 2015