Skip to content

PixelGrid Tutorial

PixelGrid Studio is an online pixel editor for creating TC002 graphics on a 52×16-pixel canvas. You can draw in the browser, import an existing image, export a PNG, or publish an artwork to Ulanzi Workshop.

Open PixelGrid Studio

1. Sign in and open the editor

  1. Open PixelGrid Studio.
  2. If the sign-in page appears, enter your Ulanzi UGC account credentials and click Log in.
  3. After signing in, open PixelGrid Studio again to enter the editor.

Sign-in information is used only to access the website. Never enter a password in an artwork name, description, or another public field.

PixelGrid Studio editor overview

The 52×16-pixel canvas is in the center. Drawing tools are on the left, and settings for the current tool are on the right. Import, Export, and Upload are available in the upper-right corner.

2. Drawing tools

ToolUI namePurpose
PencilBrushDraw pixels on the canvas and adjust the brush size
EraserEraserErase pixels from the canvas
Straight lineLineDraw a straight line between two points
Paint bucketFillFill a connected area of the same color with the active color
EyedropperEyePick an existing color from the canvas
TextTextConvert text into pixel lettering and place it on the canvas

PixelGrid tools, swatches, and project palette

After selecting Brush, Eraser, Line, or Fill, use the controls on the right to set a color:

  • Color Swatches selects a preset color.
  • Active Color shows the current color. You can also enter a hexadecimal value under HEX Color.
  • Project Palette stores up to 16 colors used in the current artwork.
  • The small square next to Brush changes the brush size.

3. Canvas controls

The controls above the canvas include:

  • White BG (Default) changes the canvas background.
  • H-SYM enables horizontal mirror drawing.
  • V-SYM enables vertical mirror drawing.
  • Clear Canvas clears the current canvas.
  • Undo / Redo reverses or restores recent changes.

Choose a background and your common colors before drawing. Mirror drawing can save time when creating symmetrical designs.

4. Add text

  1. Click Text on the left.
  2. Enter text under Text Content on the right.
  3. Set Text Color and Background Color. Select Transparent if the text does not need a background.
  4. Click Apply to Canvas. The text is converted into pixel lettering and centered on the canvas.
  5. Switch to Brush or Eraser to adjust individual pixels if necessary.

Creating ULANZI pixel lettering

Long text may extend beyond the 52×16 canvas. Shorten the text or adjust the lettering manually with Brush.

5. Import and export

Import an image

Click Import in the upper-right corner and select a local image. The image is placed on the 52×16 canvas, where you can continue editing it.

For a clearer result, use an image close to 52×16 pixels with a distinct silhouette and a limited number of colors.

Export a PNG

Click Export in the upper-right corner to download the canvas as a PNG file.

Export a PixelGrid artwork as PNG

Export a local backup before leaving or refreshing the page. You can import the PNG later to continue editing.

6. Prepare upload assets

When the artwork is complete, click Upload in the upper-right corner. The website prepares temporary publishing assets and opens the Upload works form. The artwork has not been published yet.

PixelGrid prepares the main file and banner

Under 1. Upload assets, check the following:

  • Main work file is the archive generated by the website. The maximum file size is 50 MB.
  • Cover image is not required for Pixel Assets and displays Not needed.
  • Banner 01 is required and uses a 52:16 ratio. It is generated automatically from the canvas.
  • Banner 02 / Banner 03 are optional and can appear in the details carousel and recommended placements.

Auto check reports whether the main file, cover, and banners meet the requirements for the selected category. Resolve missing-asset warnings before entering the artwork details.

7. Enter multilingual artwork information

The publishing form supports seven languages: Chinese, English, German, Japanese, Korean, Portuguese, and Spanish. Select a language tab to edit that version.

Entering multilingual PixelGrid artwork information

Each language version contains:

FieldContent
NameArtwork name, up to 40 characters
AuthorAuthor or team name shown on the details page
SummaryOne or two sentences describing the artwork and its key features
Detailed introductionDetailed content, use cases, compatibility limits, and update notes

You can complete English first, switch to another language, and use Copy English to current. Review and edit the copied text before publishing.

8. Enter metadata

Complete the publishing information under 3. Metadata.

Entering the version and artwork category

  • The first Category is fixed to Pixel Assets.
  • Enter a version under Version number, such as v1.0.0.
  • For the second Category, choose a theme such as Creative, Lighting, Office, Tools, Text, Landscape, AIGC, Emoji, or Animal.

The category affects search, filtering, and some asset checks. Select the category that best matches the artwork.

9. Compatibility and publishing

Under 4. Compatibility and publish scope, select the languages, devices, and systems supported by the artwork. These settings determine who can find the artwork and are used as filter tags. Select only combinations you have verified.

Checking the publishing scope and final submit button

Before submitting, confirm that:

  • The main file and required banner pass validation.
  • The artwork name, author, summary, and detailed introduction are complete.
  • No language version contains credentials or internal notes.
  • The version, theme category, and compatibility scope are correct.
  • A PNG backup has been saved locally.

When everything is ready, click Click upload in the lower-right corner. This submits the artwork for review or publication, after which it may become visible to other users.

If you are only testing the editor, click Cancel or close the window. Do not click Click upload.