Уроки: Общие принципы

Пиксель Арт

Всем доброго времени суток!

Сегодня я хотел бы рассказать как относительно быстро и эффектно сделать картинку в стиле пиксель-арт, а так же каким образом можно "оживить" картинку.

Для начала пару слов о пиксель-арте и его особенностях.

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

Область применения:


- Маленькие рисунки (пример иконки на рабочем столе)
- Аватары
- Игры (до появления 3д игр, с появлением 3д, ушло на второй план, но успешно нашло себе применение в мобильных телефонах)
И много чего еще;-)

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

Итак, я решил нарисовать скорпиона, это просто пример. (я люблю скорпионов т.к. сам по знаку зодиака Скорпион прим. автора) Определившись с тематикой рисунка нам нужно сделать набросок (скетч), делайте как вам удобнее, на бумаге и потом сканом, или сразу в программе, которой рисуйте, кстати, о программе - для пиксель-арта подойдет любой графический пакет, да хоть paint. Лично я использую photoshop. Дело вкуса. Единственное требование к вашему скетчу - чтобы он был чист и завершен логически. То есть на скетче вы уже показали линии тени, аксессуары и т.п. Второй вариант для ленивых и как в моем случае для урока, это найти подходящую (желательно черно-белую) картинку в интернете. Покопавшись в гугле, нашел своего любимца. Вот он:

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

Скетч

Для своего примера я создал документ в 200 на 140 пикселей.  Удобно уместил на нем своего скорпиона и понизил opacity слоя примерно до 50% для удобства последующей работы. (Учтите что, не смотря на то, что пиксель-арт рисовать можно хоть в пейнте, автор данного урока описывает процесс создания в photoshope)
Создаем новый слой. НАСТОЯТЕЛЬНО рекомендую его назвать, рисовать мы будем по частям тела, начну с хвоста.

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

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

Разукраска

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

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

Параллельно рисую палитру (для удобства) Палитра создается в течение всей работы, но в уроке я приведу сразу конечный вариант:

Как с таким малым количеством цветов и без смешивания добиться того, чтобы картинка выглядела красиво, сочно, натурально?  Вариантов я скажу вам довольно много;-) Но мы обратим свой взор на историю... относительно давно или недавно были времена когда о цвете можно было только мечтать, Был черный, белый еще и серый добавили;-) И ведь даже игры делали! И все было различимо и понятно.

Всего 2 цветами и оттенком. Как? Иллюзия зрения - расставьте черные точки и белые в шахматном порядке и на отдалении будет казаться что это серый цвет. Вот примерно это мы и сделаем. Небольшой пример:

Конечно у нас цветов побольше но на верхнем кирпиче всего 5 цветов. В идеале должно быть поменьше(просто картинка так вышла)

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

Основной цвет + засветления.

В шахматном порядке закрашиваем (светлая точка, темная точка), в зависимости от расположения источника света или вашего видения композиции. Но всегда от самого темного постепенно к самому светлому за редким исключением когда вы хотите показать контраст. У вас, конечно, может немножко нарушится порядок по краям, это не фатально.

Впринципе наш скорпион уже готов. Вот картинка - в увеличенном размере, конечно, потеряла в качестве но общий принцип понятен;-) Но это еще не все, теперь мы постараемся оживить скорпиона, Я не буду вдаваться в подробности анимации и как именно нужно ее делать (если кому интересно, то спрашивайте) Не спроста я просил делать все на отдельных слоях и подписывать слои, это вам поможет эффективно и быстро построить анимации. В нашем случае мы сейчас все это дело объединим в один слой и сделаем дубликат. Дальше будет довольно рутинная и абсолютно не творческая работа  - мы будем сдвигать практически все цвета на один пиксел, то есть где было светлое стало темное а где темное стало светлое. Я сделал пробный вариант. После того как слой будет готов идем в imageReady.

На основе  этих двух слоев строим по вкусу свою анимацию. Можно применить эффект tween.

Double click to edit

Конечный результат!

Все;-) можно вздохнуть легко и посмотреть на свои труды;-)

Эффект оживления

Просто скорпион;-)

Рисовало долго;-) под Apocaliptica & Triplex - ost "Бой с тенью
Надеюсь, урок понравится и будет вам полезен!
Всех благ и творческих успехов вам!;-)

65789 Автор:
Актуальность: 251
Качество: 362
Суммарный балл: 613
Выбор Публики
Голосов: 72 оценки

Отзывы посетителей:

аватар
 
[hidden] 2 0
сходите на gas13.ru, pixeljoint и посмотрите на шедевры пиксель арта.

автору респект, но урок тянет лишь на 3/2
аватар
 
Rechtw 2 0
Скорп ? меня нарсивал))
аватар
 
jamstyle 132 1
ничего нового из урока не узнаешь :(
аватар
 
iLyxa 111 0
Вот оно, хорошо забытое прошлое)) Оценка за ностальгические воспоминания только..
аватар
 
Hozr-Boo 2 0
Качество работы хромает, освещение на теле, клешнях, хвосте и ногах вообще несогласовано. Анимация ужасна, никогда так не делайте. А вообще тема интересная, как раз в данный момент ее разбираю. Хороший ресурс pixeljoint.com, там много качественных работ. И опять же gas13.ru, есть туториалы, но, в основном, подходящие для геймдева.
аватар
 
Man5ON 2626 0
Куратор комьюнити
Никогда так не пробовал, интересно))
аватар
 
Boctopr 1 0
Мягко говоря уровень 85 года... Но с другой стороны материала по этой теме не так много. но с третьей стороны есть начальный уровень на порядок на писаный намного лучше и про иллюстрирован на уровне современного пиксель арта. 1\1
аватар
  vip
Mic Nau 486 0
Модератор форума
Ностальгия пробила... Помню так же рисовал на ATARI-ST512... 5/5 !
аватар
 
прочел, отличный урок... побольше бы еще уроков по 2-д для начинающих... пиши есчо! 5/5
аватар
 
Ayashi 12 0
Спасибо, отличный урок 5/5
аватар
 
redCrocodile 21 0
Извини, лень было читать, но все равно 5/5
Зарегистрируйтесь, чтобы добавить комментарий.
Эту страницу просмотрели: 2521 уникальных посетителей