Web Literacy Basics II | Pixel Portrait

• 1. Preparation

  Learning Progression

  In this lesson, your learners will:

  1. Learn about 3 websites for making pixel art online.
  2. Use one of those websites to make art.
  3. Export or save their art to their computers.
  4. Upload their art to this Thimble project for remix.
  5. Reflect on their learning.

  ---

  You should...

  Do the activity on your own to become familiar with basic collaborative and open research practices in the work.

  1. Follow this link to the Thimble project for this activity.
  2. Click on the green "Remix" button in the upper right-hand corner of the window to go into the project's code.
  3. Click on the "Tutorial" pane next to the "Preview" pane in the upper right-hand corner of the coding window.
  4. Follow the steps in the tutorial to complete the activity. You may also need to check back here and complete some of the steps in this lesson plan to successfully finish the Thimble project.

  You can also try this module on embedding media in a webpage from the Mozilla Developer Network Learning Area.

  You may also wish to set up accounts on Thimble that you can share with your learners. This will save time later when they are ready to remix today's project.

  Post the URL, or Web address, of today's project somewhere highly visible in your room. You may want to post it as a shortened link using a service like bit.ly.

• 2. Introduction

  5 minutes

  Welcome your learners and explain that today we'll create our own pixel and use it in a webpage. Pixel art is that blocky kind of art we sometimes associate with old video games. Using online tools, we'll

  • Make our own pixel art.
  • Import it into Thimble, Mozilla's online code editor.
  • Insert our art into a webpage we can remix on Thimble.

  We'll use pixel art because it lets us build a picture block-by-block. We can all be successful with it without worrying about making the perfect drawing or painting or something.

• 3. Picking a Tool

  15 minutes

  Use your projected computer to show your learners today's "Pixel Portrait" project on Thimble.

  Explain that we'll make our own pixel art to go inside the picture frame currently occupied by space-cat.

  To do so, each of us will use one of these tools:

  • make8bitart.com - This is a bare-bones pixel-art maker that exports handy .png images. Typically, .png images can have transparent backgrounds to match webpages and are otherwise very editable in other programs.
  • piq.codeus.net - this one gives you more options than make8bitart.com, but exports simple bitmap images. Those bitmap (.bmp)images can be difficult to edit later.
  • piskelapp.com - you can save your work here if you login with your Google account, but you can also export versatile .png graphics.

  Give learners about 10 minutes to play around and pick the websites they want to use.

• 4. Making Art

  45 minutes

  Once learners have each identified a website to use for today's project, set them loose creating their art.

  Invite learners who have trouble finding inspiration to search for an image of a favorite game character, musician, or sports star, and to make a blocky portrait of that person.

  If you have learners who struggle with picking or using one of the websites, invite them to join you for a quick tutorial or mini-lesson on one of the apps. You can also share a tutorial video like this one:

• 5. Exporting Art

  10 minutes

  After about 45 minutes of drawing time, gather the group's attention to make sure learners know how to save their work.

  Saving with make8bitart.com:

  1. Learners should click on "import/save" and then choose "export art to .png".
  2. That command opens a pop-up window with a .png image of the user's artwork.
  3. Anyone using this site should drag that new picture to the desktop to save it.
  4. learners can leave these pictures on their computers' desktops or move them to their picture folders so long as they know where to find the pictures later in the project.

  Saving with piq.codeus.net:

  1. Learners should click on the old-school floppy disk icon at the bottom of the left menu bar.
  2. That command will open a normal dialog box for saving learners' work.
  3. learners should save work to their desktop, downloads, or picture folders so they know where to look for their images later in the project.

  Saving with piskelapp.com:

  1. learners can save your work online if they login with Google accounts. However, even without a Google account, they can export handy .png graphics.
  2. learners should click on the icon that looks like an old-school floppy disk in the right sidebar.
  3. Then, they should pick the command, "EXPORT SPRITESHEET.
  4. After that, learners should choose "Download PNG."
  5. That command will download images into the downloads folder on learners' computers.
  6. You should invite learners to ask for help getting to that folder if they need it.
  7. learners can leave their images in their downloads folders or move them to their picture folders or computers' desktops so long as they know where to look for their images later in the project.

• 6. Importing Art into Thimble

  10 minutes

  The next two steps are described in detail in the tutorial pane of today's "Pixel Portrait" project on Thimble. Invite learners back to that page and ask them to hit the green "Remix" button in the upper right-hand corner of the page.

  This will bring them into the project's code.

  The code editor screen inside Thimble has three main parts:

  • A "FILES" sidebar on th left that holds all of a project's code and assets, like images.
  • A code editing pane in the middle where learners can change the project.
  • A preview and tutorial pane on the right with tabs that let learners switch back-and-forth between a preview of their web project and a tutorial that supports their learning.

  Give learners a few minutes to help one another learn how to move back and forth between the parts of the interface and be sure they understand how to move between the preview and tutorial panes on the right.

  To import an image into today's project, all you need to do is drag an image file from the desktop or folder of a computer into the "FILES" sidebar in Thimble. Thimble will upload it automatically after that.

  Encourage learners to help one another import their images into Thimble and help those who experience difficulty finding their files or who struggle with the interface.

• 7. Inserting Images into a Webpage

  10 minutes

  The tutorial pane can help learners with this step, as well.

  learners should go to line 26 of the file called index.html in Thimble. They can delete space-cat.png in that line and type in the name of their imported images instead. When they look back at the preview pane of the webpage, learners should see their new art on the webpage in place of the old.

  learners should follow the last few steps in the tutorial to rename their images and publish their projects. Have learners help one another and be ready to assist learners who experience persistent problems with inserting their images or publishing their pages.

• 8. Reflection and Assessment

  10 minutes

  After learners finish the project, facilitate a reflective discussion of today's experiences on the Web.

  Before you begin, remind learners of community norms about kindness and encourage them to talk about their own learning, not about other people.

  Use questions like these or develop your own.

  • How did it feel to remix a page instead of starting from scratch?
  • How did it feel to make pixel art instead of beginning with drawing or painting?
  • Do you like sharing your work online? Why or why not?
  • What other kinds of art would you like to try making online?
  • What other parts of webpages like this one do you want to learn how to code next?

  You may ask learners to document or record their answers for assessment. Be sure to help each learner find a way to share that works for her, as well as for you, so you can gauge her learning about today's topic without a particular tool (like paper/pencil) blocking a learner's expression.

  If you or your learners are curious to learn more, check out this Introduction to HTML or this module on embedding media on a webpage from the Mozilla Developer Network Learning Area.

  Next activity→#allthestickerz