Часть 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(и другие) должны попробовать , и GrafX2 . Я убеждаю вас попробовать их все в демо версиях, и посмотреть которая подходит вам по удобству. В конце концов это дело вкуса. Просто знайте, что однажды начав использовать программу, может быть очень сложно переключиться на что-то другое.
Продолжение следует…
Заметки переводчика с французского на английский
Это большое руководство по пиксель арту, написано Филом Разорбаком с LesForges.org. Большое спасибо Филу Разорбаку за разрешение OpenGameArt.org перевести эти руководства и поместить их здесь. (От переводчика на русский: я разрешения не спрашивал, если кто имеет желание, можете помочь, не имею достаточного опыта общения на английском и тем более французском).Заметка переводчика с английского на русский
Я программист, а не художник или переводчик, перевожу для своих друзей художников, но что добру пропадать, пусть будет тут.Оригинал на французском где-то здесь www.lesforges.org
Перевод с французского на английский здесь: opengameart.org/content/les-forges-pixel-art-course
Я переводил с английского, потому что французский не знаю.
И да, это моя первая публикация, поэтому рекомендации по оформлению приветствуются. Плюс интересует вопрос, остальные части публиковать отдельными статьями, или лучше эту обновлять и дополнять? В этом уроке вы узнаете, как превратить фотографию человека в пиксельное искусство как вымышленный персонаж аркадной игры с начала 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 и убедитесь, что в данный момент только первый кадр анимации. Вы можете добавить новые кадры и включить и выключить слои, чтобы сделать свою анимацию, но самым быстрым способом является использование команды «Сделать кадры из слоев» в всплывающем меню панели (вверху справа).Первый кадр - пустой фон, поэтому выберите его и нажмите на значок корзины панели (внизу), чтобы удалить его.
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.
Рисование на уровне пикселей занимает свою нишу в изобразительном искусстве. С помощью простых пикселей создаются настоящие шедевры. Конечно, создавать такие рисунки можно и на бумажном листе, но куда проще и правильнее делать картины при помощи графических редакторов. В этой статье мы подробно разберем каждого представителя подобного софта.
Самый популярный в мире графический редактор, который способен работать на уровне пикселей. Чтобы создавать подобные картины в этом редакторе, нужно всего лишь совершить несколько действий предварительной настройки. Здесь есть все, что необходимо художнику для создания арта.
Но с другой стороны, такое обилие функционала не понадобится для рисования пиксель-артов, поэтому нет смысла переплачивать за программу, если собираетесь использовать ее только для определенной функции. Если вы из таких пользователей, то советуем обратить внимание на других представителях, которые ориентированы именно на пиксельную графику.
PyxelEdit
Данная программа имеет все необходимое для создания подобных картин и не перенасыщена функциями, которые никогда не понадобятся художнику. Настройка осуществляется довольно просто, в цветовой палитре есть возможность изменения любого цвета в нужный тон, а свободное перемещение окон поможет настроить программу под себя.
В PyxelEdit есть функция установки плиток на холст, что может пригодиться во время создания объектов с похожим содержанием. Пробная версия доступна для скачивания на официальном сайте и не имеет никаких ограничений в использовании, поэтому можно пощупать продукт перед совершением покупки.
Pixelformer
На вид и функционал это самый обычный графический редактор, только имеет несколько дополнительных возможностей для создания пиксельных изображений. Это одна из немногих программ, которые распространяются абсолютно бесплатно.
Разработчики не позиционируют свой продукт пригодным для создания пиксель-артов, они называют его отличным способом рисовки логотипов и иконок.
GraphicsGale
Почти во весь подобный софт пытаются внедрить систему анимирования картинки, которая чаще всего получается просто непригодной для использования из-за ограниченных функций и неправильной реализации. В GraphicsGale тоже не все так хорошо с этим, но, по крайней мере, с данной функцией можно нормально работать.
Что касается рисования, то тут все ровно так же, как и в основной массе редакторов: основные функции, большая цветовая палитра, возможность создавать несколько слоев и ничего лишнего, что могло бы мешать работе.
Charamaker
Character Maker 1999 – одна из самых старых подобных программ. Создавалась она для создания отдельных персонажей или элементов, которые потом бы использовались в других программах для анимирования или внедрялись в компьютерные игры. Поэтому для создания картин она не очень подходит.
С интерфейсом все не очень хорошо. Почти ни одно окно нельзя переместить или изменить его размер, а расположение по умолчанию выполнено не самым удачным образом. Однако к этому можно привыкнуть.
Pro Motion NG
Эта программа идеальна почти во всем, начиная с продуманного интерфейса, где есть возможность перемещать окна независимо от главного в любую точку и изменять их размер, и заканчивая автоматическим переключателем с пипетки на карандаш, что является просто невероятно удобной фишкой.
В остальном же Pro Motion NG — просто хороший софт для создания пиксельной графики любого уровня. Пробную версию можно скачать с официального сайта и протестировать, чтобы определиться с дальнейшей покупкой полной версии.
Aseprite
По праву может считаться самой удобной и красивой программой для создания пиксель-артов. Одно оформление интерфейса только чего стоит, но это еще не все преимущества Aseprite. Здесь есть возможность анимирования картинки, но в отличие от предыдущих представителей, она реализована грамотно и удобна для использования. Есть все, чтобы создавать красивые GIF-анимации.
Pixel Art (Пиксельная графика) даже в наши дни очень популярна для игр и тому есть несколько причин!
Итак, чем же подкупает Pixel Art:
- Восприятие. Pixel Art выглядит потрясающе! Можно многое рассказывать о каждом отдельном пикселе в спрайте.
- Ностальгия. Pixel Art возвращает большое ностальгическое чувство для геймеров, которые выросли, играя Nintendo, Super Nintendo, или Genesis (как я!)
- Простота обучения. 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… ) и установите такой размер, каким будет размер вашего игрового экрана, после чего выберите размер для вашего персонажа.
Каждая ячейка 32x32 пикселя!
Я выбрал размер 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’ (Смежные пиксели), и, когда Вы будете рисовать новым цветом, все новые пиксели с таким же фоновым цветом тоже будут закрашены.
Это еще одна причина, почему важно работать с небольшим количеством цветов и всегда использовать один и тот же цвет для одного и того же элемента (рубашки, волосы, шлем, доспехи и т.д.). Но не забывайте использовать различные цвета для других областей, в противном случае наш рисунок будет слишком перекрашенным!
Снимите флажок "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 форумах, чтобы другие художники дать вам совет - это отличный способ улучшить свою технику! Начните с малого, много тренируйтесь, получайте обратную связь и вы можете создать удивительный игру, которая принесет вам много денег и радости!