Как начать делать пиксель-арт. Часть 1
Гайд для совсем начинающих.
Pedro Medeiros
Эта небольшая статья о том, как начать свой путь в пиксель-арт и нацелена она на тех, кто только начал или собирается начать. Я расскажу про самые базовые вещи – как создать файл, настройки холста и работа с ограниченной цветовой палитрой.
Статья была проспонсирована на моем Patreon! Если она вам понравилась, то вы даже можете поддержать меня малой денежкой =)
Также это 1-ая часть планируемой серии статей, всю серию читайте в Pixel Grimoire.
Перед Началом
Перед тем как приступать к пиксель-арту, помните: пиксель-арт это всего лишь ещё один изобразительный инструмент, как гуашь, масло, карандаш, скульптура или похожая по своей сути на пиксель-арт мозаика. Чтобы делать хороший пиксель-арт, вы должны уметь делать хорошие рисунки. В основном, это значит: делать анатомические штудии, знать законы перспективы, понимать принципы работы светотени, знать теорию цвета и немножко историю искусств (от неё никто не умирал, наоборот это расширит ваш кругозор), всё это основы для хорошего пиксель-арта.
Инструменты
Вам не нужно никаких изощрённых программ и инструментов для пиксель-арта, его можно даже делать при помощи мышки и бесплатного ПО. Моё рабочее место включает в себя маленький Вакомовский планшет, хорошую мышку с клавиатурой и мою любимую программу Aseprite, но вы можете использовать любую другую программу на своё усмотрение.
Вот примерный список ПО широко используемого для пиксель-арта:
• Aseprite: Отличный профессиональный редактор со многими ускоряющими работу функциями (платный)
• GraphicsGale
• Piskel: Бесплатный онлайн редактор
• Photoshop: Мощный редактор, изначально не создавался для создания пиксель-арта, но его тоже можно использовать (платный).
Aseprite
Aseprite мой любимый редактор для пиксель-арта на текущий момент.
Очень мощный, напичканный разными функциями и простой в использовании. Я выбрал Aseprite в качестве программы для этого урока, но я также уверен, что вы сможете адаптировать всё ниже описанное для любой выбранной вами программы. Вы можете попробовать пробную версию, но учтите, что она не умеет сохранять файлы, что в принципе для наработки навыка и обучения не слишком то и критично.Создание Нового Файла
Просто нажмите “New File…” на стартовом окне или File > New File и можно начинать рисовать.
Давайте создадим новый файл. 16 на 16, наверное, будет выглядеть маловато, но думаю, что для начала сойдёт. Большее разрешение может отвлечь вас от главной задачи: понимания того, как пиксели взаимодействуют с другими пикселями по соседству.
Aseprite ‘New Sprite’ меню
Оставьте фон прозрачным или белым для начала. Только убедитесь, что опция Advanced Options отключена (но не бойтесь поэкспериментировать с ней позже) и можно начинать!
Давайте Рисовать!
В интерфейсе очень много различных менюшек и тулбаров, но не волнуйтесь нам нужна лишь парочка кнопок для начала. Главный инструмент это
Aseprite рабочая область
Слева вы видите цветовую палитру, с цветами по умолчанию. Давайте изменим её на другую более простую. Щёлкните по третьей иконке в верху цветовой палитры (Pressets) и выберите ARQ4 (очень хорошую палитру сделанную Endesga), именно её мы будем использовать для нашего первого спрайта.
Теперь используя только 4 цвета сверху слева, попробуем нарисовать кружку.
Не стесняйтесь использовать мой пример в качестве вдохновения, но всё же постарайтесь сделать свой вариант. Если вы допустили ошибку, то нажмите alt+click на пустой области или в области за вашим рисунком, и вы сможете «выбрать» прозрачный цвет и использовать его для удаления неправильных пикселей. Иным вариантом может быть использование Eraser или хоткея Е для быстрого выбора.
Вы, наверное, заметите, что работа в таком низком разрешении кардинально отличается от обычного рисования. Всё должно быть просчитано и каждый пиксель имеет важное значение. Это то, к чему вы должны привыкнуть как можно раньше.
Вы также можете попробовать другие кнопки на меню инструментов. Многие из них имеют дополнительные опции, когда нажаты. Для начала старайтесь избегать использовать инструмент blur tool так как он добавляет дополнительные цвета, что нам сейчас совсем не нужно.
Ну а теперь давайте сделаем больше спрайтов! Попробуйте нарисовать череп, меч и лицо человека.
На этот раз уже без моей работы как референса. Если вам кажется, что ваш спрайт не умещается в холст, то это абсолютно нормально, попробуйте свести часть деталей к одному пикселю. Работать на таком низком разрешении очень сложно и похоже на сбор мозаики или пазла. Я написал одну статью о работе на низком разрешении для Kano.
Это очень хорошее упражнение. Если вы хотите ещё попрактиковаться, то попробуйте сделать больше спрайтов с такими же ограничениями.
Сохраняем файл
Чтобы сохранить файл нажмите Control+S (или File>Save As…), задайте имя и папку для сохранения.
Не забудьте, что в триальной версии Aseprite нет функции сохранения.
Aseprite Export File меню
ase для ваших файлов. Это как в Photoshop есть формат .psd Когда вы экспортируете спрайт для веб или игр, вы можете использовать Control+Alt+Shif+S или File>Export.Почему следует использовать для масштабирования круглые числа.
Aseprite обладает очень хорошей функцией Resize в окне экспорта. Она масштабирует ваш спрайт в круглых числах, что идеально. Если вы захотите отмасштабировать свой спрайт, например, в 107%, то пиксели сдвинутся и получится мешанина, но если вы выберите 200%, то каждый пиксель будет в 2 пикселя шириной и высотой, что выглядит хорошо и красиво.
Холст большего размера
Теперь после того как вы освоили основы, такие как: создание файла, сохранение и рисование на холсте, давайте попробуем рисовать на немного большем холсте, 32 на 32 пикселя. Теперь мы будем использовать большую палитру, попробуйте AAP-Micro12 (от AdigunPolack).
В этот раз мы будем рисовать лопату.
В отличие от спрайта 16 на 16, здесь мы можем использовать контур, так что давайте начнём с него. Вот мой пошаговый процесс:
Этап 1: Линии
Этап 1
Такой стиль линий мы в пиксель-арте называем идеальной линией, ширина в 1 пиксель и соединяется диагонально с другими пикселями. Когда мы делаем линейный рисунок, то избегаем ненужных краёв, как здесь:
Aseprite обладает очень хорошей функцией в настройках кисти, чтобы делать это автоматически: с выбранным brush tool включите Pixel-perfect опцию. Только не забудьте выключить её, когда не работаете с контуром, иначе она будет вас раздражать.
Aseprite функция Pixel perfect
Этап 2: Основные цвета
Этап 2
Малое количестве цветов хорошо тем, что вы не запутаетесь в обилии вариантов. Именно по этой причине очень сложно работать с большой палитрой, если у вас есть в палитре цвет, то вы обязаны его использовать в спрайте.
Старайтесь думать о цвете в палитре как о кусочках паззла, экспериментируйте с ним, создавайте различные, самые невероятные комбинации, пока не найдёте ту, что «идеально» подходит для каждого участка вашего спрайта.
Этап 3: Тени
Этап 3
Используйте палитру, для творческого подхода к созданию света и тени в спрайте. Так как вы работаете с очень ограниченной палитрой, то у вас не будет всех доступных оттенков цвета с каждой доступной тональностью и вам придётся импровизировать.
Импровизированные тени с различными оттенками
В примере слева я использую ту же самую палитру что и AAP-Mini12. Когда я рисовал этого зелёнокожего парня, то у меня не было светлого зелёного, так что я выбрал ближайший доступный мне оттенок, который оказался жёлтым. То же самое с тенями, я выбрал синий, потому что он близок к наиболее тёмному оттенку. Но что если бы я сделал всё по-другому? Ведь я мог использовать ярко-синий и тёмно-красный, так? На самом деле, это не очень хорошее сочетание:
Тени с инвертированным оттенком
Эффект выглядит классно, но что-то со всем этим не так.
Обычно вы стараетесь использовать холодные оттенки в тенях и тёплые на свету. Это конечно не выбитая на скрижалях заповедь, есть много исключений из этого правила, но, когда у вас нет уверенности, что это принесёт пользу, то лучше придерживаться правила.
Этап 4: Анти-ализинг и полировка
Этап 4
Эта та часть создания спрайта, когда вы стараетесь сделать его менее «рублёным». Ручной анти-ализинг весьма сложный навык, о нём можно написать целую статью, но в теории вы используете средний тон, чтобы симулировать «полупиксели» и смягчить края спрайта. Но не заморачивайтесь об этом сейчас, для вас главное сделать спрайт чётким и читаемым.
Другой хорошей идеей на данном этапе это будет отлов и отстрел некоторых одиночных пикселей, чтобы уменьшить шум. Одиночные пиксели, которые не являются частью большой группы пикселей того же цвета и не являются частью анти-ализинга, выглядят так:
Убираем одиночные пиксели
Видите, однопиксельные острова на планете слева? Это одиночные пиксели и как вы заметили, после их уборки, планета стала выглядеть гораздо лучше.
А что насчёт звёзд? Они как раз доказывают, что одиночные пиксели, если их использовать с умом, могут быть полезны для таких вещей как создание текстуры шума, или контраста на фоне.
Смысл не в том, чтобы бездумно убирать одиночные пиксели, но найти их и спросить себя: этот пиксель точно должен быть один?
И что теперь?
Теперь настало время поиграть с цветами и попробовать большее разрешение! Но не спешите, разрешение 48 на 48 и 16 цветов, затем далее. Не стоит сразу переходить к анимации, сначала набейте руку в создании статичных спрайтов.
Специально для вас я выбрал гайды, которые могут вам пригодится:
• Pixel art tutorial by Cure
• Pixel art tutorial by Derek Yu
• Pixel art tutorial by Arne
У меня также есть несколько уроков, о специфичных аспектах пиксель-арта и гейм-дизайна, вы можете увидеть их здесь:
• My Patreon page
• Мои уроки
Pixel art для начинающих. Введение.
Обучающий материал
Интерес, проявленный к первому уроку, и последовавшие обсуждения, а также замечательные работы, которые посетители начали рисовать и выкладывать в комментариях, показали, что начинать всё же следовало с основ.
Исправляю ошибку и предлагаю своеобразный приквел, в котором мы познакомимся с азами 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 на второй и третий планы, а потом и вовсе стало казаться, что пиксельной графике пришёл конец.
Как ни странно, но именно господин Научно-технический прогресс, задвинувший в середине 90-х пиксельную графику на последние позиции, и вернул её позже в игру — явив миру мобильные устройства в виде сотовых телефонов и КПК.
Ведь каким бы полезным ни был новомодный дивайс, мы-то с вами знаем — если на нём нельзя хотя бы разложить пасьянс, грош ему цена. Ну а там где есть экран с невысоким разрешением, там и pixel art. Как говорится, добро пожаловать назад.
Разумеется, свою роль в возвращении пиксельной графики сыграли различные ретроградно настроенные элементы, любящие поностальжировать над старыми-добрыми играми детства, приговаривая при этом: «Эх, теперь такого не делают» эстеты, способные оценить красоту пиксель арта, и инди-разработчики, не воспринимающие современные графические красоты (а иногда, правда редко, элементарно не умеющие их реализовать в собственных проектах), оттого и ваяющие pixel art.
Но давайте всё-таки не будем сбрасывать со счетов сугубо коммерческие проекты — приложения для мобильных устройств, рекламу и web-дизайн.
Так что сейчас 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/
Как нарисовать девочку в пиксель арт
122 акцииНаучитесь рисовать красивую девушку Pixel Art 900 16 с простыми пошаговыми инструкциями по рисованию и видеоуроком .
Следуя простым шагам, вы тоже сможете легко нарисовать красивую девушку в стиле пиксель-арт.
Перейти к пошаговым инструкциям.
Готовы ли вы создать свой собственный персонаж для видеоигры? Вы можете научиться рисовать девушку в стиле пиксель-арт. Приготовьте миллиметровку!
Знаете ли вы? «Первой играбельной женщиной-человеческим персонажем» видеоигры была Самус Аран. Она дебютировала в видеоигре Metroid в 1986 году. С тех пор в видеоиграх появилось много героинь.
Лара Крофт из серии Tomb Raider, пожалуй, самая известная. И, конечно же, оригинальные версии обоих этих персонажей были в стиле пиксель-арт!
Пиксель-арт можно делать вручную или на компьютере. Используйте миллиметровую бумагу или создайте свою собственную с помощью линейки. Или вы можете загрузить одно из многих бесплатных приложений для пиксельной графики.
Когда вы закончите рисовать лицо девушки, вы заметите, что требуются два типа линий. Сначала вы заштрихуете ряды квадратов на бумаге с сеткой, чтобы получились толстые пиксельные линии. Позже вы будете использовать узкие линии, которые следуют линиям сетки, чтобы добавить детали к вашему рисунку.
Если вам понравился этот урок, см. Также следующие руководства по рисованию: Сидящая девушка, Девушка-разведчик и Аниме-школьница.
Пошаговые инструкции по рисованию девушки в пиксель-арте
Как нарисовать красивую девушку в пиксель-арте для детей, начинающих и взрослых. Шаг 1
1. Начните с черт лица девочки. Заштрихуйте два блока по горизонтали для носа и наборы из двух, трех и двух блоков для подбородка.
Для нижней части каждого глаза заштрихуйте один квадрат и набор из трех квадратов. Для зрачка и верхней части глаза используйте один квадрат и ряды из трех, трех и двух квадратов.
Пиксельный рисунок Easy Girl. Шаг 2
2. Обведите стороны лица девушки. Сначала вы будете использовать одиночные квадраты, соединенные по углам. Затем вы добавите ряды из двух и трех квадратов.
Над лицом заштрихуйте вертикальные столбики из двух и трех квадратов, соединенных в углу. Это часть волос девушки.
Easy Girl Pixel Art Drawing — Шаг 3
3.
Затем нарисуйте волосы девушки. Заштрихуйте ряд линий, соединенных в углах, каждая из которых состоит из одного, двух и трех квадратов. Эти диагональные линии должны проходить от пробора к каждой стороне лица, через лоб и макушку над пробором.
Пиксельный рисунок Easy Girl — Шаг 4
4. Продолжайте обводить волосы девочки. Заштрихуйте одиночные квадраты, длинные линии квадратов и сегменты в форме буквы «V», чтобы создать волнистую линию.
Easy Girl Pixel Art Drawing — шаг 5
5. Нарисуйте волосы на противоположной стороне головы. Опять же, используйте одиночные квадраты, длинные линии квадратов и сегменты в форме буквы «V», чтобы создать волнистую линию. Обратите внимание на длинную горизонтальную линию в верхней части головы.
Пиксельный рисунок Easy Girl. Шаг 6
6. Завершите прическу, чтобы она соответствовала противоположной стороне, используя одиночные квадраты и V-образный сегмент.
Затем нарисуйте шею и воротник рубашки. Когда вы перейдете к следующему шагу, вы заметите, что этот сложный узор не полностью закрашен.
Перекрывающиеся области остаются незаштрихованными.
Пиксельный рисунок Easy Girl. Шаг 7
7. Заштрихуйте диагональные одинарные и двойные квадратные сегменты, чтобы создать плечи и предплечья.
Затем тонкими линиями добавьте детали к волосам. Квадратные и прямоугольные формы обведите по краям волос надо лбом, но не заштриховывайте их.
Добавьте больше деталей к пиксельной картинке с девушкой. Шаг 8
8. Включите в волосы одинарные, двойные и V-образные сегменты, но не затеняйте их. Нарисуйте неправильные формы в волосах выше плеч. Используйте короткие линии, чтобы соединить верхнюю и нижнюю части каждого глаза, и заключите группу из пяти квадратов в форме буквы L, чтобы обозначить рот.
Завершите набросок пиксельного рисунка вашей девушки. Шаг 9
9. Продолжайте добавлять узкие линии к волосам, лбу, носу, рту, шее и блузке. Это поможет вам раскрасить рисунок.
Раскрась свою девочку в пиксельной графике
Раскрась свою пиксельную мультяшную девочку.
Не забудьте использовать разные оттенки в каждой части, разграниченной тонкими линиями.
Нажмите ЗДЕСЬ, чтобы сохранить урок в Pinterest!
Учебное пособие по рисованию в стиле пиксель-арт для девочек — легко и весело Страницы для печати
УСТРАНЕНИЕ НЕИСПРАВНОСТЕЙ ДЛЯ УЧАСТНИКОВ
Все еще видите рекламу или не можете загрузить PDF-файл?
Во-первых, убедитесь, что вы вошли в систему. Вы можете войти на странице входа участника.
Если вы по-прежнему не можете загрузить PDF-файл, вероятное решение — перезагрузить страницу.
Это можно сделать, нажав кнопку перезагрузки браузера.
Это значок в виде круглой стрелки в верхней части окна браузера, обычно расположенный в верхней левой части (вы также можете использовать сочетания клавиш: Ctrl+R на ПК и Command+R на Mac).
Pixel Art: руководство по созданию отличного пиксель-арта
Пиксель-арт был известен как рождение новых художественных техник из-за ограничений по размеру и цвету.
В результате это заставило дизайнеров разрабатывать новые и креативные решения, чтобы заставить эти изображения работать на них. Сегодня пиксель-арт существует как графический стиль, в котором изображения соответствуют ретро-иллюзии.
Что делает пиксельную графику такой интригующей, так это создание простых изображений в красивых аранжировках с использованием больших цветных блоков пикселей. Еще более захватывающим является то, что этот процесс не должен быть сложным, если у вас есть подходящее программное обеспечение для пиксельной графики. Чтобы лучше помочь, вы понимаете пиксельную графику. Мы подготовили следующее руководство, объясняющее, что такое пиксель-арт, какие типы дизайнов вы можете создавать с помощью пиксель-арта и как сделать эти уникальные изображения самостоятельно.
Что такое пиксель-арт?
Пиксель-арт — это форма цифрового искусства, позволяющая создавать более крупные проекты из мелких деталей или пикселей. Как правило, пиксель-арт создается с помощью программного обеспечения, в котором изображения редактируются на уровне пикселей.
В последние годы пиксель-арт делает гигантское возвращение. В основном из-за его уникального и отличительного внешнего вида и ностальгии, стоящей за ним.
Как сделать пиксель-арт
Прежде чем приступить к проекту пиксель-арта, вы должны помнить, что пиксель-арт ничем не отличается от любого другого художественного средства, а это означает, что вам нужно иметь хороший рисунок, чтобы создать хороший пиксель-арт. Вот почему важно использовать программное обеспечение, которое предоставит вам инструменты, необходимые для создания потрясающего изображения, которое вы хотите.
- При выборе программного обеспечения для пиксельной графики CorelDRAW может оказаться именно тем, что вам нужно. Независимо от того, являетесь ли вы дизайнером, иллюстратором или просто тем, кто хочет создавать пиксель-арт в старом стиле, программное обеспечение CorelDRAW поможет вам снова и снова создавать идеальный дизайн.
- Чтобы создать изображение в стиле пиксель-арт, вы начнете с создания нового документа и установки единиц измерения пикселей.
Вы можете выбрать между 300 dpi, 72 dpi или любым другим разрешением, которое вы предпочитаете. - Вы также захотите включить сетку документа, чтобы она стала бесценным инструментом при создании пиксельной графики. Вы должны убедиться, что вы настроили параметры сетки, чтобы иметь сетку, которая точно показывает, где находятся пиксели, без необходимости значительно увеличивать масштаб, чтобы найти их.
- Далее вы будете использовать либо цифровое перо, либо мышь для создания пиксельной иллюстрации. При использовании CorelDRAW в вашем распоряжении будет множество инструментов для создания идеального изображения. Вы сможете вставлять объекты, выбирать идеальные инструменты рисования и добавлять цвета и эффекты, наиболее подходящие для вашей пиксельной иллюстрации.
- Кроме того, если вы хотите добавить текст в свой пиксельный дизайн, вы можете использовать инструмент «Текст» и включить текст в качестве отдельного объекта.
- Когда вы закончите свой дизайн или иллюстрацию, вы захотите изменить их размер, чтобы он соответствовал спецификациям вашего проекта. Это можно сделать, выбрав «Изображение» > «Пересэмплировать» и введя новый размер и разрешение изображения. Обычно, если у вас с самого начала установлены настройки 300 dpi, изображение должно распечатываться с отличным качеством.
- Как только ваша иллюстрация достигнет нужного размера, а пиксели станут четкими и четкими. Убедитесь, что вы либо сохранили изображение, либо экспортировали его в зависимости от того, что вы хотите сделать с конечным продуктом.
Вы можете выбрать между 300 dpi, 72 dpi или любым другим разрешением, которое вы предпочитаете.
Идеи пиксель-арта
Преимущество пиксель-арта в том, что рисунки могут быть любыми, какими вы захотите. Например, ваше творение может напоминать ваши любимые видеоигры, или вы можете превратить свои старые проекты во что-то оригинальное и новое. По правде говоря, когда дело доходит до пиксель-арта, существует бесконечное количество творческих идей.