Welcome to Computing

Objectives● Explain what a pixel is ● Learn about the origins of

Pixel Art ● Make your own digital art● Different Ways you can

create Pixel Art● Understand how to code

Pixel Art

Amy Sparks

What is a Pixel?We are surrounded by pictures and digital images everywhere.

Pixel is short for picture element and pixels are tiny squares that make up a digital image.

The higher the resolution of an image, the more pixels and the more detail it will have..

However pixel art is about creating art with a limited number of pixels.

Coding or Paint by Numbers Grid of numbers to represent pixels

The more colours the more numbers you need 1 = black 0 = white 0 0 0 0 0 0 0 0 0 0 0 0 0

0 0 0 1 0 0 0 0 0 1 0 0 0

0 0 0 0 1 0 0 0 1 0 0 0 0

0 0 0 1 1 1 1 1 1 1 0 0 0

0 0 1 1 0 1 1 1 0 1 1 0 0

0 1 1 1 1 1 1 1 1 1 1 1 0

0 1 0 1 1 1 1 1 1 1 0 1 0

0 1 0 1 0 0 0 0 0 1 0 1 0

0 0 0 0 1 1 0 1 1 0 0 0 0

0 0 0 0 0 0 0 0 0 0 0 0 0This type of grid is a Bitmap

These numbers represent binary

Quick Recap

Video Link

Cracking the Code, How pictures can be represented in the form of binary digits

Let’s watch this video from the BBC to summarize what we just learnt about pixels.Don’t forget you could try this at home with post-it notes

BriefHistory

TODAY

1970

Pong 1972

One of the first offerings driven by the advancements in technology throughout the race to be the first into space.

Pac-man 1980

Arcades are a big deal with games such as Pac-Man, Donkey Kong and many more.

1980

1990

Sonic The Hedgehog

Home consoles start to be available and technology continues to move forward bringing us better graphics.

2000

Pokemon

Pokemon becomes a massive hit spanning decades.

2010

Minecraft 2011

Pixel style has a revival thanks to games such as Minecraft. With many developers choosing a pixel 2D style.

ExamplesHow many can you name?

How many can your parents name?

Examples outside of Computer Games

Junior Senior - ‘Move your Feet’ - Music video - 2011 Pixels (12) - Film - 2015Nyan Cat GIF - Youtube - 2011

Movies such as;● Wreck it Ralph - Film - 2012● The Emoji Movie - Film - 2017

Different Ways to make Pixel Art● Lego ● Fusible Beads● Post-It Notes ● Paper ● Squared Paper ● Minecraft ● LED Screens such as

Divoom● MS Paint● Spreadsheets

How to create a Pixel Art Self Portrait

Steps1. Draw a grid 16x16

squares2. Find the centre line of

your grid3. Draw two eyes4. Draw a mouth5. Start drawing the bottom

of the head6. Draw your hairline and

ears7. Draw a neck and a body8. Finish the outer hairline

9. Colour it in If you fancy a challenge try a grid of 32x32 squares

● Squared Paper● Black Pen or Pencil● Colouring Pens

Supplies:

Ta Da!

Now to make itDigital!

andAnimate it for

our very own GIF.

Quick Guide to different programs There are numerous different programs and ways to make pixel art.

Name Cost Ease Pros Cons

Photoshop ££££ Lots of uses other than pixel artIndustry standard program

Takes time to set upNeeds knowledge to use it Not specifically for pixel art Expensive

Aseprite ££ Great for Pixel ArtMirroring Designed for pixel art

£16.20Takes time to get familiar with

Pyxel Edit £ Great for landscape Tiles Updates all tiles as you go

£7.30 Still being developed

Piskel Free Quick to learn Great for spritesOnline Editor

Not lots of features mostly for creating sprites

Other mentions GIMP, Illustrator and Excel.

PiskelStep 1. Open Piskel in a new window or tab https://www.piskelapp.com/

Step 2. Create an account and sign in

Step 3. Resize your drawing area 16x16 pixels

Step 4. Set your pen size

Step 5. Set your palette

Step 6. Start to copy your original design done by hand

Step 7. Once you have complete your portrait add new frame

Step 8. Copy your portrait by using the rectangle made of dashes and use the shortcut ctrl+c then to paste press ctrl+v

Step 9. Alter your mouth or eyes for example close eyes

Step 10. Turn the frame rate to 2 fps and preview in a pop out window.

Here are some Trinket.io Tutorials from our lessons

Now you want to code your own pixel art trinket.io is a great place to start

Python Tutorial

We explore how to use lists and list of lists with Python to create some 2D pixel art graphics.

Python Tutorial Pixel Art

HTML Tutorial

Create a pixel art grid that you can edit. As well as using HTML and CSS, you’ll learn how to use JavaScript to add interactivity to your pixel grid.

HTML Tutorial Pixel Art

Fancy a Coding Challenge?

lets you run and write code in any browser, on any device. Trinkets work instantly, with no need to log in, download plugins, or install software.

Send us your Pixel Art to ...level2computing@wscac.onmicrosoft.com

Or

Find us on Twitter and Tweet @prof_sparks

Feel free to email us any questions

Resources and Linkshttps://www.bbc.co.uk/programmes/p0166rgs

https://www.bbc.co.uk/bitesize/topics/zf2f9j6/articles/z2tgr82

https://www.bbc.co.uk/programmes/articles/RZXpGYb82hdkXc5XN8S0nS/block-party-the-power-of-pixel-art-in-the-21st-century

https://youtu.be/dzN2pgL0zeg and https://youtu.be/a1yBP5t-fSA

http://www.nyan.cat/

https://www.aseprite.org/

https://pyxeledit.com/

https://www.piskelapp.com/

https://projects.raspberrypi.org/en/projects/pixel-art

https://www.101computing.net/pixel-art-in-python/