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

Пиксельные кисти

Узнайте, как рисовать пиксельными кистями и как управлять ими в Adobe Fresco.

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

Вы также можете импортировать любимые кисти для Photoshop из коллекции Кайла Т. Вебстера (Kyle T. Webster).

Рисуйте, как вам удобно — к вашим услугам тысячи пиксельных кистей

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

Чтобы выбрать и настроить пиксельную кисть, сделайте следующее:

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

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

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

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

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

Примечание.

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

Pixel Art Урок 1 (Настройка Фотошопа) ⁠ ⁠

Рисовать Pixel можно как в онлайн так и в программах.

Перечислять все я не буду,но посоветую лишь одну.

— Photoshop 2015,2016,2017,2018 (Без разницы)

Настройка Фотошопа для pixel art

Ну для начала запустим сам фотошоп.

Далее идём в редактирование.

Нажмём на пункт настройки

Интерполяция: По соседним пикселям.

Перейдём в пункт Единицы измерения

Средник: 1 пункт

В пункте Направляющие, сетка и фрагменты

Линия через каждые: 1 Пиксели

Внутр.деление на 1

В пункте: Прозрачность и цветовой охват

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

Вот как настроил я:

Теперь создаём новый документ 50×50

Вот его настройки:

Смотреть надо в правою сторону.

После создания документа,делаем следущее

Заходим в пункт

Просмотр —> Показать —> Сетку

Ну и в конце кисть меняем на карандаш

В ластике тоже ставим карандаш.

На этом всё. О сохранении в следущем посте.

2 года назад

у кого Photoshop CC — не тратьте время, всё равно как минимум два пикселя будет закрашивать, даже карандашом, и некоторые другие моменты, несовместимые с пиксельартом

раскрыть ветку
3 года назад

сделать — сделала, круто. а как обратно вернуть-то.

раскрыть ветку
1 год назад

Большое спасибо! И правда — Фотошлёп многозадачное приложение.

5 лет назад

Photoshop на русском- что может быть хуже?)

раскрыть ветку
ещё комментарий
Похожие посты
1 месяц назад

Rammstein — Sonne [8-bit]⁠ ⁠

Поддержать
2 месяца назад

Timberwolf. Он же Mad Cat (для вольнорожденных)⁠ ⁠

Показать полностью 1
Уютные и меланхоличные пиксельарт сцены
Подписаться

2 месяца назад

В ожидании отправления 8⁠ ⁠

Автор снимка на основе которого сделана эта сцена — roma.silent (запретграм)

Показать полностью 1
Поддержать
3 месяца назад

Главное меню игры⁠ ⁠

Давно не показывала обновлений по игре, исправляюсь 😀

п.с. если заинтересовала игра, можете так же и на вк подписаться.

4 месяца назад

Через лес⁠ ⁠

5 месяцев назад

Скоро будет серия пиксель артов, а пока для разогрева. Кыца в коробке⁠ ⁠

5 месяцев назад

Чужие? Чужие!⁠ ⁠

Новый эпизод в нашей игре Little Quest Room: Horror VHS

Наконец-то мы доделали новый эпизод нашей игры выпустили его в релиз!

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

Расскажу об одной из загадок в новом эпизоде.

Какой же эпизод в космосе без заданий в открытом космосе? Что обычно делают в открытом космосе в фильмах в напряженный момент? Ну конечно же спасают улетающего космонавта! А как это реализовать, если сама игра у нас предполагает взаимодействие с комнатой, а не открытым пространством?

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

После успешного спасения, астронавт обязательно появится внутри корабля, а вот хорошо это или плохо узнаете в игре.

Эпизод уже доступен!

P. S.: Если будет интересно, могу написать пост о том как реализована эта мини игра.

Как рисовать в стиле пиксель-арт: пошаговый гайд, программы и полезные ссылки

Пиксель арт стал популярным благодаря играм 80-х и 90-х годов — тогда графика почти всех игр была пиксельной. Но с развитием компьютеров и консолей на замену пиксельной графике пришли 3D-модели и арт высокой детализации. Но сам жанр не умер, а лишь на время «ушёл в подполье».

С 2010-х годах жанр вновь начал набирать свою популярность. Стало появляться всё больше игр и артов с пиксельной графикой. И этому есть объяснение: пиксель арт — это хороший способ вернуться в «ламповое прошлое» и сэкономить рабочие часы человека при разработке чего-то крупного: будь то арт или целая игра.

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

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

Программы для работы

Создавать пиксельные рисунки можно разными инструментами.

Первый вариант — рисовать пиксель арт в стандартных графических редакторах: Photoshop, Paint, GIMP и им подобным. Во всех этих редакторах есть инструмент «карандаш», которым можно рисовать отдельные пиксели.

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

К таким программам относятся Aseprite и Piskel. Мы советуем начинать с одной из них.

Aseprite

Лучшая и наиболее удобная программа для пиксельного рисования. В Steam программа стоит 435 рублей, но её можно получить бесплатно, если скомпилировать исходники с GitHub своими руками.

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

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

У программы нет официальной локализации, но один из пользователей GitHub сделал свой фанатский перевод интерфейса.

Piskel

Ещё один графический редактор для создания пиксель арта. Функционал Piskel беднее Aseprite, но его преимущество в доступности: чтобы нарисовать картину, программу не нужно скачивать — она доступна прямо из браузера. Второе преимущество — Piskel бесплатен.

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

Хотя программа и доступна из браузера, её можно скачать и использовать на своём ПК, если вам хочется нарисовать (2) что-то не заходя в интернет.

В отличие от Aseprite, здесь нет русского языка — даже в виде фанатского перевода.

Как нарисовать пиксельный рисунок: разбираем по шагам

Пиксель арт проходит через те же этапы создания, что и другие рисунки:

• Лайн.
• Цвет.
• Светотень.
• Текстура.

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

Лайн

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

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

• Стандартный.
• Двойной.
• Цветной.
• Контурный.
• Световой.
• Выборочный.
• Ломаный.

Стандартный

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

Двойной

Такой же контур, как и в стандартном, но толщиной в два или три слоя. Двойным лайном выделяют главный спрайт на фоне менее важных объектов.

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

Цветной

Контур, пиксели которого окрашены в более тёмный цвет самого объекта. Например, если основной цвет персонажа — голубой, то рисовать лайн нужно синего цвета.

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

Контурный

«Брат» цветного лайна, так как в них обоих контур окрашивается в более тёмный оттенок внутреннего цвета. Отличие контурного лайна от цветного в том, что при нём контур повторяет цвета разных областей с разным окрасом.

Цветной лайн — это когда у объекта один цвет, допустим, синий, а его контур — тёмно-синий.

Контурный лайн — это когда у объекта несколько цветов: красный, зелёный, оранжевый. Соответственно, контуры этих областей будут тёмно-красным, тёмно-зелёным и тёмно-оранжевым.

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

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

Световой

Контур, который дополнительно подчёркивает, откуда падает источник цвета. Контур этого лайна повторяет внутренние цвета объекта, но в более светлом или тёмном его варианте. Светлый оттенок цвета будет с освещённой стороны, а тёмный — с неосвещённой.

Пример: белая борода волшебника. Внутренний цвет бороды — белый, освещённая сторона контура — светло-серая, а затенённая сторона контура — тёмно-серая.

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

Выборочный

«Брат» светового лайна. Суть здесь та же — отразить направления света через разные оттенки контура. Отличие от светового лайна в использовании техники сглаживания. В световом лайне эту технику не используют, а в выборочном — используют.

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

Ломаный

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

Цвет

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

Помимо этих знаний следует держать в голове два правила:

Палитра должна состоять из ограниченного количества цветов

Для большой сцены хватит от 16 и до 32 цветов в палитре. Для одного персонажа может хватить и 6 цветов.

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

Палитра должна быть сбалансированной

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

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

Светотень

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

Градиент

Градиент — это плавный переход от одного оттенка к другому. Градиент также помогает отражать светотень, когда мы рисуем переход от светлого оттенка к более тёмному или наоборот.

Чем дальше часть объекта от источника света, тем темнее там будет пиксель.

В пиксель арте не нужно использовать множество оттенков для мягкого перехода тени — достаточно будет трёх-четырёх более тёмных оттенков оригинального цвета.

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

Контур

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

Кратко напомним: в освещённых местах рисуйте светлый контур, а в затенённых участках — тёмный.

Блики

Предмет станет ещё объемнее, если на него нанести блики. В пиксель арте они работают и рисуются так же, как и в других стилях — создается форма круглой или овальной формы самым светлым цветом из палитры.

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

Текстура

На этом этапе детализируют объекты: корректируют лайн, цвет и светотень. Делается всё для того, чтобы объект стал более интересным и «живым». Но в пиксель арте есть две особые техники, которые используют вместе с привычной детализацией объекта — это дизеринг и сглаживание.

Дизеринг

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

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

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

Ещё дизерингом сглаживают теневой градиент. О теневом градиенте мы говорили в блоке про светотень.

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

Сглаживание

Сглаживание размывает острые и строгие границы — это делает объект более живым и естественным.

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

Это значит, что если на границе объекта соединяется чёрный цвет (контур) и белый (внутренняя часть объекта), то сглаживающие пиксели будут серого цвета. Тоже самое будет работать и с любым другим цветом.

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

Полезные ссылки: сайты с уроками и обучающая книга

• Lospec. Сайт с несколькими тысячами палитр специально для пиксель арт рисунков. На сайте показаны арты, которые были созданы этой палитрой — это удобно, так как художник сразу видит, на какой результат и настроение от рисунка он может рассчитывать. На сайте есть множество полезных гайдов и ссылок на другие нужные художнику ресурсы.
• Pixel Logic – A Guide to Pixel Art. 242-страничная книга про пиксель арт. В книге огромное количество полезной информации, которая разбита по удобным разделам. Многие картинки из этой статьи как раз взяты оттуда.

Как рисовать пиксель арт. Пошаговое руководство

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

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

Инструменты

Одним из главных преимуществ создания пиксель арт является то, что вам не нужны какие-то продвинутые инструменты – графического редактора, установленного на вашем компьютере по умолчанию должно хватить. Стоит упомянуть, что существуют программы, разработанные специально для создания пиксель арт, вроде Pro Motion или Pixen (для пользователей Mac). Я сам их не тестировал, но слышал много положительных отзывов. В данном туториале я буду использовать фотошоп, который, хоть и стоит не мало, содержит массу полезных инструментов для создания искусства, часть из которых очень полезны для пикселинга.

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

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

Нам пригодятся ещё два инструмента: «Выделение» (клавиша М) и «Волшебная палочка» (клавиша W) для того, чтобы выбирать и перетаскивать, или же копировать и вставлять. Помните, что, зажав клавишу Alt или Shift во время выделения, вы можете добавить выделенные объекты или же исключить их из текущего списка выделенных. Это необходимо кстати, когда нужно выбирать неровные объекты.

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

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

Линии

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

Прямые линии

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

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

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

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

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

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

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

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

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

Контур

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

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

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

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

Шаг первый: черновой контур

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

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

Шаг второй: отполируйте контур

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

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

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

Цвет

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

Цветовая модель HSB

Это английское сокращение, собранное из слов «Оттенок, Насыщенность, Яркость». Она является лишь одной из множества компьютерных цветовых моделей (или числовых представлений цвета). Вы наверняка слышали и о других примерах вроде RGB и CMYK. Большинство графических редакторов используют HSB для выбора цвета, поэтому мы сконцентрируемся именно на ней.

Hue – Оттенок – то, что мы привыкли называть цветом.

Saturation – Насыщенность – определяет интенсивность цвета. Если значение равно 100%, то это максимальная яркость. Если его понизить, то в цвете появятся тусклость и он «посереет».

Brightness – свет, который излучает цвет. Например, у чёрного этот показатель равен 0%.

Выбирая цвета

Решать, какие цвета выбрать – ваша задача, но есть несколько вещей, о которых стоит помнить:

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

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

Нанесение цветов

Наносить цвет – очень просто. Если вы используете фотошоп, то просто выберите необходимый фрагмент, выделите его волшебной палочкой (клавиша W), а затем заполните его посредством основного цвета (Alt-F) или дополнительного цвета Ctrl-F).

Шейдинг

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

Шаг первый: выбираем источник света

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

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

Шаг второй: непосредственно шейдинг

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

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

Шаг третий: мягкие тени

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

Шаг четвёртый: освещённые места

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

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

Несколько полезных правил

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

1. Не пользуйтесь градиентами. Наиболее распространённая ошибка новичков. Градиенты выглядят ужасно и даже приблизительно не отражают то, как свет играет на поверхностях.
2. Не используйте «мягкий шейдинг». Я говорю о ситуации, когда тень находится слишком далеко от контура, ведь тогда она выглядит весьма размытой, и препятствует выявлению источника света.
3. Не используйте слишком много теней. Легко думать, что «чем больше цветов – тем реалистичней картинка». Как бы то ни было, в реальной жизни мы привыкли видеть вещи в тёмном или светлом спектрах, а наш мозг отфильтрует всё, что находится между ними. Используйте лишь две тёмных (тёмная и очень тёмная) и две светлых (светлая и очень светлая) и накладывайте их на цвет основы, а не друг на друга.
4. Не используйте слишком похожие цвета. Особой нужды в использования практически одинаковых цветов нет за исключением случаев, когда вам нужно сделать действительно размытый спрайт.

Дизеринг

Сохранение цветов – вот на что создателям пиксель арт действительно нужно обратить внимание. Ещё один способ получить больше теней без использования большего количества цветов называется «дизеринг». Также как в традиционной живописи используется «штриховка» и «перекрестная штриховка», то есть вы, в прямом смысле, получаете что-то среднее из двух цветов.

Простой пример

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

Продвинутый пример

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

Применение

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

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

Выборочное контурирование

Выборочное контурирование, которое также называют селаут (от английского selected outlining), является подвидом шейдинга контура. Вместо использования чёрной линии, мы подбираем цвет, который будет более гармонично смотреться на вашем спрайте. Кроме того, мы изменяем яркость этого контура ближе к краям спрайта, позволяя источнику цвета определять какие цвета нам стоит использовать.

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

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

Сравните это с оригиналом:

1. Сглаживание

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

Техника 1: сглаживание изгибов

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

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

Техника 2: округление неровностей

Техника 3: затирание окончаний линий

Применение

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

Эффект весьма незаметный, но при этом он имеет огромное значение.

Почему нужно делать это вручную?

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

Отделка

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

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

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

Наконец вы закончили! Lucha Lawyer выступает в лёгком весе, ведь в нём всего 45 цветов (а может это и супертяжёлый – всё зависит от ограничений вашей палитры) и его разрешение составляет примерно 150 на 115 пикселей. Вот теперь уже можете открыть пиво!

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

Советы для начинающих пиксель артистов

1. Изучайте азы искусства и практикуйте традиционные техники. Все знания и умения, необходимые для черчения и рисования можно применить и в пикселинге.
2. Начинайте с маленьких спрайтов. Самое сложно – научиться размещать множество деталей, используя минимальное количество пикселей, чтобы не делать такие большие спрайты, как мой.
3. Изучайте работы художников, которыми вы восхищаетесь и не бойтесь быть неоригинальными. Лучший способ обучения – повторение фрагментов чужих работ. На выработку собственного стиля уходит немало времени.
4. Если у вас нет планшета, купить его. Постоянные нервные срывы и стрессы, вызванные непрерывным кликанием левой кнопкой мышки – это не забавно, да и вряд ли впечатлит представителей противоположного пола. Я использую небольшой Wacom Graphire2 – мне нравится его компактность и портативность. Вам, возможно, придётся по душе более крупный планшет. Перед покупкой, проведите небольшой тест-драйв.
5. Делитесь своими работами с другими, чтобы узнать их мнение. Это, возможно, также будет неплохим способом найти новых друзей-гиков.

P.S.

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

Понравилась статья? Поделиться с друзьями:

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

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