Создай свой пиксель арт. Введение в пиксельную графику (Pixel Art) для игр

В этой статье я расскажу, как в Photoshop CC / CS6 создать несколько различных игровых спрайтов. Для этого мы используем пиксельную графику:

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

Дополнительный шаг, добавление теней:

Создадим сведенную копию всех слоев. Для этого отключите видимость слоя заливки цветом (нажмите на иконку глаза слева от миниатюры слоя ), затем нажмите Command-Option-Shift-E (Mac) или Ctrl-Alt-Shift-E (PC) . Это автоматически создаст сведенную копию всех видимых слоев поверх остального стека слоев.

Теперь я предлагаю поместить слои в отдельную папку и отключить ее видимость. Чтобы быстро сгруппировать слои, выберите их и кликните по ним, а затем нажмите Ctrl / Option -G :

Рисунок 15: Нажмите Command-Option-Shift-E (Mac) или Ctrl-Alt-Shift-E (PC), чтобы создать сведенную копию

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

Я хочу выбрать режим смешивания «Мягкий свет », потому что это хорошо затемнит цвета, которые я использовала для персонажа. При выбранном новом слое (я назову его «Shading « ), удерживая нажатой клавишу Alt , кликните по слою, расположенному ниже (сведенному слою персонажа ), чтобы создать маску. Таким образом, все, что вы рисуете на слое “Shading ” будет видно в пределах маски слоя “Character ”:

9. Зарисуйте области слоя «Shading » черным карандашом. При текущем режиме смешивания черный цвет будет затемнять цвет под ним. Красный цвет рубашки станет темно-красным, зеленый цвет волос станет темно-зеленым и так далее.

Подсказка: Если затенение является слишком жестким, измените режим смешивания или непрозрачность слоя. Если хотите добавить больше оттенков затененных цветов, создайте новые слои «Shading » с различной непрозрачностью.

В конце у меня получилось два слоя теней: первый с непрозрачностью 25%, а второй с непрозрачностью 45%:

10. Если хотите добавить светлые участки, создайте новый слой “Highlighting ” так же, как мы добавили слой «Shading «, только установите режим смешивания «Перекрытие » и используйте белый карандаш.

11. После того, как вы будете удовлетворены видом своего 8-битного персонажа, пора сохранить окончательный спрайт в файл PNG . Но сначала мы должны обрезать холст, чтобы он плотно прилегал к изображению персонажа игры с пиксельной графикой и не содержал дополнительного пространства по краям. Это позволит нам уменьшить размер файла. Выключите видимость слоя заливки цветом, а затем перейдите в Изображение> Тримминг и задайте для параметра «На основе » значение – «Прозрачные пиксели ». Нажмите кнопку «ОК ».

4.7 (93.8%) 158 votes

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

На чем рисовать рисунки по клеточкам

Это искусство доступно любому, главное следовать четко по клеточкам. Для нанесения изображения идеально подходят школьные тетради, размер их квадратиков 5х5 мм, а самой тетради 205 мм на 165 мм. На данный момент у художников по клеточкам набирают популярность пружинные тетради-блокноты с листом формата А4, размер этого блокнота 280мм на 205мм.

Профессиональные художники творят свои шедевры на миллиметровках (чертежной бумаге), вот уж где места разгуляться. Единственный минус миллиметровой бумаги её бледно зеленый цвет, который не заметен, когда вы зарисовываете цветными ручками.
Выбрав тетрадь для рисования, обратите внимание на плотность бумаги, от её плотности зависит качество вашего рисунка по клеточкам, будет ли он проступать на изнаночную сторону листа. Идеальная плотность листа не меньше 50г/метр.кв.

Чем рисовать рисунки по клеточкам

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

Шариковые ручки для пиксель арт

Фломастеры для рисунков по клеточкам

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

Карандаши для рисунков по клеточкам

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

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

Еще несколько схем рисунков, которые мне понравились:

Точечная графика — технология пиксель арт

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

Перед тем, как приступить к рассмотрению способов пиксель арта, вернемся в детство 80х -90х годов. Конечно, те, кто рос в постсоветское время, помнит 8-ми битные видеоигры, игровая графика, которых, построена на пиксельной графике.

Лучший способ освоить, что-либо это практика, давайте попробуем освоить пиксель арт:

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

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

К примеру, нарисуем сердечко:

1. Берем листик в клетку и ручку с черной пастой, ставим 3 точки, как на рисунке, точки помечают, какие клетки будут закрашены черным.
   
   
2. Рисуем линии, обозначающие контуры рисунка.
   
   
3. Отметим по три точки с каждой стороны, смотри рисунок.
   
   
4. Двумя линиями отметим область рисунка.
   
   
5. Поставим еще по одной точке с каждой стороны и пролинеем границы под верхними точками.
   
   
6. По вертикали нарисуем 8 точек и по 4 точки с обеих сторон, так как изображено на рисунке ниже.
   
7. Проведя вертикальные линии, так как показано на рисунке, мы полностью укажем границы рисунка.
   
8. Таким же образом отметим нижнюю часть сердца слева и справа.
   
   
9. Обводим клетки, так как на нашем изображении.
   
   
10. Следующее, что мы должны сделать, это закрасить красной ручкой внутреннюю часть сердца, оставив блик света не закрашенным.
    
    
11. И последнее, черной ручкой заштрихуем клетки, помеченные точками. Теперь вы научились рисовать восьмибитные картинки.
    
    

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

Возьмите

• черную ручку,
• карандаши,
• тетрадь в клеточку,
• компьютер,
• фотографию или картинку из интернета
• программу фотошоп.

Для нанесения объемных рисунков нам нужно посчитать количество клеток, которые будут закрашены. Довольно трудно не ошибиться на больших количествах. Еще обязательно подберите оттенки цветов схожие с исходным изображением.
Итак, действуем:

Дам один совет, который очень мне помогает, если у вас есть цветной принтер, распечатайте рисунок, если нет, не страшно. Прочертите сетку по 10 клеток более жирным контуром. На напечатанном листе с помощью линейки и контрастной ручки, если распечатать негде, то можно открыть изображение в Paint.
Творческих вам успехов.

Pixel Art (Пиксель Арт) — переводиться с английского как пиксельное искусство. Пиксель (pixel) в свою очередь это наименьший графический элемент цифрового изображения.

Таким образом Пиксель Арт это буквально означает искусство рисовать пикселями.

Сразу для наглядности посмотрим вот этот пример:

Owlboy (pixel art game)

Примерно так выглядят игры с графикой в стиле Пиксель Арт.

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

Однако Pixel Art это не только графика, спрайты и картинки для игр, это целое направление цифрового и графического искусства.

С помощью пиксель арта рисуются красивые картины:

Вы ни с чем не спутайте этот ретро стиль графики

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


Есть и очень крутые художники кто работает в этом стиле.

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

Если мы увеличим эту картинку, то можно видеть как всё сделано вблизи:

Уникальной стиль пиксель арта в том, что есть довольно чёткие переходы цветов и нет сглаживания. Для примера возьмём другую работу в цифровой графике довольно среднего уровня, посмотрите вот этот рисунок девушки в очках (18+) в блоге www.econdude.pw.

Это рисунок компьютерной мышкой в программе SAI2.0.

Однако, если вы приблизите эту картинку, то вы видите сглаживание:

Тут нет чётких переходов цветов и оттенков, а вот в пиксель арте переходы чёткие.

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

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

Вот еще один пример, это довольно классический рисунок в стиле пикель арт:

http://www.gamer.ru/everything/pixel-art-dlya-nachinayuschih

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

Представляете какую огромную работу проделывают такие художники?

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

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

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

http://www.dinofarmgames.com/a-pixel-artist-renounces-pixel-art/

Поэтому это еще надо доказать, что Pixel Art это «ленивый стиль», я бы даже сказал что наоборот, это не самый НЕ ленивый стиль графики.

Однако, научиться рисовать что-то простое в стиле Pixel Art может каждый, и вам не понадобятся никакие специальные программы, достаточно простого графического редактора.

Если вы хотите научиться рисовать в этом стиле, вам, как и в любом другом случае, нужно много практики, а начать вы можете например со статей на Хабре: Курс пиксель-арта

Там-же вы найдёте основные принципы пиксель арта.

Вот один из примеров как рисуют пиксель арт (ускоренное видео — speed drawing) на уровне новичка, научиться рисовать так можно буквально за неделю:

Пиксельарт:: рисование космического корабля

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

https://www.youtube.com/watch?v=vChMzRnw-Hc

Видите эту картинку Сары Кэрриган из StarCraft? Что это такое по вашему и как это сделано?

Это человек построил из блоков в игре minecraftб, работа заняла 23 недели.

В приближении видно что всё это отдельные блоки

Формально это уже не пиксель арт, а даже «майнкрафт блок арт», но суть стиля остаётся прежней и это самый большой рисунок пиксель арт и мировой рекорд, по словам автора.

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

Еще один пример, художники и аниматоры Paul Robertson и Ivan Dixon создали вот такое:

SIMPSONS PIXELS

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

Лично я считаю что картинки в стиле Пиксель Арт это самое настоящее современное искусство в самом лучше смысле этого слова.

Каждая Pixel Art картинка имеет вполне четкую ценность и это видно, это чувствуется.

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

Однако, к сожалению, данный жанр искусства не очень популярен и сейчас считается уже устаревшим, а возвращение к нему в последние годы в виде множеств игр из steam в стиле пиксель арта уже тоже начинает надоедать людям. Хотя лично я считаю что данный ретро стиль графики это уже классика, а настоящая классика не умрёт никогда.

Adobe Photoshop: Рисуем и анимируем персонажа в технике Pixel Art

В этом уроке вы научитесь рисовать и анимировать персонажей в технике Pixel Art. Для этого вам понадобится только программа Adobe Photoshop. В итоге получится GIF с бегущим космонавтом.

Программа: Adobe Photoshop Сложность: новички, средний уровень Понадобится времени: 30 мин – час

I. Настройка документа и инструментов

Шаг 1

Выберите Pencil (карандаш) на панели инструментов – это будет основной инструмент для нашего урока. В настройках выберите тип Hard Round brush, и установите остальные значения так же как на картинке. Наша цель – сделать перо карандаша максимально резким.

Шаг 2

В настройках Eraser Tool (ластик) выберите режим Pencil Mode, и установите остальные значения как показано на картинке.

Шаг 3

Включите пиксельную сетку Pixel Grid (View > Show > Pixel Grid). Если в меню нет такого пункта, то зайдите в настройки и включите графическое ускорение Preferences > Performance > Graphic acceleration.

Обратите внимание: Сетка будет видна только на вновь созданном холсте при увеличении масштаба 600% и более.

Шаг 4

В настройках Preferences > General (Control-K) поменяйте режим интерполяции изображения на режим Nearest Neighbor (по соседним пикселам). Это позволит границам объектов оставаться максимально четкими.

В настройках единиц измерения и линеек установите единицы измерения линеек в пикселах Preferences > Units & Rulers > Pixels.

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

Шаг 1

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

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

Шаг 2

Уменьшите масштаб эскиза до 60 пикселей в высоту, используя комбинацию клавиш Control+T, или команду Edit > Free Transform.

Размер объекта отображается на информационной панели. Обратите внимание, чтобы настройки интерполяции были такими же, как мы делали в шаге 4.

Шаг 3

Приблизьте эскиз на 300-400%, чтобы было легче работать, и уменьшите прозрачность слоя. Затем создайте новый слой и обрисуйте контуры эскиза, используя Pencil Tool. Если персонаж симметричный, как в нашем случае, можно обрисовать только половину, а затем продублировать и отразить нарисованное зеркально (Edit > Transform > Flip Horizontal).

Ритм: Чтобы нарисовать сложные элементы разбивайте их на части. Когда пикселы (точки) в линии образуют «ритм», например, 1-2-3, или 1-1-2-2-3-3, набросок выглядит более гладко для человеческого глаза. Но, если того требует форма, этот ритм может быть нарушен.

Шаг 4

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

Шаг 5

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

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

Шаг 6

Создайте новый слой для бликов.

Выберите режим наложения Overlay из выпадающего списка на панели слоев. Нарисуйте светлым цветом над теми областями, которые хотите подсветить. Затем сгладьте блик, применив фильтр Filter > Blur > Blur.

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

Шаг 7

Теперь космонавту нужно добавить контрастности. С помощью настроек уровней (Image > Adjustments > Levels) сделайте его ярче, а затем отрегулируйте оттенок с помощью опции Color Balance (Image > Adjustments > Color Balance).

Теперь персонаж готов к анимации.

III. Анимирование персонажа

Шаг 1

Создайте копию слоя (Layer > New > Layer Via Copy) и сдвиньте ее на 1 вверх и на 2 пиксела правее. Это ключевой пункт в анимации персонажа.

Снизьте прозрачность оригинального слоя на 50% чтобы видеть предыдущий кадр. Это называется “Onion Skinning”(режим плюра).

Шаг 2

Теперь согните руки и ноги персонажа так, как будто он бежит.

● Выделите левую руку инструментом Lasso

● Используя FreeTransformTool (Edit > FreeTransform) и удерживая клавишу Control, передвиньте границы контейнера так, чтобы рука отодвинулась назад.

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

● С помощью карандаша и ластика подправьте часть правой руки ниже локтя.

Шаг 3

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

Шаг 4

Сделайте копию второго слоя и отразите ее по горизонтали. Теперь у вас есть 1 базовая поза и 2 в движении. Восстановите непрозрачность всех слоев до 100%.

Шаг 5

Перейдите Window > Timeline чтобы отобразилась Timeline панель, и нажмите Create Frame Animation.

Pixel Art (Пиксельная графика) даже в наши дни очень популярна для игр и тому есть несколько причин!

Итак, чем же подкупает Pixel Art:

1. Восприятие. Pixel Art выглядит потрясающе! Можно многое рассказывать о каждом отдельном пикселе в спрайте.
2. Ностальгия. Pixel Art возвращает большое ностальгическое чувство для геймеров, которые выросли, играя Nintendo, Super Nintendo, или Genesis (как я!)
3. Простота обучения. Pixel Art - одно из самых простых для изучения видов цифрового искусства, особенно если вы скорее программист, чем художник;]

Итак, вы хотите попробовать свои силы в Pixel Art? Тогда следуйте вместе со мной и я покажу вам, как сделать простого, но эффектного игрового персонажа, которого вы сможете использовать в вашей собственной игре! Кроме того, в качестве бонуса, мы рассмотрим как интегрировать его в iPhone игры!

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

Что такое Pixel Art?

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

Градиент : выбор двух цветов и расчета цвета пикселей, находящихся между ними. Выглядит круто, это но не Pixel Art!

Инструмент Размытие : определение пикселей и тиражирование/редактирование их, чтобы сделать новую версию предыдущего изображения. Снова не пиксельная график.

Инструмент Сглаживание (в основном, генерирующих новые пиксели в различных цветах, чтобы что-то сделать "гладким"). Вы должны избегать их!

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

Другие инструменты, такие как (линия) или paint bucket tool (ведро с краской) также автоматически генерирует пиксели, но, поскольку вы можете настроить их на не сглаживание крев заполняемых пикселей, считается что эти инструменты дружественны к Pixel Art.

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

Начало работы

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

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

К примеру, если Вы хотите, чтобы игра выглядела увеличенной вдвое на экране iPhone 3GS (“Да, я действительно хочу придать пиксельного ретро-вида своей игре!”), разрешение экрана которого – 480х320 пикселей, то работать надо с разрешением, вдвое меньшим, в данном случае это будет 240х160 пикселей.

Откройте новый документ Photoshop (File → New… ) и установите такой размер, каким будет размер вашего игрового экрана, после чего выберите размер для вашего персонажа.

Я выбрал размер 32×32 пикселя не только потому, что он отлично подходит для выбранного размера экрана, а еще и потому, что 32×32 пикселей также кратны 2, а это удобно для движков игрушек, (размеры тайлов часто кратны 2, текстуры выравниваются кратно 2 и т.д.

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

Рисуем Pixel Art персонажа

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

В Photoshop выберите Pencil tool (Инструмент Карандаш). Если вы не можете найти его, просто нажмите и удерживайте инструмент Brush Tool (Инструмент Кисть) и вы сразу же его увидите (он должен быть вторым в списке). Вам просто нужно будет изменить его размер, сделав его равным 1px (вы можете нажать на панели параметров инструмента и изменить его размер или просто удерживайте клавишу [).

Также вам понадобится Erase tool (Инструмент Ластик), так что нажмите на него (или нажмите клавишу E) и измените его настройки, выбрав из выпадающего списка Mode: (Режим:) Pencil (Карандаш) (т.к. в этом режиме нет сглаживания).

А теперь начнем пикселить! Нарисуйте брови и глаза как показано на изображении ниже:

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

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

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

Если вы чувствуете, что инструментом Карандаш слишком медленно рисовать, вы всегда можете использовать (Инструмент Линия), просто помните, что расположить пиксели так же точно, как с помощью карандаша, не получится. Вы должны будете настроить так, как показано ниже:

Выберите , нажав и удерживая Rectangle tool (Инструмент Прямоугольник)

Перейдите к панели параметров инструмента, в выпадающем списке Pick Tool Mode (Режим Вычерчивания Контура) выберите Pixel , изменить Weight (Толщина) на 1px (если это уже не сделано) и снимите флажок Anti-alias (Сглаживание). Вот как у вас должно быть:

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

Применяем цвета и тени

Теперь вы готовы, чтобы начать раскрашивать нашего персонажа. Не беспокойтесь о выборе правильных цветов, их очень легко будет изменить позже, просто убедитесь, что у каждого "свой цвет". Воспользуйтесь цветами по умолчанию на вкладке Swatches (Window → Swatches).

Раскрастьте вашего героя как на рисунке ниже (но не стесняйтесь проявить творчество и использовать свои собственные цвета!)

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

Не стоит тратить время на закрашивание каждого пикселя. Чтобы ускорить работу используйте линии для одинакового цвета, или Paint bucket tool (Инструмент Ведро с краской), чтобы заполнить пробелы. Его, кстати, тоже придется настроить. Выберите Paint bucket tool на панели инструментов (или просто нажмите клавишу G) и изменить Tolerance (Допуск) на 0, а также снимите галочку с Anti-alias (Сглаживание).

Если вам когда-нибудь потребуется использовать Magic Wand tool (Инструмент Волшебная палочка) - очень полезный инструмент, который выбирает все пиксели с одинакового цвета, то настройте его также как и инструмент "Ведро с краской" - нет допуска и сглаживания.

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

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

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

Придаем пикантность вашей палитре

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

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

Затем, в окне Color Picker, просматривайте правую боковую панель, чтобы выбрать цвет и главную область, чтобы выбрать нужную яркость (светлее, или темнее) и насыщенность (сочнее, или скучнее).

Как только вы найдете нужный, нажмите кнопку ОК и перенастройте инструмент Ведро с краской . Не волнуйтесь, Вы потом сможете просто снять отметку с квадратика ‘Contiguous’ (Смежные пиксели), и, когда Вы будете рисовать новым цветом, все новые пиксели с таким же фоновым цветом тоже будут закрашены.

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

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

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

Как вы могли уже видеть, я выключил сглаживание во всех инструментах, которые я использовал до сих пор. Не забудьте это сделать и в других инструментах, например, Elliptical Marquee (Овальная область выделения) и Lasso (Лассо).

Этими инструментами можно легко изменять размер выделенных частей, или даже повернуть их. Чтобы сделать это, используйте любой инструмент выделения (или нажмите клавишу M), чтобы выбрать область, щелкните правой кнопкой мыши и выберите Free Transform (Свободное трансформирование), или просто нажмите Ctrl + T . Чтобы изменить размер выделенной области, перетаскивайте один из маркеров расположенных по периметру рамки трансформации. Чтобы изменить размер выделенной области сохраняя пропорции, удерживайте клавишу Shift и перетаскивайте один из угловых маркеров.

Тем не менее, Photoshop автоматически сглаживает все, что отредактировано с помощью функции Free Transform , поэтому перед редактированием перейдите к Edit → Preferences → General (Ctrl + K) и измените Image Interpolation (Интерполяция изображения) на Nearest Neighbour (Ближайший сосед). В двух словах, при Nearest Neighbour новая позиция и размер вычисляются очень грубо, при этом не применяются никакие новые цвета или прозрачности и сохраняются цвета, которые вы выбрали.

Интегрирование Pixel Art рисунка в игры на iPhone

В этом разделе вы узнаете как интегрировать наш пиксельный рисунок в игру на iPhone, используя игровой фреймворк Cocos2d. Почему я рассматриваю только iPhone? Потому что, благодаря циклу статей про Unity, (например: , или Игра в стиле Jetpack Joyride в Unity 2D) вы уже умеете работать с ними в Unity, а из статей про Crafty (Браузерные игры: Змейка) и Impact (Введение в создание браузерных игр на Impact) вы узнали как вставлять их в холст canvas и создавать браузерные игры.

Если вы новичок в Cocos2D, или в разработке приложений под iPhone в целом, советую вам начать с одного из учебников под Cocos2d и iPhone. Если у вас есть Xcode и установлен Cocos2d, читайте дальше!

Создайте новый проект iOS → cocos2d v2.x → cocos2d iOS template , назовите его PixelArt, и выберите в качестве устройства iPhone. Перетащите созданный пиксель арт, например: sprite_final.png в ваш проект, а затем откройте HelloWorldLayer.m и заменить метод инициализации на следующий:

-(id) init { if((self=)) { CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = YES; ; } return self; }

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

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

Hero.scale = 2.0;

Ничего сложного, не так ли? Скомпилируйте, запустите и... постойте, наш спрайт размыт!

Это потому, что по умолчанию Cocos2d сглаживает рисунок, когда масштабирует его. Нам это не нужно, поэтому добавьте следующую строку:

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

Обратите внимание на преимущества использования Pixel Art графики - мы можем использовать меньшее по размеру изображение, чем то, что отображается на экране, экономя много текстурной памяти. Нам даже не нужно делать отдельные изображения для retina-дисплеев!

А что же дальше?

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

• Всегда старайтесь избежать использования сглаживания, градиентов, или большого количества цветов для ваших ассетов. Это для вашего же блага, особенно если вы еще новичок.
• Если вы ДЕЙСТВИТЕЛЬНО хотите подражать ретро-стилю, обратите внимание на изображения в 8-битных, или 16-битных консольных играх.
• Некоторые стили не используют темные контуры, другие не учитывают влияние света или тени. Все зависит от стиля! В нашем уроке мы не стали рисовать тени, но это не значит, что вы не должны их использовать.

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