Pixel Art Selfies

Type: Active
Age: High school
Optimal size: 6-10
Estimated cost: Free
Planning time: <2 hours
Frequency: One-time

Learning outcomes

Participants received very basic background instruction on HTML and CSS and their practical uses. They learned how to visualize, translate, and plan out their images first by using grids and colored pencils. They also learned how to search for and use online resources for HTML and CSS.

Instructions

Supplies:

• graph paper
• computer with text editor (Notepad++ is preferable-and free!-but the standard text editor included with most computers works fine)
• flash drives preloaded with code for various sizes of grids (optional, to make a shorter/faster program)

Resources:

• W3Schools HTML tutorial
• W3Schools CSS examples (scroll to Inline Styles, about 1/3 of the way down the page)
• W3Schools HTML Color Picker

1. It is recommended to have participants use graph paper to sketch out their designs before working with the HTML, to give them some practice for how to visualize their pixel images. An example of a branded 10x10 grid is included in the other resources section, or for the higher resolution images, regular graph paper can be used.

2. Once participants are ready, they can begin editing their HTML using Inline CSS to change the color of individual "pixels" on their grid canvas. The code for each size of grid we used is included in the other resources section, available to copy and paste so participants can get right to coloring. You could even have the code ready to go in the text editor when the program starts. To change the color of a pixel, all you have to do is edit the line that corresponds to the square you want to change by adding in style=background-color: and your chosen color after the word "pixel". It seems like it would take forever, but it actually goes really quickly! Having your graph paper to reference is helpful.

3. You can check your progress by saving your work as HTML and opening it in a browser.

Tip: the fewer colors you use, the more your pixel selfie will have a retro video game look.

Evaluation

All of our participants picked up how to make their pixel art really quickly. Unfortunately the computers we have at our library didn't have a fully featured text editor like Notepad++, which we thought might be an issue, but everything worked out really well. We thought of ways to make the program more challenging or multi-part by using Photoshop or Pixlr Editor to pixelate images and then translating them into HTML, or by adding some JavaScript to make the coloring go more quickly.

Other resources

Notepad++ info and download link

Pixlr Editor

example coloring page

To download the below codes for the grids, please right click over the link and click "save link as."

branded 10x10 grid

branded 20x20 grid

branded 25x25 grid