Как я сделал пиксель-арт, не открывая Photoshop

Есть задачи, для которых открывать Photoshop — как забивать микро-гвоздь кувалдой. Пиксельная иконка 16×16 — одна из них.

Мне нужен был инструмент, который открывается мгновенно, позволяет перерисовать иконку по пикселям и сохраняет чистый SVG или PNG без установки, регистрации и загрузки файлов на сервер. Постепенно эта небольшая утилита превратилась в полноценный компактный редактор.

Что такое Pixel Painter

Pixel Painter — однослойный редактор пиксельной графики, который полностью работает в браузере. Использовать его можно тремя способами:

• Создать пустой холст и нарисовать иконку с нуля.
• Открыть растровое изображение как референс, автоматически получить пиксельный черновик и доработать его вручную.
• Импортировать SVG как редактируемую пиксельную сетку, изменить и экспортировать или сохранить его заново.

Здесь специально нет традиционного стека слоёв. Есть один редактируемый пиксельный слой, необязательное исходное изображение под ним и временная плавающая копия выделения во время вставки.

Открытие изображений и SVG

Раздел File поддерживает несколько сценариев импорта:

• Image открывает PNG, WebP, JPEG и другие растровые форматы, которые понимает браузер.
• SVG открывает существующий SVG-файл и превращает его видимое содержимое в редактируемые клетки.
• From text принимает полный <svg>, фрагмент SVG или данные path, начинающиеся с M.
• Пустой холст можно создать, просто задав его ширину и высоту.

Изображение или SVG также можно перетащить прямо в центральную область редактора. Если пиксельный слой уже содержит рисунок, Pixel Painter попросит подтвердить замену. Отмена оставит текущий документ без изменений, а принятую замену можно будет отменить через Undo.

Перед импортом SVG анализируется. Редактор показывает ошибки и предупреждения, определяет видимые границы, растеризует результат в сетку размером не более 256×256 клеток и собирает рабочую палитру из наиболее часто используемых цветов.

После импорта SVG режим экспорта автоматически переключается на Full canvas, чтобы по умолчанию сохранить исходное положение изображения и окружающее его прозрачное пространство.

Как превратить изображение в редактируемый пиксель-арт

Растровое изображение остаётся отдельным фоном-референсом и не смешивается с редактируемым слоем. Дальше Pixel Painter предлагает короткий процесс конвертации:

1. Редактор пытается автоматически определить подходящий размер сетки. Детект можно повторить кнопкой Auto или задать ширину и высоту вручную.
2. Из изображения извлекаются варианты палитры от 2 до 12 цветов.
3. Вы выбираете рабочую или бренд-палитру.
4. В режиме Dither вы выбираете текстуру: None (чистые цвета), Bayer 2×2 (ретро-сетка) или Subtle (мягкий шум).
5. Кнопка Generate сопоставляет каждой видимой клетке ближайший цвет из выбранной палитры.
6. Получившийся черновик дорабатывается обычными инструментами рисования.

Если растровый пиксель исходника разрезан границей ячеек, подложку можно идеально совместить в разделе Background adjust:

• Offset X и Y сдвигают референс с деликатным субпиксельным шагом 0.25 клетки (или точным числовым вводом).
• Scale меняет масштаб фонового изображения от 10% до 300% с помощью слайдера или кнопок ±5%.
• Рендеринг подложки работает со скоростью 60 FPS, а алгоритм Generate и пипетка автоматически считывают цвета с учётом нового смещения.

Опция Auto-regenerate on grid change позволяет автоматически пересобирать черновик при изменении сетки. Исходник можно скрыть, сделать полупрозрачным, сравнить с редактором рядом или удалить после завершения черновика.

Инструменты рисования

На левой панели находятся основные пиксельные инструменты:

• Pencil (B) — рисует выбранным цветом или прозрачностью. Размер кисти меняется от 1×1 до 4×4 клеток. С зажатым Shift можно провести горизонтальную, вертикальную или диагональную линию под 45 градусов.
• Symmetry (зеркалирование) — переключает горизонтальное (↔), вертикальное (↕) или 4-стороннее (✚) зеркальное рисование.
• Eraser (E) — удаляет клетки выбранным размером кисти.
• Fill (G) — заливает связанную область выбранным цветом или прозрачностью.
• Eyedropper (I) — берёт цвет с пиксельного слоя или исходного изображения. Временную пипетку можно вызвать через Alt-клик из любого инструмента.
• Select (M) — создаёт прямоугольное редактируемое выделение.
• Move (V) — перемещает выделение, а если выделения нет — весь пиксельный слой.
• Crop (C) — обрезает холст по настраиваемой прямоугольной рамке.

При включённой симметрии на холсте отображаются пунктирные оранжевые направляющие, а при увеличении сетки подсвечиваются центральные оси и границы блоков по 8 клеток. В строке состояния отображаются координаты текущей клетки, размер холста, границы видимого рисунка, количество закрашенных клеток и масштаб.

Прозрачное рисование и фон предпросмотра

Прозрачность здесь — полноценный режим рисования, а не только действие ластика. В разделе Color можно выбрать:

• Color — Pencil и Fill добавляют текущий цвет.
• Transparent — Pencil и Fill удаляют клетки.

Так можно одной заливкой очистить большой связанный фон или вырезать прозрачные детали кистью любого размера.

Отдельный сворачиваемый раздел Preview background показывает, как прозрачная картинка выглядит на разных фонах:

• шахматном;
• белом или светло-сером;
• тёмно-сером или чёрном;
• любом собственном цвете, выбранном через color picker или введённом как hex.

Этот фон существует только для просмотра и никогда не попадает в экспортированный SVG или PNG.

Выделение, перемещение, клонирование и отражение

Выделение даёт примитивное объектное редактирование даже при наличии всего одного слоя:

1. Выберите Select (M) и растяните прямоугольную рамку.
2. Переместите рамку или настройте её стороны и углы с помощью маркеров.
3. Переключитесь на Move (V), чтобы передвинуть выделенные пиксели мышкой.
4. Используйте стрелки для точного смещения на одну клетку.

Если включить Move без выделения, мышка и стрелки перемещают весь слой. Пиксели, вышедшие за границы холста, удаляются, но операцию можно отменить через Undo.

Выделенный блок также можно клонировать:

• Скопируйте выделение через Ctrl/Cmd+C.
• Вставьте его через Ctrl/Cmd+V как плавающую копию.
• Переместите копию мышкой или стрелками.
• Отразите её кнопками Flip H или Flip V.
• Нажмите Enter или Place, чтобы добавить копию в пиксельный слой.

Те же кнопки горизонтального и вертикального отражения работают с обычным выделенным объектом. Ctrl/Cmd+D снимает рамку выделения; используется именно этот shortcut, а не Escape, чтобы macOS не выходила из полноэкранного режима при обычном deselect.

Цвета и палитры

Цвет выбирается через системный color picker или вводится как трёх- либо шестизначный hex. В Pixel Painter есть два типа палитр:

• Working palette — обычно извлекается из импортированного изображения или SVG и используется во время редактирования.
• Brand colors — переиспользуемая палитра, которая сохраняется в браузере для следующих сессий.

Цвета бренд-палитры можно добавлять, удалять, сбрасывать, копировать из рабочей палитры, редактировать списком по одному hex на строку или загружать из встроенной библиотеки дизайн-систем. Список можно скопировать в буфер обмена, а его формат совместим с Color Toolbox.

Слот рабочей палитры можно редактировать пипеткой. При замене цвета все уже нарисованные клетки со старым значением перекрашиваются вместе, а операцию можно отменить.

Размер холста, crop и выравнивание

Ширина и высота холста настраиваются независимо в диапазоне от 1 до 256 клеток. Для более точного изменения в окне Resize доступны:

• точные ширина и высота;
• блокировка пропорций, которая включена по умолчанию;
• относительный resize, например добавление нескольких строк или столбцов;
• anchor из девяти точек, определяющий, где останется существующий рисунок при изменении холста.

Команда Center выравнивает видимый рисунок по центру холста. Crop использует перемещаемую рамку с изменяемым размером: Enter применяет обрезку, Escape отменяет её. Crop и resize учитывают исходный фон и поддерживают Undo.

В разделе Canvas также доступны трансформации всего документа: поворот на 90 градусов влево или вправо и отражение по горизонтали или вертикали. Операция одновременно меняет пиксельный слой и загруженное изображение-референс. После поворота холст 32×16 становится 16×32, а действие можно отменить через Undo.

Просмотр и навигация

Раздел View позволяет:

• показывать или скрывать исходный фон (H) и менять его прозрачность;
• показывать или скрывать редактируемый слой (T) и менять его прозрачность;
• сравнивать редактор с оригиналом рядом (O);
• менять масштаб кнопками или колёсиком мыши;
• удерживать Space и перетаскивать холст при большом увеличении.

Сетка клеток появляется автоматически при подходящем масштабе. Все разделы боковой панели можно свернуть, а их состояние запоминается браузером.

Undo, Redo, очистка и автосохранение

Рисование, заливка, перемещение, трансформации выделения и всего холста, перекрашивание палитры, crop, resize, центрирование и очистка участвуют в истории Undo/Redo. Кнопка с корзиной очищает пиксельный слой, но не делает это действие необратимым.

Pixel Painter также автоматически сохраняет в локальном хранилище браузера текущий холст, исходное изображение, цвета, рабочую палитру, настройки прозрачности, preview-фон, параметры экспорта и другое состояние редактора. После перезагрузки страницы рабочая сессия восстанавливается, если хранилище доступно.

Ничего не отправляется на сервер.

Экспорт SVG и PNG

В разделе Export задаются имя файла, область экспорта и размеры результата.

Доступны два режима области:

• Trim to content убирает неиспользуемое прозрачное пространство вокруг рисунка.
• Full canvas сохраняет размеры холста и положение рисунка внутри него.

После этого можно:

• скачать компактный SVG с чёткими пиксельными границами;
• скачать PNG с прозрачностью и nearest-neighbor масштабированием;
• скопировать сгенерированный SVG-код в буфер обмена;
• указать точную ширину результата с сохранением пропорций;
• оставить размер пустым, чтобы не задавать width/height в SVG, а PNG сохранить в масштабе 10 экранных пикселей на одну клетку.

Соседние клетки одного цвета объединяются в компактные SVG path, поэтому результат получается заметно меньше, чем SVG с отдельным прямоугольником для каждого пикселя.

Если браузер поддерживает прямой доступ к файлам, SVG, открытый кнопкой SVG, сохраняет связь с исходным файлом. В разделе Export появляется кнопка Save current SVG, а Ctrl/Cmd+S перезаписывает открытый файл после выдачи разрешения. В браузерах без такого API всегда остаётся обычное скачивание нового SVG.

Кнопка Open in SVG Optimizer передаёт сгенерированный SVG в соседний инструмент через одноразовое session storage браузера. Там его можно минифицировать или отформатировать, проверить на другом фоне, применить SVG-трансформации и экспортировать в React, React Native, Vue, PNG или Data URI. Передача остаётся внутри браузера и удаляется после чтения оптимизатором.

Горячие клавиши

Практический сценарий

Для логотипа или иконки самый быстрый процесс выглядит так:

1. Откройте исходное изображение или SVG.
2. Проверьте автоматически определённую сетку и при необходимости исправьте её.
3. Выберите предложенную палитру или загрузите свои брендовые цвета.
4. Сгенерируйте черновик.
5. Скройте или приглушите исходник и очистите результат с помощью Pencil, Fill, прозрачности и выделений.
6. Обрежьте, измените размер, отцентрируйте, поверните или отразите готовую иконку.
7. Проверьте её на нескольких preview-фонах.
8. Экспортируйте Trim to content для компактной самостоятельной иконки, используйте Full canvas, если важны отступы и положение, или продолжите работу в SVG Optimizer ради framework-кода и дополнительных форматов.

В этом и смысл Pixel Painter: возможностей достаточно, чтобы довести реальную иконку до готовности, но небольшая пиксельная задача не превращается в отдельный проект внутри большого графического редактора.

Похожие инструменты

Pixel PainterРисуйте по пикселям, редактируйте и клонируйте выделения, трансформируйте весь холст, управляйте палитрами и экспортируйте SVG или PNG.Оптимизатор изображенийПакетно сжимайте до 10 PNG, JPEG или WebP, задавайте максимальные размеры или целевой вес, сравнивайте до и после, скачивайте по одному либо ZIP-архивом — полностью локально.Color ToolboxКонвертируйте HEX, RGB и HSL, смотрите значение OKLCH, собирайте палитры, извлекайте цвета и проверяйте контраст WCAG.Генератор QR-кодовСоздавайте QR-коды с проверкой сканирования, градиентами, плавными модулями, регулируемыми отступами, прозрачным фоном, подписями и логотипом, который сохраняет свои цвета или наследует заливку QR. Экспортируйте в PNG или автономный SVG и декодируйте QR из изображений.