Pixel art для начинающих. Введение.
Интерес, проявленный к первому уроку, и последовавшие обсуждения, а также замечательные работы, которые посетители начали рисовать и выкладывать в комментариях, показали, что начинать всё же следовало с основ. Исправляю ошибку и предлагаю своеобразный приквел, в котором мы познакомимся с азами pixel art’а перед тем, как приступить к изометрии.
Но для начала немного истории (не переносите длинных вступлений? Смело пропускаете два-три абзаца).
1. История (очень коротко).
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 на второй и третий планы, а потом и вовсе стало казаться, что пиксельной графике пришёл конец.
Как ни странно, но именно господин Научно-технический прогресс, задвинувший в середине 90-х пиксельную графику на последние позиции, и вернул её позже в игру — явив миру мобильные устройства в виде сотовых телефонов и КПК. Ведь каким бы полезным ни был новомодный дивайс, мы-то с вами знаем — если на нём нельзя хотя бы разложить пасьянс, грош ему цена. Ну а там где есть экран с невысоким разрешением, там и pixel art. Как говорится, добро пожаловать назад.
Разумеется, свою роль в возвращении пиксельной графики сыграли различные ретроградно настроенные элементы, любящие поностальжировать над старыми-добрыми играми детства, приговаривая при этом: «Эх, теперь такого не делают» эстеты, способные оценить красоту пиксель арта, и инди-разработчики, не воспринимающие современные графические красоты (а иногда, правда редко, элементарно не умеющие их реализовать в собственных проектах), оттого и ваяющие pixel art. Но давайте всё-таки не будем сбрасывать со счетов сугубо коммерческие проекты — приложения для мобильных устройств, рекламу и web-дизайн.
Так что сейчас pixel art, что называется, широко распространён в узких кругах и заработал себе своеобразный статус искусства «не для всех». И это несмотря на то, что для простого обывателя он предельно доступен, ведь чтобы работать в этой технике, достаточно иметь под рукой компьютер и простейший графический редактор! (умение рисовать, между прочим, тоже не помешает) Хватит слов, ближе к делу!
 |
| Pixel dolls, развлечение для взрослых девочек, не наигравшихся в куклы. Кроме шуток, это тоже pixel art, и работы некоторых авторов вызывают восхищение как среди фанатов пиксельной графики, так и среди ценителей прекрасного. pixparadise.net |
2. Инструменты.
Что нужно для создания пиксель арта? Как сказал выше, достаточно компьютера и любого графического редактора, способного работать на уровне пикселей. Рисовать можно где угодно, хоть на Game Boy, хоть на Nintendo DS, хоть в Microsoft Paint (другое дело, что рисовать в последнем крайне неудобно). Есть великое множество растровых редакторов, многие из них бесплатны и достаточно функциональны, так что с программным обеспечением каждый может определится самостоятельно.
Я рисую в Adobe Photoshop, потому что удобно и потому что давно. Не стану врать и рассказывать, шамкая вставной челюстью, что де «Я помню Фотошоп был еще са-а-авсем маленьким, это было на Макинтоше, и был он с номером 1.0» Такого не было. Но я помню Фотошоп 4.0 (и также на Маке). А потому для меня вопрос выбора никогда не стоял. И потому нет-нет, но я буду давать рекомендации касательно Photoshop, особенно там, где его возможности помогут значительно упростить творчество.
Итак, вам нужен любой графический редактор, позволяющий рисовать инструментом в один квадратный пиксель (пиксели бывают и неквадратные, например круглые, но они нас в данный момент не интересуют). Если ваш редактор поддерживает какой-никакой набор цветов — отлично. Если также позволяет сохранять файлы — просто замечательно. Хорошо бы еще умел работать со слоями, поскольку работая над достаточно сложной картинкой, удобнее разложить её элементы по разным слоям, но по большому счёт это вопрос привычки и удобства.
Начнём? Вы наверное ждёте списка каких-то секретных приёмов, рекомендаций, которые научат вас рисовать pixel art? А правда в том, что ничего такого по большому счёту нет. Единственный способ научиться рисовать пиксельную графику — это рисовать самому, пробовать, пытаться, не бояться и экспериментировать. Не стесняйтесь повторять чужие работы, не бойтесь показаться неоригинальным (просто не выдавайте чужое за своё, хе-хе). Внимательно и вдумчиво анализируйте работы мастеров (не мои) и рисуйте, рисуйте, рисуйте. Несколько полезных ссылок вас ждёт в конце статьи.
3. Общие принципы.
И всё же существует несколько общих принципов, знать которые не помешает. Их действительно немного, я называю их «принципами», а не законами, потому что они носят скорее рекомендательный характер. В конце-концов, если у вас получится нарисовать гениальную пиксельную картинку в обход всех правил — кому до них дело?
Самым основной принцип можно сформулировать так: минимальной единицей изображения является пиксель, и по возможности все элементы композиции должны быть соразмерны ему. Расшифрую: всё, что вы нарисуете, состоит из пикселей, и пиксель должен читаться во всём. Это не значит, что в рисунке вообще не может быть элементов, к примеру, 2×2 пикселя, или 3×3. Но строить изображение всё же предпочтительно из отдельных пикселей.
Для наглядности приведу несколько примеров с типичными ошибками и вариантами их исправления:
Ноги у человечка лучше выглядеть не стали, это верно, к ногам еще вернёмся. В качестве примера «из жизни» приведу онлайновый паззл Zoo keeper:
Почему художник решил сделать обводку в два пикселя, в то время как сами элементы нарисованы попиксельно? Возможно, хотел отделить тайлы от фона. А прочую внутриигровую графику рисовал с той же жирной обводкой, чтобы сохранить единую стилистику, плюс такая явная обводка придаёт изображению некую выразительность. Тем не менее — что называется, не наш метод.
между 1-м и 2-мя пикселями.
Из этого принципа можно вывести простое правило: обводка и вообще все линии рисунка должны быть толщиной в один пиксель (за редким исключением).
Я вовсе не утверждаю, что это неправильно. Но это всё же не очень красиво. А чтобы было красиво, запомним еще одно правило: рисовать без изломов, скруглять плавно. Есть такое понятие как изломы — фрагменты, выбивающиеся из общего порядка, они придают линиям неровный, зазубренный вид (в англоговорящей среде пиксельных художников их называют 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.
Дизеринг, или смешивание — техника перемешивания определённо упорядоченным (не всегда) образом пикселей в двух граничащих областях разного цвета. Самый простой, распространённый и эффективный способ — чередовать пиксели в шахматном порядке:
Приём появился на свет благодаря (или скорее вопреки) техническим ограничениям — на платформах с ограниченными палитрами дизеринг позволял, замешивая пиксели двух разных цветов, получить третий, отсутствующий в палитре:
Но и позже, когда количество цветов перестало быть проблемой, дизеринг можно было видеть в видеоиграх в роли тени (чтобы не нагружать железо полупрозрачностью, художники часто обозначали тень участком чёрных пикселей, расположенных в шахматном порядке и накладывавшихся на фон).
Сейчас, в эпоху безграничных технических возможностей, многие говорят что необходимость в дизеринге отпала сама собой. Однако грамотное его использование может придать вашим работам характерный ретро-стиль, узнаваемый всеми любителями старых видеоигр. Лично я люблю использовать 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/
- 21 ноября 2010, 11:07
- 0103
Шикарно, спасибо)
Пожалуйста! Надеюсь, будет польза.
не хватает миниатюр в масштабе 100%, а так щикаарно ^_^
А они нужны? Прикрутить недолго. Я лишь хочу, чтобы люди пытались нарисовать с нуля, не обводя поверх в том же фотошопе.
Очень хороший урок, спасибо!
Наздоровье!
Добрый день! А куда пропали остальные уроки? Помню, лет пять назад бвл ещё как минимум один, про изометрию
я влюблен.
В пиксель арт? В робота на смешных ножках? В... меня?! )))
О Рамон!, [падая об пол] я не могу больше скрывать своих полупроводниковых чувств....
[ударившись об пол]
Так, где это я?!, мы мужики или что!
[удалился]
Занавес.
в пиксель арт и статью )
великолепная статья!
Ох, ну до великолепной ей далеко... Но спасибо, мне приятно.
Romson, у вас точно дар писателя и художника! Огромное спасибо, сейчас буду с зельем экспериментировать!
Спасибо! Экспериментируйте-экспериментируйте!
И обязательно пройдитесь по ссылкам, чтобы посмотреть, какие чудеса творят настоящие пиксельные художники. Не чтобы обзавидоваться, а чтобы знать, к чему стремиться ;)
спасибо, очень интересно! :)
Пожалуйста!
Спасибо за гайд. Был бы так же благодарен, если бы Вы дали побольше информации о "рабочем месте" в Фотошопе - полезных функциях, которыми пользуетесь, хоткеям, работе со слоями, и другим вещам, актуальным для пиксель арта, а то в первом уроке только самое основное и необходимое, а я полагаю, что всё-таки есть какие-нибудь хитрости :)
В своё время пробовал свои силы, единственный рисунок, на который разродился:
Покритикуйте, пожалуйста, хочу ещё попробовать после этого гайда.
Неплохой Кенни! Разве скруглить немного линию рук по направлению к варежкам, и голову круглее:
Варианты рисования круга я предлагал раньше:
http://www.ljplus.ru/img4/r/o/romson/CIRCLES.gif
А фотошоп, наверное, позже и отдельно. Хотя теперь я уже не вижу необходимости, но... В принципе, можно. Позже.
Спасибо большое, приму к сведению. Очень жалко, что у Вас не хватает времени на написание других уроков. Если вдруг свободное время появится, но позже - всё равно пишите, буду премного благодарен. Думаю, что не я один :)
Круто! Правда, очень замечательная статья =)
Жду следующих!
Изометрией, думаю, всё закончится. Много времени отнимает, а его и так мало свободного (((
Титанический труд! Спасибо! Куча новых для меня знаний и неочевидных штук! Гора полезностей!
Это хорошо, что полезностей, я рад!
Спасибо за статью. Хотел бы отметить такой момент из курса физики: вязкая жидкость плохо смачивает сосуд, следовательно жидкость скорее будет не прилипать к стенкам а наоборот закругляться от стенок. Однако при условии, что бутыль трясли (а какой же герой сидит на месте со своей склянкой жизни!), то только тогда изображение будет верно.
Получается, что при рисовании бутылок используется 4 красных/синих цвета, разве нет?
А мне показалось, что это просто не отрисована поверхность жидкости, которая должна выглядеть эллипсом, потому что мы смотрим на неё сбоку-сверху.
Совершенно верно, палитру дополнил. Неуглядел.
А вязкость... ну собственно да, напутал. Это цикл из анимашки, которую в уроках вешать не стал:
А вот анимашка очень симпатичная!
Кстати, хотелось бы увидеть в следующих выпусках приёмы создания анимации.
Нет, мультипликации не будет. Во-первых, учу тому что знаю и умею, а в pixel art я больше статичные картинки рисую. А во-вторых, на мой взгляд пиксельная мультипликация подчиняется всем законам анимации как таковой, и тут придётся учить именно азам анимации. Не обессудьте, учить вас этому я не возьмусь, долго и времезатратно. Уж как-нибудь без меня ;)
- хотелось бы услышать советы по улучшению трамвайного переда и зада и обводки переднего окошечка.
А что с ними не так?
Ну, если всё так, то это отлично :)
С "рогами" не всё в порядке, надо наверное почистить. Это потому что внешний контур шириной 2 пикселя, и строится из неперекрещивающихся при такой схеме точек (либо сдвинуть одно из креплений, что на крыше, на пиксель, либо сперва нарисовать конструкцию, а после придумать как её прикрепить к крыше).
Колёса не очень круглые, стучать будут ))
Хм, странно, что выглядят не круглыми, рисовал по мануалу, на которой Вы ссылки давали :)
Да, по схеме, вижу. Но Вы не учли 2 момента.
1 - панель, прикрывающая крайний вертикальный сегмент круга - глаз ленивый, глаз сам продолжит два встречных отрезка и решит, что именно так выглядит колесо за панелью. Можно сделать эту самую панель либо уже, чтобы выглядывал хотя бы на пиксель с обеих сторон последний отрезок окгуржности, либо наоборот шире, чтобы не было этих встречающихся (якобы) линий.
2. Лишний пиксель на 3-х из 4-х колёсах, а на некоторых их сразу два. ЗдОрово портят эффект круга.
P. S. При маленьком масштабе такая мелочь, как прямой угол из трёх всего пикселей, оказывает очень сильное влияние на восприятие картинки. Буквально акцентирует некоторые моменты, в Вашем случае - именно что колесо, скорее всего, некруглое. Так уж устроено наше зрение ;)
Мм, спасибо, сделаю её шире, на трамваях в принципе она широкая.
Про лишние пиксели не оч понял, если честно :)
Очень странно, потому что у меня их не видно.
Видимо, Гимп как-то через ж затёр линию.
Продолжая тему бесплатных альтернатив Adobe Photoshop...
Paint.Net не понравился тем, что это такой Фотошоп для самых бедных.
Pixel Studio Pro, кроме пикселя в названии, "заточенности" под pixel art ничем не выказал. Интерфейс напрямую практически слизан с фотошопа, что при ограниченных возможнстях несколько... раздражает, я б сказал. И потом, он коммерческий, так что как альтернатива провалился с треском.
Я на прошлой неделе познакомился с GrafX2, и остался впечатлён. Дистрибутив меньше 2-х Мб, помимо того, что он напомнил мне старый амиговский редактор, в котором мы работали больше 10 лет назад (и с которого, собственно, по факту списан, там даже в сплэш-экране указано tribute to...), GrafX реально предназначен для рисования пиксельной графики. Может, кому еще приглянется? Попробуйте, он современному пользователю покажется необычным, но это всяко лучше чем увечный Paint.
GIMP для тех, кто готов терпеть не самый удобный гуй.
Кстати, недавно видел дополнение для гимпа на хабре, которое делает GUI похожим на фотошоповский. Может хоть немного, но поможет) Правда, я не уверен, была ли там win-версия...)
Жди следующую версию гимпа, там фотошоп-гуй будет из коробки.
Я то всё равно вряд ли пересяду. Но новость неплохая)
А mtPaint не пробовали? Я нашел и скачал, заинтересовавшись темой, но не имея опыта, не могу понять насколько он хорош или плох.
mtpaint очень хорош, не хватает только удобной работы с анимацией и клавиатурных сокращений, хотя возможно не нашёл их.
GrafX мне очень понравился, прям как нарочно для пиксель-арта.
Нарисовал первый пиксел арт в жизни вообще. С телефона. Оцените и скажите, что не так =)
Если вопрос по технике, никаких нареканий. Гарний українець! (или не он?) Меня смущает двойная полоса между штанинами - с таким мелким масштабом было б красивей ограничиться одинарной линией, либо оставить зазор в 1 линию между брючинами (и в том и в другом всю фигурку придётся перерисовать, взяв за вертикальную ось не стык между пикселями а линию пикселей, надеюсь из этой схемы будет понятно, Ваш вариант верхний, я предлагаю построить рисунок по примеру нижней). И красные глаза, а в остальном всё хорошо.
Может тебе школу открыть? ) web-инары проводить там )
Не. Закончу урок по изометрии, и на этом будет всё.
За советы спасибо, на счёт штанин я подумывал тёмный \ светлый оттенок красного запилить, правда пропадёт контур, глаз красные, ибо не красные а карие (с цветом было больше всего проблем, сложно), В принципе, расширить на 1 пиксел не проблема =) сейчас попробую.
v 1.1 (так даже лучше наверно)
Ногам определённо стало просторней )
Ногам ли?
Недавно набрел на статью об игре, графика которой - супер смесь нуара и пиксель-арта, смотрится действительно очень отмосферно. Судите сами - http://sokrati.ru/1i5o
Спасибо, с большим интересом сел изучать.
Вот такой жалкий 4-х цветный человечек.
Отчего жалкий, нормальный человечек. С таких малых форм начинать изучать пиксельную графику лучше всего!
1. Дизеринг в 1 пиксель по левому боку - неудачное решение, добавьте еще линию пикселей чтобы получились "шашечки".
2. Непонятный излом на левой штанине (для нас справа) - это карман? Можно избавиться, а если критично чтобы ширина брюк к низу была именно такой - можно опустить до уровня колена, получится эффект вытянутых коленок ))
3. Анатомия. Если у человека всё с ней в порядке, то руки (кончики пальцев раскрытых ладоней) в опущенном состоянии достают примерно до середины бедра. На рисунке они значительно короче.
Подошвы бы к кедикам - холодно ж босиком шлёпать. :)
угу, я о том же подумал, когда одевал их.
Крутой человечек. Очень в стиле. ) можно на аватар взять?
Спассибо за замечания. Хочу сильно людёй человеческих рисовать в пикселе, да вот нужна видно тренировка. А ручки да, коротковаты =)
Э... На аватару? Да пожалуйста, если хочется. =)
Рисуй еще )
Я теперь, настоящий житель gamin.me. буду как свидетель из рязянова, но только в пиксель мире ) или что то типа того. Спасибо за разрешение, мне нравится ) У меня теперь есть тело )
Хе-хе, у меня прям карма повышена. =)
А у меня теперь капля будет. =) Жаль что размытая. Надо бы повыше разрешение сделать...
Наоборот пониже надо - если сделаешь аватарку 1к1 с уменьшенной будет пиксель в пиксель. А вот во всех остальных случаях масштабирование будет размывать.
Я загрузил твою картинку как есть и она получилась четкая. Это я просто делюсь )
Возможно я открою Америку, сказав что в Paint.NET (возможно не только в нём, просто я работаю с ним) есть хорошие фичи для автоматического дизеринга. Новичкам полезно. Когда вручную было бы долго, он полезен. Например здесь. Осуществляется выбором двух цветов и режимом заливки (так и т.д). Работает не только с заливкой, но и с цветом линий, контуров, фигур.
Ваш кэп.
За информацию спасибо.
Я не ортодокс, но... автоматический дизеринг? Есть в этом что-то от лукавого )))
Надо посмотреть, как он сработает со сложными формами. Шарик, конечно, круто, но сложные и мелкие формы?
И потом, в большинстве конкурсов чёрным по белому в правилах прописывают: никаких фильтров, каждый пиксель ставите вручную.
Сложные формы, там уже, как я понимаю, нужна работа с выделением и слоями. Да и если обьект не большой, но сложный - можно и вручную. Это не фильтр :D/_/
Говорят, Cosmigo Pro Motion ис уан оф зе бест тул для пиксель арта, сам не юзал, привык к ФШ. Может кто в поиске хороших тулов, гляньте, отпишите как оно.
Апдейт: И в TGA сохранять умеет.
Да-да, правду глаголят, есть в паинте заливка от 5% до 95% выборочная, чем не дизеринг?
Воот такой у меня получился мальчик(
девочка?):Рука и ножки вышли какими-то не правильными, зато вот зайцем я довольна ^_^
Очень неплохо (
фиолетовый трап:D). Пара замечаний (я хоть и не мастер, но всё же): дизеринг в 1 пиксел - не самое удачное решение, и линию волос можно наверно было бы сделать по правилам. Алсо, придай ему (ей) жизни, сделай кожу потеплей.Сэр, покажите мне розовощёкого ночного эльфа =)
Мадемуазель :D, позвольте. Про эльфа не упоминалось, но раз так - беру свои слова назад =). Дизеринг теперь радует глаз - вин! На счёт волос я имел ввиду как-то так:
Поправьте меня =)
Представляете, пока рисовала голову, зайца, тельце, пяточки - постоянно держала в голове именно эту часть урока. А как дошла до волос (делала их последними) - вся эта ценная информация не просто вылетела из головы, а ещё и перекрылась какой-то менее полезной.
Благодарю за исправление и напоминание, так действительно намного лучше =)
=)
Ваш ночной эльф симпатяга, мне очень нравится! Gurthener правильно исправил волосы (только про чёлку забыл). Развивайте навыки, шлифуйте мастерство. Заяц действительно шикарный!
Еще один моментик - где у Вас расположен источник света? Уточню вопрос: почему блики на глазках зайца и в глазах эльфа не совпадают?
По пиксельной части - как можно больше смотрите на работы мастеров, не просто любуйтесь, а изучайте. Из них можно очень многому научиться.
Спасибо большое за урок, за пожелания и за похвалу, разумеется =)
Вот попробовал колбочки порисовать, первый опыт пикселарта =)
Буду рад замечаниям и предложениям =)
Файл должен быть латиницей назван, вроде.
Неплохо!
И еще один момент, песочные часы всегда снабжают внешним корпусом. Стекло хрупкий материал, боится ударов, поэтому стеклянные ёмкости часов снизу и сверху защищают корпусом (деревянным, к примеру). Загуглите иллюстрации, посмотрите. Это я к тому, что прежде чем рисовать незнакомый объект, лучше узнать его устройство.
Большое спасибо! Попробую ещё, когда свободное время будет =)
Я вот тоже хочу показать кое-что, что у меня получилось.
Что скажите, есть ошибки? Будет интересно услышать замечания.
на первой картинке кривоваты доски
на первой и третьей меня смущает вода... заготовка? не похоже, чтобы рисовалось попиксельно от руки
да, вода не пиксельная. А доски не знаю как исправить(
Доски получились кривыми, потому что невнимательно читали. Прямые линии получаются прямыми, только если все отрезки, из которых они строятся, одинаковой длины. А у Вас длина отрезков постоянно "плывёт", вот и получаются они кривыми.
Еще раскрою такую хитрость: в пиксельной графике редко используются перспективные искажения. Аксонометрическая проекция и её частный случай - изометрия потому и взята за правило, что не учитывает перспективу, объекты по всем трём осям имеют одинаковое искажение. В противном случае искажения придётся учитывать при текстурировании объектов, и это однозначно задание не для начинающих.
Благодарю Вас за столь полезную и актуальную информацию!
Обязательно исправлю. А с остальными объектами: корабль, маяк, мины — всё в порядке?
корабль, по-моему, не выглядит цельным
Спасибо за урок!!
Нарисовал колбочки и попробовал продвинутую версию дизеринга. Всё это затратило больше времени, чем я думал.
Прекрасный урок! Я как посмотрел, так сразу захотел научиться рисовать!
Есть только один вопрос ко всем да и к автору тоже: применялся ли пиксель арт в играх по типу Laser Squad Nemesis ? И можно ли такие задники нарисовать пиксель артом..?
Извините за юмор: думаю можно просто сделать ПксильWorkom без арта )
Я не очень понял, о чем Вы=) Можно по точнее...
Так, образная шутка, что есть пиксель-арт а есть когда просто пиксили кладешь. ) Арт это картинки, а просто задники просто Работа. )
На картинке - отрендеренные трехмерные модели, это не пиксель арт
Спасибо... получается, как и в Фоллауте, если не ошибаюсь?
Да
Задники можно нарисовать любым артом :) О чём вопрос?
Понял, спасибо=) Есть желание сделать игру в фантастическом сеттинге. Вот ищу, как бы самому графику нарисовать. Понял, что пиксель арт мне подходит. Буду учиться, а по успехам можно будет судить о дальнейшем развитии идеи)
В школе была скучная лекция и вот нарисовал, через программу ProPaintMobile.
извиняюсь конечно за кривой контур, просто до этого я статью толком не читал, и рисовал как мне казалось правильно.
достаточно круто вышло, попробуй тени темнее сделать
кто-нить еще учиться пикселарту?)
нужны уроки по чему-нибудь? :)
Давно уж нравится сие пиксельное буйство, но в голове не было и мысли попробовать, а после прочитанных тут 2ух уроков прям-таки загорелась
Жудкий заяС, кривой, недоделанный, но первенец.
Ходячий цвЯточек, даже отважилась сделать элементарную анимашку, уже получше, интересно будет узнать что в нём стоит исправить и косяки)
Само собой сначала была нарисована букашка из 1го урока, чтобы понять хотя бы примерно что к чему.
А вот дальше уже решила намалевать что-нибудь простое:
Ещё бы мне дико хотелось узнать как лучше делать задние декорации, а то оставлять на прозрачном/монотонном фоне не дела совсем. А ещё кто подскажет как грамотно сделать падающую тень от нарисованного объекта?)
какую именно тень?
1. просто берешь копируешь свой рисунок куда-нить в свободное место, его полностью перекрашиваешь в цвет тени и свой рисунок вставишь сверху получившейся тени
2. рисуешь овал нужных размеров, закрашиваешь его в 1 цвет, и потом делаешь сетку либо не делаешь, и так же свою картинку накладываешь сверху этой тени
3.ну тут вроде и так понятно, как в обычном рисовании, делаешь границы и закрашиваешь потом
и про декорации не очень понял, они разные бывают, бывает просто каким-то цветом заливают и/или делают мягкий переход от темного к светлому, бывает какой-то пейзаж вставляют
Конкретно говорила о тенях от "предметов" на земле. Овал то понятно - это просто, а вот что делать с тенями как в пункте 3, если они не простой цилиндр, а, допустим, трёхногий многорук? Может есть способы как сделать тень без многих часов труда?))
Ну под декорациями я имела ввиду допустим полянку, комнатку и прочее куда захочу поместить своего персонажа.
Можно делать тень от любого предмета овальчиком же.
Можно вообще их не делать. Самая прелесть искусства - можно делать как угодно и говорить "Я так вижу!"
ПрЭлЭсно, просто прЭлЭсно)
ну вот есть урок как делать тень человека, правд он для фотошопа, но смысл ясен: http://cadit.wikidot.com/photohop-3d-shadow-tutorial в общем берешь начальную картинку, закрашиваешь ее в цвет тени и искажаешь как надо
на счет декораций: тут никаких фишек нет, рисуешь просто как обычный пиксел арт и все)
Спасибо, будем экспериментировать с ходячими цветками
Бедный Jazz...
Помню, как он сетовал на то, что редко различает Raziel, Romson и Rivolt, так теперь ещё и Rapido :)
Тогда ещё присутствовали Reogen и немножечко Rayen, так что сейчас полегче :)
Зато у нас девушка на сайте появилась, событие :)
а melkopuz?
Я её давно не видел :)
Бебебе =(
@>-'-
Попробовала поэкспериментировать с разными методами создания теней. Лучше всего вышло с овальной сеткой
критика приветствуется
Клёво! Мне нравится! :)
Единственное что смущает, это руки и хвост - руки резковато от толстого к тонкому переходят (я бы вообще под листья бы их сделал), а у хвоста концы листьев больного резко и угловато режутся. Но это мелочи. :)
Спасибо, наконец-то критика!)
Про сужение - никак не могу сообразить как плавно сузить и это лучшее до чего удалось дойти. Может кто совет даст по этому поводу.
А про лист на хвосте вообще не задумывалась, как начеркалось так и оставила, подумаю ещё что с ним можно сделать.
А пальцы сделаны такими, ибо уже был готов лист на хвосте и хотелось разнообразия xD
Первый пиксель арт дварф
Классный! Единственная мелкая придирка - косит на один глаз, а вообще супер.
спасибо=) оба глаза состоят из трех пикселей , два белых по краям и черный по середине , поскольку фон белый , там не видно 1 пиксель и таки да кажется что косоглазие=(
Да,я видел. Можно глаз в сторону сместить, наверное. Хотя, на другом фоне будет не видно, я думаю.
какой-то совсем маленький Т_Т
первый пиксель арт кавай ^_^
Поринг, ня!
конечная версия xD
"место где дварфы с топорами могут быть счастливы"
Вот уж не думал, что в Вальгалле....)))
а когда будет готов урок по изометрии? прям не терпится=)
Не знаю, надо у Romson'а спрашивать :)
переделал дварфа немного =) хотя он уже надоел наверное...
Пытался по туториалу меч нарисовать , но вышло как-то совсем не очень.
Теперь у него в другую сторону глаз косит :)
да уж...=) прям не знаю даже что поделать с этим
оставить видимо надо кавайное выражение "^_^"
намного лучше стало
Ребят, если сможете, то помогите, пожалуйста. Хочу вот сделать pixel-art платформер, уже немного графики есть - http://septimus.unoforum.ru/?1-12-0-00000004-000-0-0-1294831464 . Возможно, поможете мне парой советов по улучшению графики?