Рестлер
В этом уроке из
10 этапов я расскажу вам, как создать «спрайт», который представляет
собой полноценный двухмерный персонаж или объект. Термин приходит к нам,
конечно же, из видео игр.
Создание картинок в этом стиле — это навык,
который я приобрел, т. к. нуждался в графике для своих игр. Благодаря
практике, я обнаружил, что этот стиль удобен для меня, и стал смотреть
на него, как на настоящее искусство, а не просто инструмент. Сегодня
пиксельарт весьма популярен в игровой индустрии и иллюстрировании.
Это руководство было
создано много лет назад, чтобы обучить людей базовым идеям, но я
переписывал много раз со времени его первого появления. Есть множество
других уроков вокруг, но они показались мне слишком усложненными и
многословными. Пиксельарт — это не наука. Вам никогда не придется
вычислять вектор, рисуя.
Важная вещь в пиксельарте: вам не нужно никакое специальное ПО —
поставляемая с ОС простейшая программа предоставляет все возможности.
Хотя есть и специализированное, как Pro Motion или, для пользователей
Mac’ов, Pixen. Не могу сказать, что я работал в них, но я слышал
хорошие отзывы. Для этого урока я собираюсь использовать Photoshop,
который достаточно дорогая вещица, но очень хорош для любого вида
рисования и имеет множество возможностей для рисования пиксельарта.
Использование Фотошопа для
ПиксельАрта
При использовании Фотошопа главным вашим
оружием будет инструмент карандаш (pencil tool — гор. клавиша «B»),
который является альтернативой кисти (brush tool). Карандаш позволит вам
закрашивать каждый пиксель отдельно, без сглаживания.
Два
других удобных инструмента — marquee tool  (гор.
клавиша «M») и magic wand  (гор.
клавиша «W») — чтобы выделять и перетаскивать или копировать части
изображения. Помните, что задерживая «Shift» или «Alt» при выделении, вы
можете добавлять либо удалять какие-то части из уже выделенного. Это
может оказаться удобным для выделения сложных непрямоугольных фигур.
Также вы можете использовать eyedropper  (гор.
клавиша «i»). чтобы выбирать цвет. Ограничение в цвете крайне важно для
пиксельарта, поэтому это окажется полезным для выбора уже
использовавшегося цвета и его дальнейшего использования.
И,
наконец, удостоверьтесь, что вы знаете горячие клавиши, они помогут вам
сохранить много энергии и времени. Например, полезна клавиша «X»,
меняющая ваш главный и дополнительный цвета местами.
Прим. переводчика:
также полезен ластик («E») в режиме pencil, зажатый «Alt» при работе с
карандашом позволит использовать eyedropper, удобно 
Чтобы можно было видеть результат и одновременно работать с картинкой,
можно проделать следующее: Window>Arrange>New window for {Имя
документа}, при этом в одном из окон оставить изображение без
увеличения.
Пиксели это попросту маленькие прямоугольники, имеющие цвет. Первая
вещь, которой необходимо научиться, заключается в эффективном их
использовании для создания любого вида линий, какой вам захочется. Мы
обсудим два базовых типа линий: прямые и кривые.
Прямые линии
Я знаю, что вы думаете: «Это слишком просто, чтобы беспокоиться об
этом»! Но при работе с пикселями даже прямая линия может оказаться
проблематичной. Чего мы хотим избежать, так это неровностей, маленьких
неестественных переломов. Неровности могут появиться, когда один из
кусочков линии больше либо меньше окружающим.
Кривые линии
Для правильной кривизны удостоверьтесь, что увеличение или уменьшение
кусочков происходит постоянно на протяжении всей кривой. В следующем
примере выглядящая правильно кривая делиться на такие кусочки: 6 > 3
> 2 > 1, кривая с неровностями же: 3 > 1 < 3.
Заключение
Комфортное построение любой линии в пикселях — особенно важный момент
при работе в пиксельарте. Позже мы рассмотрим как использовать эффект
сглаживания (anti-aliasing) для того, чтобы линии выглядели
по-настоящему плавными.
Во-первых, необходима хорошая идея. Попробуйте изобразить ваше будущее
творение на бумаге или просто представить его. Небольшая подготовка
позволит вам позже сконцентрироваться только на технической стороне
дела.
Над чем
стоит подумать
1. Для чего ваш спрайт будет
использоваться? Для web-сайта или, может быть, для игры? Будете ли вы
его затем анимировать? Если да, то, думаю, вы захотите сделать его
поменьше размерами и менее детализированным. И наоборот, если это
статическая картинка, вы можете уделить много внимания деталям спрайту, к
которому больше не вернетесь. Подумайте для чего этот спрайт, что будет
более эффективно.
2. Какие ограничения существуют для спрайта?
Раньше я сказал, что важно ограниченное количество цветов. Одна из
причин, особенно если вы работаете над игрой, состоит в том, что ваша
палитра будет ограничена. Также обдумайте рассмотрите ваш спрайт в
пространстве, как он будет сочетаться с окружением.
Займемся рестлингом!
У
меня не было никаких ограничений, при создании спрайта для урока. Но я
хотел, чтобы он был достаточно большим, чтобы вы могли отчетливо видеть
происходящее на каждом этапе. Я решил использовать персонажа Lucha
Lawyer, мощного рестлера-адвоката, в качестве модели. Его можно было бы
использовать в каком-нибудь файтинге.
Черный контур предоставит вам хорошую базовую структуру для вашего
спрайту, поэтому это лучшее место, чтобы начать. Причина почему мы
выбрали черный проста — он хороший и темный
Позже я покажу вам, как изменить цвет для придания реализма.
Два подхода
Есть два пути создания контура. Вы можете нарисовать картинку от руки,
а затем вычистить ее, удалив ненужные пиксели, либо вы можете начать,
располагая пиксели с нуля один за другим. Ну, вы знаете: «клик», «клик»,
«клик»…
Я думаю, что вы должны выбирать способ, исходя и размеров
вашего спрайта, а также ваших навыков. Если спрайт очень большой,
гораздо проще сделать контур от руки, чтобы наметить базовую форму, а
затем подчистить его.
В данном уроке спрайт довольно большой и я
использую первый способ. Этот способ также хорош при создании
иллюстраций или написании текста.
Шаг 1: Грубая обводка
Используя
мышь либо планшет, сделайте грубый набросок контура. Убедитесь, что он
не СЛИШКОМ грубый
Он должен быть более или менее похожим на то, что вы хотите получить в
конце. Поэтому свой я сделал, основываясь на наброске.
Шаг 2: «Чистка» контура
Во-первых, приблизьте изображение примерно в 6-8 раз, чтобы отчетливо
видеть каждый пиксель. Затем подчистите контур, удалите все лишние
пиксели (контур должен быть толщиной в 1 пиксель на все протяжении),
одновременно расправляясь с неровностями. Затем добавьте те мелкие
детали, которые были опущены в грубом наброске.
Даже
большие спрайты обычно не превышают размера в 200 на 200 пикселей. Фраза
«делай больше с меньшими средствами» нигде не звучит так правдиво, как в
пиксельарте. И в скором времени вы обнаружите, что 1 пиксель может
изменить многое.
Сохраните ваш контур простым. Детали появятся
позже, а пока сконцентрируйтесь на определении больших кусков
изображения, например, мышцах. Хотя сейчас они могут и не выглядеть так,
но будьте терпеливы.
Когда покончено с контуром перед нами встает огромное количество цветов,
которыми можно пользоваться. Различные инструменты для заливки буду
весьма полезны. Может оказаться немного сложным подбор цветов. Теория
цвета, однако, не находится в рамках данного урока, но здесь
представлено немного базовых идей, которые хорошо бы себе представлять.
Цветовая модель HSB
HSB
сокращение от (H)ue, (S)aturation, and (B)rightness. Это одна из
цветовых моделей (численного представления цветов) компьютера. Другие
примеры моделей — RGB и CMYK, о которых вы наверняка слышали.
Большинство программ же использую HSB модель, когда пользователь
выбирает цвет.
Hue — собственно, цвет.
Saturation —
насыщенность цвета.
Brightness (или «luminosity») — яркость
цвета.
Подбор
цвета
Цвет полностью зависит от вас, но вот несколько
советов:
1. Менее насыщенный и яркий цвет выглядит менее мультяшно и
интересно.
2. Изучите цветовой круг. Чем дальше два цвета друг от
друга, тем менее они сочетаются. И наоборот, например, красный и
оранжевый, расположенные близко, приятно выглядят вместе.
3. Чем
больше цветов вы используете, тем более раздробленно будет выглядеть ваш
спрайт. Используйте два-три главных цвета. (Подумайте на досуге, как
Супер Марио был сделан при помощи красного и коричневого)
Раскрашивание
Это довольно легко. Если вы используете Фотошоп, можно выделить
область с помощью magic wand («W»), а
затем закрасить ее «Alt-Backspace» (главный цвет) или «Ctrl-Backspace»
(дополнительный цвет).
Прим. переводчика: главное не забыть убрать галочку со
сглаживания.
Нанесение теней это важный шаг в нашем квесте по получению статуса
полубога пиксельарта. Это здесь спрайт приобретает приятный вид либо
становится страшным непонятным нечто. Обратите внимание на мои слова и
вы достигните успеха.
Шаг 1: Выбор источника света
Во-первых,
необходимо определиться с источником света, если ваш спрайт это часть
какой-то сцены, то есть различные источники в этой сцене, свет которых
будет важен. И они могут смешиваться различными сложными путями. Для
большинства же случаев выбор удаленного источника, как, например,
солнце, это лучшая идея.
Обычно я выбираю такой удаленный источник,
что он расположен над и чуть-чуть перед моим спрайтом, поэтому вся
верхняя и часть передней части освещены, остальное же находится в тени.
Такое освещение выглядит наиболее естественно для спрайтов.
Шаг 2: Нанесение теней
Когда мы определились с источником света, мы начинаем наносить тени в
зонах, наиболее удаленных от источника, более темным цветом. Наша модель
«над и перед» говорит нам, что нижние части головы, ног, рук и. д.
должны быть в тени.
Запомните, что игра света и тени делает объект
объемным. Используйте тени, чтобы обозначит складки одежды, мышцы,
волосы, пух, трещины и т. д.
Шаг 3: Мягкие тени
Вторая тень, более светлая, должна быть нанесена на этом этапе. Это
области, которые освещены не напрямую. Также такие тени могут
использоваться для плавного перехода от темного к светлому.
Шаг 4: Свет
Нужно выделить места, куда попадают прямые лучи. Блики нужно
использовать умеренно (намного меньше, чем тени), чтобы картинка
выглядела хорошо.
Всегда накладывайте блики после теней и вы
избавите себя от лишней головной боли. Без нанесенных теней вы сделаете
их слишком большими.
Различные «не»
При придании объема большинство начинающих испытывают трудности. Вот
несколько правил:
1. Не используйте градиенты. Самая
встречающаяся ошибка новичков. Градиенты выглядят ужасно и даже близко
не передают то, как свет играет на поверхности.
2. Не используйте
«pillow-shading». Т. е. не нужно делать тень цвета контура. Спрайт в
таком случае будет выглядеть непонятно
3. Не используйте слишком
много теней. Просто думать, что «чем больше цветов, тем
реалистичнее». В реальном мире же мире люди воспринимают вещи, как
области светлого и темного — мозг отфильтровывает большинство из того,
что между этими цветами. Самое большее используйте два цвета для теней и
два цвета для прямо света поверх вашего базового.
4. Не
используйте цвета, которые слишком сходны. Нет никакой причины,
чтобы использовать два почти не отличающихся цвета, только если вы не
хотите получить очень-очень плавный спрайт.
Ограничение по цвету это то, о чем каждый художник пиксельарта должен
беспокоиться. Способ получения большего количества оттенков без
использования новых цветов называется «dithering». Он схож с
перекрестной штриховкой и стипплингом («stippling» — рисунок точками,
чаще всего гравировка) выполняемых традиционными материалами, когда вы
берете два цвета и смешиваете (например, чередуете) для получения
среднего цвета.
Простой
пример
Ниже простой пример создания 4 цветов, используя
два.
Продвинутый пример
Сравните верхнюю, которая была сделана в Фотошопе с помощью инструмента
создания градиента, и нижнюю, созданную при помощи трех цветов методом
дизеринга, полоски. Обратите внимание, что на нижнем рисунке
использовались разные узоры, чтобы добиться промежуточных цветов.
Попробуйте поэкспериментировать, с узорами, чтобы создать новые
текстуры.
Применение
Дизеринг поможет придать вашему спрайту ретро вид, т. к. во многих
старых играх дизеринг использовался очень много, чтобы выжать максимум
из ограниченных палитр. Не скажу, что использую это очень часто, но в
целях обучения тут это применено.
Вы
можете использовать дизеринг так много или так мало, как вы хотите. Если
быть честным, то я видел лишь несколько людей, применяющих это технику
по-настоящему хорошо.
Выборочная обводка или «selout» — это затенение и осветление контура.
Вместо того, чтобы использовать везде черный, мы используем цвет,
который больше схож с базовым цветом спрайта. Ну, а яркость контура
также будет меняться, в зависимости от источника света.
До этого
момента мы сохраняли контур черным. В этом нет ничего неправильного,
особенно, если он и так выглядит хорошо. А еще это помогает отделять
спрайт от окружения. Но, используя черный, мы жертвуем реализмом, т. .к
черный контур придает спрайту мультяшный вид. Selout это хороший способ,
чтобы получить вот такой результат.
Заметьте, я также использовал этот метод, чтобы смягчить мускулы. Таким
образом, спрайт становится более цельным. Теперь сравните-ка с тем, что
было до.
Сглаживание работает следующим образом: добавление промежуточных цветов
на изгибах линий. Например, если у вас есть черная линия на белом фоне,
то нужно добавить серых пикселей у изгибов для сглаживания.
1: Сглаживание кривых
Добавьте промежуточный цвет у перегиба. Если линия так и не будет
выглядеть плавной, можно добавить более светлый промежуточный.
2: Закругление
выпуклостей
3: Плавное исчезновение
концов линий
Применение
Теперь давайте сгладим наш спрайт. Запомните, если вы хотите, чтобы
ваш спрайт выглядел хорошо на любом фоне, то не делайте сглаживание с
внешней стороны контура. Иначе вы увидите ненужный ореол вокруг спрайта и
он будет выглядеть отвратительно.
Почему от руки?
Вы можете спросить, почему мы просто не применим какой-нибудь фильтр
нашей программы, чтобы спрайт выглядел более гладким? Ответ заключается в
том, что никакой фильтр не сделает это так «чисто», как вы от руки. Вы
контролируете не только количество используемых цветов, но и место, где
они будут использоваться. И вы знаете лучше фильтра, какие области
требуют сглаживания, а какие потеряют весь смысл пиксельарта при его
применении.
Почти время выключить компьютер и взять баночку холодного пива. Но не
сейчас! Последняя часть, которая отличает энтузиаста-любителя от
профессионала.
Отойдите и посмотрите на свой спрайт. Есть
возможность того, что он еще немного недоработан. Потратьте время, чтобы
переделать недоработки, чтобы все выглядело безупречно. В зависимости
от того, как вы устали, это может оказаться самой веселой частью.
Добавьте деталей, чтобы ваш спрайт выглядел интересно. Ваши навыки и
опыт в пиксельарте будут видны именно тут.
Вы,
может быть, гадали, почему Lucha Lawyer не имел глаз все это время, или
какого черта он держит в руках бланк. Ну, это потому, что эти маленькие
детали я хотел оставить на конец. Обратите внимание на линии на
браслетах, шов на штанах и… ну, кем будет мужчина без сосков? Также я
затемнил нижнюю половину его торса так, что теперь его левая рука
выступает вперед тела.
Итак, вы закончили. Lucha Lawyer весит 45
впечатляюще легких цветов (или, может быть, ультратяжелых в зависимости
ограничений вашей палитры ) и имеет размеры 150 на 115 пикселей. Теперь
время для пива!
Весь процесс. Это всегда весело. Эволюция спрайта:
Мысли напоследок
1.
Учите основы ИЗО и практикуйтесь с традиционными материалами. Все
навыки и знания применяемые в рисунке и живописи применяются и в
пиксельарте.
2. Начинайте с маленьких спрайтов. Самая сложная часть —
как уместить множество деталей на нескольких пикселях, не создавая
огромных спрайтов (это требует времени).
3. Учитесь по работам
любимых художников и не бойтесь быть неоригинальным. Применение приемов
из чужих работ — лучший способ обучения. Свой стиль придет со временем.
4.
Если у вас нет планшета, приобретите. Напряжение от постоянного
кликанья мышкой это невесело и не впечатлит ни одну леди (ну, или
парня). Я использую крошечный Wacom Graphire2, который замечательно мне
подходит: он занимает мало места на столе, а также весьма мобилен
Хотя вам может быть будет работать комфортно с большим. Сначала
попробуйте.
5. Делитесь вашими творениями с другими и получайте
отзывы. Кто знает, может быть вы обзаведетесь несколькими новыми
помешанными друзьями.
6. А если вы даже зарабатываете деньги вашими
навыками, отошлите-ка мне пару работ
|
| Категория: Рixelart | Добавил: Sm@sh (19.03.2010)
|
| Просмотров: 1356
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
|
|
