инструкция по применению / Хабр
Инди-разработчикам нередко приходится совмещать сразу несколько ролей: геймдизайнера, программиста, композитора, художника. И, когда дело доходит до визуала, многие выбирают пиксель-арт — на первый взгляд он кажется простым. Но чтобы сделать красиво, нужно много опыта и определенные навыки. Нашел туториал для тех, кто только начал постигать основы этого стиля: с описанием специального софта и техник рисования на примере двух спрайтов.
Фон
Пиксель-арт — форма цифрового художественного искусства, в котором изменения вносятся на уровне пикселей. В основном он ассоциируется с графикой видеоигр 80-х и 90-х годов. Тогда художникам приходилось учитывать ограничения памяти и низкого разрешения. Сейчас пиксель-арт все еще популярен в играх и как художественный стиль в целом, несмотря на возможность создания реалистичной 3D-графики. Почему? Даже если не брать в расчет ностальгию, создание крутой работы в таких жестких рамках — приятный и стоящий челлендж.
Порог вхождения в пиксель-арте сравнительно низкий по сравнению с традиционным артом и 3D-графикой, что привлекает инди-разработчиков. Но это вовсе не означает, что будет просто доделать игру в этом стиле. Я видел много инди-девелоперов с пиксель-арт метроидваниями на краудфандинговых платформах. Они думали, что закончат все за год, но на самом деле им нужно было еще лет шесть.
Metal Slug 3 (Arcade). SNK, 2000 год
Пиксель-арт на том уровне, на котором большинство хочет его создавать, отнимает много времени, а кратких обучалок очень мало. Работая с 3D-моделью вы можете вращать ее, деформировать, перемещать отдельные ее части, копировать анимации с одной модели на другую и так далее. Пиксель-арт высокого уровня почти всегда отнимает кучу сил на скрупулезное размещение пикселей на каждом фрейме.
В общем, я предупредил.
А теперь немного о моем стиле: в основном я рисую пиксель-арт для видеоигр и в них же нахожу вдохновение. В частности я фанат Famicom/NES, 16-битных консолей и аркад 90-х годов. Пиксель-арт моих любимых игр того времени можно описать как яркий, уверенный и чистый (но не слишком), его нельзя назвать жестким и минималистичным. В этом стиле я работаю сам, но вы легко можете применять идеи и техники из этого туториала для создания совершенно других вещей. Изучайте работы разных художников и создавайте пиксель-арт, который нравится вам!
Софт
Базовые цифровые инструменты для пиксель-арта — Зум (Zoom) и Карандаш (Pencil), чтобы размещать пиксели. Также вам пригодятся Линия (Line), Фигура (Shape), Выбрать (Select), Переместить (Move) и Заливка (Paint Bucket). Есть много бесплатного и платного ПО с таким набором инструментов. Я расскажу про самые популярные и те, которыми пользуюсь сам.
Paint (бесплатно)
Если у вас Windows, встроенный в нее Paint — примитивная программа, но в ней есть все инструменты для пиксель-арта.
Piskel (бесплатно)
Неожиданно функциональный редактор пиксель-арта, который запускается через браузер. Можно экспортировать работу в PNG или анимированный GIF. Отличный вариант для новичков.
GraphigsGale (бесплатно)
GraphicsGale — единственный редактор из тех, о которых я слышал, разработанный именно для пиксель-арта и включающий инструменты анимации. Его создала японская компания HUMANBALANCE. С 2017 года он распространяется бесплатно и до сих пор пользуется спросом, несмотря на рост популярности Aseprite. К сожалению, работает он только на Windows.
Aseprite ($)
Пожалуй, самый популярный редактор на данный момент.
Открытый исходный код, куча возможностей, активная поддержка, версии для Windows, Mac и Linux. Если вы серьезно взялись за пиксель-арт и все еще не нашли нужный редактор, возможно, это то, что нужно.
GameMaker Studio 2 ($$+)
GameMaker Studio 2 — превосходный 2D-инструмент с хорошим редактором спрайтов (Sprite Editor). Если вы хотите создавать пиксель-арт для для собственных игр, очень удобно все делать в одной программе. Сейчас я использую этот софт в работе над
, коллекцией 50 ретро-игр: спрайты и анимации создаю в GameMaker, а тайлсеты — в Photoshop.
Photoshop ($$$+)
Photoshop — дорогой софт, распространяется по подписке, не заточен под пиксель-арт. Не рекомендую приобретать его, если вы не занимаетесь отрисовкой иллюстраций в высоком разрешении, или вам не нужно проводить сложные манипуляции с картинкой, как мне. В нем можно создавать статичные спрайты и пиксельные работы, но он довольно сложный по сравнению со специализированным софтом (например, GraphicsGale или Aseprite).
Прочее
Мой набор для пиксель-арта. Все черное, только сейчас заметил.
Графический планшет ($$+)
Рекомендую графические планшеты для любых работ с цифровыми иллюстрациями, чтобы избежать туннельного синдрома запястий. Его гораздо проще предотвратить, чем вылечить. Однажды вы почувствуете боль, и она будет только нарастать — позаботьтесь о себе с самого начала. Из-за того, что когда-то я рисовал мышкой, мне теперь тяжело играть в игры, в которых нужно нажимать на клавиши. Сейчас я использую Wacom Intuos Pro S.
Суппорт запястья ($)
Если вы не можете приобрести планшет, купите хотя бы суппорт запястья. Мне больше всего нравится Mueller Green Fitted Wrist Brace. Остальные либо слишком тугие, либо обеспечивают недостаточную поддержку. Суппорты без проблем можно заказать онлайн.
96×96 пикселей
Final Fight. Capcom, 1989 год
Приступим! Начнем со спрайта персонажа 96×96 пикселей. Для примера я нарисовал орка и поместил его на скриншот из Final Fight (картинка выше), чтобы вы понимали масштаб. Это большой спрайт для большинства ретро-игр, размер скриншота: 384×224 пикселя.
На таком большом спрайте будет легче показать технику, о которой я хочу рассказать. Также попиксельная отрисовка больше похожа на традиционные формы арта (например, рисование или живопись), с которыми вы, возможно, лучше знакомы. Освоив базовые техники, мы перейдем к спрайтам поменьше.
1. Выбираем палитру
Пиксель — гораздо более глубокое понятие в пиксель-арте, чем в любых других цифровых сферах. Пиксель-арт определяют его ограничения, например, цвета. Важно правильно подобрать палитру, она поможет определить ваш стиль. Но на старте я предлагаю не думать про палитры и выбрать одну из существующих (или просто несколько рандомных цветов) — вы легко можете ее поменять на любом этапе.
Для этого туториала я буду использовать палитру из 32 цветов, которую мы создали для UFO 50. Для пиксель-арта их часто собирают из 32 или 16 цветов. Наша разработана для вымышленной консоли, которая могла бы появится где-то между Famicom и PC Engine. Можете взять ее или любую другую — туториал совсем не зависит от выбранной палитры.
2. Грубые контуры
Начнем прорисовку с помощью инструмента Карандаш. Нарисуем скетч так же, как делаем это с обычной ручкой и бумагой. Конечно, пиксель-арт и традиционный арт пересекаются, особенно когда речь идет о таких крупных спрайтах. Мои наблюдения показывают, что сильные художники по пиксель-арту как минимум неплохо рисуют от руки и наоборот. Так что развивать навыки рисования всегда полезно.
3. Проработка контуров
Дорабатываем контуры: убираем лишние пиксели и сокращаем толщину каждой линии до одного пикселя. Но что именно считать лишним? Чтобы ответить на этот вопрос нужно разобраться в пиксельных линиях и неровностях.
Неровности
Нужно научиться рисовать две базовые линии в пиксель-арте: прямые и кривые. С ручкой и бумагой все сводится к мышечному контролю, но мы-то работаем с крошечными цветными блоками.
Ключ к отрисовке правильных пиксельных линий — неровности. Это единичные пиксели или небольшие сегменты, разрушающие сглаженность линии. Как я уже говорил, отдельный пиксель имеет огромное значение в пиксель-арте, поэтому неровности могут разрушить всю эстетику. Представьте, что вы проводите прямую линию на бумаге, и неожиданно кто-то ударяет по столу: неровности в пиксель-арте выглядят так же, как случайная закорючка.
Примеры:
Прямые
Кривые
Неровности появляются на кривых, когда длина сегментов линии увеличивается или уменьшается не постепенно.
Совсем избежать неровностей невозможно — во всех ваших любимых ретро-играх они есть (если, конечно, пиксель-арт состоит не исключительно из простых форм). Цель: свести неровности к минимуму, при этом показав все необходимое.
4. Применяем первые цвета
Раскрасьте своего персонажа с помощью заливки или другого подходящего инструмента. Палитра упростит эту часть работы. Если софт не предусматривает использование палитр, можно поместить ее прямо в картинку, как на примере выше, и выбирать цвета с помощью пипетки.
В нижнем левом углу я нарисовал нашего друга, знакомьтесь, это — Шар. С ним будет проще понять, что именно происходит на каждом этапе.
5. Шейдинг
Пора отобразить тени — просто добавляем более темные цвета на спрайт. Так изображение будет выглядеть объемным. Давайте предположим, что у нас один источник света, расположенный над орком левее от него. Значит, освещено будет все, что находится сверху и спереди нашего персонажа. Добавляем тени снизу справа.
Форма и объем
Если этот этап вызывает у вас сложности, представьте свой рисунок как объемные формы, а не просто линии и цвет. Формы существуют в трехмерном пространстве и могут иметь объем, который мы выстраиваем с помощью теней. Это поможет визуализировать персонажа без деталей и представить, что он сделан из глины, а не из пикселей. Шейдинг — это не просто добавление новых цветов, это процесс выстраивания формы. На хорошо проработанном персонаже детали не скрывают базовые формы: если вы прищуритесь, увидите несколько крупных кластеров света и тени.
Сглаживание (anti-aliasing, анти-алиасинг)
Каждый раз используя новый цвет, я применяю анти-алиасинг (АА). Он помогает сгладить пиксели добавляя промежуточные цвета по углам, в месте соприкосновения двух сегментов линии:
Серые пиксели смягчают «разрывы» в линии. Чем длиннее сегмент линии, тем длиннее АА-сегмент.
Так АА выглядит на плече орка. Он нужен, чтобы сгладить линии, отображающие изгиб его мышц
Сглаживание не должно выходить за пределы спрайта, который будет использоваться в игре или на фоне, цвет которого неизвестен. Например, если вы примените АА для светлого фона, на темном фоне сглаживание будет смотреться некрасиво.
6. Выборочный контур
Ранее контуры были полностью черными, из-за чего спрайт смотрелся очень мультяшно. Картинка была словно разделена на сегменты. Например, черные линии на руке слишком контрастно отображают мускулатуру, и персонаж выглядит менее цельным.
Если спрайт станет более естественным, а сегментация не столь явной, то базовые формы персонажа будут легче читаться. Для этого можно использовать выборочный контур — частично заменить черный контур более светлым. На освещенной части спрайта можно использовать самые светлые цвета или, там где спрайт соприкасается с негативным пространством, можно полностью убрать контур. Вместо черного нужно использовать цвет, который был выбран для тени — так сохраниться сегментация (для разграничения мышц, меха и так далее).
Также на этом этапе я добавил более темные тени. Получилось три градации зеленого на коже орка. Наиболее темно-зеленый цвет можно использовать для выборочного контура и АА.
7. Финальные штрихи
В конце стоит добавить блики (самые светлые пятна на спрайте), детали (серьги, заклепки, шрамы) и прочие улучшения, пока персонаж не будет готов или пока не придется перейти к следующему.
Есть несколько полезных приемов, которые можно применить на этом этапе. Поверните рисунок горизонтально, это часто помогает выявить ошибки в пропорциях и шейдинге. Также можно убрать цвет — выставить насыщенность на ноль, чтобы понять, где нужно изменить тени.
Создание шумов (dithering, дизеринг)
Пока что мы в основном применяли крупные, цельные участки теней. Но есть и другая техника — дизеринг, которая позволяет перейти от одного цвета к другому без добавления третьего. Посмотрите на пример ниже.
Верхний градиент от темного к светлому использует сотни различных оттенков синего.
Средний градиент использует всего девять цветов, но в нем все еще слишком много оттенков одного цвета. Возникает так называемый бандинг (от англ. band — полоса), при котором из-за толстых однородных полос глаз фокусируется на точках соприкосновения цветов, вместо самих цветов.
На нижнем градиенте мы применили дизеринг, который позволяет избежать бандинга и использует всего два цвета. Мы создаем шум разной интенсивности, чтобы имитировать градацию цвета. Эта техника очень похожа на халфтон (halftone — полутоновое изображение), применяемое на печати; а также на стипплинг (stippling — зернистое изображение) — в иллюстрации и комиксах.
На орке я применил дизеринг совсем немного для передачи текстуры. Некоторые пиксель-артисты совсем его не используют, другие — наоборот не стесняются и делают это очень умело. Мне кажется, что лучше всего дизеринг смотрится на больших участках залитых одним цветом (присмотритесь к небу на скриншоте Metal Slug, который был выше) или на тех участках, которые должны выглядеть шероховато и неровно (например, грязь). Решите сами, как его использовать.
Если хотите увидеть пример с масштабным и качественным дизерингом, изучите игры The Bitmap Brothers, британской студии 80-х годов, или игры на компьютере PC-98. Только учтите, что все они — NSFW.
Kakyusei (PC-98). Elf, 1996 год
На этом изображении всего 16 цветов!
8. Последний взгляд
Одна из опасностей пиксель-арта в том, что он кажется легким и простым (из-за его структуры и ограничений стиля). Но в итоге вы потратите огромное количество времени на доработку своих спрайтов. Это похоже на головоломку, которую нужно решить — вот почему пиксель-арт привлекает перфекционистов. Помните, что один спрайт не должен отнимать слишком много времени — это лишь крохотный кусочек крайне сложного скопления кусочков. Важно не терять видение общей картины.
Даже если ваш пиксель-арт не для игр, иногда стоит сказать себе: «Все уже достаточно хорошо!» И двигаться дальше. Лучший способ развития навыков — как можно больше раз пройти весь процесс целиком от начала до конца, используя как можно больше тем.
И порой полезно ненадолго оставить спрайт, чтобы чуть позже взглянуть на него свежим взглядом.
32×32 пикселя
Мы создали большой спрайт 96×96 пикселей первым, потому что при таком размере это больше напоминает рисование или живопись, но только пикселями. Чем меньше спрайт, тем меньше он похож на то, что должен отображать, и тем больше важен каждый пиксель.
В Super Mario Bros. глаз Марио — это всего два пикселя, расположенные один над другим. И его ухо тоже. Создатель персонажа Сигеру Миямото сказал, что усы потребовались для того, чтобы отделить нос от остального лица. Так что одна из главных черт лица Марио — не просто дизайн персонажа, но и прагматичная уловка. Что подтверждает старую мудрость — «нужда — мать изобретательности».
Основные этапы создания спрайта 32×32 пикселя нам уже знакомы: скетч, цвет, тени, дальнейшая доработка. Но в таких условиях, в качестве начального скетча я подбираю цветные фигуры вместо отрисовки контуров из-за маленького размера. Цвет играет более важную роль в определении персонажа, чем контуры. Посмотрите на Марио еще раз, у него вообще нет контуров. Интересны не только усы. Его бакенбарды определяют форму ушей, рукава показывают руки, а общая форма более-менее четко отображает все его тело.
Создание маленьких спрайтов — это постоянные компромиссы. Если вы добавите обводку, можете потерять место для тени. Если у вашего персонажа четко отображены руки и ноги, голова скорее всего должна быть не очень большой. Если эффективно использовать цвет, выборочную обводку и сглаживание, то отрисованный объект будет казаться больше, чем он есть на самом деле.
Для маленьких спрайтов мне нравится стиль тиби: персонажи выглядят очень мило, у них большие головы и глаза. Отличный способ создать яркого героя в ограниченном пространстве, да и в целом, очень приятный стиль. Но, возможно, вам нужно показать мобильность или силу персонажа, тогда вы можете уделить меньше пространства голове, чтобы тело выглядело более мощно. Все зависит от ваших предпочтений и целей.
Целая команда в сборе!
Форматы файлов
Такой результат может заставить понервничать любого пиксель-артиста
Картинка, которую вы видите — результат сохранения рисунка в JPG. Часть данных потерялась из-за алгоритмов сжатия файла. Качественный пиксель-арт в итоге будет выглядеть плохо, а вернуть его изначальную палитру будет непросто.
Для сохранения статической картинки без потери качества используйте формат PNG. Для анимаций — GIF.
Как правильно делиться пиксель-артом
Шеринг пиксель-арта в социальных сетях — отличный способ получить фидбек и познакомиться с другими художниками, работающими в том же стиле. Не забудьте поставить хэштег #pixelart. К сожалению, соцсети часто конвертируют PNG в JPG без спроса, ухудшая вашу работу. Причем не всегда понятно, почему ваша картинка была конвертирована.
Есть несколько советов, как сохранить пиксель-арт в нужном качестве для различных соцсетей.
Чтобы PNG-файл не изменился в Twitter, используйте меньше 256 цветов или
убедитесь, что ваш файл меньше 900 пикселей по длинной стороне. Я бы увеличил размер файла хотя бы до 512×512 пикселей. Причем так, чтобы масштабирование было кратно 100 (200%, а не 250%) и сохранялись резкие края (Nearest Neighbor в Photoshop).
Анимированные GIF-файлы для постов в Twitter должны весить не более 15 Мб. Картинка должна быть как минимум 800×800 пикселей, цикличная анимация должна повторяться трижды, а последний кадр должен быть вполовину короче по времени, чем все остальные — самая популярная теория. Однако, непонятно, насколько нужно выполнять эти требования, учитывая, что Twitter постоянно меняет свои алгоритмы отображения картинок.
Насколько я знаю, невозможно опубликовать картинку в Instagram без потери качества. Но она точно будет выглядеть лучше, если вы увеличите ее хотя бы до 512х512 пикселей.
Pixel art для начинающих. Введение.
Интерес, проявленный к первому уроку, и последовавшие обсуждения, а также замечательные работы, которые посетители начали рисовать и выкладывать в комментариях, показали, что начинать всё же следовало с основ. Исправляю ошибку и предлагаю своеобразный приквел, в котором мы познакомимся с азами pixel art’а перед тем, как приступить к изометрии.
Но для начала немного истории (не переносите длинных вступлений? Смело пропускаете два-три абзаца).
1. История (очень коротко).
Юрий Гусев, он же Fool.Pixel art (пишется без дефиса) или пиксельная графика — направление цифрового искусства, которое заключается в создании изображений на уровне пикселя (т. е. минимальной логической единицы, из которой состоит изображение). Далеко не все растровые картинки являются пиксель артом, хотя все они и состоят из пикселей. Почему? Потому что в конечном счёте понятие pixel art вмещает в себя не столько результат, сколько процесс создания иллюстрации. Пиксель за пикселем, и только так. Если вы возьмёте цифровое фото, сильно его уменьшите (так, чтобы пиксели стали видны) и заявите что нарисовали его с нуля — это будет настоящий подлог. Хотя наверняка найдутся наивные простаки, которые вас похвалят за кропотливый труд.
| Это — не pixel art. Хотя изображение цифровое, создано с помощью компьютера и состоит из пикселей — оно НЕ рисовалось на уровне точек. К сожалению, практически недоказуемо, потому что автор всегда может заявить обратное. Вот почему на конкурсах по пиксельной графике обычно одно из условий — предоставить иллюстрацию на разных этапах работы (WIP — work in progress). |
Сейчас неизвестно, когда точно зародилась эта техника, корни теряются где-то в начале 1970-х. Однако приём составления изображений из малых элементов восходит к куда более древним формам искусства, таким как мозаика, вышивание крестиком, ковроплетение и бисероплетение. Само же словосочетание «pixel art» как определение пиксельной графики впервые было использовано в статье Адель Голдберг и Роберта Флегала в журнале Communications of the ACM (декабрь 1982-го).
Наиболее широкое прикладное применение pixel art получил в компьютерных играх, что неудивительно — он позволял создавать изображения, нетребовательные к ресурсам и выглядящие при этом по-настоящему красиво (при этом отнимающие у художника немало времени и требовавшие определённых навыков, а потому подразумевающие хорошую оплату труда). Расцветом, наивысшей точкой в развитии официально называют видеоигры на приставках 2-го и 3-го поколения (начало 1990-х). Дальнейший прогресс технологий, появление сперва 8-битного цвета, а затем и True Color, развитие трёхмерной графики — всё это со временем оттеснило pixel art на второй и третий планы, а потом и вовсе стало казаться, что пиксельной графике пришёл конец.
Наивысшая точка развития pixel art’а в видеоиграх. Хотя официально апогей приписывают 2-му и 3-му поколениям, на мой взгляд он пришёлся несколько позже. Именно на приставках 4-го поколения (Sega MD, SNES, TurboGrafx-16 и Neo Geo) вышли игры с самой красивой и безупречной по технике пиксельной графикой. Это несмотря на то, что технология наступала на пятки и повсеместно предпринимались попытки ввести в игры full motion video, а также спрайты, созданные на основе фотографий, видеоматериалов и заранее визуализированных 3D-моделей.Как ни странно, но именно господин Научно-технический прогресс, задвинувший в середине 90-х пиксельную графику на последние позиции, и вернул её позже в игру — явив миру мобильные устройства в виде сотовых телефонов и КПК. Ведь каким бы полезным ни был новомодный дивайс, мы-то с вами знаем — если на нём нельзя хотя бы разложить пасьянс, грош ему цена. Ну а там где есть экран с невысоким разрешением, там и pixel art. Как говорится, добро пожаловать назад.
У дизайнеров из «eBoy» было трудное детство, они провели его в восточной Германии и были начисто лишены возможности наслаждаться изящными искусствами. Потому не научились рисовать ничего кроме пиксельной графики. Но главная их заслуга — они убедили рекламодателей, что pixel art это модно и круто. Если по мнению дизайнеров из «eBoy» ГДРовские игрушки и одежда были некрасивыми — интересно, что бы они сказали про советские?Разумеется, свою роль в возвращении пиксельной графики сыграли различные ретроградно настроенные элементы, любящие поностальжировать над старыми-добрыми играми детства, приговаривая при этом: «Эх, теперь такого не делают» эстеты, способные оценить красоту пиксель арта, и инди-разработчики, не воспринимающие современные графические красоты (а иногда, правда редко, элементарно не умеющие их реализовать в собственных проектах), оттого и ваяющие pixel art. Но давайте всё-таки не будем сбрасывать со счетов сугубо коммерческие проекты — приложения для мобильных устройств, рекламу и web-дизайн.
Еще одна заметная фигура — голландец Хэнк Ниебург, начавший карьеру пиксельного художника аж в 1989-м. В конце 90-х был вынужден зарабатывать на жизнь вебдизайном и едва сводил концы с концами, но с 2000-го снова рисует pixel art, теперь уже для мобильных игр.Так что сейчас pixel art, что называется, широко распространён в узких кругах и заработал себе своеобразный статус искусства «не для всех». И это несмотря на то, что для простого обывателя он предельно доступен, ведь чтобы работать в этой технике, достаточно иметь под рукой компьютер и простейший графический редактор! (умение рисовать, между прочим, тоже не помешает) Хватит слов, ближе к делу!
| Pixel dolls, развлечение для взрослых девочек, не наигравшихся в куклы. Кроме шуток, это тоже pixel art, и работы некоторых авторов вызывают восхищение как среди фанатов пиксельной графики, так и среди ценителей прекрасного. pixparadise.net |
2. Инструменты.
Что нужно для создания пиксель арта? Как сказал выше, достаточно компьютера и любого графического редактора, способного работать на уровне пикселей. Рисовать можно где угодно, хоть на Game Boy, хоть на Nintendo DS, хоть в Microsoft Paint (другое дело, что рисовать в последнем крайне неудобно). Есть великое множество растровых редакторов, многие из них бесплатны и достаточно функциональны, так что с программным обеспечением каждый может определится самостоятельно.
Microsoft Paint — оружие последнего шанса, когда рисовать уже совсем негде. Это «круги», во всяком случае Paint считает именно так. Особенно примечателен уродец в центре, который даже не симметричен.Я рисую в Adobe Photoshop, потому что удобно и потому что давно. Не стану врать и рассказывать, шамкая вставной челюстью, что де «Я помню Фотошоп был еще са-а-авсем маленьким, это было на Макинтоше, и был он с номером 1.0» Такого не было. Но я помню Фотошоп 4.0 (и также на Маке). А потому для меня вопрос выбора никогда не стоял. И потому нет-нет, но я буду давать рекомендации касательно Photoshop, особенно там, где его возможности помогут значительно упростить творчество.
Итак, вам нужен любой графический редактор, позволяющий рисовать инструментом в один квадратный пиксель (пиксели бывают и неквадратные, например круглые, но они нас в данный момент не интересуют). Если ваш редактор поддерживает какой-никакой набор цветов — отлично. Если также позволяет сохранять файлы — просто замечательно. Хорошо бы еще умел работать со слоями, поскольку работая над достаточно сложной картинкой, удобнее разложить её элементы по разным слоям, но по большому счёт это вопрос привычки и удобства.
Тоже своего рода пиксель арт, картина составлена из… кубиков Рубика! 1330 кубиков, размер полотна 116×107 см, автор Джон Куигли (John Quigley).Начнём? Вы наверное ждёте списка каких-то секретных приёмов, рекомендаций, которые научат вас рисовать pixel art? А правда в том, что ничего такого по большому счёту нет. Единственный способ научиться рисовать пиксельную графику — это рисовать самому, пробовать, пытаться, не бояться и экспериментировать. Не стесняйтесь повторять чужие работы, не бойтесь показаться неоригинальным (просто не выдавайте чужое за своё, хе-хе). Внимательно и вдумчиво анализируйте работы мастеров (не мои) и рисуйте, рисуйте, рисуйте. Несколько полезных ссылок вас ждёт в конце статьи.
3. Общие принципы.
И всё же существует несколько общих принципов, знать которые не помешает. Их действительно немного, я называю их «принципами», а не законами, потому что они носят скорее рекомендательный характер. В конце-концов, если у вас получится нарисовать гениальную пиксельную картинку в обход всех правил — кому до них дело?
Самым основной принцип можно сформулировать так: минимальной единицей изображения является пиксель, и по возможности все элементы композиции должны быть соразмерны ему. Расшифрую: всё, что вы нарисуете, состоит из пикселей, и пиксель должен читаться во всём. Это не значит, что в рисунке вообще не может быть элементов, к примеру, 2×2 пикселя, или 3×3. Но строить изображение всё же предпочтительно из отдельных пикселей.
Для наглядности приведу несколько примеров с типичными ошибками и вариантами их исправления:
За исключением ладоней у человечка, которые вроде как являются авторской задумкой, все элементы, в которых толщина линии превысила 1 пиксель, нужно исправить.Ноги у человечка лучше выглядеть не стали, это верно, к ногам еще вернёмся. В качестве примера «из жизни» приведу онлайновый паззл Zoo keeper:
http://pc.kiteretsu.jp/games/zka/zka.htmПочему художник решил сделать обводку в два пикселя, в то время как сами элементы нарисованы попиксельно? Возможно, хотел отделить тайлы от фона. А прочую внутриигровую графику рисовал с той же жирной обводкой, чтобы сохранить единую стилистику, плюс такая явная обводка придаёт изображению некую выразительность. Тем не менее — что называется, не наш метод.
Кадр из игры Duct. Казалось бы, всё в порядке, но толщина обводки и прочих элементов рисунка всюду колеблетсямежду 1-м и 2-мя пикселями.
Из этого принципа можно вывести простое правило: обводка и вообще все линии рисунка должны быть толщиной в один пиксель (за редким исключением).
То самое исключение, Jimmy Two Shoes. Здесь пиксельная графика стремится повторить стиль оригинального мультфильма, на персонажах которого основана игра, и в котором все персонажи имеют чётковыраженную обводку.Я вовсе не утверждаю, что это неправильно. Но это всё же не очень красиво. А чтобы было красиво, запомним еще одно правило: рисовать без изломов, скруглять плавно. Есть такое понятие как изломы — фрагменты, выбивающиеся из общего порядка, они придают линиям неровный, зазубренный вид (в англоговорящей среде пиксельных художников их называют jaggies):
Изломы лишают рисунок естественной плавности и красоты. И если фрагменты 3, 4 и 5 очевидны и исправляются легко, с прочими дело обстоит сложнее — там нарушена длина одного-единственного кусочка в цепи, казалось бы мелочь, но мелочь заметная. Чтобы научиться видеть такие места и избегать их, требуется небольшая практика. Излом 1 выбивается из линии, потому что это единичный пиксель — в то время как на участке, где он затесался, линия состоит из сегментов по 2 пикселя. Чтобы избавиться от него, я смягчил вход кривой в изгиб, удлинив верхний сегмент до 3-х пикселей, и перерисовал всю линию сегментами по 2 пикселя. Изломы 2 и 6 идентичны друг другу — это уже фрагменты длиной 2 пикселя на участках, построенных единичными пикселями.
Избежать подобных изломов при рисовании поможет элементарный набор примеров наклонных прямых, который можно встретить практически в каждом руководстве по пиксельной графике (моё не исключение):
Как видите, прямая линия составляется из отрезков одинаковой длины, смещаемых по мере её прорисовки на один пиксель — только таким образом достигается эффект линейности. Наиболее распространённые способы построения с длиной отрезка 1, 2 и 4 пикселя (встречаются и другие, но представленных вариантов должно хватить для реализации практически любой художественной задумки). Из этих трёх самым популярным можно уверенно назвать длину отрезка в 2 пикселя: рисуем отрезок, сдвигаем перо на 1 пиксель, рисуем еще один отрезок, сдвигаем перо на 1 пиксель, рисуем еще отрезок:
Несложно, верно? Нужна лишь привычка. Умение рисовать наклонные прямые с шагом в 2 пикселя поможет в изометрии, так что подробнее остановимся на ней в следующий раз. Вообще прямые линии это здорово — но только до тех пор, пока не встанет задача нарисовать что-нибудь нерукотворное. Тут нам понадобятся кривые, и много самых разных кривых. И берём на вооружение простое правило закругления кривых линий: длина элементов кривой должна уменьшаться/увеличиваться постепенно.
Выход из прямой на скругление ведётся плавно, я обозначил длину каждого сегмента: 5 пикселей, 3, 2, 2, 1, 1, снова 2 (уже вертикально), 3, 5 и далее. Не обязательно ваш случай будет использовать такую же последовательность, здесь всё зависит от плавности, которая требуется. Еще пример скругления:
Опять же, избегаем изломов, которые так портят картинку. Если есть желание проверить усвоенный материал, здесь у меня нарисованный неизвестным автором skin для Winamp’а, заготовка:
На рисунке есть и грубые ошибки, и просто неудачных скругления, и изломы встречаются — попробуйте исправить картинку на основе того, что уже знаете. На этом с линиями у меня всё, предлагаю немного порисовать. И пусть вас не смущает простота примеров, научиться рисовать можно только рисуя — даже такие простейшие вещи.
4.1. Рисуем склянку с живой водой.
1. Форма объекта, пока можно не использовать цвет.
2. Красная жидкость.
3. Меняем цвет стекла на голубой, добавляем затенённые участки внутри пузырька и светлый участок на предполагаемой поверхности жидкости.
4. Добавляем белые блики на пузырьке, и тень шириной 1 пиксель тёмно-красного цвета на приграничных к стенкам пузырька областях жидкости. Смотрится вроде неплохо, а?
5. Аналогично рисуем склянку с синей жидкостью — здесь тот же цвет стекла, плюс три оттенка синего для жидкости.
4.2. Рисуем арбуз.
1. Нарисуем круг и полукруг — это будут арбуз и вырезанная долька.
2. Обозначим вырез на самом арбузе, а на дольке — границу между корочкой и мякотью.
3. Заливка. Цвета из палитры, средний оттенок зелёного — цвет корки, средний красный — цвет мякоти.
4. Обозначим переходный участок от корки к мякоти.
5. Светлые полосы на арбузе (наконец-то он похож сам на себя). И конечно — семечки! Если скрестить арбуз с тараканами, будут расползаться сами.
6. Доводим до ума. Бледно-розовый цвет используем для обозначения бликов над семечками в разрезе, и, выкладывая пиксели в шахматном порядке, добиваемся от вырезанной дольки некоего подобия объёма (метод называется dithering, о нём позже). Тёмный красный оттенок используем, чтобы обозначить затенённые места в разрезе арбуза, и тёмно-зелёный (опять же пиксели в шахматном порядке) — чтобы придать объём самому арбузу.
5. Dithering.Дизеринг, или смешивание — техника перемешивания определённо упорядоченным (не всегда) образом пикселей в двух граничащих областях разного цвета. Самый простой, распространённый и эффективный способ — чередовать пиксели в шахматном порядке:
Приём появился на свет благодаря (или скорее вопреки) техническим ограничениям — на платформах с ограниченными палитрами дизеринг позволял, замешивая пиксели двух разных цветов, получить третий, отсутствующий в палитре:
Но и позже, когда количество цветов перестало быть проблемой, дизеринг можно было видеть в видеоиграх в роли тени (чтобы не нагружать железо полупрозрачностью, художники часто обозначали тень участком чёрных пикселей, расположенных в шахматном порядке и накладывавшихся на фон).
Game Boy, 4 цвета (чёрный, белый и два оттенка серого). Настоящий вызов художнику!Сейчас, в эпоху безграничных технических возможностей, многие говорят что необходимость в дизеринге отпала сама собой. Однако грамотное его использование может придать вашим работам характерный ретро-стиль, узнаваемый всеми любителями старых видеоигр. Лично я люблю использовать dithering. Не очень хорошо им владею, тем не менее, люблю.
Еще два варианта дизеринга:
Что нужно знать про дизеринг, чтобы уметь им пользоваться. Минимальная ширина зоны смешивания должна быть не меньше 2-х пикселей (те самые шашечки). Больше — можно. Меньше лучше не делать.
Ниже пример неудачного дизеринга. Несмотря на то, что подобную технику можно часто встретить на спрайтах из видеоигр, нужно отдавать себе отчёт в том, что телевизионный экран существенно сглаживал изображение, и такая гребёнка, да еще в движении, глазом не фиксировалась:
Ну, хватит теории. Предлагаю еще немного попрактиковаться.
6.1. Рисуем меч.
Такой несерьёзный меч для несерьёзного проекта:
1. Форма. Здесь всё просто.
2. Начинаем распределять цвет. Я изменил изначально чёрный на цвет тёмной стали (хочется верить, что похожий) и залил меч серым.
3. Придаём форму за счёт светотени и дополнительной расцветки (обратите внимание — я кое-где повторно изменил цвет обводки, сделав его еще светлее). Условимся, что свет на меч падает слева-сверху, из-за плеча наблюдающего, поэтому блики (наиболее светлые участки освещённых поверхностей) располагаются на выступающих элементах слева, тени — справа и снизу.
4. Доводим наш миниатюрный шедевр до совершенства. Усиливаем эффект объёма на яблоке и сферических элементах крестовины (левый и правый «шарики»), на обмотке рукояти. Обратите внимание на длинную полосу, идущую по лезвию — дол (некоторые называют его кровотоком, полагая, что он служит для стекания крови проткнутого врага). Название здесь неважно, суть в том, что это жёлоб и центральная его часть освещена меньше всего, в то время как края наоборот. Справа от дола, чтобы усилить эффект глубины, я обозначил чёткий блик (никогда нелишне хорошенько изучить объект, который вы собираетесь изобразить — не для того чтобы сыпать терминами, а чтобы иметь чёткое представление об устройстве и особенностях конструкции). Вроде получился довольно симпатичный меч, а?
5. Я не стал останавливаться на достигнутом и сильно состарил наше оружие, вообразив, как мог бы выглядеть клинок, пролежи он сотню лет в подземелье. Цвета заменены более тёмными (соседними из той же палитры), я ввёл больше чёрного (на предыдущем рисунке лишь три действительно чёрных точки, одна на стыке дола с крестовиной усиливала эффект глубины тени, две другие подчёркивали обмотку рукояти). Выбоины и сколы на лезвии, крестовина и яблоко серьёзно повреждены (наверняка в жестокой сечи), обмотка рукояти порвана. В общем, перед нами настоящая древность. Придумаем достойную легенду и поставим на видном месте, как семейную реликвию.
6.2. Робот.
Один из самых распространённых способов рисования «с нуля» — изобразить черновой вариант (не попиксельно, а традиционно, рисуя либо мышью, либо на планшете), а после почистить его, исправить (при необходимости) и довести до ума. Также часто художники рисуют на основе своих бумажных черновиков, карандашных рисунков, набросков и прочих «почеркушек» — сканируют их и обрисовывают попиксельно. Дело привычки. Я обычно начинаю с чернового наброска:
Теперь чистка, стираю лишние пиксели и дорисовываю недостающие:
Закругление согласно простому правилу плавности, все прямые линейные. Добавляю ноги:
На самом деле рисовать полноценные конечности, честно говоря, поленился. Хотелось поскорее закончить урок, плюс массивный робот на тонких ножках — по-моему достаточно забавно. Помимо того, что ноги нарисованы обыкновенными прямыми (что здорово сэкономило мне время), я не стал придавать им объём — это не цилиндры, а пока что обычные плоские прямоугольники. Объёма добьюсь позже, с помощью теней и бликов. Кстати, еще одна хитрость, на которую пошёл сознательно — бедро левой ноги построено в точности как голень правой, и наоборот, так что фактически, вместо того чтобы нарисовать четыре цилиндра, я схитрил и нарисовал два наклонных прямоугольника.
Дополнительный элемент в виде панели на груди и трёх… лампочек? Не знаю, пока не решил. Но понял, что хочу сделать торс робота телескопическим, как раскладной стаканчик, поэтому пришлось слегка откорректировать линию изгиба, добавив небольшие но заметные зазоры на стыке сегментов. Теперь заливка!
Основной цвет, плюс я заменил цвет обводки с чёрного на тёмно-синий. Смотрится по-прежнему пустовато, но это ничего, исправлю тенями. Условлюсь, что источник света где-то за сверху за моим левым плечом, следовательно, тени лягут в основном справа и снизу. Сначала грудь, как самый крупный элемент:
Тень накладываю в 2 этапа, сперва самую тёмную, участком шириной максимум 3−4 пикселя (т. е. от линии обводки вглубь объекта, в данном случае, тень занимает область шириной 3, самое большое 4 пикселя. Это не закономерность, цифры запоминать не нужно, для другого предмета с другим освещением, другим материалом и другим настроением тень наверняка ляжет иначе). Далее более светлая тень, так же как и основная плавно сходящая на нет. Обратите внимание, на закруглённых участках груди тень кое-где лежит совсем небольшими фрагментами, по одному пикселю — это также придаст рисунку больше плавности.
Особое внимание обращаю на грудную панель: теневые участки толщиной в 1 пиксель, на освещённой кромке появляется чёткий блик, для которого использую самый светлый цвет из палитры.
Также приглядитесь к глазам, у них уже есть блики, основной цвет и тень. Кладу тень по всему роботу:
Теперь блики на поверхностях, которые должны отразить свет от источника прямо в глаза наблюдателю (художнику):
Хм, совсем другое дело. Даже прямоугольники-ножки выглядят как цилиндры! Я решил, что три кружка на груди могучего робота будут ракетницами, закрытыми люками, так что это по сути небольшие углубления; тень от левой кромки и блик по правой (и нижней).
Здесь сложно давать какие-либо советы, кроме одного — учитесь рисовать, изучайте тени, теорию света. Двигаемся дальше, дизеринг:
Выбираем любую границу между двумя цветами и выкладываем пиксели этих цветов в шахматном порядке. Самые светлые пятна я оставил без дизеринга, что подчёркивает резкость блика. Также дизеринга нет на ногах — слишком миниатюрные элементы, его там просто негде выкладывать. Теперь финальный штрих, заклёпки, обозначающие зубы, и игривая антенна:
Если внимательно рассмотреть заклёпки-зубы, видно, что это всего лишь фрагменты 2 на 2 пикселя, верхний левый окрашен в цвет бликов, два соседних с ним — цвет светлой тени, и правый нижний — цвет основной тени. Просто, да? При этом даже несмотря на то, что в некоторых местах пиксели заклёпок совпадают с цветом соседних точек, при отдалении (уменьшении масштаба рисунка до 100 или 200%) сохраняется полное впечатление того, что это выделяющиеся объекты. Еще в палитре появился дополнительный близкий к чёрному оттенок — я решил с его помощью сделать темнее суставы на ногах, и замешать в шахматном порядке пиксели в суставы на руках. Чистый чёрный я попробовал, тень получалась неестественной, а дизеринг с самым тёмным оттенком дал нужный эффект.
Ну и самый последний штрих, мне кажется, левая рука расположена не очень удачно — вырезаю её и сдвигаю вниз и влево. Вот так, кажется, самое то:
WIP, тот самый Work in Progress:
Собственно, на сегодня это всё. В следующий раз разберём изометрические построения, ну а напоследок несколько полезных ссылок:
Юрий Гусев aka Fool
http://www.foolstown.com/
http://fool.deviantart.com/
Алексей Гаркушин aka gas13
http://gas13.ru/
http://gas13.deviantart.com/
Дизайн-группа eBoy
http://hello.eboy.com/eboy/category/everything/explore/parts/
Henk Nieborg (Голландия)
http://www.henknieborg.nl/
Gary J Lucken (Великобритания)
http://www.armyoftrolls.co.uk/
Kenneth Fejer…
http://www.kennethfejer.com/
…и один из его замечательных проектов — ISOSITY
http://www.kennethfejer.com/isocity/
Agnes Heyer aka Arachne (Норвегия)
http://www.retinaleclipse.com/
Borek Bures (Чехия)
http://www.spiv.cz/index.html
The Spriters Resource — хранилище спрайтов из игр
http://spriters-resource.com/
Как начать делать пиксель арт #1 (RUS) | by Кирилл Евстигнеев
Руководство для Абсолютного Новичка
Это — маленькая статья о том, как начать делать пиксель арт, написанная для тех, кто ни разу не открывал какую-либо нужную для этого программу. Пока я опишу самую базу, как создать файл, определиться с его размером и количеством цветов.
Этот гайд был поддержан на моем Патреоне! Если вам нравится то, что я делаю, то порадуйте меня своей подпиской, пожалуйста 🙂 (ВНИМАНИЕ! Это Патреон ОРИГИНАЛЬНОГО автора статьи, а не переводчика.)
Перед тем, как начнем…
Перед тем, как с открытым сердцем ворваться в мир пиксель арта, помните: пиксель арт — это лишь очередная разновидность искусства, как та же гуашь, масло, карандаш, скульптура или близкая к ней мозаика. Чтобы делать хорошие работы в пиксель арте, вам необходимо уметь рисовать. По сути, я имею в виду изучение анатомии, перспективы, светотени, основ цвета и даже историю искусства, так как все вышеуказанное нужно для создания хороших пиксельных работ.
Инструменты
Вам не нужно что-то эдакое для того, чтобы работать в пиксель арте, достаточно даже мышки и какой-нибудь бесплатной программы. Я использую маленький планшет от Wacom, очень хорошую мышку и клавиатуру; моя любимая программа — Aseprite, но вместо нее вы можете использовать все, в чем вам будет удобнее.
Вот список программ, которые чаще всего используются для пиксель артинга:
- Aseprite: Классный профессиональный редактор с кучей полезных плюшек (платный)
(Примечание переводчика: но всегда можно скомпилировать.) - GraphicsGale: Классика, использующаяся во множестве игр. Немножечко запутанная, но все так же с кучей полезных плюх (бесплатная)
- Piskel: Пиксельный онлайн-редактор (само собой, бесплатный)
- Photoshop: Мощный редактор изображений, который, по сути, не приспособлен для пиксель арта, но вы можете его настроить нужным образом (платный)
Aseprite
На данный момент это моя самая любимая программа. Она очень мощная, до краев забита полезными инструментами и очень даже проста для использования. Я выбрал Aseprite как программу для этого руководства, но я уверен, что адаптировать все написанное далее под любую другую программу вам не составит особого труда. Также вы можете взять бесплатную пробную версию этой программы, но помните, что тогда ваши файлы сохраняться не будут (если вы просто практикуетесь — в этом нет никаких проблем).
Создаем Новый Файл
Просто нажмите на “New File…” на загрузочном экране или на File > New File, чтобы мы могли начать.
Создадим новый файл. 16 на 16 пикселей кажется очень маленьким разрешением, но я думаю, что это прекрасно подойдет для начала. Слишком большие разрешения отвлекут вас от того, на чем мы должны сфокусироваться сейчас: на понятии того, как пиксели взаимодействуют друг с другом.
Окошко “Новый спрайт” в AsepriteРежим цвета можно оставить в RGBA, на данный момент он самый простой и наглядный. Некоторые художники любят работать в режиме палитры “indexed”, который позволяет использовать несколько особых плюшек, но вместе с ними идут и некоторые недостатки.
Фон должен быть прозрачным или белым, пока без разницы. Теперь убедитесь, что Advanced Options отключены (но позже можете вернуться к ним) и можно наконец-то приступать!
Давайте рисовать!
Здесь мы сразу видим множество панелей и менюшек, но не волнуйтесь, пока нам будет нужна лишь самая малая их часть. Главный инструмент — Карандаш, который всегда должен быть в один пиксель шириной, и с помощью которого мы и будем размещать пиксели в специальном поле. Нажмите на иконку инструмента или на английскую клавишу B, а затем на экран, чтобы разместить пиксель того цвета, который вы сейчас используете.
Рабочая зона в AsepriteСлева вы можете увидеть палитру с парочкой установленных по умолчанию цветов. Давайте поменяем их на другие, более простые. Нажмите на третью иконку над палитрой (Pressets) и выберите ARQ4 (хорошую палитру под авторством художника Endesga), которую вы будете использовать для своего первого творения.
А теперь, используя только четыре цвета слева, постарайтесь нарисовать кружку.
Будьте вольны пользоваться моей работой как предметом вашего вдохновения. Если вы вдруг сделаете ошибку, нажмите alt+ЛКМ по пустой зоне вне вашего рисунка, тем самым подобрав прозрачный цвет, которым можно пользоваться как ластиком. Ну или вы можете использовать, собственно, сам инструмент “Ластик” (горячая клавиша на английскую E).
Вы, скорее всего, заметили, что рисование в таком низком разрешении здорово отличается от любого другого рисования. Все должно быть просчитано, и каждый пиксель имеет очень большой вес. Запомните это.
Также вы можете немного поэкспериментировать с другими кнопками на панели инструментов. Нужно заметить, что некоторые инструменты открывают еще несколько альтернативных инструментов, если на них нажать. Пока вам следует избегать инструмента “Блюр”, который добавляет кучу ненужных нам цветов.
Теперь давайте сделаем еще больше спрайтов! Попробуйте нарисовать череп, меч и лицо человека. Но в этот раз без примера моих работ. Если вы почувствовали, что работа не влезает в эти рамки размера, то не волнуйтесь — это нормально, попробуйте что-либо немного поменять или попробуйте сначала. Работа в таком низком разрешении очень сложная и иногда напоминает паззл. Вот еще одна статья, которую я написал, посвященная работе в низком разрешении: [link]
Если вы так хотите, то вот вам моя версия этих трех спрайтов. Пожалуйста, не нажимайте сюда до того, как вы закончите рисовать их сами. [skull, sword and human face].
Подобные упражнения всегда хороши. Если вы хотите продолжать практиковаться, то попробуйте сделать еще больше спрайтов в рамках такого низкого разрешения.
Сохраняем файл
Для сохранения файла нажмите Control+S (или File>Save As…), Выберите имя файлу и путь сохранения, а потом нажмите кнопку save.
Помните, что в триале Aseprite’а нельзя сохранять работы!
Окошко экспортировки файла в AsepriteВы можете заметить, что Aseprite поддерживает очень много форматов для сохранения файла, но я рекомендую всегда держать при себе .ase версию каждого файла, который вы создаете. Точно так же, как формат .psd в Photoshop. Во время экспорта файла в интернет или игры, вы можете нажать Control+Alt+Shif+S или File>Export.
Вот почему никогда не следует изменять размер работ не на круглые числаВ Aseprite есть о-о-очень хорошая функция “Resize”, меняющая размер спрайта в окошке экспорта. Оно изменяет ваш спрайт только на какую-нибудь круглую процентную величину. Если вы измените размер спрайта, например, на 107%, это разобьет большинство пикселей и исказит изображение, но если вы измените размер на 200%, то каждый пиксель будет в 2 пикселя шириной и выстой, что, несомненно, выглядит классно и точно.
Бо́льшие разрешения
Теперь, когда мы разобрались с основами типа сохранения нового файла и рисования в указанном размере, давайте попробуем порисовать в еще большем разрешении, 32 на 32 пикселя. Также мы будем использовать палитру немного пошире, попробуйте AAP-Micro12 (сделана художником AdigunPolack). В этот раз мы будем рисовать лопату.
В отличие от спрайта в разрешении 16х16, в нашей работе мы можем уместить еще и обводку, поэтому давайте с нее и начнем. Вот вам мой порядок выполнения работы:
Шаг 1: Линии
Шаг 1Такой принцип работы мы называем pixel-perfect (дословно вплоть до пикселя), он отличается тем, что линия лишь в 1 пиксель шириной и соединяется с другими пикселями по диагонали. Когда мы делаем подобные линии, мы стараемся избегать нежелательных пикселей и углов, например:
В Aseprite есть очень удобная функция в настройках кисти, которая позволяет делать описанный выше процесс автоматически: выбрав инструмент кисть, нажмите на кнопку Pixel-perfect. Только не забудьте выключить это после работы с обводкой, так как в таком случае она будет вас раздражать.
Алгоритм Pixel-Perfect в AsepriteШаг 2: Основные цвета
Шаг 2Самое большое преимущество маленькой палитры в том, что у вас не будет слишком много вариантов выбора цветов, которые частенько сбивают с толку. Вот почему работать в больших палитрах гораздо сложнее, ибо всегда есть вероятность того, что выбранный вами цвет не имеет гораздо более подходящей альтернативы. Представляйте, что ваша работа — это паззл, экспериментируйте даже со странными и непонятными комбинациями цветов, пока вы не поймете, что нашли тот самый “идеальный цвет” для каждой зоны спрайта.
Шаг 3: Светотень
Шаг 3Используйте свою палитру так, чтобы оформить светотень самым оригинальным образом. Так как вы работаете с узкой палитрой, у вас само собой не будет всех цветов радуги с кучей вариантов их яркости, поэтому вам придется импровизировать.
Импровизируем с цветами для света и тенейНапример, слева вы видите работу, которую я нарисовал с помощью точно такой же палитры, как у вас — AAP-Mini12. Когда я рисовал этого зеленого мужчинку, у меня не было ни одного ярко-зеленого в палитре, поэтому я решил использовать ближайший цвет, доступный мне, которым оказался желтый. То же самое произошло и с тенью, я выбрал синий, потому что это был самый подходящий темный цвет. Но что если мы сделаем немного по-другому? Ведь ничего не мешает мне использовать синий вместо самого яркого и красный вместо самого темного, правда? Ну, не совсем:
Инвертированная светотеньЭффект получился довольно-таки крутым, но почему-то не покидает ощущение того, что что-то не так. Обычно холодные цвета должны быть тенью, а яркие — светом, иначе работа будет выглядеть странно. Это правило не железное, конечно, и вы можете найти массу исключений, но если вы не очень уверены в этом, то и не надо.
Шаг 4: Сглаживание и финальные штрихи
Шаг 4, финальныйВ этой части работы вы должны сделать пиксели не такими “острыми”. Ручное сглаживание — сложная тема, и нам несомненно потребуется отдельная статья лишь для одного ее обсуждения, но говоря кратко, вы используете полутоны для имитации “полупикселей” и более мягких углов. Но пока даже не зацикливайтесь на этом, сейчас вашей задачей является сделать ваш спрайт максимально разборчивым.
Еще на этом этапе неплохо бы поискать “сиротские пиксели” (англ. Orphan PIxels). Это такие пиксели, которые не относятся ни к группе других пикселей, ни к части сглаживания, как на планете слева:
Убираем одиночные пикселиВидите эти маленькие однопиксельные островки? Это сиротские пиксели, и как вы можете заметить, планета выглядит гораздо лучше, когда мы соединяем их с группой соседних пикселей того же цвета.
А что же по поводу звезд в этом примере? Ну, они тут для того, чтобы показать, что сиротские пиксели не всегда плохие, и эти звезды читаются именно так, как должны, создавая нужный нам шум и оттеняя фон.
Я хочу донести до вас, что не надо бездумно стирать сиротские пиксели, надо посмотреть и спросить себя: а нужно ли этому пикселю вообще быть одиночным?
А что теперь?
А теперь вам нужно экспериментировать с количеством цветов в палитре и разрешением! Но делайте это постепенно, начните, к примеру, с 48 на 48 пикселей и 16 цветов в палитре. Если вы действительно только начали, я настоятельно рекомендую вам избегать анимаций и для начала привыкнуть к статичным изображениям.
Я выбрал еще немного гайдов по пиксель артингу, которые мне нравятся. Если вы хотите развиваться еще больше, то я рекомендую к прочтению следующее:
Также я делаю немного других туториалов по разным аспектам пиксель арта и гейм дизайна, вы можете найти их здесь:
Часть 2 уже доступна тут!
(Примечание переводчика: Ну что же, вот мои руки и дошли до первой части этого замечательного гайда. Прямо сейчас я занимаюсь переводом второй части, а пока хочу поблагодарить вас за уделение внимания моему переводу. Творческих успехов вам, удачи!)
Как рисовать пиксель арт. Пошаговое руководство – CoreMission
В туториале «Как рисовать пиксель арт», состоящем из 10 шагов, я научу вас создавать «спрайт» (отдельный двухмерный персонаж или объект). Сам термин, конечно же, пришёл из видео-игр.
Я научился создавать пиксель арт, так как он был мне нужен для графики в моей игре. Спустя годы тренировок, я приловчился и начал понимать, что пиксель арт – это скорее искусство, чем просто инструмент. Сегодня пиксель арт очень популярен среди разработчиков игр и иллюстраторов.
Данный туториал был создан много лет назад для того, чтобы научить людей простым концептам создания пиксель арт, но многократно дополнялся, так что он значительно отличается от первоначальной версии. В сети много туториалов на эту же тематику, но мне все они кажутся слишком сложными или затянутыми. пиксель арт – это не наука. Вы не должны рассчитывать векторы во время создания пиксель арт.
Инструменты
Одним из главных преимуществ создания пиксель арт является то, что вам не нужны какие-то продвинутые инструменты – графического редактора, установленного на вашем компьютере по умолчанию должно хватить. Стоит упомянуть, что существуют программы, разработанные специально для создания пиксель арт, вроде 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).
Шейдинг
Шейдинг – одна из важнейших частей квеста на получение статуса полубога пикселинга. Именно на этом этапе спрайт или начинает выглядеть лучше, или же превращается в странную субстанцию. Следуйте моим указаниям и у вас точно всё получится.
Шаг первый: выбираем источник света
Сначала мы выбираем источник света. Если ваш спрайт является частью более крупного фрагмента, в котором присутствуют собственные источники освещения, вроде ламп, факелов и так далее. И все они могут по-разному влиять на то, как выглядит спрайт. Как бы то ни было, выбор удалённого источника света, вроде солнца – отличная идея для большинства пиксель арт. Для игр, к примеру, вам нужно будет создать максимально яркий спрайт, который потом можно будет подстроить под окружающую среду.
Я обычно делаю выбор в пользу удалённого источника света, расположенного где-то вверху перед спрайтом, так что освещается лишь его передняя часть и верх, а остальное подвергается шейдингу.
Шаг второй: непосредственно шейдинг
Как только мы выбрали источник света, можно начинать затемнять участки, которые находятся дальше всего от него. Наша модель освещения располагает к тому, что нижняя часть головы, руки, ноги и прочее должно быть покрыто тенью.
Напомним, что плоские вещи отбрасывать тень не могут. Возьмите лист бумаги, скомкайте его и прокатите по столу. Как вы поняли, что он уже не плоский? Вы просто увидели тени вокруг него. Используйте шейдинг для того, чтобы подчеркнуть складки в одежде, мускулатуру, мех, цвет кожи и так далее.
Шаг третий: мягкие тени
Второй шейд, который светлее первого, должен использоваться для создания мягких теней. Это нужно для областей, которые не освещаются на прямую. Их можно также использовать для перехода от светлого участка к тёмному, и на неровных поверхностях.
Шаг четвёртый: освещённые места
Места, на которые попадают прямые лучи света, также необходимо выделить. Стоит отметить, что хайлайтов должно быть меньше, чем теней, иначе они будут вызывать лишнее внимание, то есть выделяться.
Избавьте себя от головной боли, запомнив одно простое правило: сначала тени, потом хайлайты. Причина проста: если нет теней, слишком большие фрагменты будут засвечены, а когда вы нанесёте тени, их придётся уменьшать.
Несколько полезных правил
С тенями у новичков всегда много трудностей, так что вот несколько правил, которым вам нужно следовать во время шейдинга.
- Не пользуйтесь градиентами. Наиболее распространённая ошибка новичков. Градиенты выглядят ужасно и даже приблизительно не отражают то, как свет играет на поверхностях.
- Не используйте «мягкий шейдинг». Я говорю о ситуации, когда тень находится слишком далеко от контура, ведь тогда она выглядит весьма размытой, и препятствует выявлению источника света.
- Не используйте слишком много теней. Легко думать, что «чем больше цветов – тем реалистичней картинка». Как бы то ни было, в реальной жизни мы привыкли видеть вещи в тёмном или светлом спектрах, а наш мозг отфильтрует всё, что находится между ними. Используйте лишь две тёмных (тёмная и очень тёмная) и две светлых (светлая и очень светлая) и накладывайте их на цвет основы, а не друг на друга.
- Не используйте слишком похожие цвета. Особой нужды в использования практически одинаковых цветов нет за исключением случаев, когда вам нужно сделать действительно размытый спрайт.
Дизеринг
Сохранение цветов – вот на что создателям пиксель арт действительно нужно обратить внимание. Ещё один способ получить больше теней без использования большего количества цветов называется «дизеринг». Также как в традиционной живописи используется «штриховка» и «перекрестная штриховка», то есть вы, в прямом смысле, получаете что-то среднее из двух цветов.
Простой пример
Вот простой пример того, как, посредством дизеринга, из двух цветов можно создать четыре варианта шейдинга.
Продвинутый пример
Сравните картинку сверху (созданную с помощью градиента в фотошопе) с картинкой, созданной всего из трёх цветов, используя дизеринг. Учтите, что различные узоры могут быть использованы для создания «смежных цветов». Вам будет проще понять принцип, если вы сами создадите несколько узоров.
Применение
Дизеринг может придать вашему спрайту тот прекрасный ретро-вид, так как множество первых видео игр очень активно использовали данную технику ввиду малого количества доступных палитр цветов (если вы хотите увидеть множество примеров дизеринга – посмотрите на игры, разработанные для Sega Genesis). Я сам не очень часто использую этот способ, но для обучающих целей, я покажу как это можно применить на нашем спрайте.
Вы можете использовать дизеринг сколько вашей душе угодно, но стоит отметить, что лишь несколько людей применяют его действительно удачно.
Выборочное контурирование
Выборочное контурирование, которое также называют селаут (от английского selected outlining), является подвидом шейдинга контура. Вместо использования чёрной линии, мы подбираем цвет, который будет более гармонично смотреться на вашем спрайте. Кроме того, мы изменяем яркость этого контура ближе к краям спрайта, позволяя источнику цвета определять какие цвета нам стоит использовать.
До этого момента, мы использовали чёрный контур. В этом нет ничего плохого: чёрный отлично смотрится, а также позволяет качественно выделить спрайт на фоне окружающих его объектов. Но используя этот метод, мы жертвуем реализмом, который мог бы нам пригодиться в некоторых случаях, так как наш спрайт продолжает выглядеть мультяшно. Выборочное контурирование позволяет избавиться от этого.
Вы заметите, что я использовал селаут для смягчения рельефа его мышц. Наконец, наш спрайт начинает выглядеть как единое целое, а не как огромное количество отдельных фрагментов.
Сравните это с оригиналом:
- Сглаживание
Принцип работы сглаживания прост: добавление промежуточных цветов в изломы, чтобы они выглядели более гладко. Например, если у вас есть чёрная линия на белом фоне, то в её изломы по краю будут добавлены небольшие серые пиксели.
Техника 1: сглаживание изгибов
В общем, вам нужно добавить промежуточные цвета в места, где есть изломы, так как иначе линия будет выглядеть неровной. Если она всё ещё кажется неровной, добавьте ещё слой пикселей посветлее. Направление нанесения промежуточного слоя должно совпадать с направлением кривой.
Я не думаю, что могу объяснить это лучше, не усложняя. Просто посмотрите на картинку, и вы поймёте о чём я.
Техника 2: округление неровностей
Техника 3: затирание окончаний линий
Применение
Теперь, давайте применим сглаживание к нашему принту. Учтите, что, если вы хотите, чтобы ваш спрайт выглядел хорошо на фоне любого цвета, не стоит сглаживать внешнюю часть линии. В обратном случае, ваш спрайт окружён весьма неуместным ореолом на стыке с фоном, и поэтому будет слишком явно выделяться на любом фоне.
Эффект весьма незаметный, но при этом он имеет огромное значение.
Почему нужно делать это вручную?
Вы можете спросить: «Почему бы просто не применить фильтр графического редактора на наш спрайт, если нам нужно, чтобы он выглядел гладко?». Ответ также прост – ни один фильтр не сделает ваш спрайт таким же чётким и чистым, как ручная работа. Вы получите полный контроль не только над используемыми цветами, но и над тем, где их использовать. К тому же, вы лучше любого фильтра знаете, где сглаживание будет уместно, а где есть участки, пиксели в которых просто потеряют своё качество.
Отделка
Ух, мы уже достаточно близко подобрались к моменту, когда вы сможете выключить компьютер и достать из холодильника бутылочку холодного пива. Но он ещё не настал! Последняя часть посвящена тому, что отличает энергичного любителя от опытного профессионала.
Сделайте шаг назад и хорошенько посмотрите на ваш спрайт. Существует вероятность того, что он всё ещё выглядит «сыровато». Потратьте немного времени на совершенствование и убедитесь в том, что всё идеально. Неважно, насколько вы уже устали, впереди вас ждёт самая весёлая часть. Добавьте детали, чтобы ваш спрайт выглядел интереснее. Вот здесь как раз играют роль ваши умения и опыт пикселинга.
Вас мог удивлять тот факт, что всё это время у нашего Lucha Lawyer не было глаз, или что свёрток, который он держит – пуст. Собственно, причина кроется в том, что я хотел повременить с мелкими деталями. Также обратите внимание на отделку, которую я добавил на его повязки, ширинку на его штанах… ну и, кем бы был человек без его сосков? Также я немного затемнил нижнюю часть его торса, чтобы рука больше выступала на фоне тела.
Наконец вы закончили! Lucha Lawyer выступает в лёгком весе, ведь в нём всего 45 цветов (а может это и супертяжёлый – всё зависит от ограничений вашей палитры) и его разрешение составляет примерно 150 на 115 пикселей. Вот теперь уже можете открыть пиво!
Прогресс целиком:
Это всегда забавно. Вот гифка, демонстрирующая эволюцию нашего спрайта.
Советы для начинающих пиксель артистов
- Изучайте азы искусства и практикуйте традиционные техники. Все знания и умения, необходимые для черчения и рисования можно применить и в пикселинге.
- Начинайте с маленьких спрайтов. Самое сложно – научиться размещать множество деталей, используя минимальное количество пикселей, чтобы не делать такие большие спрайты, как мой.
- Изучайте работы художников, которыми вы восхищаетесь и не бойтесь быть неоригинальными. Лучший способ обучения – повторение фрагментов чужих работ. На выработку собственного стиля уходит немало времени.
- Если у вас нет планшета, купить его. Постоянные нервные срывы и стрессы, вызванные непрерывным кликанием левой кнопкой мышки – это не забавно, да и вряд ли впечатлит представителей противоположного пола. Я использую небольшой Wacom Graphire2 – мне нравится его компактность и портативность. Вам, возможно, придётся по душе более крупный планшет. Перед покупкой, проведите небольшой тест-драйв.
- Делитесь своими работами с другими, чтобы узнать их мнение. Это, возможно, также будет неплохим способом найти новых друзей-гиков.
P.S.
Оригинал статьи находится здесь. Если у вас есть ссылки на классные туториалы, которые нужно перевести присылайте их в нашу тусовую группу разработчиков игр. Или пишите прямо в сообщения группы вконтакте!
27 уроков по созданию пиксельных иллюстраций
Серия уроков, которая поможет освоить принципы создания пиксельных иллюстраций, а также их дальнейшей анимации.
В уроках также нассмотрены несколько программ, которые наилучшим образом подходят для создания пиксельных иллюстраций и персонажей для анимации.
Pixel Game Art Animated Background Tutorial in Photoshop
Pixel Game Art Design in Photoshop: Character animation & background tutorial
How create Pixel Art For Games – Tutorial – 8Bit Graphic Design
Pixel art/ Adam’s Nightmare indie game/ Drawing process
Как рисовать Пиксель Арт в Фотошопе
Speed Pixel Art #2 – A Japanese Tree
My secret way of improving fast
Pixel Art Timelapse: Necromancer Cast Animation
3 PixelArt Techniques/Common Mistakes
How To Draw Isometric Pixel Art | Photoshop Tutorial
How to make City Building background tiles
How To Pixel Art Tutorial Part 1: What Programs?
How To Pixel Art Tutorial Part 2: Basic Heart
How To Pixel Art Tutorial Part 3: Dithering
How To Pixel Art Tutorial Part 4: Form
How To Pixel Art Tutorial Part 5: Outlines
How To Pixel Art Tutorial Part 6: Pixel People
How To Pixel Art Tutorial Part 7: Sword & Sworcery
How To Pixel Art Tutorial Part 8: Background
How To Pixel Art Tutorial Part 9: Colour & Depth
How To Pixel Art Tutorial Part 10: Tile Basics
How To Pixel Art Tutorial Part 11: Character Design
How To Pixel Art Tutorial Part 12: Animation Basics
How To Pixel Art Tutorial Part 13: Base Sprite for Animation
How To Pixel Art Tutorial Part 14: Setting Up Layers
How To Pixel Art Tutorial Part 15: Idle Animation
How To Pixel Art Tutorial Part 16: Walk Cycle
Pixel art в GIMP для начинающих
Это адаптация урока по созданию pixel art в Фотошопе. Статья оставлена практически в первозданном виде. Публикация и адаптация согласованы с автором, но с аккаунта на этом сайте он вряд ли ответит.
1. История пиксель арта (очень коротко)
Юрий Гусев, он же Fool.
Pixel art (пишется без дефиса) или пиксельная графика — направление цифрового искусства, которое заключается в создании изображений на уровне пикселя (т. е. минимальной логической единицы, из которой состоит изображение). Далеко не все растровые картинки являются пиксель артом, хотя все они и состоят из пикселей. Почему? Потому что в конечном счёте понятие pixel art вмещает в себя не столько результат, сколько процесс создания иллюстрации. Пиксель за пикселем, и только так. Если вы возьмёте цифровое фото, сильно его уменьшите (так, чтобы пиксели стали видны) и заявите что нарисовали его с нуля — это будет настоящий подлог. Хотя наверняка найдутся наивные простаки, которые вас похвалят за кропотливый труд.
Это — не pixel art. Хотя изображение цифровое, создано с помощью компьютера и состоит из пикселей — оно НЕ рисовалось на уровне точек. К сожалению, практически недоказуемо, потому что автор всегда может заявить обратное. Вот почему на конкурсах по пиксельной графике обычно одно из условий -предоставить иллюстрацию на разных этапах работы (WIP — work in progress).
Сейчас неизвестно, когда точно зародилась эта техника, корни теряются где-то в начале 1970-х. Однако приём составления изображений из малых элементов восходит к куда более древним формам искусства, таким как мозаика, вышивание крестиком, ковроплетение и бисероплетение. Само же словосочетание «pixel art» как определение пиксельной графики впервые было использовано в статье Адель Голдберг и Роберта Флегала в журнале Communications of the ACM (декабрь 1982-го).
Разновидность пиксель арта — т. н. line art. Неизвестный автор.
Наиболее широкое прикладное применение pixel art получил в компьютерных играх, что неудивительно — он позволял создавать изображения, нетребовательные к ресурсам и выглядящие при этом по-настоящему красиво (при этом отнимающие у художника немало времени и требовавшие определённых навыков, а потому подразумевающие хорошую оплату труда). Расцветом, наивысшей точкой в развитии официально называют видеоигры на приставках 2-го и 3-го поколения (начало 1990-х). Дальнейший прогресс технологий, появление сперва 8-битного цвета, а затем и True Color, развитие трёхмерной графики — всё это со временем оттеснило pixel art на второй и третий планы, а потом и вовсе стало казаться, что пиксельной графике пришёл конец.
Наивысшая точка развития pixel art’а в видеоиграх. Хотя официально апогей приписывают 2-му и 3-му поколениям, на мой взгляд он пришёлся несколько позже. Именно на приставках 4-го поколения (Sega MD, SNES, TurboGrafx-16 и Neo Geo) вышли игры с самой красивой и безупречной по технике пиксельной графикой. Это несмотря на то, что технология наступала на пятки и повсеместно предпринимались попытки ввести в игры full motion video, а также спрайты, созданные на основе фотографий, видеоматериалов и заранее визуализированных 3D-моделей.
Как ни странно, но именно господин Научно-технический прогресс, задвинувший в середине 90-х пиксельную графику на последние позиции, и вернул её позже в игру — явив миру мобильные устройства в виде сотовых телефонов и КПК. Ведь каким бы полезным ни был новомодный дивайс, мы-то с вами знаем — если на нём нельзя хотя бы разложить пасьянс, грош ему цена. Ну а там где есть экран с невысоким разрешением, там и pixel art. Как говорится, добро пожаловать назад.
У дизайнеров из «eBoy» было трудное детство, они провели его в восточной Германии и были начисто лишены возможности наслаждаться изящными искусствами. Потому не научились рисовать ничего кроме пиксельной графики. Но главная их заслуга — они убедили рекламодателей, что pixel art это модно и круто. Если по мнению дизайнеров из «eBoy» ГДРовские игрушки и одежда были некрасивыми — интересно, что бы они сказали про советские?
Разумеется, свою роль в возвращении пиксельной графики сыграли различные ретроградно настроенные элементы, любящие поностальжировать над старыми-добрыми играми детства, приговаривая при этом: «Эх, теперь такого не делают»; эстеты, способные оценить красоту пиксель арта, и инди-разработчики, не воспринимающие современные графические красоты (а иногда, правда редко, элементарно не умеющие их реализовать в собственных проектах), оттого и ваяющие pixel art. Но давайте всё-таки не будем сбрасывать со счетов сугубо коммерческие проекты — приложения для мобильных устройств, рекламу и web-дизайн.
Еще одна заметная фигура — голландец Хэнк Ниебург, начавший карьеру пиксельного художника аж в 1989-м. В конце 90-х был вынужден зарабатывать на жизнь вебдизайном и едва сводил концы с концами, но с 2000-го снова рисует pixel art, теперь уже для мобильных игр.
Так что сейчас pixel art, что называется, широко распространён в узких кругах и заработал себе своеобразный статус искусства «не для всех». И это несмотря на то, что для простого обывателя он предельно доступен, ведь чтобы работать в этой технике, достаточно иметь под рукой компьютер и простейший графический редактор! (умение рисовать, между прочим, тоже не помешает) Хватит слов, ближе к делу!
Pixel dolls, развлечение для взрослых девочек, ненаигравшихся в куклы. Кроме шуток, это тоже pixel art, и работы некоторых авторов вызывают восхищение как среди фанатов пиксельной графики, так и среди ценителей прекрасного. pixparadise.net
2. Графический редактор
Что нужно для создания пиксель арта? Как сказал выше, достаточно компьютера и любого графического редактора, способного работать на уровне пикселей. Рисовать можно где угодно, хоть на Game Boy, хоть на Nintendo DS, хоть в Microsoft Paint (другое дело, что рисовать в последнем крайне неудобно). Есть великое множество растровых редакторов, многие из них бесплатны и достаточно функциональны, так что с программным обеспечением каждый может определится самостоятельно.
Microsoft Paint — оружие последнего шанса, когда рисовать уже совсем негде. Это «круги», во всяком случае Paint считает именно так. Особенно примечателен уродец в центре, который даже не симметричен.
GIMP прекрасно подходит для создания пиксель арта, для этого есть инструмент «Карандаш», в котором можно использовать и динамику рисования, а заливать цветом можно при помощи инструмента «Заливка». Если запереть альфа-канал слоя, то можно заливать одним цветом несвязанные области на всём слое просто перетаскивая цвет из палитры на холст.
Итак, вам нужен любой графический редактор, позволяющий рисовать инструментом в один квадратный пиксель (пиксели бывают и неквадратные, например круглые, но они нас в данный момент не интересуют). Если ваш редактор поддерживает какой-никакой набор цветов — отлично. Если также позволяет сохранять файлы — просто замечательно. Хорошо бы еще умел работать со слоями, поскольку работая над достаточно сложной картинкой, удобнее разложить её элементы по разным слоям, но по большому счёт это вопрос привычки и удобства.
Тоже своего рода пиксель арт, картина составлена из… кубиков Рубика! 1330 кубиков, размер полотна 116×107 см, автор Джон Куигли (John Quigley).
Начнём? Вы наверное ждёте списка каких-то секретных приёмов, рекомендаций, которые научат вас рисовать pixel art? А правда в том, что ничего такого по большому счёту нет. Единственный способ научиться рисовать пиксельную графику — это рисовать самому, пробовать, пытаться, не бояться и экспериментировать. Не стесняйтесь повторять чужие работы, не бойтесь показаться неоригинальным (просто не выдавайте чужое за своё, хе-хе). Внимательно и вдумчиво анализируйте работы мастеров (не мои) и рисуйте, рисуйте, рисуйте. Несколько полезных ссылок вас ждёт в конце статьи.
3. Общие принципы пиксель арта
И всё же существует несколько общих принципов, знать которые не помешает. Их действительно немного, я называю их «принципами», а не законами, потому что они носят скорее рекомендательный характер. В конце-концов, если у вас получится нарисовать гениальную пиксельную картинку в обход всех правил — кому до них дело?
Самым основной принцип можно сформулировать так: минимальной единицей изображения является пиксель, и по возможности все элементы композиции должны быть соразмерны ему. Расшифрую: всё, что вы нарисуете, состоит из пикселей, и пиксель должен читаться во всём. Это не значит, что в рисунке вообще не может быть элементов, к примеру, 2×2 пикселя, или 3×3. Но строить изображение всё же предпочтительно из отдельных пикселей.
Для наглядности приведу несколько примеров с типичными ошибками и вариантами их исправления:
За исключением ладоней у человечка, которые вроде как являются авторской задумкой, все элементы, в которых толщина линии превысила 1 пиксель, нужно исправить.
Ноги у человечка лучше выглядеть не стали, это верно, к ногам еще вернёмся. В качестве примера «из жизни» приведу онлайновый паззл Zoo keeper:
http://pc.kiteretsu.jp/games/zka/zka.htm
Почему художник решил сделать обводку в два пикселя, в то время как сами элементы нарисованы попиксельно? Возможно, хотел отделить тайлы от фона. А прочую внутриигровую графику рисовал с той же жирной обводкой, чтобы сохранить единую стилистику, плюс такая явная обводка придаёт изображению некую выразительность. Тем не менее — что называется, не наш метод.
Кадр из игры Duct. Казалось бы, всё в порядке, но толщина обводки и прочих элементов рисунка всюду колеблется между 1-м и 2-мя пикселями.
Из этого принципа можно вывести простое правило: обводка и вообще все линии рисунка должны быть толщиной в один пиксель (за редким исключением).
То самое исключение, Jimmy Two Shoes. Здесь пиксельная графика стремится повторить стиль оригинального мультфильма, на персонажах которого основана игра, и в котором все персонажи имеют чётковыраженную обводку.
Я вовсе не утверждаю, что это неправильно. Но это всё же не очень красиво. А чтобы было красиво, запомним еще одно правило: рисовать без изломов, скруглять плавно. Есть такое понятие как изломы — фрагменты, выбивающиеся из общего порядка, они придают линиям неровный, зазубренный вид (в англоговорящей среде пиксельных художников их называют jaggies):
Изломы лишают рисунок естественной плавности и красоты. И если фрагменты 3, 4 и 5 очевидны и исправляются легко, с прочими дело обстоит сложнее — там нарушена длина одного-единственного кусочка в цепи, казалось бы мелочь, но мелочь заметная. Чтобы научиться видеть такие места и избегать их, требуется небольшая практика. Излом 1 выбивается из линии, потому что это единичный пиксель — в то время как на участке, где он затесался, линия состоит из сегментов по 2 пикселя.
Чтобы избавиться от него, я смягчил вход кривой в изгиб, удлинив верхний сегмент до 3-х пикселей, и перерисовал всю линию сегментами по 2 пикселя. Изломы 2 и 6 идентичны друг другу — это уже фрагменты длиной 2 пикселя на участках, построенных единичными пикселями.
Избежать подобных изломов при рисовании поможет элементарный набор примеров наклонных прямых, который можно встретить практически в каждом руководстве по пиксельной графике (моё не исключение):
Как видите, прямая линия составляется из отрезков одинаковой длины, смещаемых по мере её прорисовки на один пиксель — только таким образом достигается эффект линейности. Наиболее распространённые способы построения с длиной отрезка 1, 2 и 4 пикселя (встречаются и другие, но представленных вариантов должно хватить для реализации практически любой художественной задумки). Из этих трёх самым популярным можно уверенно назвать длину отрезка в 2 пикселя: рисуем отрезок, сдвигаем перо на 1 пиксель, рисуем еще один отрезок, сдвигаем перо на 1 пиксель, рисуем еще отрезок:
Несложно, верно? Нужна лишь привычка. Умение рисовать наклонные прямые с шагом в 2 пикселя поможет в изометрии.
Вообще прямые линии это здорово — но только до тех пор, пока не встанет задача нарисовать что-нибудь нерукотворное. Тут нам понадобятся кривые, и много самых разных кривых. И берём на вооружение простое правило закругления кривых линий: длина элементов кривой должна уменьшаться/увеличиваться постепенно.
Выделенные красным участки нарушают плавность скругления, потому что их длина резко выбивается из длины соседних фрагментов.
Выход из прямой на скругление ведётся плавно, я обозначил длину каждого сегмента: 5 пикселей, 3, 2, 2, 1, 1, снова 2 (уже вертикально), 3, 5 и далее. Не обязательно ваш случай будет использовать такую же последовательность, здесь всё зависит от плавности, которая требуется. Еще пример скругления:
Опять же, избегаем изломов, которые так портят картинку. Если есть желание проверить усвоенный материал, здесь у меня нарисованный неизвестным автором skin для Winamp’а, заготовка:
На рисунке есть и грубые ошибки, и просто неудачных скругления, и изломы встречаются — попробуйте исправить картинку на основе того, что уже знаете. На этом с линиями у меня всё, предлагаю немного порисовать.
И пусть вас не смущает простота примеров, научиться рисовать можно только рисуя — даже такие простейшие вещи. Те же eBoy составляют свои огромные красивые картины из мелких деталей, многие из которых нарисованы отдельно друг от друга.
4. Практикуемся в рисовании
4.1. Рисуем склянку с живой водой
1. Форма объекта, пока можно не использовать цвет.
2. Красная жидкость.
3. Меняем цвет стекла на голубой, добавляем затенённые участки внутри пузырька и светлый участок на предполагаемой поверхности жидкости.
4. Добавляем белые блики на пузырьке, и тень шириной 1 пиксель тёмно-красного цвета на приграничных к стенкам пузырька областях жидкости. Смотрится вроде неплохо, а?
5. Аналогично рисуем склянку с синей жидкостью — здесь тот же цвет стекла, плюс три оттенка синего для жидкости.
4.2. Рисуем арбуз
1. Нарисуем круг и полукруг — это будут арбуз и вырезанная долька.
2. Обозначим вырез на самом арбузе, а на дольке — границу между корочкой и мякотью.
3. Заливка. Цвета из палитры, средний оттенок зелёного — цвет корки, средний красный — цвет мякоти.
4. Обозначим переходный участок от корки к мякоти.
5. Светлые полосы на арбузе (наконец-то он похож сам на себя). И конечно — семечки! Если скрестить арбуз с тараканами, будут расползаться сами.
6. Доводим до ума. Бледно-розовый цвет используем для обозначения бликов над семечками в разрезе, и, выкладывая пиксели в шахматном порядке, добиваемся от вырезанной дольки некоего подобия объёма (метод называется dithering, о нём позже). Тёмный красный оттенок используем, чтобы обозначить затенённые места в разрезе арбуза, и тёмно-зелёный (опять же пиксели в шахматном порядке) — чтобы придать объём самому арбузу.
5. Dithering (смешивание цветов)
Дизеринг, или смешивание — техника перемешивания определённо упорядоченным (не всегда) образом пикселей в двух граничащих областях разного цвета. Самый простой, распространённый и эффективный способ — чередовать пиксели в шахматном порядке:
Приём появился на свет благодаря (или скорее вопреки) техническим ограничениям — на платформах с ограниченными палитрами дизеринг позволял, замешивая пиксели двух разных цветов, получить третий, отсутствующий в палитре:
Наложение на участок красного цвета синих пикселей в шахматном порядке создаёт иллюзию фиолетового цвета.
Но и позже, когда количество цветов перестало быть проблемой, дизеринг можно было видеть в видеоиграх в роли тени (чтобы не нагружать железо полупрозрачностью, художники часто обозначали тень участком чёрных пикселей, расположенных в шахматном порядке и накладывавшихся на фон).
Game Boy, 4 цвета (чёрный, белый и два оттенка серого). Настоящий вызов художнику!
Сейчас, в эпоху безграничных технических возможностей, многие говорят что необходимость в дизеринге отпала сама собой. Однако грамотное его использование может придать вашим работам характерный ретро-стиль, узнаваемый всеми любителями старых видеоигр. Лично я люблю использовать dithering. Не очень хорошо им владею, тем не менее, люблю.
Еще два варианта дизеринга:
Расширенная версия базового дизеринга, с заводом отдельных пикселей смешиваемых цветов.
Продвинутая версия, позволяет получить наиболее плавный переход от одного цвета к другому (путём кропотливого отрисовывания).
Что нужно знать про дизеринг, чтобы уметь им пользоваться. Минимальная ширина зоны смешивания должна быть не меньше 2-х пикселей (те самые шашечки). Больше — можно. Меньше лучше не делать.
Ниже пример неудачного дизеринга. Несмотря на то, что подобную технику можно часто встретить на спрайтах из видеоигр, нужно отдавать себе отчёт в том, что телевизионный экран существенно сглаживал изображение, и такая гребёнка, да еще в движении, глазом не фиксировалась:
Ну, хватит теории. Предлагаю еще немного попрактиковаться.
6. Более сложные примеры
6.1. Рисуем меч
Такой несерьёзный меч для несерьёзного проекта:
1. Форма. Здесь всё просто.
2. Начинаем распределять цвет. Я изменил изначально чёрный на цвет тёмной стали (хочется верить, что похожий) и залил меч серым.
3. Придаём форму за счёт светотени и дополнительной расцветки (обратите внимание — я кое-где повторно изменил цвет обводки, сделав его еще светлее). Условимся, что свет на меч падает слева-сверху, из-за плеча наблюдающего, поэтому блики (наиболее светлые участки освещённых поверхностей) располагаются на выступающих элементах слева, тени — справа и снизу.
4. Доводим наш миниатюрный шедевр до совершенства. Усиливаем эффект объёма на яблоке и сферических элементах крестовины (левый и правый «шарики»), на обмотке рукояти. Обратите внимание на длинную полосу, идущую по лезвию — дол (некоторые называют его кровотоком, полагая, что он служит для стекания крови проткнутого врага). Название здесь неважно, суть в том, что это жёлоб и центральная его часть освещена меньше всего, в то время как края наоборот. Справа от дола, чтобы усилить эффект глубины, я обозначил чёткий блик (никогда нелишне хорошенько изучить объект, который вы собираетесь изобразить — не для того чтобы сыпать терминами, а чтобы иметь чёткое представление об устройстве и особенностях конструкции). Вроде получился довольно симпатичный меч, а?
5. Я не стал останавливаться на достигнутом и сильно состарил наше оружие, вообразив, как мог бы выглядеть клинок, пролежи он сотню лет в подземелье. Цвета заменены более тёмными (соседними из той же палитры), я ввёл больше чёрного (на предыдущем рисунке лишь три действительно чёрных точки, одна на стыке дола с крестовиной усиливала эффект глубины тени, две другие подчёркивали обмотку рукояти). Выбоины и сколы на лезвии, крестовина и яблоко серьёзно повреждены (наверняка в жестокой сечи), обмотка рукояти порвана. В общем, перед нами настоящая древность. Придумаем достойную легенду и поставим на видном месте, как семейную реликвию.
6.2. Робот
Один из самых распространённых способов рисования «с нуля» — изобразить черновой вариант (не попиксельно, а традиционно, рисуя либо мышью, либо на планшете), а после почистить его, исправить (при необходимости) и довести до ума. Также часто художники рисуют на основе своих бумажных черновиков, карандашных рисунков, набросков и прочих «почеркушек» — сканируют их и обрисовывают попиксельно. Дело привычки. Я обычно начинаю с чернового наброска:
Теперь чистка, стираю лишние пиксели и дорисовываю недостающие:
Закругление согласно простому правилу плавности, все прямые линейные. Добавляю ноги:
На самом деле рисовать полноценные конечности, честно говоря, поленился. Хотелось поскорее закончить урок, плюс массивный робот на тонких ножках — по-моему достаточно забавно. Помимо того, что ноги нарисованы обыкновенными прямыми (что здорово сэкономило мне время), я не стал придавать им объём — это не цилиндры, а пока что обычные плоские прямоугольники. Объёма добьюсь позже, с помощью теней и бликов. Кстати, еще одна хитрость, на которую пошёл сознательно — бедро левой ноги построено в точности как голень правой, и наоборот, так что фактически, вместо того чтобы нарисовать четыре цилиндра, я схитрил и нарисовал два наклонных прямоугольника.
Дополнительный элемент в виде панели на груди и трёх… лампочек? Не знаю, пока не решил. Но понял, что хочу сделать торс робота телескопическим, как раскладной стаканчик, поэтому пришлось слегка откорректировать линию изгиба, добавив небольшие но заметные зазоры на стыке сегментов. Теперь заливка!
Основной цвет, плюс я заменил цвет обводки с чёрного на тёмно-синий. Смотрится по-прежнему пустовато, но это ничего, исправлю тенями. Условлюсь, что источник света где-то за сверху за моим левым плечом, следовательно, тени лягут в основном справа и снизу. Сначала грудь, как самый крупный элемент:
Тень накладываю в 2 этапа, сперва самую тёмную, участком шириной максимум 3-4 пикселя (т. е. от линии обводки вглубь объекта, в данном случае, тень занимает область шириной 3, самое большое 4 пикселя. Это не закономерность, цифры запоминать не нужно, для другого предмета с другим освещением, другим материалом и другим настроением тень наверняка ляжет иначе). Далее более светлая тень, так же как и основная плавно сходящая на нет. Обратите внимание, на закруглённых участках груди тень кое-где лежит совсем небольшими фрагментами, по одному пикселю — это также придаст рисунку больше плавности.
Особое внимание обращаю на грудную панель: теневые участки толщиной в 1 пиксель, на освещённой кромке появляется чёткий блик, для которого использую самый светлый цвет из палитры.
Также приглядитесь к глазам, у них уже есть блики, основной цвет и тень. Кладу тень по всему роботу:
Теперь блики на поверхностях, которые должны отразить свет от источника прямо в глаза наблюдателю (художнику):
Хм, совсем другое дело. Даже прямоугольники-ножки выглядят как цилиндры! Я решил, что три кружка на груди могучего робота будут ракетницами, закрытыми люками, так что это по сути небольшие углубления; тень от левой кромки и блик по правой (и нижней).
Здесь сложно давать какие-либо советы, кроме одного — учитесь рисовать, изучайте тени, теорию света. Двигаемся дальше, дизеринг:
Выбираем любую границу между двумя цветами и выкладываем пиксели этих цветов в шахматном порядке. Самые светлые пятна я оставил без дизеринга, что подчёркивает резкость блика. Также дизеринга нет на ногах — слишком миниатюрные элементы, его там просто негде выкладывать. Теперь финальный штрих, заклёпки, обозначающие зубы, и игривая антенна:
Если внимательно рассмотреть заклёпки-зубы, видно, что это всего лишь фрагменты 2 на 2 пикселя, верхний левый окрашен в цвет бликов, два соседних с ним — цвет светлой тени, и правый нижний — цвет основной тени. Просто, да? При этом даже несмотря на то, что в некоторых местах пиксели заклёпок совпадают с цветом соседних точек, при отдалении (уменьшении масштаба рисунка до 100 или 200%) сохраняется полное впечатление того, что это выделяющиеся объекты. Еще в палитре появился дополнительный близкий к чёрному оттенок — я решил с его помощью сделать темнее суставы на ногах, и замешать в шахматном порядке пиксели в суставы на руках. Чистый чёрный я попробовал, тень получалась неестественной, а дизеринг с самым тёмным оттенком дал нужный эффект.
Ну и самый последний штрих, мне кажется, левая рука расположена не очень удачно — вырезаю её и сдвигаю вниз и влево. Вот так, кажется, самое то:
WIP, тот самый Work in Progress:
Собственно, на этом всё. Ну а напоследок несколько полезных ссылок:
11 лучших инструментов Pixel Art для создания Pixel Perfect Artwork
Рисование на уровне пикселей занимает свою нишу в изобразительном искусстве. С помощью простых пикселей создаются настоящие шедевры. Конечно, создавать такие рисунки можно и на бумажном листе, но куда проще и правильнее делать картины при помощи графических редакторов. В этой статье мы подробно разберем каждого представителя подобного софта.
Фон
Пиксель-арт — форма цифрового художественного искусства, в котором изменения вносятся на уровне пикселей. В основном он ассоциируется с графикой видеоигр 80-х и 90-х годов. Тогда художникам приходилось учитывать ограничения памяти и низкого разрешения. Сейчас пиксель-арт все еще популярен в играх и как художественный стиль в целом, несмотря на возможность создания реалистичной 3D-графики. Почему? Даже если не брать в расчет ностальгию, создание крутой работы в таких жестких рамках — приятный и стоящий челлендж.
Порог вхождения в пиксель-арте сравнительно низкий по сравнению с традиционным артом и 3D-графикой, что привлекает инди-разработчиков. Но это вовсе не означает, что будет просто доделать
игру в этом стиле. Я видел много инди-девелоперов с пиксель-арт метроидваниями на краудфандинговых платформах. Они думали, что закончат все за год, но на самом деле им нужно было еще лет шесть.
Metal Slug 3 (Arcade). SNK, 2000 год
Пиксель-арт на том уровне, на котором большинство хочет его создавать, отнимает много времени, а кратких обучалок очень мало. Работая с 3D-моделью вы можете вращать ее, деформировать, перемещать отдельные ее части, копировать анимации с одной модели на другую и так далее. Пиксель-арт высокого уровня почти всегда отнимает кучу сил на скрупулезное размещение пикселей на каждом фрейме.
В общем, я предупредил.
А теперь немного о моем стиле: в основном я рисую пиксель-арт для видеоигр и в них же нахожу вдохновение. В частности я фанат Famicom/NES, 16-битных консолей и аркад 90-х годов. Пиксель-арт моих любимых игр того времени можно описать как яркий, уверенный и чистый (но не слишком), его нельзя назвать жестким и минималистичным. В этом стиле я работаю сам, но вы легко можете применять идеи и техники из этого туториала для создания совершенно других вещей. Изучайте работы разных художников и создавайте пиксель-арт, который нравится вам!
Давайте рисовать!
Здесь мы сразу видим множество панелей и менюшек, но не волнуйтесь, пока нам будет нужна лишь самая малая их часть. Главный инструмент — Карандаш, который всегда должен быть в один пиксель шириной, и с помощью которого мы и будем размещать пиксели в специальном поле. Нажмите на иконку инструмента или на английскую клавишу B, а затем на экран, чтобы разместить пиксель того цвета, который вы сейчас используете.
Рабочая зона в Aseprite
Слева вы можете увидеть палитру с парочкой установленных по умолчанию цветов. Давайте поменяем их на другие, более простые. Нажмите на третью иконку над палитрой (Pressets) и выберите ARQ4 (хорошую палитру под авторством художника Endesga), которую вы будете использовать для своего первого творения.
А теперь, используя только четыре цвета слева, постарайтесь нарисовать кружку.
Будьте вольны пользоваться моей работой как предметом вашего вдохновения. Если вы вдруг сделаете ошибку, нажмите alt+ЛКМ по пустой зоне вне вашего рисунка, тем самым подобрав прозрачный цвет, которым можно пользоваться как ластиком. Ну или вы можете использовать, собственно, сам инструмент “Ластик” (горячая клавиша на английскую E).
Вы, скорее всего, заметили, что рисование в таком низком разрешении здорово отличается от любого другого рисования. Все должно быть просчитано, и каждый пиксель имеет очень большой вес. Запомните это.
Также вы можете немного поэкспериментировать с другими кнопками на панели инструментов. Нужно заметить, что некоторые инструменты открывают еще несколько альтернативных инструментов, если на них нажать. Пока вам следует избегать инструмента “Блюр”, который добавляет кучу ненужных нам цветов.
Теперь давайте сделаем еще больше спрайтов! Попробуйте нарисовать череп, меч и лицо человека. Но в этот раз без примера моих работ. Если вы почувствовали, что работа не влезает в эти рамки размера, то не волнуйтесь — это нормально, попробуйте что-либо немного поменять или попробуйте сначала. Работа в таком низком разрешении очень сложная и иногда напоминает паззл. Вот еще одна статья, которую я написал, посвященная работе в низком разрешении: [link]
Если вы так хотите, то вот вам моя версия этих трех спрайтов. Пожалуйста, не нажимайте сюда до того, как вы закончите рисовать их сами. [skull, sword and human face].
Подобные упражнения всегда хороши. Если вы хотите продолжать практиковаться, то попробуйте сделать еще больше спрайтов в рамках такого низкого разрешения.
Софт
Базовые цифровые инструменты для пиксель-арта — Зум (Zoom) и Карандаш (Pencil), чтобы размещать пиксели. Также вам пригодятся Линия (Line), Фигура (Shape), Выбрать (Select), Переместить (Move) и Заливка (Paint Bucket). Есть много бесплатного и платного ПО с таким набором инструментов. Я расскажу про самые популярные и те, которыми пользуюсь сам.
Paint (бесплатно)
Если у вас Windows, встроенный в нее Paint — примитивная программа, но в ней есть все инструменты для пиксель-арта.
Piskel (бесплатно)
Неожиданно функциональный редактор пиксель-арта, который запускается через браузер. Можно экспортировать работу в PNG или анимированный GIF. Отличный вариант для новичков.
GraphigsGale (бесплатно)
GraphicsGale — единственный редактор из тех, о которых я слышал, разработанный именно для пиксель-арта и включающий инструменты анимации. Его создала японская компания HUMANBALANCE. С 2020 года он распространяется бесплатно и до сих пор пользуется спросом, несмотря на рост популярности Aseprite. К сожалению, работает он только на Windows.
Aseprite ($)
Пожалуй, самый популярный редактор на данный момент. Открытый исходный код, куча возможностей, активная поддержка, версии для Windows, Mac и Linux. Если вы серьезно взялись за пиксель-арт и все еще не нашли нужный редактор, возможно, это то, что нужно.
GameMaker Studio 2 ($$+)
GameMaker Studio 2 — превосходный 2D-инструмент с хорошим редактором спрайтов (Sprite Editor). Если вы хотите создавать пиксель-арт для для собственных игр, очень удобно все делать в одной программе. Сейчас я использую этот софт в работе над UFO 50, коллекцией 50 ретро-игр: спрайты и анимации создаю в GameMaker, а тайлсеты — в Photoshop.
Photoshop ($$$+)
Photoshop — дорогой софт, распространяется по подписке, не заточен под пиксель-арт. Не рекомендую приобретать его, если вы не занимаетесь отрисовкой иллюстраций в высоком разрешении, или вам не нужно проводить сложные манипуляции с картинкой, как мне. В нем можно создавать статичные спрайты и пиксельные работы, но он довольно сложный по сравнению со специализированным софтом (например, GraphicsGale или Aseprite).
Pro Motion NG
Эта программа идеальна почти во всем, начиная с продуманного интерфейса, где есть возможность перемещать окна независимо от главного в любую точку и изменять их размер, и заканчивая автоматическим переключателем с пипетки на карандаш, что является просто невероятно удобной фишкой.
В остальном же Pro Motion NG — просто хороший софт для создания пиксельной графики любого уровня. Пробную версию можно скачать с официального сайта и протестировать, чтобы определиться с дальнейшей покупкой полной версии.
Прочее
Мой набор для пиксель-арта. Все черное, только сейчас заметил.
Графический планшет ($$+)
Рекомендую графические планшеты для любых работ с цифровыми иллюстрациями, чтобы избежать туннельного синдрома запястий. Его гораздо проще предотвратить, чем вылечить. Однажды вы почувствуете боль, и она будет только нарастать — позаботьтесь о себе с самого начала. Из-за того, что когда-то я рисовал мышкой, мне теперь тяжело играть в игры, в которых нужно нажимать на клавиши. Сейчас я использую Wacom Intuos Pro S.
Суппорт запястья ($)
Если вы не можете приобрести планшет, купите хотя бы суппорт запястья. Мне больше всего нравится Mueller Green Fitted Wrist Brace. Остальные либо слишком тугие, либо обеспечивают недостаточную поддержку. Суппорты без проблем можно заказать онлайн.
Adobe Photoshop
Расступитесь! Лидер на рынке графических редакторов. Нацелен в первую очередь на работу с растровыми изображениями, но часто используется в качестве программы для рисования на планшете. Задает тон всем остальным редакторам, множество инновационных решений. Богатейший инструментарий. Множество плагинов, уроков, последователей.
СкриншотыВидеоХарактеристики
| ОС: | Windows 10, 8, 7, Vista |
| Разрядность: | 64 бит |
| Русский язык | Есть |
| Версия | 21 (2020) |
| Бесплатная | Триал на 7 дней |
- Кисти для Фотошопа (на русском)
96×96 пикселей
Final Fight. Capcom, 1989 год
Приступим! Начнем со спрайта персонажа 96×96 пикселей. Для примера я нарисовал орка и поместил его на скриншот из Final Fight (картинка выше), чтобы вы понимали масштаб. Это большой
спрайт для большинства ретро-игр, размер скриншота: 384×224 пикселя.
На таком большом спрайте будет легче показать технику, о которой я хочу рассказать. Также попиксельная отрисовка больше похожа на традиционные формы арта (например, рисование или живопись), с которыми вы, возможно, лучше знакомы. Освоив базовые техники, мы перейдем к спрайтам поменьше.
MyPaint
Для создании рисунков с нуля. Программа имитирует реальные инструменты (кисть, карандаш и т.д.) и позволяет создавать арты. Вы сможете рисовать собственные иллюстрации с нуля, и обрабатывать фотографии, накладывая на них различные эффекты. На выбор есть множество художественных кистей с настраиваемым размером.
СкриншотыВидеоХарактеристики
| ОС: | Windows 10, 8, 7, Vista, XP |
| Разрядность: | 32 бит, 64 бит |
| Русский язык | Есть |
| Версия | v2 (2019, Alpha) |
| Бесплатная | Полность |
Выбираем палитру
Пиксель — гораздо более глубокое понятие в пиксель-арте, чем в любых других цифровых сферах. Пиксель-арт определяют его ограничения, например, цвета. Важно правильно подобрать палитру, она поможет определить ваш стиль. Но на старте я предлагаю не думать про палитры и выбрать одну из существующих (или просто несколько рандомных цветов) — вы легко можете ее поменять на любом этапе.
Для этого туториала я буду использовать палитру из 32 цветов, которую мы создали для UFO 50. Для пиксель-арта их часто собирают из 32 или 16 цветов. Наша разработана для вымышленной консоли, которая могла бы появится где-то между Famicom и PC Engine. Можете взять ее или любую другую — туториал совсем не зависит от выбранной палитры.
openCanvas
Программа представляет собой что-то среднее между Paint и редакторами как Corel Painter или Adobe PhotoShop.
Редактор обладает простой и грамотно организованный интерфейс, который делает создание и редактирование цифровых иллюстраций удобным и легким.
СкриншотыВидеоХарактеристики
| ОС: | Windows 10, 8, 7, Vista, XP |
| Разрядность: | 32 бит, 64 бит |
| Русский язык | Нету |
| Версия | 7.0.25 (15.11.2019) |
| Бесплатная | Триал на 120 дней |
Грубые контуры
Начнем прорисовку с помощью инструмента Карандаш. Нарисуем скетч так же, как делаем это с обычной ручкой и бумагой. Конечно, пиксель-арт и традиционный арт пересекаются, особенно когда речь идет о таких крупных спрайтах. Мои наблюдения показывают, что сильные художники по пиксель-арту как минимум неплохо рисуют от руки и наоборот. Так что развивать навыки рисования всегда полезно.
Artweaver
Программа для обработки фотографий, а также для рисования с широким набором художественных эффектов. У Artweaver хороший выбор инструментов (мел, древесный уголь, карандаш, волокна, губка, масло) и фильтров (эффект ветра / масла, размытие, волна, гранулирование).
СкриншотыВидеоХарактеристики
| ОС: | Windows 10, 8, 7, Vista |
| Разрядность: | 32 бит, 64 бит |
| Русский язык | Нету (только английский или немецкий) |
| Версия | 7.0.3 (01.12.2019) |
| Бесплатная | Да |
Проработка контуров
Дорабатываем контуры: убираем лишние пиксели и сокращаем толщину каждой линии до одного пикселя. Но что именно считать лишним? Чтобы ответить на этот вопрос нужно разобраться в пиксельных линиях и неровностях.
Неровности
Нужно научиться рисовать две базовые линии в пиксель-арте: прямые и кривые. С ручкой и бумагой все сводится к мышечному контролю, но мы-то работаем с крошечными цветными блоками.
Ключ к отрисовке правильных пиксельных линий — неровности. Это единичные пиксели или небольшие сегменты, разрушающие сглаженность линии. Как я уже говорил, отдельный пиксель имеет огромное значение в пиксель-арте, поэтому неровности могут разрушить всю эстетику. Представьте, что вы проводите прямую линию на бумаге, и неожиданно кто-то ударяет по столу: неровности в пиксель-арте выглядят так же, как случайная закорючка.
Примеры:
Прямые
Кривые
Неровности появляются на кривых, когда длина сегментов линии увеличивается или уменьшается не постепенно.
Совсем избежать неровностей невозможно — во всех ваших любимых ретро-играх они есть (если, конечно, пиксель-арт состоит не исключительно из простых форм). Цель: свести неровности к минимуму, при этом показав все необходимое.
GIMP
GIMP стал одним из самых популярных имен в пиксельной графике и редактировании фотографий. Хотя это может быть трудно для начинающих пользователей, это все же стоит изучить.
Перед тем, как погрузиться в GIMP, убедитесь, что настроили его правильно. В отличие от некоторых других программ, перечисленных здесь, GIMP не фокусируется исключительно на инструментах пиксельной графики. Простые настройки, такие как добавление сетки, могут сделать ее идеальной для пиксельной графики. Затем вы можете воспользоваться удивительными функциями, такими как режим индексации цвета, режим плавающего окна и инструмент выбора.
Скачать: GIMP (бесплатно)
Применяем первые цвета
Раскрасьте своего персонажа с помощью заливки или другого подходящего инструмента. Палитра упростит эту часть работы. Если софт не предусматривает использование палитр, можно поместить ее прямо в картинку, как на примере выше, и выбирать цвета с помощью пипетки.
В нижнем левом углу я нарисовал нашего друга, знакомьтесь, это — Шар. С ним будет проще понять, что именно происходит на каждом этапе.
PyxelEdit
Данная программа имеет все необходимое для создания подобных картин и не перенасыщена функциями, которые никогда не понадобятся художнику. Настройка осуществляется довольно просто, в цветовой палитре есть возможность изменения любого цвета в нужный тон, а свободное перемещение окон поможет настроить программу под себя.
В PyxelEdit есть функция установки плиток на холст, что может пригодиться во время создания объектов с похожим содержанием. Пробная версия доступна для скачивания на официальном сайте и не имеет никаких ограничений в использовании, поэтому можно пощупать продукт перед совершением покупки.
Шейдинг
Пора отобразить тени — просто добавляем более темные цвета на спрайт. Так изображение будет выглядеть объемным. Давайте предположим, что у нас один источник света, расположенный над орком левее от него. Значит, освещено будет все, что находится сверху и спереди нашего персонажа. Добавляем тени снизу справа.
Форма и объем
Если этот этап вызывает у вас сложности, представьте свой рисунок как объемные формы, а не просто линии и цвет. Формы существуют в трехмерном пространстве и могут иметь объем, который мы выстраиваем с помощью теней. Это поможет визуализировать персонажа без деталей и представить, что он сделан из глины, а не из пикселей. Шейдинг — это не просто добавление новых цветов, это процесс выстраивания формы. На хорошо проработанном персонаже детали не скрывают базовые формы: если вы прищуритесь, увидите несколько крупных кластеров света и тени.
Сглаживание (anti-aliasing, анти-алиасинг)
Каждый раз используя новый цвет, я применяю анти-алиасинг (АА). Он помогает сгладить пиксели добавляя промежуточные цвета по углам, в месте соприкосновения двух сегментов линии:
Серые пиксели смягчают «разрывы» в линии. Чем длиннее сегмент линии, тем длиннее АА-сегмент.
Так АА выглядит на плече орка. Он нужен, чтобы сгладить линии, отображающие изгиб его мышц
Сглаживание не должно выходить за пределы спрайта, который будет использоваться в игре или на фоне, цвет которого неизвестен. Например, если вы примените АА для светлого фона, на темном фоне сглаживание будет смотреться некрасиво.
Pixilart
Запустите Pixilart, не выходя из собственного веб-браузера или мобильного устройства. Некоторые из его основных функций включают инструмент «Линия», инструмент «Смешение», инструмент «Перо», инструмент «Кисть» и многое другое. В меню справа от экрана отображаются цвета и управление слоями.
Он может не иметь всех наворотов некоторых из этих других программ, но это все еще допустимый вариант. Кроме того, вы можете поделиться своими дизайнами с сообществом Pixilart.
Веб-сайт: Pixilart (бесплатно)
Скачать: Pixilart для Android | iOS (бесплатно)
Выборочный контур
Ранее контуры были полностью черными, из-за чего спрайт смотрелся очень мультяшно. Картинка была словно разделена на сегменты. Например, черные линии на руке слишком контрастно отображают мускулатуру, и персонаж выглядит менее цельным.
Если спрайт станет более естественным, а сегментация не столь явной, то базовые формы персонажа будут легче читаться. Для этого можно использовать выборочный контур — частично заменить черный контур более светлым. На освещенной части спрайта можно использовать самые светлые цвета или, там где спрайт соприкасается с негативным пространством, можно полностью убрать контур. Вместо черного нужно использовать цвет, который был выбран для тени — так сохраниться сегментация (для разграничения мышц, меха и так далее).
Также на этом этапе я добавил более темные тени. Получилось три градации зеленого на коже орка. Наиболее темно-зеленый цвет можно использовать для выборочного контура и АА.
TwistedBrush
Для тех, кто хочет понастольгировать. Имеет морально устаревший интерфейс из 00-х годов. Разработчики имеют наглость просить денег за свой софт, хотя у конкурентов за такую сумму можно приобрести более продвинутый редактор. И они продолжают записывать видеоуроки на свой софт, и больше никто… Это так грустно…
СкриншотыВидеоХарактеристики
| ОС: | Windows 10, 8, 7, Vista, XP |
| Разрядность: | 32 бит |
| Русский язык | Нет |
| Версия | 23 (20.08.2018) |
| Бесплатная | Триал на 15 дней |
Финальные штрихи
В конце стоит добавить блики (самые светлые пятна на спрайте), детали (серьги, заклепки, шрамы) и прочие улучшения, пока персонаж не будет готов или пока не придется перейти к следующему.
Есть несколько полезных приемов, которые можно применить на этом этапе. Поверните рисунок горизонтально, это часто помогает выявить ошибки в пропорциях и шейдинге. Также можно убрать цвет — выставить насыщенность на ноль, чтобы понять, где нужно изменить тени.
Создание шумов (dithering, дизеринг)
Пока что мы в основном применяли крупные, цельные участки теней. Но есть и другая техника — дизеринг, которая позволяет перейти от одного цвета к другому без добавления третьего. Посмотрите на пример ниже.
Верхний градиент от темного к светлому использует сотни различных оттенков синего.
Средний градиент использует всего девять цветов, но в нем все еще слишком много оттенков одного цвета. Возникает так называемый бандинг (от англ. band — полоса), при котором из-за толстых однородных полос глаз фокусируется на точках соприкосновения цветов, вместо самих цветов.
На нижнем градиенте мы применили дизеринг, который позволяет избежать бандинга и использует всего два цвета. Мы создаем шум разной интенсивности, чтобы имитировать градацию цвета. Эта техника очень похожа на халфтон (halftone — полутоновое изображение), применяемое на печати; а также на стипплинг (stippling — зернистое изображение) — в иллюстрации и комиксах.
На орке я применил дизеринг совсем немного для передачи текстуры. Некоторые пиксель-артисты совсем его не используют, другие — наоборот не стесняются и делают это очень умело. Мне кажется, что лучше всего дизеринг смотрится на больших участках залитых одним цветом (присмотритесь к небу на скриншоте Metal Slug, который был выше) или на тех участках, которые должны выглядеть шероховато и неровно (например, грязь). Решите сами, как его использовать.
Если хотите увидеть пример с масштабным и качественным дизерингом, изучите игры The Bitmap Brothers, британской студии 80-х годов, или игры на компьютере PC-98. Только учтите, что все они — NSFW.
Kakyusei (PC-98). Elf, 1996 год На этом изображении всего 16 цветов!
Clip Studio Paint
Ранее известная как Manga Studio, это семейство программных приложений для macOS , Microsoft Windows и iOS , разработанных Celsys. Используется для цифрового создания комиксов, иллюстраций и покадровой 2D-анимации.
Используя Clip Studio Paint, вы сможете рисовать мангу на компьютере точно так же, как и на бумаге.
СкриншотыВидеоХарактеристики
| ОС: | Windows 10, 8, 7, Vista |
| Разрядность: | 64 бит |
| Русский язык | Нету, только Английский |
| Версия | 1.9.7 (19.12.2019) |
| Бесплатная | Триал на 30 дней |
Последний взгляд
Одна из опасностей пиксель-арта в том, что он кажется легким и простым (из-за его структуры и ограничений стиля). Но в итоге вы потратите огромное количество времени на доработку своих спрайтов. Это похоже на головоломку, которую нужно решить — вот почему пиксель-арт привлекает перфекционистов. Помните, что один спрайт не должен отнимать слишком много времени — это лишь крохотный кусочек крайне сложного скопления кусочков. Важно не терять видение общей картины.
Даже если ваш пиксель-арт не для игр, иногда стоит сказать себе: «Все уже достаточно хорошо!» И двигаться дальше. Лучший способ развития навыков — как можно больше раз пройти весь процесс целиком от начала до конца, используя как можно больше тем.
И порой полезно ненадолго оставить спрайт, чтобы чуть позже взглянуть на него свежим взглядом.
ArtRage
ArtRage настоящая художественная студия для поклонников живописи и рисования масляными красками или пастелью. Это одна из немногих графических программ, в которой представлены реально существующие профессиональные инструменты. Главная идея программы — показать, как легко можно научиться рисовать настоящими красками.
СкриншотыВидеоХарактеристики
| ОС: | Windows 10, 8, 7, Vista, XP |
| Разрядность: | 32 бит, 64 бит |
| Русский язык | Есть |
| Версия | 6.1.2 (2019) |
| Бесплатная | Нет. 79$ |
32×32 пикселя
Мы создали большой спрайт 96×96 пикселей первым, потому что при таком размере это больше напоминает рисование или живопись, но только пикселями. Чем меньше спрайт, тем меньше он похож на то, что должен отображать, и тем больше важен каждый пиксель.
В Super Mario Bros. глаз Марио — это всего два пикселя, расположенные один над другим. И его ухо тоже. Создатель персонажа Сигеру Миямото сказал, что усы потребовались для того, чтобы отделить нос от остального лица. Так что одна из главных черт лица Марио — не просто дизайн персонажа, но и прагматичная уловка. Что подтверждает старую мудрость — «нужда — мать изобретательности».
Основные этапы создания спрайта 32×32 пикселя нам уже знакомы: скетч, цвет, тени, дальнейшая доработка. Но в таких условиях, в качестве начального скетча я подбираю цветные фигуры вместо отрисовки контуров из-за маленького размера. Цвет играет более важную роль в определении персонажа, чем контуры. Посмотрите на Марио еще раз, у него вообще нет контуров. Интересны не только усы. Его бакенбарды определяют форму ушей, рукава показывают руки, а общая форма более-менее четко отображает все его тело.
Создание маленьких спрайтов — это постоянные компромиссы. Если вы добавите обводку, можете потерять место для тени. Если у вашего персонажа четко отображены руки и ноги, голова скорее всего должна быть не очень большой. Если эффективно использовать цвет, выборочную обводку и сглаживание, то отрисованный объект будет казаться больше, чем он есть на самом деле.
Для маленьких спрайтов мне нравится стиль тиби: персонажи выглядят очень мило, у них большие головы и глаза. Отличный способ создать яркого героя в ограниченном пространстве, да и в целом, очень приятный стиль. Но, возможно, вам нужно показать мобильность или силу персонажа, тогда вы можете уделить меньше пространства голове, чтобы тело выглядело более мощно. Все зависит от ваших предпочтений и целей.
Целая команда в сборе!
gamin
Обучающий материал
Интерес, проявленный к первому уроку, и последовавшие обсуждения, а также замечательные работы, которые посетители начали рисовать и выкладывать в комментариях, показали, что начинать всё же следовало с основ. Исправляю ошибку и предлагаю своеобразный приквел, в котором мы познакомимся с азами pixel art’а перед тем, как приступить к изометрии.
Но для начала немного истории (не переносите длинных вступлений? Смело пропускаете два-три абзаца).
История (очень коротко).
Pixel art (пишется без дефиса) или пиксельная графика – направление цифрового искусства, которое заключается в создании изображений на уровне пикселя (т. е. минимальной логической единицы, из которой состоит изображение). Далеко не все растровые картинки являются пиксель артом, хотя все они и состоят из пикселей. Почему? Потому что в конечном счёте понятие pixel art вмещает в себя не столько результат, сколько процесс создания иллюстрации. Пиксель за пикселем, и только так. Если вы возьмёте цифровое фото, сильно его уменьшите (так, чтобы пиксели стали видны) и заявите что нарисовали его с нуля – это будет настоящий подлог. Хотя наверняка найдутся наивные простаки, которые вас похвалят за кропотливый труд.
Сейчас неизвестно, когда точно зародилась эта техника, корни теряются где-то в начале 1970-х. Однако приём составления изображений из малых элементов восходит к куда более древним формам искусства, таким как мозаика, вышивание крестиком, ковроплетение и бисероплетение. Само же словосочетание «pixel art» как определение пиксельной графики впервые было использовано в статье Адель Голдберг и Роберта Флегала в журнале Communications of the ACM (декабрь 1982-го).
Наиболее широкое прикладное применение pixel art получил в компьютерных играх, что неудивительно – он позволял создавать изображения, нетребовательные к ресурсам и выглядящие при этом по-настоящему красиво (при этом отнимающие у художника немало времени и требовавшие определённых навыков, а потому подразумевающие хорошую оплату труда). Расцветом, наивысшей точкой в развитии официально называют видеоигры на приставках 2-го и 3-го поколения (начало 1990-х). Дальнейший прогресс технологий, появление сперва 8-битного цвета, а затем и True Color, развитие трёхмерной графики – всё это со временем оттеснило pixel art на второй и третий планы, а потом и вовсе стало казаться, что пиксельной графике пришёл конец.
Как ни странно, но именно господин Научно-технический прогресс, задвинувший в середине 90-х пиксельную графику на последние позиции, и вернул её позже в игру – явив миру мобильные устройства в виде сотовых телефонов и КПК. Ведь каким бы полезным ни был новомодный дивайс, мы-то с вами знаем – если на нём нельзя хотя бы разложить пасьянс, грош ему цена. Ну а там где есть экран с невысоким разрешением, там и pixel art. Как говорится, добро пожаловать назад.
Разумеется, свою роль в возвращении пиксельной графики сыграли различные ретроградно настроенные элементы, любящие поностальжировать над старыми-добрыми играми детства, приговаривая при этом: «Эх, теперь такого не делают»; эстеты, способные оценить красоту пиксель арта, и инди-разработчики, не воспринимающие современные графические красоты (а иногда, правда редко, элементарно не умеющие их реализовать в собственных проектах), оттого и ваяющие pixel art. Но давайте всё-таки не будем сбрасывать со счетов сугубо коммерческие проекты – приложения для мобильных устройств, рекламу и web-дизайн.
Так что сейчас pixel art, что называется, широко распространён в узких кругах и заработал себе своеобразный статус искусства «не для всех». И это несмотря на то, что для простого обывателя он предельно доступен, ведь чтобы работать в этой технике, достаточно иметь под рукой компьютер и простейший графический редактор! (умение рисовать, между прочим, тоже не помешает) Хватит слов, ближе к делу!
Инструменты.
Что нужно для создания пиксель арта? Как сказал выше, достаточно компьютера и любого графического редактора, способного работать на уровне пикселей. Рисовать можно где угодно, хоть на Game Boy, хоть на Nintendo DS, хоть в Microsoft Paint (другое дело, что рисовать в последнем крайне неудобно). Есть великое множество растровых редакторов, многие из них бесплатны и достаточно функциональны, так что с программным обеспечением каждый может определится самостоятельно.
Я рисую в Adobe Photoshop, потому что удобно и потому что давно. Не стану врать и рассказывать, шамкая вставной челюстью, что де «Я помню Фотошоп был еще са-а-авсем маленьким, это было на Макинтоше, и был он с номером 1.0» Такого не было. Но я помню Фотошоп 4.0 (и также на Маке). А потому для меня вопрос выбора никогда не стоял. И потому нет-нет, но я буду давать рекомендации касательно Photoshop, особенно там, где его возможности помогут значительно упростить творчество.
Итак, вам нужен любой графический редактор, позволяющий рисовать инструментом в один квадратный пиксель (пиксели бывают и неквадратные, например круглые, но они нас в данный момент не интересуют). Если ваш редактор поддерживает какой-никакой набор цветов – отлично. Если также позволяет сохранять файлы – просто замечательно. Хорошо бы еще умел работать со слоями, поскольку работая над достаточно сложной картинкой, удобнее разложить её элементы по разным слоям, но по большому счёт это вопрос привычки и удобства.
Начнём? Вы наверное ждёте списка каких-то секретных приёмов, рекомендаций, которые научат вас рисовать pixel art? А правда в том, что ничего такого по большому счёту нет. Единственный способ научиться рисовать пиксельную графику – это рисовать самому, пробовать, пытаться, не бояться и экспериментировать. Не стесняйтесь повторять чужие работы, не бойтесь показаться неоригинальным (просто не выдавайте чужое за своё, хе-хе). Внимательно и вдумчиво анализируйте работы мастеров (не мои) и рисуйте, рисуйте, рисуйте. Несколько полезных ссылок вас ждёт в конце статьи.
Общие принципы.
И всё же существует несколько общих принципов, знать которые не помешает. Их действительно немного, я называю их «принципами», а не законами, потому что они носят скорее рекомендательный характер. В конце-концов, если у вас получится нарисовать гениальную пиксельную картинку в обход всех правил – кому до них дело?
Самым основной принцип можно сформулировать так: минимальной единицей изображения является пиксель, и по возможности все элементы композиции должны быть соразмерны ему. Расшифрую: всё, что вы нарисуете, состоит из пикселей, и пиксель должен читаться во всём. Это не значит, что в рисунке вообще не может быть элементов, к примеру, 2х2 пикселя, или 3х3. Но строить изображение всё же предпочтительно из отдельных пикселей.
Для наглядности приведу несколько примеров с типичными ошибками и вариантами их исправления:
Ноги у человечка лучше выглядеть не стали, это верно, к ногам еще вернёмся. В качестве примера «из жизни» приведу онлайновый паззл Zoo keeper:
Почему художник решил сделать обводку в два пикселя, в то время как сами элементы нарисованы попиксельно? Возможно, хотел отделить тайлы от фона. А прочую внутриигровую графику рисовал с той же жирной обводкой, чтобы сохранить единую стилистику, плюс такая явная обводка придаёт изображению некую выразительность. Тем не менее – что называется, не наш метод.
Из этого принципа можно вывести простое правило: обводка и вообще все линии рисунка должны быть толщиной в один пиксель (за редким исключением).
Я вовсе не утверждаю, что это неправильно. Но это всё же не очень красиво. А чтобы было красиво, запомним еще одно правило: рисовать без изломов, скруглять плавно. Есть такое понятие как изломы – фрагменты, выбивающиеся из общего порядка, они придают линиям неровный, зазубренный вид (в англоговорящей среде пиксельных художников их называют jaggies):
Изломы лишают рисунок естественной плавности и красоты. И если фрагменты 3, 4 и 5 очевидны и исправляются легко, с прочими дело обстоит сложнее – там нарушена длина одного-единственного кусочка в цепи, казалось бы мелочь, но мелочь заметная. Чтобы научиться видеть такие места и избегать их, требуется небольшая практика. Излом 1 выбивается из линии, потому что это единичный пиксель – в то время как на участке, где он затесался, линия состоит из сегментов по 2 пикселя. Чтобы избавиться от него, я смягчил вход кривой в изгиб, удлинив верхний сегмент до 3-х пикселей, и перерисовал всю линию сегментами по 2 пикселя. Изломы 2 и 6 идентичны друг другу – это уже фрагменты длиной 2 пикселя на участках, построенных единичными пикселями.
Избежать подобных изломов при рисовании поможет элементарный набор примеров наклонных прямых, который можно встретить практически в каждом руководстве по пиксельной графике (моё не исключение):
Как видите, прямая линия составляется из отрезков одинаковой длины, смещаемых по мере её прорисовки на один пиксель – только таким образом достигается эффект линейности. Наиболее распространённые способы построения с длиной отрезка 1, 2 и 4 пикселя (встречаются и другие, но представленных вариантов должно хватить для реализации практически любой художественной задумки). Из этих трёх самым популярным можно уверенно назвать длину отрезка в 2 пикселя: рисуем отрезок, сдвигаем перо на 1 пиксель, рисуем еще один отрезок, сдвигаем перо на 1 пиксель, рисуем еще отрезок:
Несложно, верно? Нужна лишь привычка. Умение рисовать наклонные прямые с шагом в 2 пикселя поможет в изометрии, так что подробнее остановимся на ней в следующий раз. Вообще прямые линии это здорово – но только до тех пор, пока не встанет задача нарисовать что-нибудь нерукотворное. Тут нам понадобятся кривые, и много самых разных кривых. И берём на вооружение простое правило закругления кривых линий: длина элементов кривой должна уменьшаться/увеличиваться постепенно.
Выход из прямой на скругление ведётся плавно, я обозначил длину каждого сегмента: 5 пикселей, 3, 2, 2, 1, 1, снова 2 (уже вертикально), 3, 5 и далее. Не обязательно ваш случай будет использовать такую же последовательность, здесь всё зависит от плавности, которая требуется. Еще пример скругления:
Опять же, избегаем изломов, которые так портят картинку. Если есть желание проверить усвоенный материал, здесь у меня нарисованный неизвестным автором skin для Winamp’а, заготовка:
На рисунке есть и грубые ошибки, и просто неудачных скругления, и изломы встречаются – попробуйте исправить картинку на основе того, что уже знаете. На этом с линиями у меня всё, предлагаю немного порисовать. И пусть вас не смущает простота примеров, научиться рисовать можно только рисуя – даже такие простейшие вещи.
4.1. Рисуем склянку с живой водой.
1. Форма объекта, пока можно не использовать цвет.
2. Красная жидкость.
3. Меняем цвет стекла на голубой, добавляем затенённые участки внутри пузырька и светлый участок на предполагаемой поверхности жидкости.
4. Добавляем белые блики на пузырьке, и тень шириной 1 пиксель тёмно-красного цвета на приграничных к стенкам пузырька областях жидкости. Смотрится вроде неплохо, а?
5. Аналогично рисуем склянку с синей жидкостью – здесь тот же цвет стекла, плюс три оттенка синего для жидкости.
4.2. Рисуем арбуз.
1. Нарисуем круг и полукруг – это будут арбуз и вырезанная долька.
2. Обозначим вырез на самом арбузе, а на дольке – границу между корочкой и мякотью.
3. Заливка. Цвета из палитры, средний оттенок зелёного – цвет корки, средний красный – цвет мякоти.
4. Обозначим переходный участок от корки к мякоти.
5. Светлые полосы на арбузе (наконец-то он похож сам на себя). И конечно – семечки! Если скрестить арбуз с тараканами, будут расползаться сами.
6. Доводим до ума. Бледно-розовый цвет используем для обозначения бликов над семечками в разрезе, и, выкладывая пиксели в шахматном порядке, добиваемся от вырезанной дольки некоего подобия объёма (метод называется dithering, о нём позже). Тёмный красный оттенок используем, чтобы обозначить затенённые места в разрезе арбуза, и тёмно-зелёный (опять же пиксели в шахматном порядке) – чтобы придать объём самому арбузу.
Dithering.
Дизеринг, или смешивание – техника перемешивания определённо упорядоченным (не всегда) образом пикселей в двух граничащих областях разного цвета. Самый простой, распространённый и эффективный способ – чередовать пиксели в шахматном порядке:
Приём появился на свет благодаря (или скорее вопреки) техническим ограничениям – на платформах с ограниченными палитрами дизеринг позволял, замешивая пиксели двух разных цветов, получить третий, отсутствующий в палитре:
Но и позже, когда количество цветов перестало быть проблемой, дизеринг можно было видеть в видеоиграх в роли тени (чтобы не нагружать железо полупрозрачностью, художники часто обозначали тень участком чёрных пикселей, расположенных в шахматном порядке и накладывавшихся на фон).
Сейчас, в эпоху безграничных технических возможностей, многие говорят что необходимость в дизеринге отпала сама собой. Однако грамотное его использование может придать вашим работам характерный ретро-стиль, узнаваемый всеми любителями старых видеоигр. Лично я люблю использовать dithering. Не очень хорошо им владею, тем не менее, люблю.
Еще два варианта дизеринга:
Что нужно знать про дизеринг, чтобы уметь им пользоваться. Минимальная ширина зоны смешивания должна быть не меньше 2-х пикселей (те самые шашечки). Больше – можно. Меньше лучше не делать.
Ниже пример неудачного дизеринга. Несмотря на то, что подобную технику можно часто встретить на спрайтах из видеоигр, нужно отдавать себе отчёт в том, что телевизионный экран существенно сглаживал изображение, и такая гребёнка, да еще в движении, глазом не фиксировалась:
Ну, хватит теории. Предлагаю еще немного попрактиковаться.
6.1. Рисуем меч.
Такой несерьёзный меч для несерьёзного проекта:
1. Форма. Здесь всё просто.
2. Начинаем распределять цвет. Я изменил изначально чёрный на цвет тёмной стали (хочется верить, что похожий) и залил меч серым.
3. Придаём форму за счёт светотени и дополнительной расцветки (обратите внимание – я кое-где повторно изменил цвет обводки, сделав его еще светлее). Условимся, что свет на меч падает слева-сверху, из-за плеча наблюдающего, поэтому блики (наиболее светлые участки освещённых поверхностей) располагаются на выступающих элементах слева, тени – справа и снизу.
4. Доводим наш миниатюрный шедевр до совершенства. Усиливаем эффект объёма на яблоке и сферических элементах крестовины (левый и правый «шарики»), на обмотке рукояти. Обратите внимание на длинную полосу, идущую по лезвию – дол (некоторые называют его кровотоком, полагая, что он служит для стекания крови проткнутого врага). Название здесь неважно, суть в том, что это жёлоб и центральная его часть освещена меньше всего, в то время как края наоборот. Справа от дола, чтобы усилить эффект глубины, я обозначил чёткий блик (никогда нелишне хорошенько изучить объект, который вы собираетесь изобразить – не для того чтобы сыпать терминами, а чтобы иметь чёткое представление об устройстве и особенностях конструкции). Вроде получился довольно симпатичный меч, а?
5. Я не стал останавливаться на достигнутом и сильно состарил наше оружие, вообразив, как мог бы выглядеть клинок, пролежи он сотню лет в подземелье. Цвета заменены более тёмными (соседними из той же палитры), я ввёл больше чёрного (на предыдущем рисунке лишь три действительно чёрных точки, одна на стыке дола с крестовиной усиливала эффект глубины тени, две другие подчёркивали обмотку рукояти). Выбоины и сколы на лезвии, крестовина и яблоко серьёзно повреждены (наверняка в жестокой сечи), обмотка рукояти порвана. В общем, перед нами настоящая древность. Придумаем достойную легенду и поставим на видном месте, как семейную реликвию.
6.2. Робот.
Один из самых распространённых способов рисования «с нуля» – изобразить черновой вариант (не попиксельно, а традиционно, рисуя либо мышью, либо на планшете), а после почистить его, исправить (при необходимости) и довести до ума. Также часто художники рисуют на основе своих бумажных черновиков, карандашных рисунков, набросков и прочих «почеркушек» – сканируют их и обрисовывают попиксельно. Дело привычки. Я обычно начинаю с чернового наброска:
Теперь чистка, стираю лишние пиксели и дорисовываю недостающие:
Закругление согласно простому правилу плавности, все прямые линейные. Добавляю ноги:
На самом деле рисовать полноценные конечности, честно говоря, поленился. Хотелось поскорее закончить урок, плюс массивный робот на тонких ножках – по-моему достаточно забавно. Помимо того, что ноги нарисованы обыкновенными прямыми (что здорово сэкономило мне время), я не стал придавать им объём – это не цилиндры, а пока что обычные плоские прямоугольники. Объёма добьюсь позже, с помощью теней и бликов. Кстати, еще одна хитрость, на которую пошёл сознательно – бедро левой ноги построено в точности как голень правой, и наоборот, так что фактически, вместо того чтобы нарисовать четыре цилиндра, я схитрил и нарисовал два наклонных прямоугольника.
Дополнительный элемент в виде панели на груди и трёх… лампочек? Не знаю, пока не решил. Но понял, что хочу сделать торс робота телескопическим, как раскладной стаканчик, поэтому пришлось слегка откорректировать линию изгиба, добавив небольшие но заметные зазоры на стыке сегментов. Теперь заливка!
Основной цвет, плюс я заменил цвет обводки с чёрного на тёмно-синий. Смотрится по-прежнему пустовато, но это ничего, исправлю тенями. Условлюсь, что источник света где-то за сверху за моим левым плечом, следовательно, тени лягут в основном справа и снизу. Сначала грудь, как самый крупный элемент:
Тень накладываю в 2 этапа, сперва самую тёмную, участком шириной максимум 3-4 пикселя (т. е. от линии обводки вглубь объекта, в данном случае, тень занимает область шириной 3, самое большое 4 пикселя. Это не закономерность, цифры запоминать не нужно, для другого предмета с другим освещением, другим материалом и другим настроением тень наверняка ляжет иначе). Далее более светлая тень, так же как и основная плавно сходящая на нет. Обратите внимание, на закруглённых участках груди тень кое-где лежит совсем небольшими фрагментами, по одному пикселю – это также придаст рисунку больше плавности.
Особое внимание обращаю на грудную панель: теневые участки толщиной в 1 пиксель, на освещённой кромке появляется чёткий блик, для которого использую самый светлый цвет из палитры.
Также приглядитесь к глазам, у них уже есть блики, основной цвет и тень. Кладу тень по всему роботу:
Теперь блики на поверхностях, которые должны отразить свет от источника прямо в глаза наблюдателю (художнику):
Хм, совсем другое дело. Даже прямоугольники-ножки выглядят как цилиндры! Я решил, что три кружка на груди могучего робота будут ракетницами, закрытыми люками, так что это по сути небольшие углубления; тень от левой кромки и блик по правой (и нижней).
Здесь сложно давать какие-либо советы, кроме одного – учитесь рисовать, изучайте тени, теорию света. Двигаемся дальше, дизеринг:
Выбираем любую границу между двумя цветами и выкладываем пиксели этих цветов в шахматном порядке. Самые светлые пятна я оставил без дизеринга, что подчёркивает резкость блика. Также дизеринга нет на ногах – слишком миниатюрные элементы, его там просто негде выкладывать. Теперь финальный штрих, заклёпки, обозначающие зубы, и игривая антенна:
Если внимательно рассмотреть заклёпки-зубы, видно, что это всего лишь фрагменты 2 на 2 пикселя, верхний левый окрашен в цвет бликов, два соседних с ним – цвет светлой тени, и правый нижний – цвет основной тени. Просто, да? При этом даже несмотря на то, что в некоторых местах пиксели заклёпок совпадают с цветом соседних точек, при отдалении (уменьшении масштаба рисунка до 100 или 200%) сохраняется полное впечатление того, что это выделяющиеся объекты. Еще в палитре появился дополнительный близкий к чёрному оттенок – я решил с его помощью сделать темнее суставы на ногах, и замешать в шахматном порядке пиксели в суставы на руках. Чистый чёрный я попробовал, тень получалась неестественной, а дизеринг с самым тёмным оттенком дал нужный эффект.
Ну и самый последний штрих, мне кажется, левая рука расположена не очень удачно – вырезаю её и сдвигаю вниз и влево. Вот так, кажется, самое то:
WIP, тот самый Work in Progress:
Собственно, на сегодня это всё. В следующий раз разберём изометрические построения, ну а напоследок несколько полезных ссылок:
Юрий Гусев aka Fool https://www.foolstown.com/ https://fool.deviantart.com/
Алексей Гаркушин aka gas13 https://gas13.ru/ https://gas13.deviantart.com/
Дизайн-группа eBoy https://hello.eboy.com/eboy/category/everything/explore/parts/
Henk Nieborg (Голландия) https://www.henknieborg.nl/
Gary J Lucken (Великобритания) https://www.armyoftrolls.co.uk/
Kenneth Fejer… https://www.kennethfejer.com/
…и один из его замечательных проектов – ISOSITY https://www.kennethfejer.com/isocity/
Agnes Heyer aka Arachne (Норвегия) https://www.retinaleclipse.com/
Borek Bures (Чехия) https://www.spiv.cz/index.html
The Spriters Resource – хранилище спрайтов из игр https://spriters-resource.com/
Форматы файлов
Такой результат может заставить понервничать любого пиксель-артиста
Картинка, которую вы видите — результат сохранения рисунка в JPG. Часть данных потерялась из-за алгоритмов сжатия файла. Качественный пиксель-арт в итоге будет выглядеть плохо, а вернуть его изначальную палитру будет непросто.
Для сохранения статической картинки без потери качества используйте формат PNG. Для анимаций — GIF.
Affinity Designer и Photo
Affinity Designer — удобное и точное программное обеспечение для векторного графического дизайна.
Affinity Photo — больше внимания удиляется растровой графике, обработке фотографий, но в интсрументах есть кисти для рисования (скриншот 1 сделан именно в этой проге).
СкриншотыВидеоХарактеристики
| ОС: | Windows 10, 8, 7, Vista, MAC, iPad |
| Разрядность: | 64 бит |
| Русский язык | Есть |
| Версия | 1.7.3 (12.10.2019) |
| Бесплатная | Нет |
Как правильно делиться пиксель-артом
Шеринг пиксель-арта в социальных сетях — отличный способ получить фидбек и познакомиться с другими художниками, работающими в том же стиле. Не забудьте поставить хэштег #pixelart. К сожалению, соцсети часто конвертируют PNG в JPG без спроса, ухудшая вашу работу. Причем не всегда понятно, почему ваша картинка была конвертирована.
Есть несколько советов, как сохранить пиксель-арт в нужном качестве для различных соцсетей.
Чтобы PNG-файл не изменился в Twitter, используйте меньше 256 цветов или убедитесь, что ваш файл меньше 900 пикселей по длинной стороне. Я бы увеличил размер файла хотя бы до 512×512 пикселей. Причем так, чтобы масштабирование было кратно 100 (200%, а не 250%) и сохранялись резкие края (Nearest Neighbor в Photoshop).
Анимированные GIF-файлы для постов в Twitter должны весить не более 15 Мб. Картинка должна быть как минимум 800×800 пикселей, цикличная анимация должна повторяться трижды, а последний кадр должен быть вполовину короче по времени, чем все остальные — самая популярная теория. Однако, непонятно, насколько нужно выполнять эти требования, учитывая, что Twitter постоянно меняет свои алгоритмы отображения картинок.
CorelDRAW
Передовое программное обеспечение для графического дизайна. В состав пакета входят все признанные в индустрии инструменты, представленные в CorelDRAW Graphics Suite. Разделение происходит по работе с растровой, векторной, анимированной графикой, а также по снимкам скриншотов. Также отдельно создали приложение для просмотра и редактирования цифровых изображений.
СкриншотыВидеоХарактеристики
| ОС: | Windows 10, 8, 7, Vista, XP |
| Разрядность: | 32 бит, 64 бит |
| Русский язык | Есть |
| Версия | 21 (2019) |
| Бесплатная | Триал на 15 дней |
Rebelle 3
Удивительная программа! Самая реалистичная живопись акварелью реализована именно в этой программе. Рисунок выглядит натурально, краска после мазка растекается, впитывается холстом, даже сохнет. Причем, скорость высыхания, увлажненность кисти, направление растекания — можно регулировать в настройках.
СкриншотыВидеоХарактеристики
| ОС: | Windows 10, 8, 7, Vista, Mac OS |
| Разрядность: | 64 бит, 32 bit |
| Русский язык | Нет |
| Версия | v.3.1.8 (2019) |
| Бесплатная | Триал на 30 дней |
Как сделать пиксель-арт: полное руководство для начинающих
Пиксель-арт — это форма цифрового искусства, которая возникла из-за необходимости передавать изображения на ограниченном пространстве 8- или 16-битных компьютеров и игровых консолей.
Иногда процесс создания пиксельной графики называют «спрайтом», что происходит от слова «спрайт». Это термин компьютерной графики, используемый для описания двумерного растрового изображения, интегрированного в большую сцену (обычно видеоигру).
Вы заинтересованы в создании собственного пиксельного искусства? Вот все, что вам нужно знать, чтобы начать.
Вопреки распространенному мнению, мощное или дорогое программное обеспечение не гарантирует качественного искусства! Выбор программы — это только вопрос предпочтений.
Если вы пользователь Windows, вы даже можете использовать что-нибудь столь же простое, как Microsoft Paint. Вот более обширный список некоторых инструментов, которые вы можете использовать для создания пиксельной графики.
Все, что вам действительно нужно для создания пиксельной графики, — это следующие инструменты (убедитесь, что они есть в вашей программе):
- Pencil: ваш основной инструмент для рисования, который по умолчанию размещает один пиксель
- Ластик: стирает или удаляет нарисованные пиксели.
- Пипетка: копирует цвет пикселя, который вы выбираете для повторного использования.
- Bucket: заполняет пустую область одним сплошным цветом.
Другие полезные инструменты включают инструменты выделения, линии, перекраски и вращения.Они не являются абсолютно необходимыми, поскольку вы можете добиться тех же эффектов, используя перечисленные выше инструменты.
Вам нужно избегать кистей, размытия, градиентов и других автоматических инструментов, чтобы иметь возможность контролировать каждый пиксель на холсте.
Что касается аппаратного обеспечения, то все, что может управлять вашим курсором, прекрасно. Трекпад или мышь отлично подходят для точности и детализации. Между тем, графический планшет может быть вашим предпочтением для лучшего контроля над длинными штрихами.
Связанный: Лучшие графические планшеты для цифровых художников и дизайнеров
Насколько большим должен быть ваш спрайт или холст?
Нет неправильного ответа на вопрос о размере спрайта. Но числа, кратные восьми в степени двойки, являются наиболее распространенными (например, 8 × 8, 16 × 16, 32 × 32 и т. Д.), Потому что в противном случае старые компьютеры не смогли бы отобразить их должным образом.
Лично мы рекомендуем начинать с малого, потому что это поможет вам быстро изучить основы.В конце концов, пиксельная графика возникла потому, что художники хотели максимально использовать каждый пиксель и каждый использованный цвет, поскольку их оборудование могло обрабатывать не так много изображений.
Вы вынуждены проявлять творческий подход, когда вам приходится работать в рамках ограничений. Сосредоточьтесь на том, чтобы максимально эффективно использовать крошечный спрайт. После этого вы можете повысить уровень до большего размера, чтобы втиснуть туда еще больше деталей.
И если вы хотите поместить персонажа в сцену, вам также придется подумать о размере холста.
Хороший способ сделать это — рассмотреть соотношение между вашим спрайтом и остальной частью экрана. Насколько большим или маленьким должен быть ваш персонаж по сравнению с миром, в котором он находится?
Разработчики игр, стоит знать, что большинство мониторов в наши дни имеют соотношение сторон 16: 9. Это означает, что на каждые 16 пикселей в ширину приходится девять пикселей в высоту.
Какое бы разрешение вы в конечном итоге ни выбрали, вы обычно будете работать с гораздо меньшим размером холста, а затем масштабируете его до большего разрешения, когда закончите.
В то же время вы хотите изменить размер целыми числами при масштабировании пиксельной графики, иначе все может выглядеть немного шатко. Перед тем, как приступить к созданию пиксельной графики, важно убедиться, что ваша математика верна!
Допустим, вы хотели получить стандартное разрешение 1080p. Вы можете работать с холстом 384 × 216, а затем увеличивать масштаб на 500 процентов.
Масштабирование также должно быть последним, что вы делаете.Вы не хотите увеличивать масштаб, а затем продолжать рисовать карандашом в один пиксель. Это приведет к разным пропорциям пикселей, которые никогда не выглядят хорошо.
Процесс спрайтинга
Итак, ваш холст открыт — что теперь? Что ж, как и любой другой вид искусства, возможности безграничны. Это не единственный способ сделать это.
Чтобы дать вам отправную точку, вот пошаговое руководство о том, как вы можете начать свой проект.Вы можете полностью следовать указаниям, пропустить некоторые шаги или добавить свои собственные.
1. Начните с грубого эскиза
Начните свой спрайт, перетаскивая инструмент Pencil , рисуя так же, как вы рисуете ручкой и бумагой. Необязательно быть идеальным.
Какой бы беспорядок вы ни устроили, мы разберемся позже. Все, к чему мы стремимся на этом раннем этапе, — это передать вашу идею и ее композицию на холст.
2. Очистить линию Art
Пришло время сделать вещи более презентабельными. Мы собираемся взять ваши грубые линии и вычистить их, чтобы убрать паразитные пиксели.
Отдельные пиксели или группа пикселей, нарушающих целостность линии, называются «неровностями». Неровности — это именно то, чего мы пытаемся избежать.
Часто проблема заключается просто в том, что отрезок линии слишком длинный или слишком короткий, что создает неудобный прыжок.Вы хотите использовать одинаковую длину пикселей для плавного перехода на кривой. Не окружайте ряд пикселей более крупными.
Невозможно полностью избежать зазубрин (если ваши работы не состоят только из основных форм), но вы хотите попытаться свести их к минимуму.
3. Представляем цвета
Пришло время взять инструмент Bucket и заполнить контур вашего спрайта цветами.
Обычно вы хотите ограничиться цветовой палитрой.Раньше размер спрайта часто определял, сколько цветов было в палитре. Если спрайт был размером 16 × 16, это означало, что художникам нужно было работать с 16 цветами. К счастью, с тех пор технологии продвинулись вперед, и мы больше не ограничиваемся этим правилом.
Лучшие палитры имеют разные оттенки, которые дополняют друг друга, разные значения насыщенности и сочетание светлого и темного. Если вы еще не знаете, как правильно использовать теорию цвета, составить собственную палитру может быть непросто.
Если вы хотите, чтобы за вас думал кто-то другой, Lospec — отличная онлайн-база данных, полная готовых цветовых палитр.
4. Добавление деталей, светлых участков и теней
Это лучшая часть всего процесса! Именно здесь ваше искусство действительно начинает спрыгивать со страницы. Теперь, когда у нас есть основная идея, мы можем добавить все мелочи, чтобы придать вашему плоскому рисунку иллюзию формы.
Выберите источник света и начните затенять наиболее удаленные от него области более темным цветом.Светильники следует размещать в местах, на которые попадает прямой свет.
Вы можете оставить свой штриховой рисунок черным или раскрасить его, но все зависит от ваших личных предпочтений или художественного стиля.
5. Сохраните свое искусство
Пришло время сохранить вашу работу! Выполните масштабирование до желаемого размера, а затем выберите формат файла. В большинстве случаев вы захотите сохранить его как PNG, если ваше изображение статичное.
Но если у вашего рисунка есть анимация, сохраните его в формате GIF. Важно то, что оба формата поддерживают большие области сплошного цвета и прозрачности.
Держитесь подальше от JPEG, если вы не знаете, что делаете. Это формат файла с потерями, предназначенный для цифровых фотографий и других изображений с плавными градиентами.
Pixel Art: легко освоить, сложно освоить
Пиксельное искусство отличается от цифрового рисования из-за ограничений, вызванных его сетчатой природой.
При этом он использует многие из тех же принципов, поэтому художники и другие художники могут понять его довольно быстро. Приложив много практики, каждый может стать мастером пиксельной графики.
Как рисовать аниме и манга-комиксы: 10 учебных пособий для началаВот несколько руководств и ресурсов, которые помогут вам научиться рисовать аниме и комиксы манга.
Читать далее
Об авторе Джессибель Гарсия (Опубликовано 268 статей)В большинстве случаев вы можете найти Джессибель свернувшейся калачиком под утяжеленным одеялом в уютной квартире в Канаде.Она писатель-фрилансер, любит цифровое искусство, видеоигры и готическую моду.
Более От Джессибель ГарсияПодпишитесь на нашу рассылку новостей
Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
Нажмите здесь, чтобы подписаться
PIXEL ART TUTORIAL: BASICS
Metal Slug 3 (Аркада).СНК, 2000.
Пиксельное искусство, также известное как точечное искусство в Японии, — это форма цифрового искусства, в которой редактирование выполняется на уровне пикселей. В первую очередь это связано с графикой видеоигр 80-х и 90-х годов, где коммерческие художники боролись с ограниченной памятью и низким разрешением, чтобы создавать все более привлекательные визуальные эффекты. В наши дни он по-прежнему популярен в играх и как форма искусства сам по себе, несмотря на возможность реалистичной трехмерной графики. Почему? Что ж, если оставить в стороне ностальгию, создание ярких произведений искусства в таких жестких рамках остается забавной и полезной задачей.Точно так же мы восхищаемся тем, как несколько мазков натренированной руки могут представлять форму и вызывать эмоции, так же мы восхищаемся тем, как несколько пикселей могут сочетаться с одним и тем же.
Барьер для входа в пиксельную графику также относительно низок по сравнению с рисованной или трехмерной графикой, что делает ее хорошим вариантом для инди-разработчиков игр, стремящихся воплотить свои идеи в жизнь. Но не заблуждайтесь, это никоим образом не означает, что им легко ЗАВЕРШИТЬ игру. Я видел, как многие инди запускали свою пиксельную Метроидвания, думая, что у них есть год, чтобы закончить, тогда как на самом деле это больше похоже на шесть лет.Пиксель-арт на том уровне, который хочет сделать большинство людей, отнимает много времени, и для его создания очень мало ярлыков. По крайней мере, с 3D-моделью вы можете вращать ее, деформировать, перемещать конечности, копировать анимацию с одной модели на другую и т. Д. Пиксельная графика высокого уровня почти всегда требует кропотливого размещения пикселей в каждом кадре.
С этим предупреждением, немного о моем стиле: я в основном использую пиксельную графику для создания видеоигр, и именно из видеоигр я черпаю большую часть своего вдохновения.В частности, я фанат Famicom / NES, 16-битных консолей и аркадных игр 90-х. В моих любимых играх той эпохи была пиксельная графика, которую я бы назвал красочной, жирной и чистой … но не настолько чистой, чтобы она была жесткой или минималистичной. Это стиль, на который я смоделировал свой собственный, но вы можете легко применить идеи и приемы этого урока к чему-то совершенно иному. Изучите разных художников и сделайте пиксельное искусство таким, каким вы хотите его видеть!
Основными инструментами, необходимыми для пиксельной графики, являются масштабирование и карандаш для размещения пикселей.Также полезны инструменты линии / формы, инструменты выбора / перемещения и ведро с краской для быстрой заливки. Вы можете использовать множество бесплатных и платных программ, в которых есть эти инструменты. Я выделю здесь некоторые из самых популярных (в том числе то, что использую я).
Краска
Если вы работаете в Windows, его встроенная программа рисования проста, но имеет все вышеперечисленные инструменты, которые вам понадобятся для создания пиксельной графики.
Удивительно надежный редактор пиксельной графики, который работает в вашем браузере! Можно экспортировать в PNG или анимированный GIF, а также сохранить локально в вашем браузере.Кажется, это отличный вариант для начала.
GraphicsGale — первый автономный редактор, о котором я слышал, он был разработан только для пиксельной графики и содержит инструменты анимации. Созданный японской компанией HUMANBALANCE, он стал бесплатным в 2017 году и до сих пор широко используется, несмотря на растущую популярность Aseprite. К сожалению, это только Windows.
Это, пожалуй, самый популярный редактор, доступный на данный момент. Содержит множество функций, активно разрабатывается и доступен для Windows, Mac и Linux.Кроме того, это открытый исходный код, и его можно использовать бесплатно, если он скомпилирован из исходного кода. Если вы серьезно относитесь к созданию пиксельной графики и у вас еще нет редактора, к которому вы привязаны, это, вероятно, лучший вариант.
GameMaker Studio 2 — отличный инструмент для создания игр, ориентированный на 2d, который включает в себя достойный редактор Sprite. Если вы заинтересованы в создании пиксельной графики для своих игр, очень удобно делать все это в одном и том же программном обеспечении. В настоящее время (в 2019 году) я использую его для создания UFO 50, коллекции из 50 ретро-игр.В основном я использую Sprite Editor от GameMaker для спрайтов и создаю свои тайлсеты в Photoshop.
Поскольку Photoshop — это дорогое приложение на основе подписки, которое не ориентировано на пиксельную графику, я не рекомендую его, если у вас еще нет его для рисования или обработки изображений. Он может справиться со статическими спрайтами и пиксельными иллюстрациями (вроде тех, что я сделал для этого урока), хотя он довольно громоздкий по сравнению с специализированными приложениями, такими как GraphicsGale или Aseprite ..
Моя настройка пиксельной графики.Очень черный, я сейчас замечаю …
Планшет для рисования +
Я настоятельно рекомендую планшет для рисования для любого вида цифровых работ, чтобы предотвратить повторяющиеся стрессовые травмы запястий. RSI гораздо легче предотвратить, чем исправить. Как только они начинают болеть, вы уже катитесь под гору (дни, когда я рисовал мышью, затруднили игру в любые игры, требующие нажатия кнопок). Так что начните заботиться о себе пораньше — оно того стоит! В настоящее время я использую небольшой Wacom Intuos Pro.
Защита запястья
Если достать планшет невозможно, купите хотя бы защиту на запястье. Мне больше всего нравятся зеленые приспособления для запястья Mueller Green Fitted Wrist Brace. Я обнаружил, что другие бренды либо неудобно тесны, либо недостаточно поддерживают меня. Вы можете легко заказать защиту на запястье онлайн.
Final Fight (Аркада). Capcom, 1989. (Источник)
Начнем! В этом уроке мы начнем с создания спрайта персонажа 96×96 пикселей. Я решил сделать орка, но не стесняйтесь выбирать что-нибудь другое! Я поместил своего готового орка на снимок экрана Final Fight выше, чтобы вы почувствовали масштаб — это большой спрайт для большинства ретро-игр (размер снимка экрана 384×224).
Причина, по которой мы начинаем с такого большого спрайта, заключается в том, что мне легче продемонстрировать методы, которые мы изучаем. Пикселизация более крупных спрайтов также более похожа на традиционные формы искусства, такие как рисование или рисование, которые могут быть вам более знакомы. После того, как мы получим основные инструменты за плечами, мы можем начать работать меньше.
1. Выбор палитры
Пиксель-арт определяется своими ограничениями. Пиксель имеет гораздо большее значение в пиксельной графике, чем другие цифровые носители, и то же самое верно для цветов, которые вы в конечном итоге также хотите ограничить.
Так что да, цветовая палитра важна и помогает определить ваш стиль. НО, для начинающих художников-пиксельщиков, я думаю, что лучше отложить любые теоретические рассуждения о палитрах и просто выбрать существующую (или даже несколько цветов наугад), чтобы можно было начать пикселизацию. Одна хорошая вещь в пиксельной графике заключается в том, что очень легко менять палитры в любой момент, поэтому нет необходимости позволять этому решению парализовать вас, прежде чем вы начнете ставить точки.
В этом уроке я буду использовать 32-цветовую палитру, которую мы создали для UFO 50.32 цвета — это популярный выбор для палитр пиксельной графики, но 16 цветов также распространены. Эта конкретная палитра была разработана для вымышленной консоли, которая лежала бы где-то между Famicom и PC Engine. Вы можете свободно использовать его, чтобы быстро обойти этот шаг! (Или нет! Это руководство вообще не зависит от палитры.)
2. Грубый набросок
Мы начнем наш спрайт с перетаскивания инструмента «Карандаш», рисуя эскиз так же, как мы рисуем его ручкой и бумагой.Определенно существует совпадение между пиксельным искусством и традиционным искусством, особенно с такими большими спрайтами, как этот. Из того, что я заметил, сильные пиксельные художники, по крайней мере, неплохо рисуют, и наоборот. Так что никогда не помешает улучшить свои навыки рисования.
3. Очистка контура
Далее мы собираемся очистить контур, удалив случайные пиксели и уменьшив толщину каждой линии до одного пикселя. Но какие именно пиксели мы удаляем? Чтобы ответить на этот вопрос, нам нужно узнать о пиксельных линиях и «неровностях».
Jaggies
Есть две основные линии, которые нам нужно научиться создавать в пиксельной графике: прямые и изогнутые. С ручкой и бумагой это в основном проблема мышечного контроля, но мы работаем с маленькими цветовыми блоками, что создает новый вид проблемы.
Ключом к созданию хороших линий пикселей является уменьшение количества ступенек : отдельных пикселей или небольших сегментов пикселей, которые нарушают согласованность линии. Поскольку один пиксель в пиксельной графике оказывает большое влияние на изображение в целом, неровности могут вызывать раздражение.Представьте, что вы рисуете прямую линию на листе бумаги, когда вдруг кто-то хлопает по столу — эта маленькая неконтролируемая волнистость — это своего рода неровность в пиксельной графике.
Давайте рассмотрим несколько примеров:
Прямые линии
Изогнутые линии
На изогнутых линиях появляются неровности, когда длина сегментов линии не увеличивается или не сокращается равномерно.
На этом этапе вы, вероятно, думаете, что неровности хуже, чем наступление на резину, но на самом деле невозможно полностью избежать их, если ваш пиксель-арт не состоит только из простейших форм.В любой из ваших любимых ретро-игр будут неровности. Цель состоит в том, чтобы просто минимизировать их, выражая то, что вы хотите выразить.
4. Применение первых цветов
Раскрасьте своего персонажа с помощью ведра с краской или другого инструмента заливки! Палитра упростит эту часть, и если ваше программное обеспечение для рисования не поддерживает палитры, вы всегда можете вставить свою палитру в само изображение (как я сделал здесь) и выбрать цвета с помощью инструмента Eye Dropper.
В левом нижнем углу я также представил знакомого друга, The Ball, чтобы быстро взглянуть на то, что происходит на каждом этапе.
5. Затенение
Пора затенить! Основная идея заключается в том, что мы собираемся добавить к спрайту более темные цвета (называемые оттенками ) для имитации тени, тем самым сделав спрайт трехмерным, а не плоским. Для этого урока давайте предположим, что есть единственный источник света над орком и немного впереди него, поэтому все сверху и / или спереди ярко. Мы добавим более темные цвета к нижней и задней части орка.
Форма и объем
Если у вас возникли проблемы с этой частью, вам, возможно, придется попрактиковаться в размышлениях о чертежах, поскольку формирует с объемом , а не просто линиями и цветом.Формы существуют в трехмерном пространстве и могут иметь объем, заполняющий это пространство. Затенением мы подчеркиваем этот объем.
Это может помочь вам визуализировать вашего персонажа без всех его деталей и представить, что он сделан из глины, а не из пикселей. Затеняя, вы не просто добавляете цвет — вы лепите форму. У четко определенного персонажа есть детали, которые не заслоняют основные формы — если вы прищуриваетесь, все равно должны появиться несколько больших скоплений света и тьмы.
Сглаживание
Каждый раз, когда я представляю новый оттенок цвета, я использую сглаживание (также известное как AA ), которое является способом сглаживания блочных пикселей, помещая «промежуточные» цвета в углах, где два пересечения отрезков:
Серые пиксели смягчают «разрывы» в нашей строке.Чем длиннее отрезок линии, тем длиннее отрезок AA, который мы используем для его смягчения.
Справа вы можете увидеть, как выглядит AA применительно к плечу нашего орка. Я использую его, чтобы сгладить линии, определяющие кривизну его мускулов.
Будьте осторожны, чтобы не сглаживать внешний вид спрайта, используемого в игре, или где-нибудь, где вы не знаете, какого цвета будет фон. Если, например, вы сглаживаете светлый фон, то это сглаживание будет выделяться на темном фоне.
6. Выборочное выделение
До сих пор наш контур был чисто черным, что придает спрайту общий мультяшный вид. Это также создает жесткую сегментацию. Например, черные линии на руке резко определяют мускулатуру, делая их менее похожими на часть одной и той же части тела.
Чтобы придать спрайту более естественный вид и смягчить сегментацию (чтобы выявить основную форму нашего персонажа), мы можем использовать технику под названием выборочное выделение или selout .Селут означает замену большей части черного контура более светлым цветом. Вверху, где свет падает на наш спрайт, мы будем использовать самые светлые цвета или, где спрайт встречается с негативным пространством, мы можем полностью удалить его. Для сегментации (например, для мускулов, текстуры меха и т. Д.) Мы можем использовать более темные цвета теней вместо чистого черного.
На этом этапе я также добавил орку еще один уровень еще более темной тени. Итак, теперь на коже нашего орка есть три оттенка зеленого. Этот новый оттенок зеленого можно использовать для автоматического сглаживания и дальнейшего сглаживания.
7. Последние штрихи
В конце мы можем добавить блики (самые яркие точки на нашем спрайте), детали (серьги, заклепки, шрамы) и продолжать вносить изменения, пока мы не будем довольны этим (или не нужно будет двигаться дальше, как это часто бывает кейс!).
Еще пара вещей, которые стоит попробовать на этом этапе: перевернуть изображение по горизонтали — это мощный трюк в цифровых произведениях искусства, который часто обнаруживает недостатки в пропорциях и затенении. Еще одна уловка — удалить цвет с вашего произведения искусства (т.е. установите насыщенность на ноль), чтобы увидеть, хорошо ли читается ваше затенение.
Дизеринг
До сих пор мы в основном затеняли с помощью больших непрерывных кластеров более темного цвета. Однако есть еще одна техника, называемая дизеринг , которая позволяет нам соединить два разных оттенка цвета без добавления нового оттенка. Взгляните на следующий пример:
Вверху находится градиент , который перемещается от темного к светлому, используя сотни различных оттенков синего.В середине мы уменьшили количество цветов до 9, но это все еще много оттенков для одного цвета. Это также создало отвлекающий эффект, называемый полосами , где из-за толстых однородных цветовых полос наши глаза начинают фокусироваться на линиях, где встречаются цвета, а не на самих цветах.
Наконец, внизу мы применили дизеринг, который смягчает эффект полосатости и использует только 2 цвета! Идея состоит в том, чтобы создать шум различной плотности для имитации градации цвета.Это очень похоже на технику под названием «полутон», которая используется в печати. Или «штриховка» в иллюстрациях и комиксах.
Я умеренно использую дизеринг — на орке я добавил лишь немного текстуры. Некоторые пиксельные художники вообще не используют дизеринг. Некоторые используют его широко и придают ему неплохой вид. В целом, я думаю, что он лучше всего работает на больших областях одного цвета (внимательно посмотрите на небо на скриншоте Metal Slug 3 сверху) или в местах, которые мы хотим выглядеть грубыми или ухабистыми (например, грязью).Если вам нравится, как он выглядит, поэкспериментируйте с ним и узнайте, как заставить его работать лучше всего для вас!
Если вы хотите, чтобы дизеринг широко применялся и хорошо выполнялся, изучите игры британской игровой студии Bitmap Brothers 80-х годов или игры на PC-98, японском компьютере (обратите внимание, что многие игры для PC-98 являются NSFW):
Какюсей (PC-98). Эльф, 1996. (Источник) На этом изображении всего 16 цветов!
8. Последний взгляд
Одна из опасностей пиксель-арта заключается в том, что из-за его ограниченного сеткообразного характера легко может показаться, что вы все делаете «правильно», и вы можете обнаружить, что тратите слишком много времени на настройку своих спрайтов. в конце.В некотором смысле это похоже на головоломку, которую нужно решить, и это может вызвать сильное привыкание. В результате пиксельная графика привлекает перфекционистов, поэтому будьте осторожны, не задерживаясь на одном спрайте слишком долго. При разработке игр один статический спрайт — это всего лишь один маленький фрагмент очень сложного расположения частей, и важно, так сказать, не упустить из виду более широкую картину.
Даже если вы не делаете пиксель-арт для игр, хорошо иметь возможность сказать: «Это достаточно хорошо!» и двигаться дальше.Лучший способ улучшить свои навыки — увидеть весь процесс от начала до конца как можно больше раз по как можно большему количеству различных предметов. По крайней мере, оставив кусок на некоторое время, вы сможете взглянуть на него свежим взглядом!
Сначала мы создали большой спрайт 96×96, потому что при таком размере он все еще похож на рисование и рисование, но с пикселями. Чем меньше становится спрайт, тем меньше ваш спрайт выглядит как то, что он должен представлять, и тем большую ответственность несет каждый отдельный пиксель.
В Super Mario Bros. глаз Марио представляет собой всего два пикселя, наложенных друг на друга. И его ухо. И его создатель, Сигэру Миямото, объяснил, что причина, по которой у него есть усы, заключается в том, что они нужны им, чтобы отличать его нос от остальной части его лица. Так что одной из самых знаковых особенностей Марио был не только выбор дизайна персонажа, но и прагматичный выбор! Доказательство старой пословицы о том, что необходимость — мать изобретений … и дающее нам более глубокое понимание того, почему пиксельная графика так интересна.
Учитывая все это, основные шаги, которые мы предпримем для создания спрайта 32×32, на самом деле очень похожи на спрайт 96×96: набросок, цвет, оттенок и затем полировка. Однако для первоначального наброска я часто использую цветные формы вместо рисования контура, потому что в этом размере цвет играет большую роль в определении персонажа, чем контуры. Если мы снова посмотрим на Марио, у него вообще нет плана! И дело тут не только в усах — бакенбарды подчеркивают уши, рукава — руки, а комбинезон более или менее делает его тело понятным.
Создание небольших спрайтов — это поиск компромиссов. Если вы добавите контур вокруг чего-либо, вы можете потерять место, чтобы затемнить это. Если у вашего персонажа четко очерчены руки и ноги, голова, вероятно, должна быть меньше, чтобы освободить для них место. Однако, эффективно используя цвет, выделение и сглаживание, вы можете сделать холст больше, чем он есть на самом деле.
Для маленьких спрайтов я предпочитаю дизайн chibi (или супер-деформированный ), где персонажи милые, с большими головами и глазами.Похоже, это отличный способ создать выразительных персонажей в ограниченном пространстве (несмотря на это, это привлекательный художественный стиль). Но, возможно, вы больше заинтересованы в демонстрации мобильности или грубой силы персонажа, и в этом случае вы можете сосредоточиться меньше на голове в пользу более мощного на вид тела. В конечном итоге все зависит от ваших предпочтений и вашего проекта!
Полная партия в сборе!
Достаточно, чтобы вызвать мурашки по спине любого пиксельного художника.
Вышеописанное произойдет, если вы сохраните изображение в формате JPG , с потерями в формате .Это означает, что данные фактически теряются при их сохранении из-за способа сжатия файла (для уменьшения размера файла). Фактически, ваш красивый, четкий пиксельный рисунок в конечном итоге будет выглядеть размытым, и вы не сможете легко вернуть исходную палитру.
Рекомендуемый формат файла без потерь для статической пиксельной графики — PNG. Для анимации наиболее популярным форматом являются анимированные GIF.
Публикация вашего пиксельного искусства в социальных сетях — отличный способ получить обратную связь и познакомиться с другими пиксельными художниками (не забудьте использовать хэштег #pixelart !).К сожалению, веб-сайты социальных сетей, как правило, конвертируют PNG в JPG, не спрашивая, запятнавая ваши работы, когда они становятся общедоступными. Вдобавок ко всему, может быть трудно понять, что именно в вашем изображении вызвало конверсию!
В помощь, вот несколько советов о том, как сохранить четкость пиксельной графики на различных сайтах социальных сетей. Обратите внимание, что эти сайты часто меняют свои алгоритмы, и этот раздел не всегда может быть полностью актуальным.
Твиттер
Ключ к сохранению целостности PNG в Твиттере — убедиться, что они имеют менее 256 цветов или менее 900 пикселей на самой длинной стороне.(Источник) Я бы также увеличил размер ваших изображений как минимум до 512×512 пикселей, убедившись, что вы увеличиваете масштаб до чистого кратного (например, 200%, а не 250%) и сохраняя резкие края (так называемый «ближайший сосед» в Photoshop).
Анимированные GIF-файлы должны быть меньше 15 МБ для публикации в Twitter. Что касается качества, преобладающая теория заключается в том, что они должны быть не менее 800×800 пикселей, а циклическая анимация должна повторяться три раза, причем последний кадр GIF отображается на половине длины каждого второго кадра.Однако неясно, насколько необходимы все эти шаги, поскольку Twitter продолжает обновлять способ отображения изображений. По крайней мере, я бы удостоверился, что размер анимации минимален. (Источник)
Насколько я могу судить, нет возможности публиковать изображения без потерь в Instagram, но вы можете улучшить внешний вид, увеличив размер изображения как минимум до 512 x 512 пикселей.
Как сделать пиксель-арт — Простое руководство для начала
Пиксель-арт — это вид искусства, о котором часто забывают, но он столь же действенен и богат, как и любой другой носитель.Любите ли вы классические видеоигры или просто любите простоту формата, вам будет проще, чем когда-либо, заняться пиксельной графикой.
Если вам интересно, чем пиксельная графика отличается от других форм искусства, какие существуют типы пиксельной графики или как начать создавать пиксельную графику, читайте дальше.
Что такое пиксель-арт?
Пиксель — это наименьшая единица цифрового изображения, которую можно увидеть на устройстве отображения (например, на телевизоре, экране компьютера или экране мобильной консоли). Сегодня все цифровые изображения по-прежнему состоят из пикселей, но каждый отдельный пиксель был гораздо более заметным, когда разрешение компьютера было ниже.
Пиксель-арт возникла по необходимости. В начале 1970-х и 80-х годов все видеоигры были с низким разрешением по мере появления технологии. Было невозможно скрыть отдельные пиксели на каждом экране графики видеоигр.
Поскольку скрыть их было невозможно, художники сделали все возможное, чтобы представить изображения с помощью доступных им простых палитр. Стиль во многом определяется ограниченной цветовой палитрой и упрощенными блочными формами.
Самый знаковый пиксель-арт из ранних видеоигр.Подумайте о классических Mario Bros, Sonic the Hedgehog, Legend of Zelda, даже Pong. В то время для разборчивости лица или одежды персонажа требовалось всего несколько пикселей.
В 1990-х годах наступила эра 16-битных игр, когда совершенствовались технологии видеоигр. Пиксель-арт стал более детализированным, но суть осталась прежней. На счету каждая точка. Перемещение одного пикселя может полностью изменить внешний вид персонажа.
Эта обманчивая простота продолжает определять пиксельное искусство сегодня. Люди по-прежнему создают пиксель-арт не по необходимости, а как сознательный художественный выбор.И дело не только в создании искусства из пикселей; Большинство художников-пиксельщиков специально стремятся запечатлеть внешний вид ранних компьютерных и видеоигр. Это способ вызвать ностальгию, напоминая о ретро-играх.
Пиксель-арт по-прежнему широко используется в играх, но это еще не предел. Многие люди используют их для создания крутых ретро-аватаров онлайн или просто как произведение искусства само по себе.
Как сделать пиксель-арт
Нет ничего страшнее, чем смотреть на пустой белый экран и пытаться создать искусство из ничего.Даже опытные художники часто не могут начать работать с пиксельной графикой, потому что среда сильно отличается от традиционных методов. Вот несколько советов, как начать создавать пиксельную графику:
Выберите программное обеспечение
Вы можете выбрать любую программу, которая позволяет размещать цветные квадраты на сетке, что дает вам множество вариантов. Adobe Photoshop известен более высокотехнологичными формами искусства, но вы, безусловно, можете использовать его для пиксельной графики. Adobe Illustrator позволяет выровнять вашу работу по пиксельной сетке. И, конечно же, есть классический MS Paint, с которого многие начинали рисовать пиксель-любители.Хотя сегодня есть определенно лучшие программы для рисования, тот факт, что вы все еще можете начать работу с MS Paint, означает, что практически любой, у кого есть компьютер, может попробовать создать пиксельную графику.
Если у вас нет доступа ни к одной из этих программ, вы можете глубже погрузиться в нее и выбрать из полного списка программного обеспечения для создания пиксельной графики. Таким образом, вы можете выбрать программу, которая лучше всего соответствует вашим потребностям. В конце концов, нет правильной или неправильной платформы. Мы рекомендуем попробовать несколько и посмотреть, какой из них вам больше всего подходит.
Начните с инструментов «Карандаш» и «Линия»
Независимо от того, какую программу вы в конечном итоге используете, подружитесь с инструментами «Карандаш» и «Линия». Хотя инструменты «Заливка» и «Кисть» действительно используются в пиксельной графике, отдельные, тщательно размещенные пиксели — это то, что действительно заставит ваш пиксель-арт петь. В пиксельной графике нет ярлыков.
Посмотрите учебное пособие (или множество учебных пособий)
Каждый раз, когда вы пробуете что-то новое, лучше всего начать с наблюдения за людьми, которые знают, что делают.Если вы хотите по-настоящему хорошо играть в бейсбол, посмотрите, как профессиональные бейсболисты творят свое волшебство и изучают их движения. И сколько людей начали свою карьеру художников, наблюдая за Бобом Россом?
Пиксель-арт ничем не отличается. Смотреть на пустой экран и пытаться создать что-то с нуля, как правило, ошеломляет. Но просмотр учебного пособия поможет вам кое-что изучить, чтобы начать работу, так что вам не кажется, что вы изобретаете колесо заново. Некоторые даже позволят вам следовать за вами, имитируя движения более опытных художников.
В Интернете есть множество обучающих программ, как бесплатных, так и платных. Для начала рекомендуем посмотреть хотя бы несколько. Таким образом, вместо того, чтобы полагаться только на стиль одного человека, вы можете использовать более широкий спектр знаний и опыта. Вот несколько бесплатных руководств для начала:
PIXEL ART для начинающих Вопросы Вопросы — Учебное пособие, советы и хитрости от MortMort
Этот быстрый 14-минутный ускоренный курс ответит на несколько ваших животрепещущих вопросов о пиксельной графике с полезными визуальными эффектами, которые помогут закрепить знания.
Учебное пособие по пиксельной графике для
Pixel Joint от Cure
В этом руководстве содержится подробный обзор того, что такое пиксельная графика, основные термины, типичные ошибки, которых следует избегать, и способы создания цветовой палитры — все вместе с полезными наглядными примерами. В качестве исчерпывающего подхода вам может потребоваться некоторое время, чтобы пройти, но когда вы закончите, у вас будет гораздо более глубокое понимание того, как создавать пиксельное искусство, которым вы можете гордиться.
Делайте игры с помощью Дерека Учебное пособие по пиксельной графике: основы
Вот еще один подробный взгляд на то, как начать создавать пиксельную графику, все с точки зрения создания спрайта одного персонажа.Язык и ссылки дружелюбны и доступны. В нем используется широкий спектр размеров, сложности и стилей пиксельной графики, что мы ценим. Новичкам будет полезно увидеть весь диапазон и широту того, как может выглядеть их вид искусства.
По мере того, как вы узнаете больше, вы можете искать более конкретные руководства по конкретным стилям или предметам. Но для начала может оказаться полезной даже общая информация.
Попробуйте скопировать, подражать или заимствовать классику
Создание пиксельной графики может быть кропотливым делом, особенно пока вы еще не освоились.Если вы все еще в тупике после того, как возились с программным обеспечением, которое вам удобно, и после просмотра нескольких руководств, прислушайтесь к советам студентов-художников: изучите классику.
Мы не говорим вам выдавать чужую работу за свою. Но большая часть пиксельной графики сегодня связана с созданием гибрида различных существующих элементов. Сшить их вместе логичным способом, который кажется естественным и создающим совершенно новое произведение, само по себе является сложной задачей. Или попробуйте скопировать стиль вашего любимого пиксельного художника.Разбив его на компоненты, вы сможете понять, что такого хорошего в ваших любимых произведениях пиксельной графики. Это также поможет вам найти свой собственный художественный стиль.
Если вы разместите свои реплики где-нибудь в открытом доступе, обязательно укажите авторов оригинала, как если бы вы реплицировали картину маслом.
Другой пиксель-арт, не живые отсылки (по крайней мере, для начала)
Это может показаться незнакомым художникам, которые привыкли работать с живыми ссылками, но вам будет лучше работать с другими ссылками на пиксельную графику.Почему? Возьмите это от пиксельного художника Эми Монсеррат:
«Отсылки из реальной жизни не так хорошо применимы в пиксельной графике, как в других областях цифрового искусства. Вы должны научиться упрощать сложные формы, такие как руки или выражения лица ».
Это имеет смысл, если вдуматься! Пиксель-арт — это настолько самобытный носитель, что пока вы действительно не научитесь переводить реальную жизнь в пиксельную форму, лучше всего начинать со ссылок, более близких к конечному продукту, к которому вы стремитесь.
Всегда сохраняйте файлы в формате PNG или GIF, а не в формате JPG.
При сохранении файла в формате JPG информация в файле сжимается. Это ставит под угрозу качество искусства и меняет общий вид произведения. Точно так же, если вы работаете в тесном сотрудничестве с референсом или создаете гибрид существующего искусства, убедитесь, что вы работаете не с JPG. Использование ссылки на файл в формате GIF или PNG гарантирует, что вы работаете с максимально возможной визуальной информацией.
Осторожно! JPG часто используется по умолчанию, поэтому вы можете изменить настройки по умолчанию на своем компьютере, чтобы предотвратить несчастные случаи с сохранением.
Начать рисовать
Вы можете просматривать все учебные пособия и проводить все исследования, которые захотите, но вы никогда не улучшитесь, если не будете практиковаться. Даже если вы чувствуете себя глупо, вам нужно с чего-то начать. Выберите простой предмет и попробуйте. Рисование в сетке 16 × 16 — хороший способ дать себе ощущение пространства, с которым вы будете работать в пиксельной графике.
Поделитесь своей работой
Независимо от того, сколько пиксельного искусства вы создадите, рано или поздно вам не хватит места для улучшения, если вы не покажете его кому-нибудь и не спросите его мнение.Многие художники не решаются спрашивать отзывы или делиться своими работами со всем миром, но, в конце концов, разве вы не создаете искусство, чтобы люди могли им наслаждаться?
Сообщества пиксель-арта — это доступный и полезный способ окунуться в мир пиксельного искусства. Попросите обратную связь и поделитесь своим мнением взамен. Вы будете удивлены, как много вы узнаете.
Освежите свои навыки рисования
Чем лучше вы рисуете (или в других областях искусства), тем лучше вы будете рисовать пиксели.Это потому, что все искусство опирается на одни и те же принципы: теория цвета, оттенок, пропорции, перспектива, анатомия, свет и тень, даже история искусства (включая историю пиксельного искусства как жанра). Узнай все, что сможешь. Если вы давно взяли карандаш и пытались что-то нарисовать, попробуйте. А если вы действительно серьезно относитесь к тому, чтобы вывести пиксельную графику на новый уровень, подумайте о занятиях по традиционному искусству, чтобы улучшить свое зрение.
Pixel Art Размеры
В пиксельной графике вы часто обнаружите, что искусство придерживается стандартного набора размеров «холста».Чем больше пикселей, тем больше (и сложнее) может быть изображение. И наоборот, чем меньше размер холста, тем больше ограничений вы должны соблюдать. С меньшим количеством пикселей, с которыми нужно работать, каждый отдельный пиксель должен нести более тяжелый вес. Это может быть интересным испытанием, а также может помочь в достижении определенного стиля.
8 × 8
Самый маленький стандартный размер пиксельной графики, вы сможете создавать очень элементарные, очень простые изображения. Представьте себе оригинальные спрайты Mario Bros 1970-х и 1980-х годов.Это очень самобытный стиль, и хотя он может показаться упрощенным, в этой простоте есть искусство.
16 × 16
На холсте среднего размера можно добиться средней сложности. Картинные образы 1990-х, такие как Super Nintendo. Это максимум эстетики ретро-игр.
32 × 32
Текущий пиксель-арт в «ретро-стиле» обычно имеет такой размер. Он позволяет получить гораздо больше деталей, чем холсты меньшего размера, при этом сохраняя ограничения работы в небольшом пространстве, поэтому каждая отдельная точка может просвечивать.Подумайте о домашнем пиксельном стиле игры Stardew Valley.
Ресурсы для пиксельных артов
Субреддит Pixel Art
Когда вы найдете свое сообщество пиксель-артов, процветающий субреддит может стать отличным местом для начала.
Пиксель-арт от Lospec: с чего начать
Это далеко не исчерпывающий учебник — скорее ускоренный курс — но он дает быструю и ценную информацию о том, как начать создавать пиксельное искусство. Это также отличное место для поиска других ресурсов со ссылками на такие вещи, как список палитры пиксельной графики.У него даже есть мини-холст с пиксельной графикой прямо на странице, который может служить маленьким блокнотом.
Open Game Art
Эта коллекция пиксельной графики с открытым исходным кодом является отличным источником ссылок и вдохновения. По мере того, как вы обретете уверенность, вы даже сможете опубликовать здесь свое собственное искусство, чтобы люди могли комментировать и получать удовольствие.
Lospec Pixel Art Software List
Если вы обнаружите, что Photoshop, Illustrator и MS Paint не делают этого за вас, этот список альтернативных редакторов пиксельной графики может указать вам правильное направление.Он включает редакторы, подходящие для всех уровней опыта, как браузерные, так и загружаемые, а также бесплатные и платные.
Создавайте игры с типичными ошибками Дерека в области пиксель-арта. Обзор
Когда вы уже не научились рисовать пиксель-арт, мы рекомендуем взглянуть на этот обзор наиболее распространенных ошибок новичков. Когда вы будете готовы, это удобный и легкий для понимания способ определить области, которые можно улучшить в своем искусстве.
— Начиная с Pixel Art
Пиксель-арт — пугающая среда для начала.Но после того, как вы наладите себе путь, просмотрев несколько руководств, поработав с рекомендациями и найдя поддерживающее сообщество, вы будете на правильном пути к созданию произведений искусства, которыми можете гордиться — очаровательной ретро-атмосферы и всего остального.
Miniboss • Уроки по пиксельной графике
Уроки по пиксельному искусству
Вот все уроки по пиксельной графике, сделанные Pedro : D
Больше информации на его странице Patreon !
Статья № 8: Сохранение и экспорт Pixel Art
Статья № 7: Работа с линиями
# 79 Jumping
Артикул № 7 Теория цвета
# 78 Impact
Артикул 5 Базовая заливка
Артикул 4 Антиалиас и полосы
Трюки сверху вниз
# 76 Анимация атаки сверху вниз
# 75 Изометрия — часть 1
# 74 Цикл ходьбы сверху вниз
Статья № 3 Базовая анимация Aseprite
Статья № 2 Скетч кластера g and paiting
Статья # 1 Как начать создавать пиксель-арт
# 73 Swords
# 72 Wood
# 71 Изменение размера Pixel Art
# 70 Техника освещения
# 69 Самоцветы
# 68 Дизайн огнестрельного оружия
# 67 Hologs
# 67 # 66 Защитить / принять удар # 65 Дома сверху вниз # 64 Ice # 63 Космические корабли
# 61 Настенная направляющая / ударник
# 60 Современное / в помещении 9000 3
# 59 Death / take hit
# 58 Песок / пустыня
# 57 Растительность (часть 3)
# 56 Остроумие
# 55 Модульная анимация
# 54 Разрушение объектов
# 53 Тьма
# 52 UI: 9-сегментный
51 1-Bit
# 50 Wind
# 49 Пробел / звезды
# 48 Цикл ходьбы
# 47 Outlines 39
# 46 Шаг / рысь четвероногих
# 45 Затенение
# 44 Облака
# 43 Опасности для окружающей среды
# 42 Ткань / флаги
# 41 Кровь и кишки
# 40 Изготовление плитки
# 39 Символ простаивает
# 38 Пули
# 37 Металлы
# 36 Сжатие и растяжение
# 9000 Размытие в движении# 34 Городские фоны
# 33 Основы пиксельного искусства — часть 2
# 32 Учебник по растительности — часть 2
# 31 Скальные образования 9002
# 30 Жидкости / слизи
# 29 Крылья / Обучение полету
# 28 Эффекты магии света
# 27 Портреты
# 26 Эффекты темной магии
# 25 Учебное пособие по движению космического корабля
# Учебное пособие по движению# 23 Процесс пиксель-арта
Чтение текста с таймером немного напряженно, поэтому я добавил неподвижные кадры из этого урока:
# 22 Сглаживание анимации
# 21 Уловки рендеринга
# 20 Параллакс и глубина
# 19 Учебные пособия и инструменты # 18 Взрывы — часть 1 # 17 <1 пиксель Movem Ent Tutorial # 16 Планирование анимации # 15 Дизайн персонажа 1 # 14 Учебник по черепу и костям # 13 Учебник по растительности
# 12 Учебник по бесшовной анимации
# 11 Учебник по пожарной безопасности
# 10 Учебник по воде
# 9 Развитие дизайна уровней
# Учебное пособие
# 7 Учебное пособие по электричеству
# 6 Цикл работы сверху вниз
# 5 Основы пиксельного искусства
03 # 4 Учебное пособие по простому запуску 9002 9
# 3 Дымовая анимация
# 2 Simpl анимация атаки
# 1 Учебное пособие по простому блеску
Pixel Art для начинающих | Оскар Дав
стенограммы1.Вступление к уроку пиксель-арта: добро пожаловать на мой всесторонний курс для начинающих по выбору. О чем это, самое главное, о том, как на самом деле создать пиксельную графику. Это полный базовый класс. Будет еще больше, так что следите за обновлениями. Есть небольшое клеймо в отношении выбора, целая неделя для Мэтта, говорящего, что это базовый или простой вариант, но мы все сделали правильно. Пиксель-арт — это то, чем действительно стоит восхищаться. Это искусство, которое безопасно — это качество, когда сталкиваешься с уменьшением детализации. Это можно сделать так, чтобы удивлять людей.Пусть некоторые скажут: «Ух ты, я никогда не думал, что ты сможешь изобразить что-то настолько крутое, с таким малым количеством пикселей, если только один скажет это конкретно». Но они определенно подумали бы об этом, потому что это делает его особенным. Просто чтобы вы знали, просто потому, что я знаю, что другие классы будут заблокированы, и вы думаете про себя: вы знаете, чего ожидать. Это классический капитализм. По сути, я начну с того, что расскажу, как открыть ваш документ в любой выбранной вами программе. Это довольно просто, и программы созданы для этого, но это немного отличается, если у вас есть такие вещи, как фото-магазин, золотые правила выбора, некоторые вещи, которые вы всегда должны помнить и видеть.Мы расскажем о некоторых забавных вещах, которые вы можете сделать, и я также расскажу о некоторых из лучших художников, за которыми следует следить. И некоторые из лучших примеров продуманной мысли, различных стилей, с которыми вы столкнетесь, потому что всегда важно сравнивать, восхищаться и вдохновляться вами, ребята. 2. Урок Pixel Art 1. Основы в Piskel: Хорошо, добро пожаловать в первую часть. Это будет вводное видео, которое просто познакомит вас с некоторыми основами. Я собираюсь использовать программу под названием Pisco.Теперь Pisco — это программа на основе браузера. Это своего рода что-то открытое и начатое. Я не хотел сразу использовать что-то, что было бы недоступно для некоторых из вас. Я знаю, что Photoshopped стоит очень больших денег на Sprite, хотя это самая популярная программа для пиксельной графики. На данный момент это стоит денег. Так что я просто хотел пока избежать этого для самых основ. Итак, давайте рассмотрим это. Я собираюсь познакомить вас с некоторыми основами самой программы, прежде чем мы начнем делать что-нибудь еще.Итак, я нарисовал здесь пару вещей. Помогите объяснить. Здесь у нас есть четыре размера пера по умолчанию для физического офиса. Итак, они у нас здесь. Размер Пенна один, размер 23 Девять раз из 10. Вам просто нужно оставаться на одном пикселе на время, выбранное вами. Сейчас много работы. Что-то очень простое, такое как это дерево, возможно благодаря маленькой функции жизни, которую мы здесь называем вертикальной ручкой Мира. Никакая вертикальная ручка Mira в Pisco не позволяет нам полностью что-либо отразить. Мы полностью опускаем центр экрана и позволили мне создать это чудесное маленькое деревце.Посмотрите, как я могу избирательно очень быстро сделать тело дерева здесь справа. У вас есть поддоны текущих цветов. Что бы вы ни делали в школе, я добавлю вам дополнительный цвет в вашей цветовой палитре. Так, например, если я это сделаю, у кого будет красивая яркая красная пакля? Цветовая палитра, которая потом исчезнет, если мы ее поднимем? Так что просто имейте в виду, что если вы хотите сохранить цвет, но избавились от него, он не будет доступен в вашей текущей цветовой палитре. Потому что в пиках очень часто используются такие вещи, поэтому резкая черная рамка на чем-либо, просто чтобы отличить, потому что это довольно видеоигра, потому что это форма искусства, связанная с видеоиграми.Все довольно хорошо различимо с использованием черных контуров, и это превратилось в своего рода популярное первое. Но такие линии очень важны, в отличие от того, что выбирается много, обычно автоматически создается несколько. Когда вы перетаскиваете медленно, это называется шаганием. Этого мы хотим избежать. Когда мы часто используем медиаторы, это некрасиво. Это навязчиво, если я могу привести вам пример. Если вы рисуете вперед, а, и рисуете его только толстыми ступенчатыми линиями, вы очень быстро заметите, что голова будет похожей на голову.Это будет довольно агрессивно по содержанию, поэтому вы нарисуете глаза. Тебе сказали, что давай на секунду применим его к этому парню. Видно, как только я это сделаю, это полностью испортит. У этого персонажа нет отличительных черт. Вы не можете понять, как он выглядит. Он теряет характер, вы знаете, он теряет свой пучок волос. Там он теряет шею и, знаете ли, из-за пробелов в волосах тоже теряет ноги. Очень важно аккуратно подходить к работе с линиями, поэтому всякий раз, когда вы рисуете что-либо, убедитесь, что у вас ничего этого нет, и вы будете на правильном пути к созданию контента хорошего качества.Для примера мы приводим эту стыковку в общих чертах. Видите, мы бы спустились для этого, а затем вернулись бы сейчас, что бы врезалось в существующую работу. Но от этого жизнь становится лучше. Теперь он просто ситуация. Если вы когда-нибудь встретите что-то подобное, мы сделаем это. Мы потеряем клюв вверх уведомление. Впечатляет А вот и палитра цветов. Нажмите, что вы выйдете, чтобы выбрать цвет, который существует там, выберете его снова. Хорошо. Как это. Я просто здесь. Мы просто собираемся заполнить это и другим.Вот как вы не одалживаете это. Знаете, теперь вы могли бы обрисовать эту утку вот так, просто для контраста. Скажем так, мы сделали это так, что день выглядит отвратительно. Этого должно быть достаточно, чтобы вы когда-нибудь перестали обрисовывать в общих чертах что-то подобное, Честно говоря, не так ли? Это Золотые правила для его подбора. Вот что я хотел рассказать о работе в Интернете. Давайте перейдем к непосредственному использованию инструментов прямоугольника. Очень полезный. Он поможет вам с очень быстрыми формами, как и инструмент круга. Итак, цирк, очевидно, создает круги.Мы сделаем это прямо здесь. Если вы перетащите вправо из угла, вы увидите и увидите, что у нас нет уведомления. Одно дело с круглым носком, и это то, что действительно меняется в зависимости от этого масштаба. Круглый палец ноги имеет почти математическое правило с множеством правил при создании кривых. Итак, вы увидите здесь. 1234567121211 1212, а затем обратно. И с этим вы в конечном итоге получаете то, что кажется выбором. Многое эквивалентно кругу. Если я просто вернусь сюда, мы сможем. Мы можем это принять. Мы можем взять такое уравнение полных кривых, когда мы можем использовать его всякий раз, когда мы делаем что-то от руки.Итак, начнем. 1234: Ты тоже можешь это сделать. Какие? Я делаю это, и каждый раз мы будем платить половину. Так что нет. 1212 один предупредил. Мы возвращаемся к одному, чтобы просто повторить курс или удлинить эту кривую. Затем 1212, Затем 1234, 1234, и мы собираемся забрать это старое, так что просто возьми его с собой. 1112 Вы можете видеть, что мы создали круг, полностью свободную руку, используя здесь правило наличия и дублирования центральной части. Так что это довольно полезный способ вспомнить, как создать красивую кривую с очень ограниченными пикселями.И, знаете, вы можете использовать это в любом масштабе, какой захотите. Давайте изменим размер Andi, где написано 32 на 32. Это деревья 32 на 32 пикселя после 64 на 64. Мы можем закрепить это посередине. И это означает, что все эти вещи здесь я останусь в центре нашего проекта. Итак, ресурс. Итак, чтобы получить хорошие кривые в пиках, общее практическое правило — постепенно увеличивать, постепенно уменьшать и увеличивать ваши числа по мере продвижения. Вот так. Просто помните, что если вы собираетесь пойти по этой кривой, вам нужно постепенно увеличивать ее, так же, как вы осуждаете 321123, как это так, не стесняйтесь возиться с этим, потому что вы можете изменить уровень.Посмотрите, как хорошо я здесь справился. Я только что перешел с 3 по 123. Следующий сеанс начнется с небольшой анимации затенения. Энди, еще несколько вещей первой необходимости для вас, ребята. 3. Pixel Art Lesson 2 Перспективы платформ и ролевых игр: Хорошо, ребята, добро пожаловать на подобный урок. Мы сделаем шаг вперед по сравнению с тем, что мы делали изначально. Здесь мы собираемся осветить перспективы, и все они будут реализовывать некоторые из вещей, которые вы узнали из первого видео. Это включает в себя такие вещи, как шаг и все, что мы прошли с точки зрения кругов и своего рода сохранения размеров и учета того, что работает визуально.Итак, что я собираюсь сделать с этим первым, ну, со вторым сеансом, я собираюсь в основном познакомить вас с перспективами персонажей и перспективами для зданий. Так что мы сможем сразу перейти к этому. Я собираюсь быстро нарисовать персонажа под одним углом, а затем под другим углом и под средним углом. Ладно, ребята, вот что я сделал здесь, так это то, что я тоже немного затенял. И я нарисовал несколько разных точек зрения. Итак, вы попали прямо сюда. У вас есть Central, и у вас есть левая сторона, вся такая заштрихованная.Теперь одна интересная вещь, я не хочу слишком отвлекаться, но с затенением всегда важно выбирать немного более холодный цвет. Итак, скажите, что у вас есть плоть, кожа, волосы, телесный цвет. Давайте просто определим это. Итак, мы идем. Итак, вот оно. Итак, что я собираюсь сделать, так это вместо того, чтобы идти сюда или вместо того, чтобы просто затемнять, просто чтобы создать тень, потому что это, очевидно, не так, как обычно, с пиксельной графикой. То есть это всегда срабатывало просто по какой-то причине.Просто кажется, что с пикселем он работает лучше, просто здесь, и он также работает со многими другими средами. Вообще-то слегка пурпурный. И просто опусти его и увидишь, что у тебя есть такой тиран. Смотрите в пурпурном, а не в пурпурный. И если вы хотите делать заметки, я дам вам эти оттенки кожи прямо сейчас. Итак, в вашем пистолете просто перейдите к первичному, вы можете найти там F12, 8, 9. А затем меньше штриховки. У вас есть BB8, 892. И вы можете использовать их, чтобы работать вместе со мной здесь и заставлять этих маленьких персонажей зависать столько, сколько вам нужно.Я намеренно работаю в рамке своего рода, которую легко скопировать, пока вы идете, просто чтобы как бы встать на ноги и найти, где вы находитесь, понимаете? И тут у нас есть перспектива сверху вниз. Вы знаете, у вас есть плечи, у вас есть волосы, и я не слишком много этим занимался, но вы можете понять, что я имею в виду, вы, что вы, скорее всего, получите с этим. Если вы посмотрите на такие игры, как Hotline Miami, то это отличные примеры. Вы знаете, у вас есть только нисходящая вещь. Вы можете держать оружие и вывести его вот так.Если бы вы держали в руках оружие, они могли бы что-то держать здесь в руке. Обычно, когда они идут, вы видите, как колени выдвигаются вперед, а ступни уходят назад. Поэтому, когда вы анимируете такой цикл ходьбы, это довольно просто. Вы просто качаете плечами вперед и назад, и вы делаете что-то вроде цикла с коленом и стопой. И я пройду через это позже. Когда мы проходим процесс анимации пикселей. Следите за обновлениями, продолжайте следить, и мы вернемся к этому на более позднем занятии.Хорошо? О, еще одна вещь, о которой я хочу поговорить. Итак, вы заметите, когда я говорил о шагах и о том, чтобы убедиться, что у вас не слишком много блоков при проектировании. Так что запомните, я проходил последний стрим, стрим, последний урок. Как я уже говорил об этом. Теперь многие из вас, вероятно, следят за этим, и вы знаете, что вы вроде как поняли суть того, о чем я говорил, и убедитесь, что линии являются тонкими и не слишком чрезмерными. Теперь есть несколько исключений. И вы, наверное, заметили, когда я проходил через это, вы думали: «О, черт возьми, Оскар, ты знаешь, у тебя эти волосы».Вы здесь. А у вас здесь вот так. Что ж, ответ: здесь нет правил. Есть только предложения по этим вещам. Потому что, в конце концов, когда вы создаете руки, у вас есть такие точки пересечения. Я имею в виду, вы представляете, если бы я, например, просто сделал это прямо сейчас. Просто начинает образовываться что-то вроде этих странных мясистых выступов? Потому что происходит следующее: если у вас есть план здесь, а здесь — для руки. Если я затем помещу содержимое человека, оно может выглядеть немного подозрительно.Но я говорю, что контур руки затем становится контуром тела. И внезапно люди обращают слишком много внимания на этот контур руки, заботящейся о теле. В то время как здесь у вас есть очертание ноги, очень четкое очертание 100. То же относится и к этому. Теперь я могу поступить иначе. Конечно, мог бы, может быть, у меня могли бы быть особые глаза славы, потому что это особый волшебник или что-то в этом роде. Дело в том, что не жертвуйте тем, что работает, просто следуйте правилу.Хорошо? Если вы уберете что-нибудь из этого, когда вы продолжите пиксельное изображение, помните, не следуйте правилу, если это означает, что что-то будет выглядеть хуже. То же самое и с этим, вы можете видеть, как эти ноги феи четко очерчены, когда персонаж смотрит вперед. У вас не было бы этого с этим обязательно, знаете, если бы на ней были туфли, вы знаете, они бы выглядели правильно. Они выглядели бы очень правильно. И это нормально. И мы там соблюдаем правила, и все в порядке. Но когда они смотрят вперед, вам нужно это определенное преимущество.Знаете, вам нужен этот очень четкий блочный вид, потому что это пиксель такого размера, с которым мы работаем с ее волосами. Так что да, просто действуйте своей интуицией. Очевидно, придерживайтесь правила, когда оно применимо, но действуйте интуитивно. Вы знаете, очевидно, что у нас не будет таких массивных плеч, если, знаете, этого не требуют ситуации. Но мы не можем продолжать это делать. Мы сразу испортили ему линию шеи и челюсть. И то же самое будет продолжаться во веки веков.Я мог бы просто продемонстрировать это. Вы даже можете сделать это для проблем. Честно говоря, это не выглядело бы неуместным. Если бы у нас все время были квадратные туфли, это было бы совсем не к месту. Итак, как я уже сказал, очень мало правил, которые будут с вами навсегда, когда вы работаете с пикселями. Знаешь, мне просто нужно было убедиться, что ты на правильном пути. Ладно, ребята. Итак, я собираюсь посмотреть, я буду работать над этим с вами. Мы собираемся создать фасадное здание.Теперь я хочу, чтобы вы начали с инструмента «Прямоугольник». И если вы хотите пойти с ним один на один, вы не можете или можете пойти вместе со мной. Если вы хотите перейти один к одному с прямоугольником, просто щелкните, удерживая Shift. И он будет оставаться в соотношении один к одному все время. И вы можете перетащить его с любой стороны, какой захотите. В противном случае просто перетащите. Итак, что это на самом деле, если вы посмотрите в правом нижнем углу, вы увидите желтый текст, и в скобках он сообщает вам, каково соотношение. И также в скобках указано, что, сколько пикселей на сколько пикселей.Итак, что мы собираемся сделать, это 29 на 26. 29 на 26. И если вы хотите убедиться, что ваше рабочее пространство настроено для этого, более чем достаточно. Просто перейдите сюда, чтобы изменить размер, и измените его здесь на 64 на 64. Я предпочитаю рабочее пространство 64 на 64. Это дает мне много места для работы, но это действительно зависит от того, над чем вы работаете в данный момент. Теперь мы собираемся выбрать цвет для нашего здания. Итак, давайте продолжим, и я выберу E, F, B до 26. Это приятный песочный цвет, очень похожий на тропический. Почти кубинец. На самом деле мы не собираемся использовать для этого очертания.Итак, как только вы заполнили свой квадрат и щелкнули по краю, он также заполнит двигатель. А теперь, чтобы сделать наш оттенок, мы сделаем немного прохладнее. Мы собираемся наклониться к зеленому, и мы собираемся наклониться к более темной стороне. Немного менее очевидный, может быть, зеленый. Фактически, нам нужно будет прочитать еще немного. Теплее не будет. Но если мы найдем волосы 87958, это хорошо. Дайте нам то, что мы ищем. Итак, мы собираемся создать еще один прямоугольник над ним и посмотреть.И просто перетащите это вверх. Это не будет, это не останется этим прямоугольником. Итак, что я собираюсь сделать, я просто опущу это и вынесу в центр. Там. Итак, мы идем. Прекрасный. Таким образом, вы уже можете сказать, если посмотрите на это сверху, что это, по сути, квадрат, на который смотрят сверху вниз с очень плоской точки зрения. Это то, что вы можете увидеть в ролевых играх. Итак, вы играете в игры Gameboy Advance, вы играете старой школой. Я могу подбросить несколько картинок прямо сейчас. Чего и следовало ожидать.То, что вы здесь видите, называется орфографической перспективой. По сути, это двухмерный вид трехмерного объекта. В основном это потому, что на этой картинке нет никаких доказательств, кроме того, что наши глаза воспринимают края верха здесь спереди. Других доказательств того, что это на самом деле 3D, нет, совершенно справедливо. Итак, что нам, как художникам, нужно сделать, так это сделать так, чтобы все выглядело как 3D наилучшим образом. Итак, что мы собираемся сделать для этого, мы пойдем, сделаем несколько окон. Мы просто продолжим работать над этим, верно? Итак, мы сделаем здесь инструмент прямоугольник.Теперь, что вы можете сделать, если хотите, и я бы действительно рекомендовал это. Мы собираемся найти центр. Итак, это центр. Итак, вы можете использовать, вы можете свободно использовать инструмент симметрии, ребята. Это действительно очень полезный инструмент. Так что я собираюсь добавить ко всему этому один квадрат. Итак, у нас будет один квадрат на этой стороне. И причина, по которой я собираюсь это сделать, заключается в том, что тогда мы сможем использовать инструмент симметрии для работы со зданием. Теперь это немного, это своего рода маленький лайфхакер, потому что, очевидно, это не так, не все, что вы делаете, будет симметричным, но это отличный способ остановиться.Итак, если вы перейдете к вертикальной зеркальной ручке, то, что мы можем сделать сейчас, — это взять нашу оконную раму и мы можем просто пойти, бум, бум. С окнами чуть большего размера. Это будет очень простой дом, действительно, очень простой дом. Чтобы вы по-настоящему познакомились с созданием зданий с неожиданной точки зрения, мы будем работать над этим немного по-другому. Итак, мы перейдем к местному цвету. Думаю, восемь, d 0, d пять было бы хорошо. И, возможно, мы просто раскрасим его с помощью инструмента симметрии.Хорошо, милый. Теперь вы действительно можете увидеть, насколько это просто. Я собираюсь пойти еще дальше. Я собираюсь избавиться от слоя. И мы собираемся действительно сосредоточиться на том, чтобы просто построить здесь красивое маленькое здание LAM. Итак, ребята, в следующий раз мы сделаем что-то вроде крыши. Причина, по которой я просто использую этот цвет. Я могу изменить этот цвет за секунду. Итак, что мы собираемся сделать, это сделать его цветным для прогулок и 86 3D, если вы хотите использовать этот цвет. А потом то, что мы собираемся делать после этого, просто сделать немного ярче.Итак, что мы действительно знаем, здесь вещи начинают немного отклоняться от проторенного пути, я полагаю, так сказать. Так что, на самом деле, мы все равно будем использовать симметрию. Итак, мы делаем здесь немного соломы, ребята. Просто работаем над созданием небольших несоответствий, начиная с инструмента, а затем как бы уходя от него. На самом деле я собираюсь взять здесь и темный оттенок. И я просто аккуратно добавлю некоторую несогласованность по краям. Хорошо. Может быть, немного этого.Здесь только по углам, просто сузив его, чтобы создать такие грубые края. И причина, по которой я это делаю, и вы, наверное, уже можете сказать, что мы делаем что-то вроде соломенной ситуации. Тогда я тоже захочу, я сделаю, я перейду к более богатому сорту темного дерева. Итак, 55291 B. Мы собираемся запустить это здесь наверху. Вот такая строчка одна за другой. А потом, хоть чуть-чуть, я на самом деле сбегу, вот здесь, чуть не до краев. А затем возьмите темный оттенок и проведите его также по верху.Итак, эти окна, кстати, идут, когда мы немного углубляемся. Что ж, есть два способа сделать это, хорошо? Удвойте ширину. Я возьму это на себя. Так что это интересная практика в перспективе, хорошо? Потому что есть способы сделать это в зависимости от того, что вы собираетесь делать. Так что посмотрите, что я здесь сделал: я уже немного поработал над перспективой. Итак, ребята, я сделал здесь просто для демонстрации, я построил дом, который следует немного иному правилу перспективы.Хорошо? Итак, что мы, что мы сейчас проходим в своем собственном темпе. Теперь этот конкретный дом здесь, по сути, следует, и я просто привожу его очертания. Он следует правилу, где это можно увидеть. Представьте, что вы смотрите на него сверху вниз. Хорошо, представьте, что вы смотрите на этот дом сверху вниз. Но с немного более реалистичной трехмерной перспективой, которая на самом деле как бы сужается и находится дальше от ваших глаз. Теперь вы можете использовать, это на самом деле очень популярная вещь, которая использовалась в таких вещах, как игры и иллюстрации.Эм, вы можете использовать именно эту стратегию. Единственное, что явно усложняет задачу, — это эта штука. В некоторых других играх это может не использоваться для того, чтобы четко видеть вещи. Невозможно четко нарисовать фасад чего-либо и отобразить фасад здания. Делая это таким образом, имея ортогональную перспективу, которая больше похожа на 2D. Но если вы просто делаете это, вы хотите, чтобы это было предельно ясно. У нас будет что-то вроде деревянного дверного проема.Теперь вы, ребята, можете украшать этот дом сколько угодно. Я, очевидно, познакомил вас со всеми этими активами. Но если вы посмотрите на этот дом здесь, вы знаете, вы можете текстурировать, вы можете что-то добавить. Есть небольшое правило. Итак, я превратил его в звезду, взял ваш немного синий камень и бросил как очки. Что мне нравится делать, так это то, что вы можете делать спецификации, так что вы можете делать что-то вроде кирпичной кладки, которая пропатчена. Так что, если вы хотели это сделать, позвольте мне показать вам здесь. Давайте сделаем это немного более похожим на кирпичи.Вы можете просто сделать это и просто нацарапать какие-то патчи. Просто будьте очень внимательны к таким вещам. Рамки окон, bom, bom, bom, и просто сохраняйте разумные интервалы в основном. Итак, вы можете видеть, что по мере того, как мы как бы продвигаемся вперед, а я прокручиваю, мы начинаем приобретать в доме очень приятный суровый цвет лица. И, возможно, так и будет. И жидкий навоз просто пробивается вот так. Я мог бы сказать, что я не вижу, что у них есть работа с этим, но вы видите, что упускает мою точку зрения. Ага. Идеально.Так что ты можешь делать такие вещи. Теперь, когда через 2 эта дверь. Так что давайте просто сделаем маленькую дверцу. Ребята, я пойду в 3Д в 31 а для магазина и просто заштрихую под ним. Таким образом, вы можете это увидеть. То же самое и с окнами. Итак, у нас есть среда Windows 8 AD D5. Я собираюсь снять это. Я собираюсь опустить это до 72918 D, только для вершин. Просто чтобы постоянно показывать, что наверху что-то происходит. И вы можете использовать это, чтобы как бы очертить дверь, сделав небольшую ручку.Вы можете довольно легко следовать этим цветам. Так что посмотрите, что есть очень ясная дочь. И да, это открыто. Это широко открыто. Хорошо. Что, если я просто займусь этой дверью? Проделал то же самое с этим хранилищем, чтобы вы могли его сравнить. На самом деле это тоже хороший пример. Смотрите дверной косяк. На самом деле я намеренно использую степпинг. И это показывает вам, что на самом деле нет никаких правил, когда дело доходит до пикселя, потому что я на самом деле намеренно использовал это, чтобы показать вам, что вы можете как бы сделать что-то более сильным, используя пошаговое управление.Потому что мы ищем там прочные деревянные балки. Я намеренно использую степпинг, чтобы увеличить расстояние по ширине. Это действительно зависит от вас, но я действительно думаю, что что-то есть в парадных дверях, и здесь тоже что-то есть. Так что это действительно зависит от вас, как вы это используете. Смотрите свои работы. Никто тебе не говорит. Так или иначе, это более известно. Но у ленты есть свои сильные и слабые стороны. И знаете, у вас меньше места внизу зданий.У вас больше места на этих проектах. Это действительно проектный подход. Также существует множество различных способов проектирования таких вещей, как кровля. Так, например, прямо сейчас мы делаем что-то вроде соломенной крыши. Ни в коем случае не нужно делать все. Но убедитесь, что всегда, когда вы делаете отдельные слои, это должна быть некоторая степень. И снова правила созданы, чтобы их нарушать. Это не должно быть какой-то степенью обрисовки, чтобы показать, где грани этого закона и тому подобного.Мы просто идем в неотложную помощь, тем лучше. Просто убедитесь, что есть некоторая степень структуры, потому что вы имитируете солому. И убедитесь, что при этом, кстати, убедитесь, что вы не мешаете всем различным слоям, которые мы добавили. Теперь мы можем сделать это для спины, но на самом деле мы не собираемся этого делать, потому что мы больше всего на свете хотим показать, что позади есть структура. И если мы сойдем с ума со спиной, она просто будет немного выглядеть, чтобы я мог показать вам, что я имею в виду.Это будет выглядеть немного хаотично. Это выглядит не совсем правильно. Я имею в виду, что он все еще показывает что-то, что происходит, но немного лучше, если это снова будет на ваше усмотрение. Опять же, все зависит от вас. Итак, это два типа домов. У вас в основном орфография и немного больше перспективы сверху вниз. Если вы хотите полностью взглянуть сверху вниз, мне, вероятно, не придется вам об этом говорить. Мне не нужно говорить вам, что в основном результат будет выглядеть именно так.Я имею в виду, полностью сверху вниз. Вы в основном смотрите на что-то подобное. Так что просто следуйте моему руководству по крыше и добавьте других сторонних пап. Это в основном потому, что с точки зрения сверху вниз вы получаете полную нагрузку на одну сторону крыши. И я собираюсь рассказать вам о некоторых очень ясных вещах в следующем видео, и особенно о таких вещах, как затенение цветов. И на что обращать внимание, что не использовать, что использовать при растушевке пикселей. Итак, ребята, мы подошли к концу того, что я хотел осветить в этом конкретном видео.Это был простой пример того, какие перспективы персонажей обычно хороши для пиксельной графики. И какие перспективы зданий наиболее полезны для пикселя. Надеюсь, вы смогли уследить за некоторыми вещами, которые я рисовал и создавал сегодня. Я попытался сделать его более инклюзивным с точки зрения возможности сидеть рядом с другим монитором, когда вы идете. В следующем видео я расскажу о нескольких разных вещах. Я также хотел охватить изометрическую перспективу, то есть диагональную перспективу, которую вы часто видите в некотором контенте.И да, надеюсь на меня, если вы, ребята, хотите ответить классу и просто дать мне идеи для вещей, которые вы хотели бы видеть, как я рисую для вас и провожу вас через процесс рисования. Я был бы более чем счастлив принять все это во внимание. Сделайте видео, состоящее из компиляции разных вещей, которые мы можем осветить вместе. Убедитесь, что вы, ребята, хорошо осведомлены о всевозможном контенте. Я также очень скоро перейду к анимации. Поэтому, когда мы это сделаем, я остановлюсь на одном видео.Мы собираемся перейти к спрайту для другого видео, чтобы все были прикрыты? Ага. Я понимаю, что я, вероятно, немного болтаю, но да, я имею в виду, это было абсолютно здорово. Вернемся к тому, чтобы подробнее остановиться на этом для вас, ребята. И мы сделаем еще несколько разных типов крыш для домов и построек. И первая анимация, которую я собираюсь рассмотреть, — это цикл выполнения. Я знаю, что это довольно много. Итак, мы начнем в том же видео только во время анимации прыгающего мяча, убедившись, что вы, ребята, готовы работать с кадрами и работать со шкурами лука.Прежде чем я уйду, я хотел бы осветить еще одну вещь, а именно выцветание и цвета. Я собираюсь снять целое видео о затенении и цвете, в основном потому, что я полностью осознаю, что в этом отношении есть много чего переварить и есть много места для ошибки. Теоретически использование правильных цветов звучит просто. Но когда вы на самом деле приступаете к созданию зданий и персонажей, как вы видели сегодня, вы это делаете. Для работы требуется очень специфический набор цветов. Мало того, вам нужно убедиться, что у вас есть правильные цвета, когда вы работаете, чтобы у вас не было немного разных цветов, которые превращаются в очень шумную и грязную продукцию.Вы должны убедиться, что вещи ясны, определены, но при этом не выглядят кричащими. И, знаете ли, сверх меры. Так что да, большое спасибо за то, что вы здесь для следующего видео. И следите за новостями.
40+ бесплатных видеоуроков для начинающих
Источник изображения Натанаэль Вайс Ресурсы Раскрытие информации: этот пост может содержать партнерские ссылки. Это означает, что если вы что-то покупаете, мы получаем небольшую комиссию без каких-либо дополнительных затрат для вас (подробнее)Создание собственного пиксельного искусства — это очень весело и даже прибыльно.
Но это трудный способ заработать деньги, поскольку в настоящее время на него не так много спроса, хотя игровая индустрия растет с гораздо большим количеством инди-игр с использованием пиксельной графики.
Вы можете научиться создавать пиксельную графику просто для удовольствия в качестве хобби или для практических целей в игровом дизайне. И то, и другое — отличные причины изучить и следовать этим бесплатным урокам по пиксельной графике на YouTube.
Все эти видеоролики предназначены для начинающих, но некоторые из них содержат более подробную информацию, чем другие. В любом случае, это блестящая коллекция руководств для всех, кто начинает исследовать чудесный мир пикселей.
Photoshop для пиксельной графики (для начинающих)
Adobe построил Photoshop для базового редактирования фотографий. В наши дни кажется, что его используют для чего угодно, только не для этого.
Photoshop может делать все, от дизайнерских работ до цифровой живописи и даже пиксельной графики. Вот о чем это бесплатное видео.
Вы узнаете, как с самого начала настроить рабочий процесс Photoshop для создания пиксельной графики. Он идеально подходит для новичков, которые хотят быстро научиться и правильно рисовать пиксели.
пикселей в PS
Чтобы получить более конкретную информацию, посмотрите это короткое видео продолжительностью около 8 минут.
Это действительно идеальное введение в пиксельную графику для Photoshop (CC или более ранней версии). Но это также чрезвычайно простой , и он не заставит вас выйти далеко за рамки необработанных основ.
По-прежнему отличное место для начала, если вы боитесь рисовать пиксели или изучать пиксельную графику в целом.
OpenGameArt Учебное пособие по пиксель-арту: основы
Проект OpenGameArt невероятен, и это один из самых замечательных ресурсов бесплатного игрового искусства.
Они выпускают отличные учебные пособия, которые помогают художникам развивать свои навыки, причем совершенно бесплатно. В первую очередь это видео о пиксельной графике из их серии «Основы».
В этом 20-минутном видео вы узнаете, как создать простого персонажа, используя пиксельные методы в Krita. Безусловно, одно из лучших руководств, и оно использует для загрузки программное обеспечение с открытым исходным кодом.
Создание плитки Pixel Art для видеоигр
Помимо дизайна персонажей, вам часто понадобятся мозаичные ресурсы для игрового фона.
Они могут работать как фон для прокрутки или как фоновые изображения сверху вниз, по которым игрок проходит. А с помощью этого бесплатного видео вы сможете научиться нескольким удобным методам создания мозаичных рисунков для игр.
В течение 10 минут это видео для новичков проведет вас через самый простой процесс создания плиточных панелей.
В качестве примера используется кирпичная стена, но как только вы поймете, как работает мозаика, вы сможете применить эту стратегию и к своей собственной работе.
Урок Photoshop для начинающих
Цифровой художник Ник Казале научит вас создавать потрясающие пиксельные рисунки в своем 20-минутном обучающем видео.
Весь процесс проведет вас по пути с закадровым голосом, объясняющим каждую часть.
Конечно, это не единственное руководство по пиксельной графике, и оно фокусируется на специфическом стиле Ника. Но если вам нравится стиль, вы всегда можете придерживаться его или вносить изменения по мере продвижения в своем путешествии по пиксельной графике.
3 метода пиксельной графики и распространенные ошибки
Конечно, это может не быть конкретным «обучающим» видео, но поможет улучшить ваш рабочий процесс с пикселями.
Ознакомьтесь с этими 3 техниками, упомянутыми в видео, которые помогут вам не только улучшить мастерство, но и избежать некоторых распространенных ошибок.
Новички часто разочаровываются, когда не могут сделать работу из пиксельной графики. Советы в этом руководстве невероятны, и это одно видео, которое укрепит вашу уверенность в работе с этим средством.
Мой секрет быстрого улучшения
YouTuber MortMort публикует тонны контента в стиле пиксель-арт для своей базы подписчиков 50 000+.
Многие из них представляют собой обучающие программы, но в этом видео конкретно описывается процесс Морта по улучшению fast .Разве не все мы этого хотим?
Это быстрое 5-минутное видео обязательно изменит ваш взгляд на пиксельную графику и ваш подход к среде. Стоит быстро посмотреть, если вы новичок, только начинающий.
Дизайн персонажей
Техника дизайна персонажей становится довольно сложной, когда вы переходите в пиксели.
Техники рисования и рисования не совсем подходят для этой области, но, к счастью, это видео достаточно подробное, чтобы помочь вам начать работу.
Из 15-минутного обучающего видео вы узнаете, как с нуля создать закутанную фигуру в Pyxel Edit. Действительно ценно для всех, кто готов заняться собственными персонажами.
Набор плиток в Photoshop
Крайне важно сбалансировать дизайн персонажей с наборами тайлов, чтобы стать разносторонним художником по пикселям.
Просмотрите это руководство, и вы найдете множество рекомендаций по созданию мозаичных ресурсов. Это работает в основном в Photoshop и фокусируется на пиксельной графике, которую можно использовать в реальном сценарии.
Отличное видео для создания тайлсетов для собственных игр или просто для развлечения.
Введение в игровые наборы с видом сверху
Если вы когда-нибудь играли в оригинальные игры Legend of Zelda или старые игры про покемонов, то вы знаете, что такое игровой процесс сверху вниз.
Это стиль дизайна, который смотрит на мир сверху вниз, и ваш игровой персонаж перемещается по этой 2D-сетке.
Это был популярный выбор для игр NES и SNES, которые в значительной степени полагались на пиксельную графику, и с помощью этого урока вы узнаете, как создать звездный набор тайлов с видом сверху вниз на основе оригинальной игры Zelda.
Просто обратите внимание, что это видео имеет длину , , всего более 90 минут работы. Но чем длиннее видео, тем больше вы можете узнать, поэтому его стоит досмотреть до конца.
Учебное пособие по плитке Stardew Valley
Популярная долина Stardew Valley вернула любителей симуляторов сельского хозяйства к их истокам благодаря 2D-пиксельной графике.
Он быстро стал одной из самых популярных инди-игр и обладает одними из лучших пиксельных изображений, которые вы можете найти в современных играх. Ознакомьтесь с этим руководством, в котором показано, как создать набор реплик из серии Stardew.
Скорее всего, вы не сможете использовать это в своей игре, но это хорошее упражнение, чтобы отточить свои навыки.
Учебное пособие по изометрической пиксельной графике
Практика изометрического искусства сегодня не так распространена в играх. Его можно использовать в концепт-арте, но редко для пиксельного искусства.
Тем не менее, вы можете попробовать это видео, которое научит вас создавать идеальную изометрическую пиксельную графику с нуля.
В этом видео важен не столько окончательный дизайн, сколько процесс обучения изометрическому дизайну от начала до конца.
Затенение и цвета Pixelart
Затенение ваших произведений искусства часто является самым сложным этапом для изучения.
То же самое и с традиционным искусством, и с пиксельной графикой. Если вам не удается подобрать цвета или подобрать тени, посмотрите это потрясающее видео продолжительностью около 40 минут.
Вы обязательно получите некоторые ценные навыки из этого урока, независимо от вашего уровня навыков.
Хотя это помогает, если вы уже знакомы с основными методами работы с пикселями, вы можете сразу перейти к затенению, если хотите, и пройти через сложные части.
Учебное пособие по Pixel Rock
Я любитель пошаговых руководств, и это видео — одно из лучших для начинающих.
В этом 20-минутном руководстве художника Jimzip вы узнаете, как создать пиксель-арт с нуля. Это часть серии о пиксельной графике на его канале, и это, пожалуй, самое простое место для начинающих, чтобы не потерять самообладания.
Имейте в виду, что это все еще сложно! Но это один из самых простых проектов для новичка, потому что вы изучаете основные формы, затенение и дизеринг в одном месте.
Учебное пособие по пиксельному дереву
Если вы предпочитаете начать с большого проекта, почему бы не создать собственное дерево?
Это именно то, что вы найдете здесь с 15-минутным учебным материалом в виде дерева пиксельной графики. Кажется безумным, но это очень распространенный проект для инди-разработчиков.
Все маленькие домики, деревья, дорожки, камни, трава… все это создано вручную с помощью пиксельной графики.
Чем больше вы будете практиковать эти, казалось бы, обыденные предметы, тем более комфортно вы будете работать со сценами с полной пиксельной графикой.
Основы плитки
Говоря о стилях фона, вам также может понравиться этот урок по укладке плитки, поскольку он фокусируется на плитках земли.
За 10 минут вы создадите индивидуальную дорожку из грязи / камня, которую можно будет использовать в качестве мозаичного игрового ресурса.
Результаты довольно приличные, но реальная ценность в процессе. Как только вы усвоите, как создавать плитки, вы можете возиться с любой текстурой, такой как трава, лава или даже вода (что делает отличный переход к следующему видео!)
Учебное пособие по воде (простое)
ВDual Core Studio есть довольно приятное руководство по созданию водяных плиток из простых пикселей.
Это руководство по воде очень простое и действительно предназначено для начинающих. Также стоит упомянуть, что вы можете создавать воду по-разному, так что это не единственный подход к ней.
Однако, если вы боретесь с реалистичной плиткой воды, тогда следуйте этому руководству до тройника. Это даст вам хорошую отправную точку.
Рисовать Pixel Art Clouds
Работа пиксельного художника включает в себя все, что между ними — от земли до небес.
И да, это включает пиксельные облака для вашего горизонта. YouTuber GDquest научит вас создавать облака в Photoshop вместе с некоторыми базовыми советами для PS.
Также обратите внимание на то, что сайт GDquest — это массивный и полный потрясающих руководств для художников-геймеров, многие из которых сосредоточены только на пиксельной технике.
Как создать пиксель-арт для игр
Если вы посмотрите это видео, то найдете несколько полезных советов по созданию повторяющегося пиксельного фона.
Конечно, это не самое подробное видео и не самое практичное для изучения всех лучших навыков пиксельной графики. Но он отлично подходит для новичков, которые хотят освоить канаты без особых усилий.
Он длится всего около 12 минут, работает исключительно в Photoshop и учит вас процессу создания красивого фона заката.
Дизеринг: как создавать линейные градиенты
Чем больше пикселей вы попробуете, тем больше вы столкнетесь с дизерингом.Это процесс создания реалистичных «градиентов», которые правдоподобно смешивают цвета.
Это одна из самых сложных техник в пиксельной графике, поэтому потребуется немного практики.
Но для начала я предлагаю это руководство, охватывающее абсолютные основы дизеринга всего за 2 минуты.
Учебное пособие по анимации персонажей и фону
Итак, что хорошего в пиксельной графике, если вы не можете ее использовать? Ну может ностальгия.
Но многие художники хотят оживить свою пиксельную графику, чтобы снова пережить то чувство 90-х.
Из этого руководства по анимации вы узнаете, как анимировать персонажа и в качестве фона для пользовательской работы с пикселями. Независимо от того, работаете ли вы над личным проектом или над реальной игрой, это надежное руководство по пиксельной анимации.
Он длится около 30 минут и будет работать лучше, если у вас уже есть некоторые знания в области пиксельной графики. Но на самом деле любой может начать с этого видео и к концу многому научиться.
Pixel Art в Illustrator
Очень немногие художники говорят о работе с пикселями в Illustrator, потому что это векторная программа.
Но знаете ли вы, что можно создавать пиксельные изображения с помощью редактора векторных изображений? Кажется безумным, но этот урок поможет вам.
Он очень короткий и, вероятно, не то, что нужно большинству людей. Тем не менее, я думаю, что он подходит как вариант для тех, у кого есть Illustrator, но нет Photoshop (и для людей, которые по какой-либо причине не хотят использовать открытый исходный код).
Настройка Krita для Pixel Art
Допустим, вы действительно любите программное обеспечение с открытым исходным кодом и хотите работать с Krita.
В этом случае вы можете взглянуть на наш огромный список руководств по Krita, все совершенно бесплатно. Но этот список в основном касается цифровой живописи.
Если вы интересуетесь исключительно пиксельной графикой, посмотрите это потрясающее видео. Вероятно, это одна из лучших заставок для настройки Krita для работы с пиксельной графикой.
Вам не нужно много каких-либо предварительных навыков, и если вы уже немного знакомы с программным обеспечением, начать работу будет несложно.
Учебное пособие по настройке GIMP Pixel Art
Еще одним очень популярным выбором для цифровых изображений является бесплатное программное обеспечение GIMP.
Опять же, это в основном используется для редактирования фотографий и / или цифровой живописи. И снова мы рассмотрели список потрясающих бесплатных руководств для художников, изучающих GIMP.
Но по сравнению с этим уроком вы вряд ли найдете какие-либо другие серии, затрагивающие пиксельную графику на таком уровне детализации.
Это 15-минутное видео идеально подходит для изучения основных инструментов GIMP, настройки рабочего процесса с пикселями и начала работы с вашим самым первым проектом в области пиксельной графики.
Рисуем изометрические пиксель-арт в Photoshop
Я уже упоминал об изометрической пиксельной графике ранее, и это действительно здорово. Сегодня у него не так много практического применения, но это хороший способ изложить свои идеи.
Если вы работаете исключительно в Photoshop, то взгляните на это бесплатное 16-минутное руководство по пиксельной графике, посвященное изометрическому дизайну.
Самым впечатляющим в этом видео должна быть настройка. Как только вы настроите PS для работы с пикселями, вы, по сути, отправляетесь в гонки.
Как анимировать пиксель-арт
Мало кто догадывается просто , сколько работы уходит на анимацию.
Существует бесчисленное количество книг по 2D-анимации, и они даже не касаются поверхности.
Так что я не обещаю, что вы узнаете все, что вам нужно, только из этого видео о пиксельной анимации. Он подробен и охватывает многое, но ничто не охватывает все, и люди учатся с разной скоростью.
Однако я обещаю, что вы уйдете с гораздо более глубоким пониманием анимации пикселей с нуля, если просмотрите это видео до конца.
Как я делаю пиксельную анимацию
Вот аналогичный учебник по анимации от YouTube Poncho Pilgrim, представленный в совершенно ином свете.
В этом коротком 5-минутном видео просто рассказывается об индивидуальном процессе Пончо по анимации пиксельной графики.
Не рассматривайте этот «метод» для анимации или единственный вариант для работы с пикселями. Но оставьте это как один из способов применения к своему набору инструментов при работе над пиксельными проектами.
Учебное пособие по анимации атаки Duelyst
Чтобы получить более прагматичный подход к пиксельной анимации, посмотрите это видео, которое проведет вас через анимацию взмаха мечом.
Это было бы очень часто для ролевых игр, где персонажи совершают одинаковые боевые маневры.
Обратите внимание, что это видео немного уменьшено, чтобы просто объяснить общий процесс анимации. Но художник Адам Клинг говорит, что потребовалось более 7 часов , чтобы завершить все это, поэтому не ожидайте сразу овладеть этой техникой.
Pixel Art Walk Cycle
Давайте сделаем это еще проще с помощью этого руководства по базовой анимации цикла ходьбы.
Если не считать прыгающего мяча, это, наверное, самая легкая анимация для попытки.
А в пиксельной графике это еще проще, потому что вы проектируете только движения ног и рук, в то время как туловище остается в основном стабильным.
Не поймите меня неправильно: это сложно.
Но увлеченный художник по пикселям (или начинающий художник) приложит усилия, чтобы разобраться в этом.
Временная шкала анимации Aseprite
Невероятное программное обеспечение Aseprite используется профессиональными пиксельными художниками по всему миру.
Он позволяет проектировать, анимировать и создавать высокоуровневые пиксельные рисунки, готовые для игры или для использования в качестве портфолио.
Конечно, программное обеспечение стоит денег, поэтому, к сожалению, оно не является бесплатным и открытым исходным кодом. Но если вы хотите изучить Aseprite, вы можете сделать это бесплатно с YouTube на вашей стороне.
Я особенно рекомендую это видео по анимации в Aseprite. Он довольно короткий, но охватывает многое из того, что вам нужно для удобства работы с интерфейсом.
Учебное пособие по дереву и деревянному ящику
Талантливый художник Питер Даниэль Берг делится этим забавным уроком о том, как создавать реалистичные узоры ящиков.
Деревянный узор легко повторить, но сложно воссоздать самостоятельно. Из видео Питера вы узнаете, как создать двухмерную деревянную коробку с палитрой и использовать ее где угодно.
Когда вы познакомитесь с этим процессом, вы даже сможете использовать его для создания пользовательского значка ящика с нуля.
Кисть для рисования с пикселями Overworld
Игры с видом сверху вниз часто имеют тип настройки «над миром». Часто это происходит за пределами игровой игры, где вы можете выбрать свое следующее местоположение.
Ну, это руководство слишком хорошо объясняет настройку внешнего мира и помогает вам разработать удобный интерфейс с помощью кистей.
Вы научитесь работать с текстурами травы и песка, а также с мозаичными водными узорами.
Масштабируйте и изменяйте размер пиксель-арта в Photoshop
Итак, вы создали свой пиксель-арт и хотите использовать его в качестве финальной части. Но, возможно, вы сделали его слишком маленьким или хотите масштабировать его для изображения с большим разрешением.
Как, черт возьми, изменить размер изображения до пикселя?
Это бесплатное видео может помочь. Это трехминутное руководство по изменению размера пиксельной графики в Photoshop, и это лучший способ для начинающих понять процесс изменения размера (простым языком).
Имейте в виду, что это определенно не , а только способ изменить размер вашей работы. Но это хорошая отправная точка, которая должна быть понятна каждому.
Sprite Icon Tutorial для RPG Maker
Я лично никогда не использовал RPG Maker, но знаю, что это действительно популярная программа для пиксельной графики.
Если вы знакомы с программным обеспечением или имеете доступ к более ранней версии, посмотрите это вступительное видео для начинающих.
Он познакомит вас с интерфейсом и процессом создания пиксельной графики в программе RPG Maker. Определенно ценно для молодых и начинающих художников игр.
Спрайты затенения
Мне еще не удалось найти в сети единственное «лучшее» руководство по затенению пиксельной графики, но я скажу, что оно чертовски близко.
За 50 минут вы узнаете, как затенять существо Покемона с высокой точностью. И да, я сказал почти час наблюдения за тем, как кто-то затеняет свой пиксель-арт. Это либо изнурительно, либо увлекательно, в зависимости от того, насколько вы любите эту среду.
Естественно, этот процесс сильно отличается от рисования покемона, поэтому это руководство по закрашиванию почти похоже на то, что вы заново изучаете основы света. Основные принципы работы со светом и тенью одинаковы, но этот процесс будет казаться художникам невероятно чуждым.
Тем не менее, это видео, которое вы действительно захотите посмотреть, если вам не удается добиться реалистичного затенения.
Пожалуйста, обратите внимание, что этот урок не поможет вам создать монстра с нуля. Вместо этого вы начинаете с существа, которое в основном окрашено, и смотрите 50-минутное руководство по изменению этих цветов с помощью правильного затенения.
Таймлапс Aqua Pixelart
ВидеоSpeedpainting на самом деле не являются учебными пособиями. Но они поучительны, если вы можете смотреть и учиться у них.
Вот почему я все еще хочу включить несколько в этот список. Во-первых, это пиксельный дизайн Aqua, созданный с помощью какого-то безумного старого программного обеспечения, которое вы, вероятно, никогда не найдете: Character Maker 1995.
Так что я не скажу, что это легко выполнить с помощью тех же самых шагов. Это длится около пяти минут, и процесс идет быстро.
Но если вы можете посмотреть и увидеть, как они создают Aqua, вы можете аналогичным образом воспроизвести свои собственные пиксельные изображения Kingdom Hearts.
Super Mario World 3 Пиксель арт Speedpaint
YouTube-канал DYA Games полон потрясающих рисунков.Они часто берут старые игры и переосмысливают их в другом стиле пиксельной графики или берут 3D-игры и конвертируют их в 2D-пиксель-арт.
Одно из моих любимых видео о скорости — это проект рестайлинга графики SMB3 NES.
Вы можете просмотреть весь дизайн с каждым маленьким значком, который вы обычно видите на экране. Монеты, грибы, виды на мир — все.
Опять же: не учебное пособие, но все же полезно, если вы можете следить за тем, что они делают.
Crash Bandicoot Pixel Art Speedpaint
Некоторые из вас, вероятно, были рядом в дни PS1 Crash Bandicoot.Или, может быть, вы знакомы с HD-римейками этих классических игр.
Вся эта серия просто невероятна, и создатели игры Naughty Dog даже выпустили забавный документальный фильм о дизайне игры и истории студии.
Посмотрите это безумное видео от DYA Games. Они создают свой собственный переосмысленный экран Crash Bandicoot, полностью используя пиксельную графику.
Конечно, это всего лишь одна сцена в игре, но этого более чем достаточно, чтобы у вас отвисла челюсть, когда вы увидите окончательный результат.
Плитки платформеров в Adobe Animate
Очень немногие художники думают о Adobe Flash (теперь Animate) как о пиксельной графике.
Но с гладким ребрендингом Adobe это действительно похоже на программу, ориентированную только на цифровую анимацию. А с помощью этого замечательного руководства вы легко сможете выбрать Adobe Animate для создания пиксельной графики.
Это руководство только научит вас создавать простой платформер, но это отличный способ изучить программное обеспечение.
Также стоит отметить, что у Bloop Animation есть собственный курс Adobe Animate для начинающих.Это не бесплатно, но может стоить той цены, которую вы хотите получить в качестве хорошей отправной точки с этим программным обеспечением.
Вы можете узнать больше в нашем полном обзоре системы курсов Bloop и узнать, что вы думаете.
Трава на холмах и склонах с травой
Графика с наклонными пикселями сложна, потому что вы проектируете отдельные пиксели под углом. Вы хотите сохранить реалистичный угол при создании чистых краев.
Никто не сможет понять это с первой попытки, и это действительно помогает, если кто-то направит вас.
В этом ценность этого руководства, опубликованного Overbound Game Studio.
На самом деле это довольно мало, всего около 6 минут обучения. Но учитывая, что эта тема довольно сложная, это видео, которое вам стоит посмотреть, если вы боретесь с фоном или наклонными объектами.
Учебное пособие по анимации BG в Photoshop
Наконец-то мы подошли к великому уроку Photoshop по анимации для пиксельной графики. Это крем-де-ла-крем для фоновой графики, пиксельной анимации или для всех, кто работает с пикселями в Photoshop.
Художник Джейсен Бэтчелор опубликовал это часовое видео в качестве руководства для новичков, которые хотят понять методы пиксельной анимации.
Цель — анимировать фон в Photoshop и спроектировать все с нуля. Да, это непростая задача.
Но если вы действительно надеетесь использовать Photoshop для большей части своей работы, то нетрудно хотя бы сохранить видео на потом.
Это может быть сложно, но, на мой взгляд, оно того стоит.
Учебное пособие по текстуре стены
Этот последний видеоурок по Photoshop научит вас создавать плиточные фоны стен с кирпичной или бетонной текстурой.
Этот дизайн предназначен для использования в темнице, где каждый коридор разбросан серыми кирпичами. Но эти методы могут быть применены к для всех мозаичных фонов , поэтому то, что вы здесь узнаете, не должно казаться ограничивающим.
Если вы новичок в пиксельной графике, возможно, сосредоточьтесь на предыдущих уроках, которые я упомянул в начале этого списка.Вам нужно понять, как настроить Photoshop, прежде чем вы сможете научиться создавать с его помощью пиксельную графику.
Но чем больше вы практикуетесь, тем лучше у вас получается и тем быстрее вы станете настоящим вундеркиндом в области пиксельной графики.
Как сделать пиксель-арт в Photoshop для начинающих
Готовы ли вы создать свой собственный пиксель-арт? Независимо от того, хотите ли вы создать что-то, чем можно поделиться в своей учетной записи в социальных сетях, или, может быть, вам нужен персонаж для вашей ретро-видеоигры этот урок Photoshop поможет вам создать пиксельная графика быстро с Adobe Photoshop.
Начиная
Пиксель-арт — это быстрый и простой способ создавать 2D-изображения для ваших игр или творческие работы, как на картинках, которые вы видите в популярных мобильных играх, таких как Flappy Bird! Это также основа для создания отличного воксельного искусства. Для создания пиксельной графики доступно множество инструментов, но в этом мы будем использовать самое популярное программное обеспечение для 2D-изображений, доступное на паутина. Photoshop — явный фаворит для создания пиксельной графики из-за его множество функций, направленных на создание потрясающе выглядящей пиксельной графики!Создать новый файл
После того, как вы установили Photoshop через Creative Cloud, продолжайте и откройте программа.Вы должны увидеть меню, подобное приведенному ниже. Это называется «Экран приветствия». Идите вперед и нажмите Create New.Откроется экран «Новый документ». Здесь вы можете выбрать из готовых шаблоны для создания фотопроектов, предназначенных для разных экранов размеры. В этом уроке мы покажем вам, как сделать пиксельную собаку. К для этого мы будем использовать опцию Custom . Внутри меню справа называется Preset Details введите имя HipsterDog и введите 32 для ширины и 32 для высоты.Нажмите Создайте , когда закончите.
В основном это создает новый файл с именем HipsterDog с холстом.
то есть размером 32×32 пикселя. Этот холст будет тем, что мы будем использовать для рисования наших
пиксельная графика. После того, как вы нажмете Create , вы должны увидеть экран, похожий на
один ниже. Имейте в виду, что 32×32 действительно мало. Если вы посмотрите внизу
слева вы заметите, что мы на 100% увеличили масштаб. Пиксель-арт по своей природе
произведение искусства, работающее на пиксельном уровне.Мы всегда можем увеличить наши изображения
позже, но пока мы проектируем, мы должны оставаться в этой резолюции.
Однако, чтобы упростить дизайн, мы всегда можем просто увеличить масштаб, чтобы посмотри лучше. Для этого нажмите CTRL + на компьютере с Windows или CMD + на Mac. Мы увеличивали масштаб, пока не достигли 3200%. Ты можешь видеть масштаб в левом нижнем углу.
Если этого недостаточно, вы можете увеличить или уменьшить масштаб.Теперь, когда у нас есть пустой холст, нам нужно настроить нашу рабочую среду, чтобы мы могли отличная пиксельная графика.
Настройка Adobe Photoshop для Pixel Art
Теперь, когда у вас есть холст, нам нужно настроить некоторые основные параметры в Photoshop, который поможет нам в создании нашей самой первой пиксельной графики, а также чтобы он отображался правильно.Включить ближайшего соседа
Когда вы впервые открываете Photoshop, все изображения создаются с использованием Бикубический автоматический механизм для интерполяции изображений.Это отлично подходит для нормального изображения, потому что когда вы увеличиваете или уменьшаете масштаб изображения, это помогает размывать пиксели поэтому они выглядят «гладкими» и менее пиксельными. Однако это полный напротив в пиксельной графике. Когда вы создаете пиксельные изображения, они должны смотреть четкий и резкий. Для этого нам нужно изменить этот параметр на Ближайший сосед . На изображениях ниже показан пример масштабирования изображение, которое мы будем составлять 8x .| Изображение с бикубическим автоматом |
| Изображение с ближайшим соседом |
Итак, без дальнейших задержек, давайте изменим Интерполяцию изображений.Перейти к Preferences и выберите категорию General .
Когда откроется меню настроек, нажмите кнопку Интерполяция изображения раскрывающийся список и выберите Ближайший сосед (Сохранить жесткие края) из списка элементов.
Теперь, когда вы изменяете размер пиксельной графики, Photoshop сохранит резкие края. придавая вашим работам чистый, четкий вид.
Включите сетку
Следующая важная настройка, которую мы включим, — это Grid . Пиксель арт работает с невидимой 2D сеткой. Включив это, он сделает это легко увидеть, где именно мы размещаем пиксели. Чтобы включить наши По сетке выберите View> Show> Grid .
Когда вы нажмете кнопку «Сетка», вы должны увидеть что-то подобное на своем
Холст. Имейте в виду, что эта сетка является лишь ориентиром и не будет отображаться, когда
вы экспортируете свои работы.
Иногда сетка не подходит по размеру. Это потому, что сетка линии установлены неправильно. Если вам нужно это изменить или вы хотите дважды проверьте, продолжайте и снова перейдите на панель настроек и на этот раз выберите Направляющие, сетка и фрагменты … из опций.
После открытия меню убедитесь, что Gridline Every: свойство имеет значения 1 пиксель .Также убедитесь, что Subdivisions — это 1 .
Это гарантирует, что ваша сетка будет подходящего размера. Поздравляю! Мы теперь готовы создать пиксельную графику!
Нарисуйте свое изображение в стиле пиксель-арт
Теперь, когда у вас есть Photoshop, настроенный для пиксельной графики, пришло время выбрать инструмент, который мы будем использовать для рисования нашего пиксельного искусства. Хотя там десятки инструментов и ярлыков, которые вы можете использовать, чтобы сделать пиксели в вашем image мы сосредоточимся на 1 основном инструменте.Этот инструмент Карандаш инструмент.Установите инструмент «Карандаш»
Инструмент «Карандаш» станет одним из наиболее часто используемых инструментов, когда вы начнете создание пиксельной графики. Чтобы максимизировать его эффективность, мы скорректируем некоторые настройки, прежде чем мы начнем.
Для начала выберем инструмент «Карандаш» на панели инструментов. Вы можете найти это на правая сторона. Он буквально похож на карандаш.
Выбрав карандаш, мы собираемся настроить некоторые свойства.Щелкните стрелку раскрывающегося списка в верхнем левом углу окна Photoshop. Это рядом должен быть номер. Это число показывает, сколько пикселей широкий карандаш будет рисовать, когда вы нажимаете на холст. Поскольку мы делаем пиксельная графика, мы хотим, чтобы это было очень хорошо. Для этого установите размер 1. Это позволит нам рисовать по 1 пикселю за раз. Затем установите Hardness на 100%. Помните, что пиксельная графика должна быть четкой и резкой. Это свойство будет предотвратить сглаживание, делающее наши пиксели резкими.
Обведите голову
И вот момент, которого мы все ждали! Чтобы просто нарисовать пиксель щелкните в любом месте холста. Поскольку мы проделали всю тяжелую работу по настройке up Photoshop, это должно быть буквально похоже на заливку кубов на сетке. Мы будем начните с обводки головы, используя черный цвет.Чтобы изменить цвета, щелкните поле «Цвет» в нижней части панели инструментов. площадь.Появится всплывающее окно, в котором вы можете перетащить ползунок, чтобы настройте свой цвет. Когда закончите, нажмите ОК.
Теперь, чтобы добавить пиксель, просто щелкните внутри созданной сетки.
ранее. С нашими текущими настройками он будет заполнять по одной ячейке за раз. Пытаться
скопируйте изображение ниже, щелкнув инструментом «Карандаш».
Очень хорошо! Теперь, когда у нас есть контур для нашего персонажа в пиксельной графике, мы можем начните добавлять детали внутри головы.Продолжайте добавлять больше деталь, используя тот же метод, который вы использовали для контура. Обрисуем уши и добавляем носик. Повторите изображение ниже.
Сейчас он начинает обретать форму! Чтобы сделать очки для нашей собаки нам нужно изменить цвет. Щелкните поле цвета еще раз и введите цвет. ниже.
Теперь, когда мы изменили цвет, приступим к рисованию очков.Попробуйте воспроизвести изображение ниже, используя тот же инструмент «Карандаш».
Отличная работа! Теперь у нас есть нанесенная на карту большая часть нашей пиксельной собаки. Начнем заполнять пустые области. Отличный способ раскрасить ряд пикселей — это щелкнуть левой кнопкой мыши по первому пикселю в ряду. Затем, удерживая нажатой клавишу SHIFT, щелкните пиксель в конце строки, которую вы хотите раскрасить. Это заполнит пиксели между автоматически, сэкономив вам время. Попытайтесь завершить изображение ниже, используя методы, которые вы уже изучили.Отличная работа! Теперь у вас есть навыки для создания собственного пиксельного искусства для ваших проектов! Идите вперед и экспериментируйте с разными цветами и добавляйте все, что захотите, к своему пиксельному изображению.