Quick Pixel Art

How to make pixel art in a few minutes...

This method should take around 20-30 minutes to implement (depending on how many colors you use)

Here’s an example:

Step 1:

Use the website www.pixel-stitch.net to upload an image and create a pixel art template.
Select the following save options:

File Format → Excel
Pattern Style → Numbers with colored boxes

Step 2:

Open the .xlsx file you downloaded. You need to make all the numbers the same size, so you need to add leading 0’s to the numbers < 10

In Google Sheets tap format → Number → Custom Number Format → type “00” → Done
In Excel select all (command + a) → Right Click → Format Cells → Number → Custom → type: “00” → Done

Next, select all the contents (command + a), and copy them (command + c)
You can use the following c++ code I wrote or the website browserling to remove the whitespaces from the text you copied.

c++ code
#include <iostream>
#include <fstream>
#include <string>
using namespace std;

int main() {
    ofstream ofile;
    ifstream ifile;
    string str = "";
    string line;
    ifile.open("filename here");
    if (!ifile) {
        cout << "Error. Cannot open file." << endl;
    while (getline(ifile, line)) {
        str += line;
    ofile.open("filename here");
    if (!ofile) {
        cout << "Error. Cannot write to the file." << endl;
    string temp = "";
    for (auto x : str) {
        if (x != ' ' && x != '\n' && x != '\t') {
            temp += x;

    ofile << temp;
    return 0;

Copy the result from either the website or c++ program.

Step 3:

Create a new hopscotch project
Add the following code to set up your project:

When game starts {
    set position x: ___, y: ___ //whatever position you want the top-left corner to be at
    set (game)PixelSize: 4 //or however big you want your pixels to be
    set (game)Rows: ____ //find this number on pixel stitch (ex. 500x328, Rows = 328)
    set (game)String: ____ //copied text with whitespaces removed !!MAKE SURE YOU ADD A SPACE AT THE END OF THE STRING!!
    repeat times (game)Rows {
        create a clone

This code initializes most of the variables we need.
MAKE SURE YOU ADD A SPACE AT THE END OF THE STRING, otherwise it will be considered a number, which will not work.

Step 4

Add the following code:

When object is cloned {
    set (self)Start: (cloneIndex - 1) * (____ *2)) // ___ is the width of the pixel art ((ex. 500x328, ___ = 500)
    set (self)Slider: characters in (game)String between (self)Start and ((self)Start + 1)
    set position x: (self)XPosition, y: (self)YPosition - (cloneIndex*2)
    repeat times ____ {            // ___ is the width of the pixel art ((ex. 500x328, ___ = 500)
        draw a trail color: R: characters in (self)Color between 1 and 4, G: characters in (self)Color between 5 and 8, B: characters in (self)Color between 9 and 12, width: (game)PixelSize {
            set position x: (self)XPosition + 2, y: (self)YPosition
        increase (self)Start by 2
        set (self)Slider: characters in (game)String between (self)Start and ((self)Start + 1)


The Slider ‘walks’ along the text string, and sets its value to the 2 characters in the string that make up a color identification. For example, it would be 02, then 15, then 29 in the string “021529”

Step 5

This step takes the longest, but it’s necessary. You have to set the rgb values of each of the colors. For every color, do the following:

when (self)Slider matches ___ {       //___ should be the number matching the color (don't include the leading 0's)
    set (self)Color to "R123G123B123" //The numbers should be the correct values for R, G, and B

This is the code that will set the correct color for when you draw the trail.

You're done!

  • That helps!
  • I’m confused

0 voters

@omtl @The_Swimmers


This will help, thank you!


bows to the pixel art queen


haha thanks fear


Ledecky is a great swimmer (:
Also nice topic!


I saw this notification the other day but didn’t have a chance to read through it. This is absolutely simple, well-explained, and just amazing!!! Great tutorial :)))


Emmm, I still have a question-how do you download the numbers?

1 Like

You can save them as a . Excel by clicking on the download settings and then open in Google sheets or numbers or excel depending on what you have.


But how do I get those string numbers?

1 Like

The save doesn’t work.

1 Like

Save it in excel

1 Like

I can’t save it

1 Like

Well, send me the photo, I will teach you how

1 Like

The video didn’t get sent try this

1 Like

It’s in save options


I did that in the video, I did everything, it just reloads the image.


How do I save, no documents were shown for me to download


once you upload your image, tap “create embroidery pattern” and then “save embroidery pattern.” That should download the file to your device.

Are you using an iPad?


No I’m using a phone

1 Like

Hmm interesting. What internet browser do you use?