Scratch thumbnails are a great way to add visual appeal to your Scratch project. In this tutorial, we're going to show you how to make your very own custom thumbnail!
A thumbnail is the icon or project image you see while exploring projects on the Scratch website. If you're looking to draw more attention to your own, this is a great way to do so!
Ready to put the finishing touch on your project, Scratcher? Let's begin!
Why Make Thumbnails on Scratch?
As a high-level visual programming language, Scratch makes coding easy for kid coders of all ages! Using Scratch blocks, you can make all kinds of interactive stories, animations, platformer games, and more. It's so much fun!
Once you've created a project, it's time to put the finishing touches on it. Enter thumbnail design. If you've ever watched YouTube videos, you've seen a YouTube thumbnail image. It's the image displayed while browsing for a YouTube channel or video.
Along with more views and subscribers, making your own thumbnail helps you to flex your creative muscles. This adds to the overall benefits of coding with Scratch.
Combining creativity with problem-solving skills, Scratch programming prepares a young coder for the hobbies and careers of the future!
What You Need to Get Started
New to Scratch? Welcome! As a free programming language, it's simple to set up. All you need is a Scratch account, compatible device, and web connection.
Signing up is easy. Just remember that you'll need to provide some information, as well as a username and password. Scratch is a fun & safe community that allows you to explore and create with ease. Coding has never been more accessible for kids!
Here are some handy beginner tutorials to get you up to speed:
My First Scratch Project (intro) How to Make a Scratch Game (step-by-step) How to Make a Platformer on Scratch (beginner)
Looking for something more advanced? Take a look at the following:
How to Make a 3D Game in Scratch (intermediate) Multiplayer Game on Scratch (intermediate) Game on Scratch with Levels (intermediate)
With practice and guided instruction, you'll become a full-fledged Scratcher in no time!
Scratch Thumbnail Tutorial
In this Scratch tutorial, we'll explore two main types of thumbnail design: static and animated (GIF).
As mentioned already, a thumbnail can add an attractive look to your project, which can help get the attention of other Scratchers. It's fun to share and connect with others! And a thumbnail can help build an audience that's supportive and interested in your work.
From Scratch playlists—these include projects with music—to clicker games to Scratch studios, thumbnails are a fun & easy way to attract more followers!
Ready to learn? Let's jump in!
Static Thumbnail
Let's begin with a static (or non-animated) thumbnail!
Step 1: Create New Sprite
First, we'll open the Scratch project and create a new sprite.
Make sure to name the sprite 'Thumbnail'. This helps to keep it organized in your project.
Step 2: Make Thumbnail Image
Once you've selected your new sprite, you can now get creative!
Some options? Use a screenshot of your project, paint a new image, or upload a pre-designed visual. In the above example, we see Andie and Dorian playing basketball!
To create your design, click on 'Choose a Costume' and select an option.
Ideally, you'll want your thumbnail to be a vector graphic. This helps make it look its best when the image is scaled. Click on 'Convert to Vector' to switch it to vector mode.
Also, make sure to fill the window with whatever design you either create or upload. You can also add text. That way, you'll take full advantage of the visual impact of your thumbnail!
Step 3: Create Code and Save Project
Got your thumbnail? Great! Now it's time to code it.
Click on the 'Code' tab. Grab a 'when flag clicked' block from Events. Then go to the Looks section and attach a 'hide' block to it.
Next, select a 'show' block. This will be separate from the previous blocks. Attach a 'go to front layer' block and then a 'go to x y' block at the bottom. Change the x value to 0 and the y value to 0. Finally, click on this block set and save your changes.
From here, go to your profile. If everything is working correctly, you'll see the new thumbnail for your featured project!
Animated GIF Thumbnail
Now that we've created a static thumbnail, let's make an animated thumbnail!
An animated thumbnail adds even more visual impact to draw people to your project. In this example, we'll upload a GIF. You can either create your own or use a premade GIF. This technique involves different steps.
Step 1: Choose GIF
A GIF, also known as a Graphical Interchange Format, is a series of images stitched together to form an animated loop. It can be created from multiple images or converted video. There are several ways to convert video into a GIF, including GIF conversion via Adobe.
In the above example, we're using a royalty-free GIF from Giphy. It depicts a kid floating in the air with their hand on the keyboard of a computer. There's also a colorful rainbow pulsing in the background!
Step 2: Add Browser Extension
Next, we want to add a browser extension to the Scratch tab.
For our example, we are using the Animated Thumbnail Bookmarklet from GitHub. Drag and drop the link provided on the page to your bookmarks or favorites bar. You can also press Ctrl+Shift+B (for Windows) or Cmd+Shift+B (for Mac).
Step 3: Select GIF
Got the extension loaded? Awesome! Now, we'll select our GIF.
Go to your profile and select the project on which you want to upload your GIF. Click on the project. Next, click on the 'Animated Thumbnail Set' extension at the top of your browser tab. This will allow you to upload your GIF of choice.
Once the GIF has successfully uploaded, go back to your profile and locate your project. If it’s loaded properly, you'll see your animated thumbnail (like the one in the above screenshot)!
And there it is! With a few easy steps, you can create your own custom thumbnails. These concepts aren't limited to Scratch. From animated thumbnails to video thumbnail templates, you can transfer this knowledge to YouTube, social media, and beyond!
Now Keep Exploring!
We hope you've enjoyed learning how to make a thumbnail on Scratch! It's fun to share projects, and a custom thumbnail can attract a bigger audience.
The discovery of new coding skills helps an aspiring coder to level up, leading to more advanced programming and limitless creativity. And with tailored guidance, it's a lot easier to build confidence and prepare for a bright future!
Explore our online coding lessons for kids, or contact our Advisors Team by calling (650) 263-4306 or emailing advisors@learnwithjuni.com to learn which courses are best for your student’s coding journey. You can also read more about how we use Scratch to teach coding.
Juni Learning offers award-winning online courses for kids ages 8-18. Explore private, group, and self-study courses in real world skills like coding, investing, public speaking and much more. We strive to empower students everywhere with passion, creativity, and excitement for hands-on learning.
