Как в фотошопе рисовать по пикселям: Создаем 8-битную пиксельную графику с помощью Photoshop — часть 1 – Adobe Photoshop: Рисуем и анимируем персонажа в технике Pixel Art

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

Введение

В этом уроке вы узнаете, как превратить фотографию человека в пиксельное искусство как вымышленный персонаж аркадной игры с начала 90-х годов.
Джеймс Май — aka Smudgethis — разработал этот стиль в 2011 году для музыкального видео для дабстеп-рок-акта. Первый хит Nero’s, Me & You — где он создал анимацию, чтобы показать старую игру с участием Nero’s два участника. Игра была 2D-платформером с ритмикой с 16-битной графикой, подобной Double Dragon, но намного превосходящей 8-битные игры ретро-классики, такие как Super Mario Bros.
Чтобы создать этот стиль, персонажи все равно должны быть блочными, но более сложными, чем старые игры. И хотя вам нужно использовать ограниченную цветовую палитру для достижения внешнего вида, помните, что в этих играх по-прежнему было 65 536 цветов.
Здесь Джеймс показывает вам, как создать персонаж на основе фотографии, используя простую цветовую палитру и инструмент «Карандаш».
Как и руководство по анимации, вам также понадобится фотография человека. Джеймс использовал фотографию панка, которая включена в файлы проекта этого учебника.
После завершения ознакомьтесь с этим 16-разрядным учебником анимации After Effects, где Джеймс покажет вам, как взять этого персонажа в AE, оживить его и применить эффекты ретро-игры.

Шаг 1

Откройте Руководство по анимации (16 бит ) .psd и 18888111.jpg (или фото по вашему выбору) для использования в качестве основы для персонажа. Полноформатная фотография профиля будет работать лучше всего и поможет с получением цветовых палитр и стилей для вашей 16-битной фигуры.
В руководстве по анимации есть несколько поз по отдельным слоям. Выберите тот, который наилучшим образом соответствует позе на вашей фотографии — поскольку у нас нет ног в кадре, я пошел на стандартную позу на уровне 1.

Шаг 2

Используя инструмент Rectangular Marquee (M), выберите головку с вашей фотографии и копию (Cmd /Ctrl + C) и вставьте ее (Cmd /Ctrl + V) в Руководство по анимации (16 бит) .psd.
Масштабируйте изображение, чтобы оно соответствовало, пропорционально. Вы заметите, что по мере того, как размеры PSD очень малы, изображение мгновенно начнет рисовать пиксель.

Шаг 3

Создайте новый слой и нарисуйте контур одним пиксельным черным карандашом (B), используя предоставленную в нем руководство по анимации и фотографию в качестве основы. \ п
Поставляемый гид помогает развить ряд персонажей из более крупных фигур босса или более тонких женских. Это приблизительное руководство для компоновки и анимации моих персонажей пиксельных произведений.

Шаг 4

Используя инструмент Eyedropper ( I), проведите образец самой темной области тона кожи на фотографии и создайте маленький квадрат цвета. Сделайте это еще три раза, чтобы создать четырехцветную палитру тон кожи.
Создайте еще один слой под контурным слоем и с помощью однопиксельной кисти и четырехцветной цветовой палитры затенйте изображение (опять же, используя фотографию как ваш гид). \ п
Лучше всего хранить все элементы вашего произведения искусства или разные слои, поскольку это позволяет легко повторно использовать их на других фигурах. Это особенно полезно для «baddies», поскольку большинство 16-битных игр используют очень похожие цифры. Например, у одного бадди может быть красная рубашка и нож, в то время как более поздняя идентична, кроме синей рубашки и пистолета.

Шаг 5

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

Шаг 6

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

Шаг 7

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

Шаг 8

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

Рисуем в Фотошоп пиксельного персонажа аркадных игр / Фотошоп-мастер

Скачать архив с материалами к уроку

В этом уроке мы научимся технике превращения фотографии человека в пиксельного персонажа аркадных игр начала 90-х.

Джеймс Мэй – он же Smudgethis – разработал этот стиль в 2011 для первого хита дабстеп-рок группы Nero — Me & You. Он создал анимацию, в которой двое участников группы были показаны героями старой аркады. Игра выглядела как 16-битный сайд скроллер в жанре beat-em-up, похожий на Double Dragon, но намного лучшего качества, чем восьмибитная ретро классика, как Super Mario Bros.

Для создания подобного эффекта, персонажи должны быть немного топорными, но более детализированными, чем в самых старых играх. Также, поскольку нам нужно будет ограничить цветовую палитру, не забывайте, что у таких игр было всего 65 536 цветов.

В этом уроке Джеймс покажет, как создать персонажа, основанного на фотографии, используя простою цветовую палитру и инструмент Карандаш (Pencil).

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

Когда всё будет готово, почитайте урок по 16-битной анимации в After Effects, где Джеймс покажет, как перенести персонажа в AE, заставить его двигаться и применить эффекты ретро игр.

Шаг 1

Откройте файлы Animation Guide (16bit).psd и 18888111.jpg (или выбранный вами снимок), чтобы использовать в качестве основы персонажа. Фотография в профиль в полный рост отлично подойдет, а также поможет получить цветовые палитры и стиль 16-битного рисунка.

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

Шаг 2

При помощи инструмента Прямоугольное выделение

(Rectangular Marquee tool) выделите голову человека, скопируйте (Ctrl + C) и вставьте (Ctrl + V) ее в Animation Guide (16bit).psd.

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

Шаг 3

Создайте новый слой и нарисуйте обводку черным

Карандашом (Pencil) толщиной в один пиксель, используя каркас как основу.

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

Шаг 4

При помощи инструмента Пипетка (Eyedropper tool), выделите самый темный участок кожи и закрасьте полученным цветом маленький участок. Сделайте это еще три раза, получив четырехцветную палитру для оттенков кожи.

Создайте слой под обводкой, затем при помощи кисти радиусом в один пиксель и полученной палитры затонируйте персонажа (снова ориентируйтесь на фотографию).

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

Шаг 5

Повторите процесс для остальных частей тела, затеняя кожу и одежду и ориентируясь на исходный снимок. Не забывайте пользоваться Пипеткой (Eyedropper tool), сначала создав цветовую палитру, так как это позволит создать фиксированный набор цветов, которые отлично выглядят и вписываются в 16-битный стиль.

Шаг 6

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

Шаг 7

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

Шаг 8

Чтобы проверить, все ли правильно нарисовано, откройте панель Анимация (Animation) в Photoshop и убедитесь, что первый кадр активен. Можно добавить новые кадры, включать или отключать каждый слой, получив свою анимацию, но самый быстрый способ – использовать команду Создать кадры из слоев (Make Frames From Layers) во всплывающем меню панели (верхний правый угол).

Первый слой – это пустой фон, поэтому выберите его и кликните по иконке мусорного бака (внизу), чтобы удалить.

Автор: James May

Рисуем в Фотошоп изометрическую комнату в стиле пиксель-арт / Фотошоп-мастер

В этом уроке я покажу вам, как нарисовать изометрическую комнату в стиле пиксель-арт.

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

Скачать архив с материалами к уроку

Вступление

Перед началом работы, скачайте архив и установите узор в Photoshop. Для этого переходим Edit – Presets – Preset Manager (Редактирование – Наборы – Управление наборами). Устанавливаем Preset Type (Тип набора) на Patterns (Узоры).

После этого жмем на кнопку Load (Загрузить), находим на компьютере нужный узор и загружаем его в Photoshop. Узор установлен, и мы можем начинать работу. Также вы можете просто перетащить узор мышкой в окно Preset Manager (Управление наборами).

1. Рисуем основу комнаты

Шаг 1

Нажатием клавиши D сбрасываем цвет на стандартные (черный и белый). Обратите внимание, что Anti-alias (Сглаживание) у всех инструментов, которые мы будем использовать в уроке, должно быть отключено!

Открываем Photoshop (я использую Photoshop CS6), переходим File – New (Файл – Новый) и создаем новый файл размером 412 х 395 пикселей (с белым фоном).

Шаг 2

Переходим Layer – New – Group (Слой – Новый – Группа), чтобы создать новую группу, которую мы называем «Комната». Затем в этой группе добавляем новый слой Layer – New – Layer (Слой – Новый – Слой).

Шаг 3

Берем Pencil Tool (B) (Карандаш) и создаем две фигуры в форме буквы L, размер каждой стороны должен составлять 192 х 1 пиксель (два центральный пикселя каждой линии должны пересекаться друг с другом). Рисуем два горизонтальных пикселя и опускаемся на один пиксель ниже, затем рисуем еще два горизонтальных. Расстояние между двумя L-образными фигурами должно составлять 170 пикселей.

Шаг 4

Берем Lasso Tool (L) (Лассо), отключаем функцию Anti-alias (Сглаживание) и выделяем нижнюю линию. Дублируем (Ctrl+J) ее и поворачиваем на 180°. Размещаем копию под нижней линией, образуя ромб. Затем берем Pencil Tool (B) (Карандаш) и соединяем три угла вертикальными линиями.

Шаг 5

В этом шаге мы добавим дополнительные линии, чтобы показать толщину и объем стен. Удаляем все лишние пиксели и переименовываем слой на «Комната».

Шаг 6

Берем Magic Wand Tool (W) (Волшебная палочка), отключаем функцию Anti-alias (Сглаживание) и кликаем на нижний ромб, который будет полом. Создаем новый слой (Ctrl+Shift+N) и заливаем его любым цветом. Мышкой дважды кликаем по этому слою, чтобы применить к нему стиль слоя Pattern Overlay (Наложение узора) со следующими настройками:

• Blend Mode (Режим смешивания): Overlay (Перекрытие)
• Opacity (Непрозрачность): 100%
• Pattern (Узор): находим и выбираем узор с текстурой пола
• Scale (Масштаб): 100%

Шаг 7

Возвращаемся на слой «Комната». Теперь выделяем стены, используя все тот же Magic Wand Tool (W) (Волшебная палочка) с отключенной функцией Anti-alias (Сглаживание). Создаем новый слой и заливаем его белым цветом. Мышкой дважды кликаем по этому слою и применяем стиль слоя Pattern Overlay (Наложение узора). Fill (Заливка) слоя устанавливаем на 0%.

Применяем Pattern Overlay (Наложение узора) со следующими параметрами:

• Blend Mode (Режим смешивания): Overlay (Перекрытие)
• Opacity (Непрозрачность): 100%
• Pattern (Узор): находим и выбираем узор с обоями
• Scale (Масштаб): 100%

Шаг 8

Возвращаемся на слой «Комната» и заполняем все пустые пространства цветом.

Шаг 9

Берем Pencil Tool (B) (Карандаш) и, используя следующие цвета, дорабатываем внутренние границы комнаты.

• Пол: #b78c71
• Блики: #ffffff
• Стены: #4c848d

Шаг 10

Далее рисуем плинтус, используя цвета #bbb9b6 и #ffffff. Затем объединяем все имеющиеся на данный момент слои в группу (Ctrl+G) и скрываем ее, кликнув по значку глаза на панели слоев.

2. Рисуем диван

Шаг 1

Сбрасываем цвета на стандартные (клавиша D).

Переходим Layer – New – Group (Слой – Новый – Группа), чтобы создать новую группу. Называем ее «Диван». Далее в этой группе создаем новый слой Layer – New – Layer (Слой – Новый – Слой).

Шаг 2

Берем Pencil Tool (B) (Карандаш) и рисуем две L-образные фигуры размером 18 х 1 пиксель (короткая сторона) и 66 х 1 пиксель (длинна сторона). Расстояние между двумя линиями должно составлять 40 пикселей.

Шаг 3

Берем Lasso Tool (L) (Лассо) и выделяем верхнюю линию. Дублируем ее и поворачиваем на 180°. Размещаем копию сразу под верхней линией, чтобы сформировать ромб. С помощью Pencil Tool (B) (Карандаш) соединяем верхнюю и нижнюю фигуры вертикальными линиями. Затем удаляем лишние пиксели.

Шаг 4

Заполняем пустые пространства цветом: #f8f8c6, #d8d0a0 и #7f7757.

Шаг 5

Устанавливаем цвет блика на #f8f8e8 и заполняем им внутренние углы фигуры. Затем меняем цвет на #4e4135. Берем Pain Bucket Tool (G) (Заливка), деактивируем функцию Contiguous (Смежные пиксели) и кликаем на черную обводку, чтобы залить ее другим цветом. Правый подлокотник готов!

Шаг 6

Дублируем правый подлокотник и перемещаем его на 112 пикселей влево (и выше на 56 пикселей).

Шаг 7

Используя ту же технику, цвета и инструменты, рисуем другие детали дивана (каждая деталь должна находиться на отдельном слое).

Шаг 8

Собираем все части вместе и получаем готовый диван. Скрываем группу.

3. Рисуем ковер

Шаг 1

Перед началом сбрасываем цвета на стандартные (клавиша D).

Переходим Layer – New – Group (Слой – Новый – Группа), чтобы создать новую группу. Называем ее «Ковер». Затем в этой группе создаем новый слой Layer – New – Layer (Слой – Новый – Слой).

Шаг 2

Рисуем две перпендикулярные линии: 146 х 1 пиксель и 138 х 1 пиксель (крайние пиксели обеих линий должны пересекаться).

Шаг 3

Дублируем (Ctrl+J) этот слой и перемещаем его на 10 пикселей выше. Повторяем действие, чтобы в результате получить три L-образные линии. Объединяем их вместе (Ctrl+E) и удаляем лишние пиксели (на скриншоте ниже они отмечены розовым цветом).

Шаг 4

Теперь давайте добавим верхний контур ковра. Переходим Layer – Duplicate Layer (Слой – Дублировать слой), чтобы дублировать слой, затем Image – Image Rotation — 180° (Изображение – Вращение изображения — 180°), чтобы повернуть его. Размещаем копию над оригиналом и объединяем обе половинки ковра вместе (Ctrl+E).

Шаг 5

Берем Paint Bucket Tool (G) (Заливка) и заполняем пустое пространство между линиями цветами #73719c и #b5b2de. Затем устанавливаем цвет переднего плана на #504f76 и кликаем по черному контуру. Закончив, скрываем группу.

4. Рисуем стол

Шаг 1

Перед началом сбрасываем цвета на стандартные (клавиша D).

Переходим Layer – New – Group (Слой – Новый – Группа), чтобы создать новую группу. Называем ее «Стол». Затем в этой группе создаем новый слой Layer – New – Layer (Слой – Новый – Слой).

Шаг 2

Рисуем линию размером 62 х 1 пиксель (каждые два пикселя смещаемся на один пиксель вниз). Это будет боковая сторона стола.

Шаг 3

Рисуем короткую сторону стола.

Шаг 4

Теперь дорисуем верхнюю часть стола. Выбираем слой с L-образной линией и дублируем (Ctrl+J) его. Переходим Image – Image Rotation — 180° (Изображение – Вращение изображения — 180°), чтобы повернуть копию слоя. Объединяем все части стола и заливаем цветом #dfbf8e.

Шаг 5

Дублируем слой командой Layer – Duplicate Layer (Слой – Дублировать слой). Выбираем оригинал и сдвигаем его на 4 пикселя. Соединяем обе копии вертикальными линиями, используя Pencil Tool (B) (Карандаш). Объединяем все слои в группе «Стол».

Шаг 6

Берем Paint Bucket Tool (G) (Заливка) и заполняем верхнюю и длинную боковую части светло-коричневым цветом (#c9a979), а короткую боковую – темно-коричневым (#95675a). Берем Eraser Tool (E) (Ластик) и удаляем лишние пиксели (на скриншоте ниже они отмечены розовым цветом).

Шаг 7

Устанавливаем цвет переднего плана на #f4e1c3 и рисуем блики, используя Pencil Tool (B) (Карандаш). Затем меняем цвет на #2b2b2b, берем Paint Bucket Tool (G) (Заливка) и заполняем им черный контур.

Шаг 8

Создаем новый слой и перемещаем его в самый низ группы «Стол». Рисуем ножку стола (используем цвет #404968 для контура, #6b949c – для затененной стороны, #c5eaf0 – для бликов).

Шаг 9

Трижды дублируем слой с ножкой и размещаем копии по углам стола. Объединяем все слои в группе «Стол» вместе (Ctrl+E). Скрываем группу.

5. Рисуем телевизор

Шаг 1

Перед началом сбрасываем цвета на стандартные (клавиша D).

Переходим Layer – New – Group (Слой – Новый – Группа), чтобы создать новую группу. Называем ее «ТВ». Далее дублируем (Ctrl+J) самую узкую деталь дивана. Перемещаем копию в группу «ТВ». Затем берем Rectangular Marquee Tool (M) (Прямоугольное выделение) и выделяем нижнюю часть фигуры. Кликаем правой кнопкой мышки по выделению и выбираем Layer via Cut (Вырезать на новый слой). Перемещаем вырезанный слой на 16 пикселей вниз. Затем объединяем все слои внутри группы и заполняем пустое пространство между половинками телевизора цветом.

Шаг 2

Заливаем фигуру новыми цветами:

• Верхняя грань: #6e7488
• Фронтальная часть: #525663
• Боковая грань: #383c45
• Блики: #818796
• Контур: #20232e

Шаг 3

Берем Pencil Tool (B) (Карандаш) и рисуем экран, используя черный цвет (#000000).

Шаг 4

Устанавливаем цвет переднего плана на черный (#000000) и рисуем динамики по бокам. Объединяем все слои в группе (Ctrl+E) и скрываем ее.

Поздравляю, мы закончили!

Включаем видимость всех групп и слоев. Затем переходим File – Place (Файл — Поместить) и вставляем дополнительные элементы (картины, цветочные горшки). Сортируем все слои и группы так, чтобы они были четко структурированы. Размещаем все элементы композиции так, как вам хочется. Моя работа — это всего лишь один из вариантов и вам необязательно придерживаться его.

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

Больше уроков по изометрической графике вы можете найти на Envato Tuts+.

Автор: Pavlo Manachyn

Рисуем пиксельное дерево в Фотошоп / Фотошоп-мастер

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

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

Финальное изображение:

1. Размеры

Мы будем рисовать дерево достаточно большого размера, чуть больше, чем куст, но не совсем огромное.

Шаг 1

Высота будущего дерева  в два раза меньше высоты персонажа.

Это рабочие размеры. В процессе рисования высоту можно будет скорректировать.

Шаг 2

Ширина ствола дерева должна быть чуть толще, чем ноги персонажа. В моем случае, это 4 пиксела между линиями.

Шаг 3

А вот это примерно верхушка дерева.

2. Фигуры

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

Шаг 1

Вот так выглядит овал, который мы будем рисовать. Его ширина 24 x 18px, но Вы можете ее сделать любой.

Нарисуйте овал при помощи инструмента Овальная область выделения (Elliptical Marquee Tool), отключив функцию анти-сглаживание (anti-alias) на панели свойств инструмента.

Затем, нарисованное выделение нужно заполнить цветом. Для этого, сожмите выделение овала на 1 пикселSelect > Modify > Contract (Выделение – Модификация – Сжать) и залейте его зеленым цветом. Но я предпочитаю рисовать овал при помощи инструмента Карандаш (Pencil Tool), для того, чтобы его края были слегка зубчатыми.

Шаг 2

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

Попробуйте несколько способов размещения овалов. Эта строка будет иметь три овала.

Шаг 4

Третий овал на этой строке будет располагаться немного ниже.

Шаг 5

Добавьте пару овалов на нижнюю часть дерева – Вы можете вставить их на новый слой, переместить слой ниже исходного и слить (Ctrl + E).

Шаг 6

Удалите направляющие, по которым рисовали дерево:

Шаг 7

Закругленный ствол дерева зрительно смягчает его зазубренные края:

Мы создали основную фигуру дерева и теперь нужно прорисовать тень, чтобы добавить ему объем.

Шаг 1

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

Шаг 2

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

Шаг 3

Ориентируясь на скриншот, добавьте к боковым частям листвы дерева точно такой же оттенок, что и в предыдущем шаге:

Шаг 4

Добавьте точно такой же оттенок и на центральный овал:

Шаг 5

Теперь добавьте темный оттенок на нижнюю часть овалов, находящихся в центре. Этот оттенок должен быть на 10% темнее, чем основной цвет листвы.

Шаг 6

Добавьте еще один оттенок на самую нижнюю часть листвы – он должен быть на 10% темнее, чем предыдущий.

Шаг 7

Теперь измените цвет ствола дерева на коричневый. Также, после того, как цвет стволу задан, Вы можете его изменять при помощи команды Цветовой тон/Насыщенность (Image > Adjustments > Hue/Saturation).

Шаг 8

В финале, добавьте тень на ствол дерева. Края ствола могут быть темнее или светлее. В моем случае, они темнее.

Теперь к дереву мы добавим текстуру, смешивая несколько разных оттенков. Это делается для того, чтобы добавить дереву текстуру листьев.

Шаг 1

Для создания сглаженного перехода я буду использовать области по 4 пиксела цвета, а для отдельных – по 2 пиксела.

Для большего удобства, при рисовании увеличивайте масштаб изображения инструментом Zoom (Масштаб).

Шаг 2

В верхней части дерева  и немного левее, прорисована пиксельная текстура.

Шаг 3

Скопируйте пиксельную текстуру (Ctrl + C) и вставьте ее на другую сторону дерева и в центральную его часть (Ctrl + V).

Шаг 4

Теперь нарисуйте пиксельную текстуру на средней части дерева, создавая плавный переход от зеленого к темно-зеленому оттенку.

Шаг 5

Сглаживание текстуры сделайте чуть выше средней части  дерева, чтобы оно выглядело объемным и чтобы  сделать его форму круглее.

Шаг 6

Теперь добавьте несколько темных пикселов, чтобы подчеркнуть разрыв между боковой частью и центром овала. Это придаст дереву вид кластера, как и было задумано.

Шаг 7

После того, как эта часть готова, скопируйте ее (Ctrl + C), отразите по горизонтали (Edit> Transform>  Flip Horizontal)(Редактирование – Трансформирование – Отразить по горизонтали) и поместите ее на противоположной стороне.

Шаг 8

Также, готовую пиксельную часть из предыдущего шага поместите на нижнюю темно-зеленую часть дерева:

Шаг 9

Для того, чтобы добавить пиксельную текстуру на ствол дерева, на новом слое (Shift + Ctrl + N) нарисуйте маленький шаблон пиксельной текстуры черного цвета, примените ее к стволу и уменьшите непрозрачность до 20%. После, выполните сведение слоев (Ctrl + E).

Благодаря этому, ствол обретет текстуру коры.

Шаг 10

Сделайте светлее контур ствола, а также нарисуйте вокруг дерева тень черного цвета, падающую на землю от его верхушки. Уменьшите непрозрачность слоя с тенью до 10%.

Финальное изображение:

Автор: René Alejandro Hernández

Перевод: Слуцкая Светлана

Рисуем пиксельную ратушу в Фотошоп / Фотошоп-мастер

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

Желательно, чтобы у вас уже был какой-то опыт в рисовании зданий. В противном случае, посмотрите другие уроки из этой серии, особенно о рисовании персонажа, частного дома и многоэтажки.

1. Размеры

Как обычно, мы будем использовать заранее подготовленного пиксельного человечка, чтобы правильно определить размер элементов, которые будем рисовать.

Шаг 1

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

На картинке ниже две параллельные линии находятся на расстоянии 80 пикселей. Старайтесь, чтобы расстояние между ними было кратным 10, потому что во время перемещения линий с помощью стрелок на клавиатуре и зажатой клавиши Alt, мы сможем просто зажать клавишу Shift и изменить шаг перемещения с 1 пикселя на 10.

Шаг 2

Мы создадим три основных этажа, поэтому дублируем линии несколько раз (Ctrl+J).

Шаг 3

Здание достаточно широкое, поэтому сейчас мы должны определить его ширину. И в этот раз тоже используем значения, кратные 10. Это вовсе необязательно, но позже, благодаря одинаковому расстоянию между линиями, нам будет гораздо проще размещать элементы.

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

Шаг 4

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

2. Базовая форма

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

Шаг 1

«Выдавливаем» вход, куда мы позже добавим двери, колонны и несколько других архитектурных элементов.

Не перемещайте линии слишком далеко, расстояние от стены, равное 10 пикселям, будет вполне достаточно.

Шаг 2

Теперь начинаем работать с куполом. В центре крыши рисуем большой квадрат. Ничего страшного, если он шире, чем выступ на фасаде, где у нас будет вход.

Шаг 3

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

Для начала рисуем новый квадрат чуть меньше предыдущего.

Определяем его центр с помощью двух скрещенных линий.

Создаем окружность от центра к краям прямоугольника. Для этого используем инструмент Elliptical Marquee Tool (M) (Овальное выделение) с зажатой клавишей Alt. Границы круга должны соприкасаться с границами внутреннего квадрата и очень важно, чтобы ширина окружности была в два раза больше ее высоты. В маленьком облачке, которое появляется во время создания выделения, вы увидите размеры создаваемого выделения и сможете правильно рассчитать высоту и ширину.

Создав выделение, заполняем его любым цветом и переходим Select – Modify – Contract (Выделение – Модификация – Сжать), в появившемся диалоговом окне вводим 1, нажимаем ОК и удаляем внутреннюю часть окружности.

Делаем дубликат окружности (Ctrl+J), так как позже он может нам понадобиться.

Шаг 4

Ниже купола мы нарисуем стену с гранями. С помощью Polygon Tool (U) (Многоугольник) создаем окружность с 16 гранями. Старайтесь сделать так, чтобы две противоположные грани были параллельны, например, верхняя и нижняя (соответственно, две противоположные боковые грани тоже должны быть параллельны).

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

Шаг 5

Перемещаем полигональную окружность на новый слой и сжимаем его по вертикали на 50%.

Затем размещаем фигуру внутри квадрата с окружностью и корректируем ее размер по форме кольца.

На новом слое рисуем пиксельный контур полигональной окружности, стараясь не делать его слишком зазубренным.

Теперь у нас есть контуры окружности и многоугольника. Полигональную окружность, которую мы использовали в качестве основы, можно удалить.

Шаг 6

Дублируем многоугольник (Ctrl+J) и размещаем копию выше на высоте этажа.

Шаг 7

Соединяем стороны и углы многоугольников вертикальными линиями и удаляем лишний контур.

Шаг 8

Размещаем контур окружности в центре верхнего многоугольника.

Шаг 9

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

Нижнюю часть сферы удаляем.

Размещаем сферу вплотную к контуру, чтобы она соединялась с боковыми вертикальными линиями.

Удаляем лишний контур на заднем плане.

[21.jgp]

Контур купола готов.

Шаг 10

На куполе будет еще один небольшой объект – восьмиугольный цилиндр. В качестве основы для цилиндра мы нарисуем прямоугольник, ширина которого в 2 раза больше высоты.

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

Обводим контур восьмиугольника, удаляем основу и размещаем на вершине купола, практически касаясь контура.

Шаг 11

Дублируем восьмиугольник, перемещаем копию выше и соединяем обе фигуры вертикальными линиями, как мы делали это с 16-угольником.

Шаг 12

Теперь мы можем разместить купол на здании. Он должен быть расположен строго по центру ратуши.

Удаляем все вспомогательные линии.

Шаг 13

На вершине цилиндра добавим еще один купол. Создаем окружность и вписываем ее в верхнюю часть цилиндра.

Создаем сферу, удаляем ее нижнюю часть и соединяем с контуром окружности на цилиндре.

Шаг 14

Рисуем вертикальные линии на стенах.

Шаг 15

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

Фронтон имеет форму обычного треугольника. Левая верхняя линия должна быть горизонтальной, а верхняя правая должна находиться по диагонали. Затем дублируем контур, передвигаем его чуть дальше от оригинала, чтобы создать объем, и закрашиваем цветом.

Шаг 16

Теперь на новом слое нарисуем крышу.

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

Шаг 17

Теперь определим место, где крыша соединяется с куполом, и удалим лишний контур крыши, который пересекает купол.

Шаг 18

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

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

Шаг 19

Этот восьмиугольник будет частично перекрыт крышей. Нам нужно определить угловые линии между поверхностью крыши и восьмиугольником.

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

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

Нам нужно всего лишь соединить точки.

Заднюю часть удаляем, так как она пересекается с куполом.

И получаем правильный разрез крыши и линии, которые будут соединяться с одной из граней восьмиугольника.

Шаг 20

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

Шаг 21

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

Постарайтесь, чтобы линии были аккуратными и как можно меньше зазубренными.

3. Цвет

Мы закончили с созданием всех основных форм и теперь займемся заливкой цветом!

Шаг 1

Для крыши выбираем цвет аквамарина, похожий на цвет состарившейся меди. Кажется, он встречался на моих исходниках.

Для стен выбираем светло-кремовый цвет, практически белый. Здесь все стандартно.

Шаг 2

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

Стенки 16-стороннего многоугольника, которые смотрят в ту же сторону, что и стены трех этажей должны иметь такое же затенение.

Не забудьте плоскости, которые направлены вверх, залить светлым оттенком.

Шаг 3

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

Шаг 4

Нам не нужно так много темных линий. Поэтому давайте заполним выступающие углы более светлым оттенком.

Шаг 5

Также нам не нужно, чтобы все вогнутые углы были закрашены черным. Заполняем их более темным оттенком, чем тот, который находится вокруг них. Это придаст им мягкости, снизит контрастность и сделает места соединения плоскостей более аккуратными.

4. Детали

Мы еще не закончили с заполнением цветом, однако, на данном этапе уже можно перейти к добавлению остальных архитектурных элементов.

Шаг 1

Давайте добавим окна. Выделяем нижний контур восьмиугольника и дважды дублируем его (Ctrl+J), чтобы создать верхний и нижний край окон. Все действия проделываем на новом слое.

Шаг 2

Теперь определим правую и левую стороны окон на каждой видимой грани восьмиугольника.

Шаг 3

Копируем получившиеся контуры окон на новый слой и передвигаем их так, чтобы получить внутренний контур оконного проема. Это придаст объем стене купола.

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

Шаг 4

Удаляем лишние линии и объединяем копии контура окон вместе (Ctrl+E).

Шаг 5

Заполняем видимые стороны соответствующими цветами и более светлым оттенком – углы.

Шаг 6

Теперь, используя горизонтальные линии, создадим раму на окнах.

Шаг 7

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

Шаг 8

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

Шаг 9

Теперь мы должны закончить элемент на куполе. Это делается очень просто.

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

Шаг 10

Вот так выглядит готовая верхушка купола.

Мы полностью закончили работу с куполом.

Шаг 11

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

Мы добавим несколько концентрических треугольников.

Шаг 12

Рисуем темный треугольник, чтобы создать эффект глубины. С этим мы закончили.

Шаг 13

Мы можем удалить выпуклую фронтальную часть на втором и третьем этажах. Позже в этих местах мы добавим колонны.

Шаг 14

Давайте нарисуем несколько параллельных линий, пересекающих весь первый этаж. Так как высота этажа кратна 10, расстояние между этими линиями составляет 10 пикселей.

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

Шаг 15

Естественно, они не должны быть черными, поэтому сделаем их чуть темнее основного цвета стены (например, можно уменьшить яркость на 10%). Сразу под каждой линией добавляем еще одну только светлого оттенка.

Кроме того, давайте добавим уступ на первом этаже и на крыше.

Шаг 16

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

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

Шаг 17

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

Закончив с окнами, запомните, что параллельные линии на первом этаже должны идти четко по верхней и нижней границе окон. Это не обязательно, но желательно этого придерживаться.

Также добавляем мелкие детали сразу под выступом крыши.

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

Шаг 18

Вот так я разместил колонны на фасаде здания. Финальный вариант не будет таким квадратным и широким, это всего лишь основа.

Шаг 19

Давайте высечем колонну округлой формы. Работать будем только с одной, а потом продублируем ее.

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

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

Начинаем с маленькой окружности (это будет закругленный угол волюты) и затем превращаем его в спираль, убрав/добавив пиксели, с одной стороны. Я создал два варианта волюты (правый и левый) и, конечно, их наклон должен соответствовать изометрической проекции.

Размещаем волюты на колонне, наносим цвет и тени, затем сглаживаем контур более светлым оттенком.

Теперь у нас есть колонна!

Шаг 20

Вот так колонны выглядят на ратуше.

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

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

Шаг 21

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

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

Шаг 22

Вот так выглядят готовые окна на ратуше.

Шаг 23

Мы можем взять это же высокое окно, продублировать его и разместить на первом этаже, где должен быть вход (окно необходимо будет предварительно слегка укоротить).

Шаг 24

Удаляем лишние пиксели и начинаем трансформировать одно из окон в дверь.

Шаг 25

Добавляем мелкие детали на двери. Закончив, дублируем ее, чтобы создать два дополнительных входа.

Шаг 26

Наше здание готово!

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

Поздравляю!

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

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

Автор: René Alejandro Hernández

27 уроков по созданию пиксельных иллюстраций

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

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

Pixel Game Art Animated Background Tutorial in Photoshop

Pixel Game Art Design in Photoshop: Character animation & background tutorial

How create Pixel Art For Games – Tutorial – 8Bit Graphic Design

Pixel art/ Adam’s Nightmare indie game/ Drawing process

Как рисовать Пиксель Арт в Фотошопе

Speed Pixel Art #2 – A Japanese Tree

My secret way of improving fast

Pixel Art Timelapse: Necromancer Cast Animation

3 PixelArt Techniques/Common Mistakes

How To Draw Isometric Pixel Art | Photoshop Tutorial

How to make City Building background tiles

How To Pixel Art Tutorial Part 1: What Programs?

How To Pixel Art Tutorial Part 2: Basic Heart

How To Pixel Art Tutorial Part 3: Dithering

How To Pixel Art Tutorial Part 4: Form

How To Pixel Art Tutorial Part 5: Outlines

How To Pixel Art Tutorial Part 6: Pixel People

How To Pixel Art Tutorial Part 7: Sword & Sworcery

How To Pixel Art Tutorial Part 8: Background

How To Pixel Art Tutorial Part 9: Colour & Depth

How To Pixel Art Tutorial Part 10: Tile Basics

How To Pixel Art Tutorial Part 11: Character Design

How To Pixel Art Tutorial Part 12: Animation Basics

How To Pixel Art Tutorial Part 13: Base Sprite for Animation

How To Pixel Art Tutorial Part 14: Setting Up Layers

How To Pixel Art Tutorial Part 15: Idle Animation

How To Pixel Art Tutorial Part 16: Walk Cycle

Курс пиксель-арта / Habr

Это перевод публикации «Les Forges Pixel Art Course».

pdf на английском.

Часть 1: Правильные инструменты
Часть 2: Линии и кривые
Часть 3: Перспективы
Часть 4: Тень и свет
Часть 5: Палитры цветов
Часть 6: Сглаживание
Часть 7: Текстуры и размытие
Часть 8: Мир тайлов

Предисловие

Есть много определений пиксель-арта, но здесь мы будем использовать такое: изображение пиксель-арт, если оно создано целиком руками, и присутствует контроль над цветом и позицией каждого пиксела, который нарисован. Несомненно, в пиксель арте включение или использование кистей или инструментов размытия или машин деградации (degraded machines, не уверен), и других опций ПО, которые «современны», нами не используются (вообще-то put at our disposal значит «в нашем распоряжении», но по логике вроде правильнее так). Он ограничен инструментами такими как «карандаш» и «заливка».

Тем не менее не скажешь, что пиксель-арт или не-пиксель-арт графика — более или менее красива. Справедливее сказать, что пиксель-арт другой, и он лучше подходит для игр стиля «ретро» (как Супер Нинтендо или Гейм Бой). Вы можете также комбинировать техники изученные здесь, с эффектами из не-пиксель-арта, для создания гибридного стиля.

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

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

— В конце концов, я должен поблагодарить всех художников, кто присоединился ко мне в создании этого руководства так или иначе: Шина, за его грязную работу и штриховые рисунки, Ксеногидрогена, за его гений цветов, Лунна, за его знания перспективы, и Панду, сурового Ахруона, Дайо, и Крайона за их щедро предоставленные работы, для иллюстрации этих страниц.

Так, позвольте вернуться к сути дела.

Часть 1: Правильные инструменты

Плохие новости: вы не нарисуете ни единого пикселя в этой части! (И это не причина пропускать её, так ведь?) Если есть поговорка которую я терпеть не могу, это «нет плохих инструментов, только плохие работники». На самом деле я думал, что не может быть ничего более далёкого от истины (исключая может быть «то что не убивает вас, делает вас сильнее»), и пиксель-арт, очень хорошее подтверждение. Это руководство нацелено ознакомить вас с различным программным обеспечением, используемым для создания пиксель-арта, и помочь вам выбрать правильную программу.

1.Некоторые старые вещи

Когда выбираешь ПО для создания пиксель-арта, люди часто думают: «Выбор ПО? Это безумие! Всё что нам нужно для создания пиксель-арта, это paint!(видимо игра слов, рисование и программа)» Трагическая ошибка: Я говорил о плохих инструментах, это первый. Paint имеет одно преимущество (и только одно): он уже есть у вас, если вы запустили Windows. С другой стороны, у него куча недостатков. Это (неполный) список:

* Вы не можете открыть более одного файла одновременно
* Нет управления палитрой.
* Нет слоёв или прозрачности
* Нет непрямоугольных выделений
* Мало горячих клавиш
* Ужасно неудобно

Вкратце, вы можете забыть про Paint. Сейчас мы посмотрим настоящее ПО.

2. В конце концов…

Люди тогда думают: «Ладно, Paint слишком ограничен для меня, так я буду использовать моего друга Photoshop (или Gimp или PaintShopPro, это одно и то же), которые имеют тысячи возможностей.» Это может быть хорошо или плохо: если вы уже знаете одну из этих программ, вы можете делать пиксель-арт (отключив все опции для автоматического антиалиасинга, и выключив многое из продвинутого функционала). Если вы ещё не знаете эти программы, тогда вы потратите много времени, изуччая их, даже хотя вам не нужна вся их функциональность, что будет пустой тратой времени. Вкратце, если вы уже используете их долгое время, вы можете создавать пиксель-арт (я лично использую Photoshop по привычке), но иначе, много лучше использовать программы, которые специализируются на пиксель-арте. Да, они существуют.

3. Сливки

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

Charamaker 1999 — хорошая программа, но распространение, кажется, приостановлено.

Graphics Gale намного более интересна и легка в использовании, и она идёт по цене около $20, что не так уж плохо. Добавлю, пробная версия не ограничена по времени, и идёт с достаточным набором, чтобы сделать достаточно хорошую графику. Только она не работает с .gif, что не такая уж проблема, поскольку .png в любом случае лучше.

ПО более часто используемое пиксельными художниками, это ProMotion, которая (явно) более удобна и быстра чем Graphics Gale. А, да, она дорогая! Вы можете купить полную версию за скромную сумму… 50 евро ($78).
Позвольте не забыть наших друзей на Mac! Pixen хорошая программа, доступная для Macintosh, и она бесплатна. К несчастью я не могу сказать вам больше, потому что у меня нет Mac. Заметка переводчика (с французского): пользователи Linux(и другие) должны попробовать JDraw, и GrafX2. Я убеждаю вас попробовать их все в демо версиях, и посмотреть которая подходит вам по удобству. В конце концов это дело вкуса. Просто знайте, что однажды начав использовать программу, может быть очень сложно переключиться на что-то другое.

Продолжение следует…

Заметки переводчика с французского на английский

Это большое руководство по пиксель арту, написано Филом Разорбаком с LesForges.org. Большое спасибо Филу Разорбаку за разрешение OpenGameArt.org перевести эти руководства и поместить их здесь. (От переводчика на русский: я разрешения не спрашивал, если кто имеет желание, можете помочь, не имею достаточного опыта общения на английском и тем более французском).

Заметка переводчика с английского на русский

Я программист, а не художник или переводчик, перевожу для своих друзей художников, но что добру пропадать, пусть будет тут.
Оригинал на французском где-то здесь www.lesforges.org
Перевод с французского на английский здесь: opengameart.org/content/les-forges-pixel-art-course
Я переводил с английского, потому что французский не знаю.
И да, это моя первая публикация, поэтому рекомендации по оформлению приветствуются. Плюс интересует вопрос, остальные части публиковать отдельными статьями, или лучше эту обновлять и дополнять?