Objectives ● Explain what a pixel is ● Learn about the origins of Pixel Art ● Make your own digital art Welcome to
● Different Ways you can Computing 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 These numbers represent binary 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
This type of grid is a Bitmap 0 0 0 0 0 0 0 0 0 0 0 0 0 Quick Recap 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
Video Link Cracking the Code, How pictures can be represented in the form of binary digits Pong 1972 Sonic The Hedgehog Minecraft 2011
One of the first offerings Home consoles start to be Pixel style has a revival thanks to driven by the advancements in available and technology continues games such as Minecraft. With technology throughout the to move forward bringing us many developers choosing a pixel better graphics. 2D style. race to be the first into space. 1980 2000 TODAY
1970 1990 2010
Pac-man 1980 Pokemon
Arcades are a big deal with games Pokemon becomes a massive hit such as Pac-Man, Donkey Kong spanning decades. Brief and many more. History Examples How many can you name? How many can your parents name? Examples outside of Computer Games
Junior Senior - ‘Move your Feet’ Nyan Cat GIF - Youtube - 2011 - Music video - 2011 Pixels (12) - Film - 2015
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 Supplies: How to create a Pixel Art Self Portrait ● Squared Paper ● Black Pen or Pencil ● Colouring Pens
Steps 1. Draw a grid 16x16 squares 2. Find the centre line of your grid 3. Draw two eyes 4. Draw a mouth 5. Start drawing the bottom of the head 6. Draw your hairline and ears 7. Draw a neck and a body 8. Finish the outer hairline If you fancy a challenge try a grid of 32x32 squares 9. Colour it in Ta Da!
Now to make it Digital! and Animate 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 Takes time to set up art Needs knowledge to use it Industry standard program Not specifically for pixel art Expensive
Aseprite ££ Great for Pixel Art £16.20 Mirroring Takes time to get familiar with Designed for pixel art
Pyxel Edit £ Great for landscape Tiles £7.30 Updates all tiles as you go Still being developed
Piskel Free Quick to learn Not lots of features mostly for Great for sprites creating sprites Online Editor
Other mentions GIMP, Illustrator and Excel. Piskel Step 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. Fancy a Coding Challenge?
Now you want to code your own pixel art trinket.io is a great place to start
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. Here are some Trinket.io Tutorials from our lessons
HTML Tutorial Python Tutorial
Create a pixel art grid that you can edit. As well We explore how to use lists and list of lists with as using HTML and CSS, you’ll learn how to use Python to create some 2D pixel art graphics. JavaScript to add interactivity to your pixel grid. Python Tutorial Pixel Art
HTML Tutorial Pixel Art Send us your Pixel Art to ...
Or
Find us on Twitter and Tweet @prof_sparks
Feel free to email us any questions Resources and Links https://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/