Hi guys! Recently, I’ve been becoming interested in graphic design and I figured I would combine my passion for design and for coding into this tutorial. In this topic, I’ll be teaching you how to design characters (or “sprites”) for your hopscotch projects. These characters will be what is called “flat-design” which means they will be simplistic and will be made up of basic shapes. This tutorial includes methods for non-subscribers and subscribers, so everyone has the chance to design their own sprites! I split this topic into drop down boxes so you can easily find whatever section will be useful for you 
Graphic design apps (For subscribers)
If you are a subscriber, you have a lot of freedom in design. Since you can import photos, you can use other apps to create your characters. The main app I recommend is Assembly.
Using Assembly
When you first open the app, you will have options to choose what canvas size you want to work on. I personally use the 1x1 canvas, because the characters I design are relatively small. After you choose a canvas size, you will come to a screen that looks like this:
As you can see, you can scroll along the bottom and you will have many different shapes to use in your design. Simply click on the shape you want to use and it will appear on the canvas, where you can then resize, reshape, and choose a color as needed.
One of my favorite features of assembly is that they have some free shape packs that you can download to get more then the basic shapes. Some of these free downloadable packs are “character packs” and have a bunch of shapes that you can use to design a human-looking character.
Here is an example of a character I designed using assembly:
While I love designing characters, I’m not by any means a graphic designer. For inspiration and help with design, I often turn to the internet. You can find many great articles on design theory and design tips. Here is one article I really find useful:
https://gigantic.store/30-top-character-design-tips/
The best way to get better at designing characters and using Assembly is to practice! You will discover many new features and techniques as you continue to work with the app. (If you’re interested in design prompts to get you started, check the last drop down box)
If you have questions on using assembly, let me know!
Shape art
If you don’t have the subscription, or you don’t want to download a graphic design app, no worries! The creators of Hopscotch have given us all of the tools we need to design characters right in the app.
Planning Your Shape Art
The key to good shape art is using a variety of shapes, colors, sizes, etc to make your character look exactly how you envision it. My first tip is to plan your shape art by drawing your character first. You could do this on paper or digitally. Then, after you draw up a design, think about how you could use the shapes in the hopscotch app to make this design come to life.
Important Blocks
After you have a steady plan, here comes the fun part: Coding your shape art! Here are some blocks that I think are extremely useful when designing shape art:
- Set Color: this one is self explanatory! I recommended using HSB colors instead of the hopscotch colors to really customize your character.
- Set size/set width and height: These blocks let you resize things as needed
- Set Z index: this block helps you set the stack order (which object will be in the front and which are in the back). Objects with a greater Z index will be in front of those with a lower Z index. So for example, if you’re creating a shape art that looks like a human face, the face shape would have a lower Z index then the face features, because you want the face features to appear on top of the face shape.
- Set position: this block is useful because it allows you to choose the exact position a shape will be in.
Prompts for practice
One of the hard parts about designing is coming up with an idea of what to design. Incase you have designers block, or are looking for some design practice, here are some prompts for you! If you use any of these prompts, I encourage you to post what you made here and you can get feedback from your peers!
- Can you design a character using only 2 shapes? How about 1 shape?
- How would you design yourself? Or your pet?
- Create a wilderness scene
- Can you design a character that looks like your username? (For example, I would design a blue dog)
- Can you create a monotone character? Can you create a character with 5+ different colors?
- What is your favorite sport/hobby? Can you design a character who plays this sport or does this hobby?
- Look around whatever room you are in. Can you recreate an object you see using shape art?
- Can you make a shape art inspired by your favorite food?
- Can you make a shape art inspired by your favorite television show?
- Search “shape art” on hopscotch. Without looking at the code, can you recreate one of these projects on hopscotch or on Assembly? (Make sure to credit the original designer tho!)
If you do one of these challenges, post the link here and I’ll give it a like and follow you if I don’t already!
Other links/related topics
Here are some other topics that might be helpful:
You can post your designs on the drawing with hopscotch topic, and people can also “commission” you by requesting a design for them to use within one of their projects (make sure you follow the rules and formatting guidelines 
):
https://forum.gethopscotch.com/t/drawing-with-hopscotch-topic-01-official/51987?u=bluedogmc-official
How to make rotating shape art:
Although this topic is old and closed, I think it would still be useful to take a look through and see other people’s designs/discussions about design:
https://forum.gethopscotch.com/t/official-design-sharing-topic/35198?u=bluedogmc-official
Rodrigos explanation on what design is:
https://forum.gethopscotch.com/t/working-at-hopscotch-question-topic/5555/6?u=bluedogmc-official
Here are some great shape art projects for inspiration:
Microwave and Stove Trail & Shape Art by tankt2016
I also recommended checking out @William04GamerA’s profile, as he posts a lot of amazing trail and shape art!
Thanks for reading! This was just the basics, and I’m planning on doing more mini tutorials within this topic. If you would like to be tagged when I post more tutorials and challenges here, vote yes on this poll:
- Yes, tag me!
- Nah
If you are knowledgeable about design and you would like to teach a shape art, trail art, or design “class”, let me know and you can post your tutorial here!
Thanks for reading and reply with any questions!
)