DOTTORIE

Back to Editor

DOTTORIE is a desktop-exclusive pixel art editor that runs entirely in your browser. It's intuitive enough for beginners to start creating pixel art right away, while offering features powerful enough for professional design workflows.

Features & How to Use

Drawing Tools

The Smart Pen Feature

The "Smart Pen" is an intelligent pen tool that automatically adjusts colors based on the context of where you draw. It eliminates the need to manually pick new colors, enabling quick refinements.

  • Auto AA (Anti-Aliasing) Pen: Overlays the selected color at 40% opacity. Trace along diagonal lines or edges to easily smooth out the "staircase" effect of pixel boundaries.
  • Shadow Pen: Drawing over existing pixels automatically makes their color "slightly darker and more saturated." Perfect for adding light-aware shading without hunting for shadow colors in the palette.
  • Highlight Pen: Automatically makes existing pixel colors "slightly brighter." Simply trace over lit areas to easily create metallic luster and texture effects.

Advanced Layer System

The layer panel on the right sidebar lets you manage multiple overlapping layers. Separating backgrounds from characters dramatically improves editing and animation workflow efficiency.

  • Reorder: Drag the handle next to each layer to freely change the stacking order.
  • Opacity: Adjust the transparency of each layer using individual sliders. Useful for translucent tracing over reference images.
  • Show / Hide: Click the 👁️ icon to toggle layer visibility.

Color & Palette Management

Multiple palette presets are available, including "Modern Full Color" and "Retro Handheld." The "Auto-Adapt Palette" feature batch-converts canvas colors to the closest match in the currently selected palette, making it easy to achieve a cohesive color scheme.

Image Trace Feature

Import photos or illustrations from your PC via "Import Image" and place them as a background reference on the canvas. After adjusting the frame, press "Pixelate & Apply" to resize the reference to your canvas size and render it directly. It's like automatically generating pixel art from your favorite photos.

Flexible Canvas Sizes

When creating a new canvas, you can choose from presets like 16px or 32px, or freely specify any size from 8px to 256px in 1-pixel increments. Start your work at the perfect resolution for your needs.

Canvas Controls & Display Settings

While zoomed in, hold the Space key and drag (or middle-click drag) to freely pan the canvas. Toggle "Grid Display" and choose background colors (Gray, White, Black) to customize your workspace.

Project Save & Load

Work-in-progress data can be exported as a project file via the "Save" button. Open the file from "Load" to resume work anytime. Recent history is also automatically saved in your browser's local storage, so you're protected even if you accidentally close the browser.

Seamless Adobe Illustrator Integration

DOTTORIE supports SVG export. Since SVG is a vector format, when opened in Adobe Illustrator, each pixel is preserved as an individual path object. This means you can repurpose your pixel art for logo design, or scale it up to signage or apparel print sizes without any quality loss.

For PNG/JPEG export, you can choose upscale factors like "Social Media (10x)" or "High Quality (20x)" to save beautifully crisp images while preserving the pixel art aesthetic.

Keyboard Shortcuts

Ctrl + Z
Undo
Ctrl + Y
Redo
Shift + Drag
Constrain shape ratio (square/circle)
Space + Drag
Pan the canvas
Middle Click + Drag
Pan the canvas (middle click)
Mouse Wheel
Zoom in/out

Disclaimer

The operator assumes no liability for any damages arising from the use of DOTTORIE. Please back up your work-in-progress data yourself (you can save projects as files using the save feature). Specifications of this tool may change without prior notice.

For details, please refer to the Terms of Use.