Графический редактор PaintCAD с ручным управлением

История: от J2ME к Windows (2005-2010)

Этот редактор изначально разрабатывался мною под Java2ME и на протяжении нескольких лет (уже года с 2005-2006) он развивался как бесплатная программа для рисования на мобильных телефонах.
Сначала он назывался Painter («рисовалка» — первое что в голову пришло), затем он был переименован в PaintCAD по аналогии с AutoCAD, но никакой «автоматизации проектирования» в нем нет. PaintCAD это означает как бы «сверх-paint», paint с большими возможностями. В PaintCAD вы все делаете сами и он без спроса ничего делать не будет.
Поначалу молодой Паинткад рисовал черно-белые картинки размером 32х32 пикселя и сохранял в BMP-картинки и BMX-анимации (оба формата можно отправлять в SMSках расширенного формата (EMS). При этом было всего 4 инструмента: карандаш, черный маркер, белый маркер, обращающий маркер.

Затем были добавлены другие инструменты, меню были переделаны в графические:

Потом были добавлены возможности рисования 256-цветных рисунков (с палитрой цветов) размером до 48х48 пикселей (а чуть позже и размером с экран мобилы). А также полноценный графический файловый менеджер:

У меня был Siemens C60 с экраном 101х80 точек и 4096 цветов. И в паинткаде на С60 уже можно было рисовать такое:

Затем вышли телефоны с MIDP2 и в мобильной яве стало доступно больше оперативной памяти, и в редакторе стало можно рисовать рисунки размером с экран мобилы. А я купил себе Siemens CX75 с экраном 132х176 точек и цветностью 65536 цветов.

Также были добавлены возможности по сохранению GIF файлов, сборки из них GIF анимаций, работы с камерой мобильного телефона, использования собственных PaintCAD Font (PCF) шрифтов (их можно делать из Windows-шрифтов с помощью программы PaintCAD Font Creator blackstrip.ru/pcfc.exe 191 Кб ), и даже рисования этих шрифтов в самом паинткаде на мобиле.
Чуть позже вышли телефоны с экранами 240х320 и для таких разрешений (и программ под эти разрешения) у них было еще больше оперативной памяти в яве. А я себе купил Benq-Siemens E71 (и до сих пор с ним).

С такими объемами памяти была мысль — пора бы перейти на 24-битное полноценное рисование. Чтобы не терять наработанное PaintCAD был разбит на два режима:
а) 8-битный старый режим для рисования 256-цветных (8 бит на точку) рисунков с палитрой (т.е. в каждом из 256 цветов палитры может быть любой из 16 миллионов RGB-оттенков, но всего их в палитре и на рисунке может быть только 256 штук).
б) 24-битный новый режим для рисования рисунков, в которых на каждую точку приходится 24 бита, и можно каждой точке задать свой RGB-оттенок, любой из 16 с лишним миллионов.
В 8-битном режиме легко рисовать 256-цветные GIF файлы, а т.к. в программе была добавлена возможность сборки анимаций из GIF-кадров — то можно было рисовать анимированные баннеры или просто анимации (таких анимаций и рисунков набралась целая галерея pg.blackstrip.ru );
В 24-битном режиме можно было рисовать полноцветные картинки, сохранять их в BMP и PNG файлы. Также некоторые энтузиасты делали программы на телефонном мобильном бейсике и рисовали в паинткаде графику для этих программ ( вот один из них: habrahabr.ru/post/82730 ).
Конечно, мобильный редактор PaintCAD это была целая отдельная история длиной в 7 лет (она продолжается и по сей день). Но у него была одна особенность, к которой я постепенно привыкал, и из-за этого все больше отвыкал от компьютерных мышередакторов: во всех его версиях, начиная с первой, метод рисования был следующим — ручное управление курсором, двигающимся по экрану, с помощью клавиш мобильного телефона.
В 14-ти обычных клавишах телефона и 5-ти кнопках джойстика у мобильного паинткада были заключены все возможности редактора, включая рисование примитивов, применение эффектов, загрузка и сохранение файлов, рисование и использование пользовательских шрифтов, получение фотографий с встроенной камеры, сбор рисунков в GIF-анимацию. При этом любую дугу можно было рисовать полилинией, которую с клавиатуры очень легко расположить так как вам надо. Вместо «волшебной палочки» использовалось маскирование, где какой то из цветов на рисунке играл роль «прозрачного» или «информационного» (применение эффекта идет к объектам только этого цвета). Заливки, затекстуривания, эффекты также работали на «информационных» цветах и с использованием «прозрачных» цветов.
Еще одна подкупающая особенность — сложные (относительно сложные) настройки эффектов дробились на простые диалоговые окна «укажи цвет на рисунке», «укажи силу эффекта», «выбери степень прозрачности». В телефоне это разумно было делать, т.к. если на экране умещается шесть строк текста — то там не сделаешь сложных окон с флажками, списками опций, кнопками. Конечно, с годами, размеры экранов телефонов увеличились, но метод управления редактором оставался все тем же. Вот несколько скриншотов того, что было на телефоне в одной из последних версий:
Первое окно после запуска, Стартовый мастер, Главное меню:

Файловый менеджер, Инструменты, Настройка эффекта:

Применение эффекта, Система помощи, Процесс рисования:

И всегда оставалась мысль — а что если бы такой метод рисования и управления редактором сделать не на Java2ME, а в Windows? И вот я мечтал об этом с 2005 до 2010 года и, наконец, решился.

Здравствуй, Windows

И в апреле 2010 года было решено начать переносить все наработанное из Java в Windows. Было выбрано Delphi 7 (из-за этого без всяких Framework-ов PaintCAD работает как в Windows 95 (!), так и в Windows XP или Windows 7). Сначала он был такой:

Потом такой:

И такой:

Потом стало понятно что скоро эра Windows 8 и вообще сенсорных устройств. Пора бы делать что-то под сенсорный экран, кнопки побольше (вся верхушка переработана была), выдвижную виртуальную клавиатуру для управления курсором с экрана планшета (справа она).

Виртуальная клавиатура имеет тип «встроенного телефона», т.к. управление с нее осуществляется подобно управлению мобильным паинткадом с телефона (пальцами правой руки на сенсорном экране).
По умолчанию горизонтальное меню скрыто, а также скрыта виртуальная клавиатура. При запуске на устройствах с сенсорным экраном управление редактором следующее:

Диалоговые окна PaintCAD выглядят достаточно просто и в каждом из них «понятно что спрашивают», у каждого окна внизу зеленая полоса с кнопками окончательного действия (как в мобильной версии подписи под софт-клавишами были):
а) палитра. Здесь выбирают цвета — три разных типа палитры:
из таблицы:

По спектру (цветность и яркость):

И по RGB-значениям:

б) инструменты, эффекты и меню выделения и буфера обмена:

в) меню дополнительных эффектов и другие подобные строчные меню:

г) выбор в меню из двух пунктов (простой диалог):

д) выбор силы эффекта (простой диалог с одним движком):

е) и выбор сразу трех значений

ж) выбор трех значений из строго заданных вариантов:

з) выбор двумерного смещения:

и) выбор угла поворота:

к) выбор цвета:

л) создание нового файла (с кнопками для сенсорных экранов):

м) ввод текста (для последующей вставки на рисунок):

и сама вставка текста на рисунок с выбором опорной точки и нескольких опций:

или вставка картинки:

н) окно съемки видео и фото с веб-камеры или тв-тюнера

о) окно об ошибке

Каждый из этих диалогов легко управляется с клавиатуры, хотя также можно управлять мышью, ну или тыкать стилусом или пальцем прямо в экран. Тут в них думать нечего, хотя в системе помощи (она прилагается в rar-архиве с программой) все описано еще более подробней.

Настройки Photoshop

1. Создайте новый квадратный документ со сторонами от 20 до 100 пикселей (в зависимости от того, насколько большой спрайт). Я буду работать с холстом 50 на 50 пикселей:

• Ширина: 50 пикселей;
• Высота: 50 пикселей;
• Разрешение: 72 точек / дюйм;
• Цветовой режим: RGB (8-бит
• Содержимое фона: Прозрачный.

2. Продолжим наш урок пиксельной графики. Выберите инструмент «Карандаш» (в выпадающем меню инструмента «Кисть») и установите размер кисти в 1 пиксель. Выберите инструмент «Ластик» и задайте для него размер — 1 пиксель, Режим — Карандаш:

3. Чтобы показать, где на холсте будут располагаться пиксели графики, мы включим сетку. В разделе Редактирование> Установки> Направляющие, сетка и фрагменты настройте параметры сетки. Задайте для сетки отображение каждого пикселя (деление — 1 пиксель). Нажмите кнопку «ОК», а затем включите сетку, чтобы вы могли ее видеть. Перейдите в Показать > Показать> Сетка:

4. Еще одно изменение, вернитесь в Настройки > Общие и измените интерполяцию изображения на «По соседним пикселям (сохраняет четкие края)»:

Теперь все готово, чтобы мы могли приступить к созданию пиксельной графики!

Создание персонажа

Мы начнем с создания спрайта одиночного персонажа.

1. Начнем с файла размером 50 на 50 пикселей, который мы создали. Я добавлю фоновый слой со сплошным цветом. После этого мы сможем видеть сетку.

В нижней части палитры слоев нажмите на иконку, которая выглядит как наполовину заполненная окружность. Выберите параметр «Цвет» и задайте для нового слоя нейтральный цвет заливки:

2. Добавьте новый прозрачный слой поверх этого слоя заливки цветом. Перейдите в Слой> Новый> Слой или просто нажмите иконку с загнутым листом в меню в нижней части палитры слоев.

3. Давайте создадим тело нашего персонажа. Выберем основной цвет кожи. Я использую цвет #f2cb9f:

4. С помощью инструмента «Карандаш» нарисуйте тело персонажа игры с пиксельной графикой. Я хочу сделать тело как можно более простым, а затем в конце подкорректировать его. Мы добавим больше деталей, когда создадим основную форму.

Подсказка: Для каждого нового элемента добавляйте дополнительный слой, чтобы иметь возможность вернуться позже и откорректировать.

Подсказка: Если хотите создать прямую линию, кликните один раз в том месте, где вы хотите ее начать, а затем, удерживая нажатой клавишу Shift, кликните в месте, где хотите завершить линию. Photoshop автоматически создаст прямую линию между двумя точками.

Вы можете создавать тело, как вам нравится. Вот, как это сделала я:

• Нажмите один раз на холсте карандашом размером 15 пикселей, чтобы создать голову;
• Создайте треугольник (направленный вниз), это будет грудь, и нарисуйте сверху от него шею (с помощью карандаша с размером 3 пикселя
• Создайте туловище с помощью другого треугольника (направленного вверх) снизу от треугольника груди;
• Нарисуйте ноги из нижней части треугольника туловища;
• Поставьте «точки» в тех местах, где будут заканчиваться руки. Одна рука у персонажа будет поднята вверх, а другая опущена. Удерживая нажатой клавишу Shift, кликните мышью по краю плеча, чтобы соединить плечо и конец руки;
• Добавьте кисти рук и ступни ног персонажа игры с пиксельной графикой;
• Теперь можете добавить или стереть некоторые пиксели, чтобы скорректировать форму тела. Я добавила немного больше объема в ногах, чтобы сделать шею и тело толще и немного округлила плечи.

5. Теперь мы добавим одежду, волосы и лицо. Используйте базовую форму тела как шаблон, чтобы создать одежду. Я хочу добавить шесть новых слоев для рубашки, брюк, обуви, волос, лица и мелких деталей:

6. Файл Photoshop так, как он есть на текущий момент.

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

Линии

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

Прямые линии

Я знаю о чём вы подумали: здесь всё настолько просто, что нет смысла вникать во что-то. Но, если речь идёт о пикселях, даже прямые линии могут стать проблемой. Нам нужно избегать зазубренных частей – маленьких фрагментов линии, заставляющих её выглядеть неровно. Они появляются, если одна из частей линии больше или меньше остальных, окружающих её.

Изогнутые линии

Рисуя изогнутые линии, нужно убедиться в том, что спад или подъём равномерны по всей длине. В данном примере, аккуратная линия имеет интервалы 6 > 3 > 2 > 1, а вот линия с интервалами 3 > 1 < 3 выглядит зазубренной.

Умение рисовать линии – ключевой элемент пиксель арт. Немного дальше я расскажу вам о сглаживании.

Концептуализация

Для начала вам понадобится хорошая идея! Попробуйте визуализировать то, что вы собираетесь сделать в пиксель арт – на бумаге или просто мысленно. Имея представление о рисунке вы сможете сконцентрироваться на самом пикселинге.

Темы для размышления

• Для чего будет использован этот спрайт? Он для веб-сайта или для игры? Нужно ли будет в последствии сделать его анимированным? Если да, то его нужно будет сделать поменьше и мене детальным. И, наоборот, если вы не будете работать со спрайтом в будущем, можете прицепить на него столько деталей, сколько вам нужно. Поэтому заранее решите для чего конкретно нужен данный спрайт и выберите оптимальные параметры.
• Какие существуют ограничения? Ранее я упомянул о важности сохранения цветов. Главной причиной является ограниченность палитры цветов из-за системных требований (что крайне маловероятно в наше время) или для сочетаемости. Или для точности, если вы эмулируете особенный стиль C64, NES и так далее. Также стоит учитывать измерения вашего спрайта и то, не слишком ли он выделяется на фоне необходимых объектов.

Давайте попробуем!

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

Контур

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

Существует два подхода к созданию контура. Вы можете нарисовать контур от руки, а потом немного его поправить, или же рисовать всё по одному пикселю. Да, вы всё правильно поняли, речь идёт о тысяче кликов.

Выбор способа зависит от размера спрайта и ваших навыков пикселинга. Если спрайт действительно огромный, то логичнее будет нарисовать его от руки, чтобы создать примерную форму, а затем подровнять. Поверьте, это намного быстрее, чем сразу пытаться нарисовать идеальный эскиз.

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

Черновой контур

Используя вашу мышь или планшет, нарисуйте черновой контур для вашего спрайта. Убедись в том, что он НЕ СЛИШКОМ сырой, то есть выглядит примерно так, как вы видите свой конечный продукт.

Мой эскиз практически полностью совпал с тем, как я и запланировал.

Отполируйте контур

Начните с того, что увеличиваете изображение в 6 или 8 раз. Вы должны чётко видеть каждый пиксель. А затем, подчищайте контур. В частности, стоит обратить внимание на «бродячие пиксели» (весь контур должен быть не больше одного пикселя толщиной), избавьтесь от зазубрин, и добавьте небольшие детали, которые мы пропустили в первом шаге.

Даже крупные спрайты очень редко превышают размер 200 на 200 пикселей. Фраза «делайте больше, используя меньше средств» отлично подходит для описания процесса пикселинга. Скоро вы убедитесь в том, что даже один пиксель имеет значение.

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

Софт

Базовые цифровые инструменты для пиксель-арта — Зум (Zoom) и Карандаш (Pencil), чтобы размещать пиксели. Также вам пригодятся Линия (Line), Фигура (Shape), Выбрать (Select), Переместить (Move) и Заливка (Paint Bucket). Есть много бесплатного и платного ПО с таким набором инструментов. Я расскажу про самые популярные и те, которыми пользуюсь сам.

Paint (бесплатно)

Если у вас Windows, встроенный в нее Paint — примитивная программа, но в ней есть все инструменты для пиксель-арта.

Piskel (бесплатно)

Неожиданно функциональный редактор пиксель-арта, который запускается через браузер. Можно экспортировать работу в PNG или анимированный GIF. Отличный вариант для новичков.

GraphigsGale (бесплатно)

GraphicsGale — единственный редактор из тех, о которых я слышал, разработанный именно для пиксель-арта и включающий инструменты анимации. Его создала японская компания HUMANBALANCE. С 2017 года он распространяется бесплатно и до сих пор пользуется спросом, несмотря на рост популярности Aseprite. К сожалению, работает он только на Windows.

Aseprite ($)

Пожалуй, самый популярный редактор на данный момент. Открытый исходный код, куча возможностей, активная поддержка, версии для Windows, Mac и Linux. Если вы серьезно взялись за пиксель-арт и все еще не нашли нужный редактор, возможно, это то, что нужно.

GameMaker Studio 2 ($$+)

GameMaker Studio 2 — превосходный 2D-инструмент с хорошим редактором спрайтов (Sprite Editor). Если вы хотите создавать пиксель-арт для для собственных игр, очень удобно все делать в одной программе. Сейчас я использую этот софт в работе над UFO 50, коллекцией 50 ретро-игр: спрайты и анимации создаю в GameMaker, а тайлсеты — в Photoshop.

Photoshop ($$$+)

Photoshop — дорогой софт, распространяется по подписке, не заточен под пиксель-арт. Не рекомендую приобретать его, если вы не занимаетесь отрисовкой иллюстраций в высоком разрешении, или вам не нужно проводить сложные манипуляции с картинкой, как мне. В нем можно создавать статичные спрайты и пиксельные работы, но он довольно сложный по сравнению со специализированным софтом (например, GraphicsGale или Aseprite).

Работа с фильтром “Мозаика” в Photoshop

1. Сперва необходимо сделать 2 дубликата (копии) фонового слоя (у нас он называется “MyPhotoshop.ru”). Для этого нажмите два раза на комбинацию горячих клавиш CTRL+J.
   
2. Теперь, кликните на самый верхний слой с копией, а затем в меню “Фильтр” – “Оформление” выберите “Мозаика” (Мы уже выбирали его в самом начале).
   Откроется окно настроек данного фильтра, в котором необходимо подобрать размер ячейки. Выберем для начала размер чуть покрупнее.
   Таким образом наш пиксель получится достаточно крупным:
   
3. С верхним слоем пока все. Выбираем средний слой (первую копию) и применяем тот же фильтр “Мозаика”, но на этот раз выставляем размер ячейки примерно вдвое меньше, чем в предыдущий.
   

Программы для пиксель-арта

Чтобы освоить создание артов в пиксельной манере, можно использовать любой графический редактор, который поддерживает такой вид рисования. Все художники работают с разными программами, исходя из своих предпочтений.

Многие и по сей день предпочитают рисовать пикселями во всем известной стандартной программе операционной системы Windows – Microsoft Paint. Эта программа действительно проста в освоении, но в этом же кроется и ее минус – она достаточно примитивна, например, не поддерживает работу со слоями и их прозрачностью.

Еще одна простая в использовании программа для пиксель-арта, чью демо-версию можно найти в Интернете абсолютно бесплатно, – это GraphicsGale. Минусом программы можно назвать, пожалуй, то, что она не поддерживает сохранение пиксель-артов в формате .gif.

Обладатели компьютеров Mac могут попробовать поработать в бесплатной программе Pixen. А пользователям операционной системы Linux стоит протестировать для себя программы GrafX2 и JDraw.

И, конечно же, отличный вариант для создания пиксель-арта – программа Adobe Photoshop, обладающая широким функционалом, позволяющая работать со слоями, поддерживающая прозрачность, обеспечивающая простую работу с палитрой. С помощью этой программы мы и рассмотрим несложные примеры, как рисовать пиксель-арт самостоятельно.

Как рисовать пиксель-арт в фотошопе

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

Рисунок «Воздушный шарик»

Начнем с самого простого – нарисуем обыкновенный воздушный шар. Создайте новый файл в фотошопе с экранным разрешением 72 точки на дюйм. Размеры изображения нет смысла задавать большими – это же пиксель-арт. Выбираем кисточку, жесткую и непрозрачную, ставим размер – 1 пиксель.

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

По такому же принципу дорисуйте нижнюю часть шара и ниточку. Залейте шарик красным цветом с помощью инструмента «Заливка». Теперь остается добавить объем — уж слишком плоско выглядит наш шар. Нарисуйте с правой нижней стороны шарика полосу темно-красного цвета, а затем примените к этой области дизеринг. В верхнем левом углу шарика нарисуйте блик из пикселей белого цвета.

Видите, как просто – шарик готов!

Выбор палитры цветов

Набросок

Полировка контура

Покрас

Тени

Как получить блик на пиксельных рисунках