Create Scratch Backgrounds

Love pixel art? Why not try making some of your own!

In February’s issue of Beanz we introduced the basics of pixel art using Piskel. For June we will build off of February’s article and create a pixelated scene that can be used in a Scratch project.

Our goal is to make a tiled ground such as the one shown below:

To start, we will go to Piskel and log in. If you do not have an account, go ahead and make one before starting a project.

To start a new project, click the yellow Create Sprite button. On the right side of the screen find the gear image that represents the Preference section of the site.

When Preferences opens, find the Grid tab. Be sure to check the Enabled grid box.

Next, choose the smallest grid size and the smallest grid spacing.

Finally, find the Resize option and set the grid to 16 x 16. Click the yellow Resize button to save this grid size.

Now it is time to choose a color for the ground. In this example we will make grass on dirt, so we start with brown.

Once we find a hue of brown that we’re happy with, we can fill in the entire grid in with one click by using the paint bucket tool.

At this point the grid will look similar to the image below:

The next step is to add in some green toward the top. It is a good idea to select three hues of green from the color pallet to create shading in the grass.

Now that we have one dirt/grass tile, we can download it (as a PNG file), and then upload it into Scratch (as a sprite) to create a scene.

Once the image is in Scratch, click on the costume tab of the dirt/grass sprite and copy and paste it until it covers the width of the screen. Be sure to switch to vector mode to do so (the blue button at the bottom of the costume tab will read Convert to Bitmap).

If you’d like a “hilly” scene, paste some of the blocks kitty-corner, above (or below) and to the right with the corners touching.

Finally, we can use the color chooser to select a matching brown color to fill in the white space below our dirt scene.

Create a couple of pixelated trees (using Piskel or similar drawing app), add in a sprite from Scratch’s sprite collection, a blue sky background, and there we have it – a pixelated scene that can be used in your next coding project!

Learn More

Piskel App

Creating animations with Pixel Art

Create a pixel art gif with Piskel

Uploading animated character to scratch

Teach kids Pixel art animation


  • Jennifer Newell

    Jennifer is a math teacher by training, with an interest in computer science. While working on a computational thinking project at Google, she dived a bit deeper into CS education. Jennifer now teaches computer science to both high school and elementary school students, in addition to mathematics.

Also In The June 2021 Issue

Geocaching is a fun activity here on Earth. Now you can geocache on Mars. And the International Space Station.

He has performed for three US Presidents and with his business partner Scott Jacoby has helped build recording studios in Anguilla.

Use CodeGuppy to write, learn from, and improve your coding with this simple exercise!

Computing can help teach problem solving skills. Here's one way to help students and your kids to become critical thinkers.

New project alert! This time we are building transistors, a critical piece of any modern electronic device!

Exploring another weird tech term! This time we are looking at hard disk drives!

Check out our interview with Allison Grey, a mechanical engineer at vertical farming company in California!

What do cow catchers, an angry government and an early version of a modern computer have in common?

Learn how to edit your photos in fun and weird ways with Python!

In the time before WIFI there was Amateur Radio. Get your call signs ready!

Ever wonder how your computer processor works? And how that might impact quantum computing hardware?

While we all obviously love sheep, today we are talking about a different type of TEG.

Links from the bottom of all the June 2021 articles, collected in one place for you to print, share, or bookmark.

Interesting stories about computer science, software programming, and technology for June 2021.

Interested but not ready to subscribe? Sign-up for our free monthly email newsletter with curated site content and a new issue email announcement that we send every two months.

No, thanks!