aKaks.ru

Как рисовать карандашом, красками

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


Курс пиксель-арта 2

Это перевод публикации «Les Forges Pixel Art Course».

Часть 1: Правильные инструменты

Часть 2: Линии и кривые

Часть 3: Перспективы

Часть 4: Тень и свет Часть 5: Палитры цветов Часть 6: Сглаживание Часть 7: Текстуры и размытие Часть 8: Мир тайлов
Часть 2: Линии и кривые
Если вы ещё не состоявшийся художник, лучший путь начать рисовать, делать это карандашом, после чего обводить чернилами, затем раскрашивать. То же самое применимо и к пиксель-арту: первый шаг в изображении, это обозначить контуры — этот шаг называется «штриховой рисунок» (Lineart). Штриховой рисунок — это очень важный шаг для достижения хорошего результата. Несколько пикселей вашего изображения, могут являться большей его частью (в противоположность рисованию, где масштаб позволяет больше допущений) так что ошибка в один или два пикселя, может сделать так, что ваш персонаж будет выглядеть искажённым. Для ясности, точность штрихового рисунка является Р-Е-Ш-А-Ю-Щ-Е-Й для успеха пиксель-арта.
1. Прямая
Штриховой рисунок состоит в основном из линий и кривых, и мы начнём обсуждение с прямых линий. Те из вас, кто учился в математическом классе знают, что линия характеризуется её наклоном. Это коэффициент «изменения y», к «изменению x». В этом курсе мы будем представлять этот коэффициент как y:x. Таким образом идеальная диагональная от «слева внизу» к «справа вверху» линия, это прямая 1:1. Вот некоторые простые правила и их коэффициенты, иллюстрирующие эту идею.

В пиксель-арте, линии которые используют эти простые коэффициенты (0:1, 1:2, 1:1, 2:1 и 1:0) называются «идеальные линии». Они делают ваше изображение хорошо выглядящим, потому что глаз без труда может им следовать. Они, это ещё не всё, что вы можете рисовать, вы можете использовать например «вспомогательные» линии, чередуя сегменты длиной 2, с сегментами длиной 1 (для имитации сегментов с длиной 1.5 — смотрите пример изображения). Результат намного менее эстетичен (особенно поскольку изображение увеличено в 4 раза, чтобы вы могли видеть что случилось) и показывает почему это так важно, использовать эти типы линий осторожно. Они всё ещё полезны, и вы научитесь украшать в следующих разделах этого курса.
2. Кривые
Ладно, теперь вы знаете как рисовать линии, но вы далеко не уйдёте, только с прямыми линиями. Позвольте в таком случае рассмотреть кривые, которые более сложны. В отличие от линий, кривые могут быть хорошими или плохими.

Здесь только одно правило, чтобы добиться плавной кривой: длина сегментов будет меняться в прогрессивной манере, и вы должны избегать прямых углов. Ладно, это два правила, но фактически, второе является частью первого. Например: в Зелёной вы можете видеть хорошую кривую, которая следует этому правилу великолепно. (Слева направо, длина 5 4 3 2 2 1 1 1 2 3 3 3 2 1 1 2 2 1 2 1 2 1 1). Красная кривая с другой стороны, бесстыдно пренебрегает (заметьте прямой угол, который появляется в кривой). В конце концов, хорошая техника рисования кривой, это нарисовать кривую рукой (мы получим нечто похожее на красную кривую) и затем поправить её, пока она не будет следовать «правилу». Это гарантирует что кривая будет выглядеть как вам нужно. Вот и всё о кривых. В заключение я оставлю вам несколько простых примеров этого курса. Первое — это дракон, с кривыми иллюстрирующими принципы очерченные выше; второе — это меч, который показывает, что иногда более угловатые линии (посмотрите на наконечник и эфес) могут также быть полезны в некоторых случаях.

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

Метки:
  • pixel art
  • pixel-art
  • pixelart
  • graphics
  • gamedev
  • 13 ноября 2014 в 19:19 Курс пиксель-арта 4
  • 2 ноября 2014 в 09:53 Курс пиксель-арта 3
  • 27 октября 2014 в 19:09 Курс пиксель-арта
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее

Реклама

habrahabr.ru

Что такое Pixel Art? Примеры и как этому научиться

Pixel Art (Пиксель Арт) — переводиться с английского как пиксельное искусство. Пиксель (pixel) в свою очередь это наименьший графический элемент цифрового изображения.

Таким образом Пиксель Арт это буквально означает искусство рисовать пикселями.

Сразу для наглядности посмотрим вот этот пример:

Owlboy (pixel art game)

Примерно так выглядят игры с графикой в стиле Пиксель Арт.

Очень часто такую графику используют в инди-играх  так-как они имеет очень узнаваемый компьютерный игровой стиль.

Однако Pixel Art это не только графика, спрайты и картинки для игр, это целое направление цифрового и графического искусства.

С помощью пиксель арта рисуются красивые картины:

Вы ни с чем не спутайте этот ретро стиль графики

Некоторые картины в этом стиле вполне достойны занять место на вашем рабочем столе. Есть и очень крутые художники кто работает в этом стиле.

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

Если мы увеличим эту картинку, то можно видеть как всё сделано вблизи:

Уникальной стиль пиксель арта в том, что есть довольно чёткие переходы цветов и нет сглаживания. Для примера возьмём другую работу в цифровой графике довольно среднего уровня, посмотрите вот этот рисунок девушки в очках (18+) в блоге www.econdude.pw.

Это рисунок компьютерной мышкой в программе SAI2.0.

Однако, если вы приблизите эту картинку, то вы видите сглаживание:

Тут нет чётких переходов цветов и оттенков, а вот в пиксель арте переходы чёткие.

Для примера посмотрите как можно делать переходы между цветами в пиксель арте:

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

Вот еще один пример, это довольно классический рисунок в стиле пикель арт:

http://www.gamer.ru/everything/pixel-art-dlya-nachinayuschih

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

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

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

Однако, любой кто хоть что-то рисовал в стиле Пиксель Арт вам скажет, что это чуть-ли не самый затратный в плане ресурсов (времени в первую очередь) стиль графики.

Анимация в стиле Пиксель Арт так и вообще адский труд.

http://www.dinofarmgames.com/a-pixel-artist-renounces-pixel-art/

Поэтому это еще надо доказать, что Pixel Art это «ленивый стиль», я бы даже сказал что наоборот, это не самый НЕ ленивый стиль графики.

Однако, научиться рисовать что-то простое в стиле Pixel Art может каждый, и вам не понадобятся никакие специальные программы, достаточно простого графического редактора.

Если вы хотите научиться рисовать в этом стиле, вам, как и в любом другом случае, нужно много практики, а начать вы можете например со статей на Хабре: Курс пиксель-арта

Там-же вы найдёте основные принципы пиксель арта.

Вот один из примеров как рисуют пиксель арт (ускоренное видео — speed drawing) на уровне новичка, научиться рисовать так можно буквально за неделю:

Пиксельарт :: рисование космического корабля

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

https://www.youtube.com/watch?v=vChMzRnw-Hc

Видите эту картинку Сары Кэрриган из StarCraft? Что это такое по вашему и как это сделано?

Это человек построил из блоков в игре minecraftб, работа заняла 23 недели.

В приближении видно что всё это отдельные блоки

Формально это уже не пиксель арт, а даже «майнкрафт блок арт», но суть стиля остаётся прежней и это самый большой рисунок пиксель арт и мировой рекорд, по словам автора.

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

Еще один пример, художники и аниматоры Paul Robertson и Ivan Dixon создали вот такое:

SIMPSONS PIXELS

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

Лично я считаю что картинки в стиле Пиксель Арт это самое настоящее современное искусство в самом лучше смысле этого слова.

Каждая Pixel Art картинка имеет вполне четкую ценность и это видно, это чувствуется.

Это может оценить даже человек, который плохо в этом понимает.

Однако, к сожалению, данный жанр искусства не очень популярен и сейчас считается уже устаревшим, а возвращение к нему в последние годы в виде множеств игр из steam в стиле пиксель арта уже тоже начинает надоедать людям. Хотя лично я считаю что данный ретро стиль графики это уже классика, а настоящая классика не умрёт никогда.

vgrafike.ru

Курс пиксель-арта

Это перевод публикации «Les Forges Pixel Art Course».

pdf на английском.

Часть 1: Правильные инструменты

Часть 2: Линии и кривые

Часть 3: Перспективы Часть 4: Тень и свет Часть 5: Палитры цветов Часть 6: Сглаживание Часть 7: Текстуры и размытие Часть 8: Мир тайлов
Предисловие
Есть много определений пиксель-арта, но здесь мы будем использовать такое: изображение пиксель-арт, если оно создано целиком руками, и присутствует контроль над цветом и позицией каждого пиксела, который нарисован. Несомненно, в пиксель арте включение или использование кистей или инструментов размытия или машин деградации (degraded machines, не уверен), и других опций ПО, которые «современны», нами не используются (вообще-то put at our disposal значит «в нашем распоряжении», но по логике вроде правильнее так). Он ограничен инструментами такими как «карандаш» и «заливка». Тем не менее не скажешь, что пиксель-арт или не-пиксель-арт графика — более или менее красива. Справедливее сказать, что пиксель-арт другой, и он лучше подходит для игр стиля «ретро» (как Супер Нинтендо или Гейм Бой). Вы можете также комбинировать техники изученные здесь, с эффектами из не-пиксель-арта, для создания гибридного стиля. Так, здесь вы будете изучать техническую часть пиксель-арта. Тем не менее никогда я не сделаю вас художником… по простой причине, что я тоже не художник. Я не научу вас ни человеческой анатомии, ни структуре искусств, и мало скажу о перспективе. В этом руководстве, вы можете найти много информации о техниках пиксель-арта. В конце, вы должны будете быть способны создать персонажей и пейзаж для ваших игр, при условии что вы будете внимательны, практиковаться регулярно, и применять данные советы. — Я также хочу указать, что только некоторые из изображений, использованные в этом руководстве увеличены. Для изображений которые не увеличены, будет хорошо, если вы найдёте время скопировать эти изображения так, чтобы вы могли изучить их детально. Пиксель-арт — это суть пикселей, изучать их издалека бесполезно. — В конце концов, я должен поблагодарить всех художников, кто присоединился ко мне в создании этого руководства так или иначе: Шина, за его грязную работу и штриховые рисунки, Ксеногидрогена, за его гений цветов, Лунна, за его знания перспективы, и Панду, сурового Ахруона, Дайо, и Крайона за их щедро предоставленные работы, для иллюстрации этих страниц. Так, позвольте вернуться к сути дела.
Часть 1: Правильные инструменты
Плохие новости: вы не нарисуете ни единого пикселя в этой части! (И это не причина пропускать её, так ведь?) Если есть поговорка которую я терпеть не могу, это «нет плохих инструментов, только плохие работники». На самом деле я думал, что не может быть ничего более далёкого от истины (исключая может быть «то что не убивает вас, делает вас сильнее»), и пиксель-арт, очень хорошее подтверждение. Это руководство нацелено ознакомить вас с различным программным обеспечением, используемым для создания пиксель-арта, и помочь вам выбрать правильную программу.
1.Некоторые старые вещи
Когда выбираешь ПО для создания пиксель-арта, люди часто думают: «Выбор ПО? Это безумие! Всё что нам нужно для создания пиксель-арта, это paint!(видимо игра слов, рисование и программа)» Трагическая ошибка: Я говорил о плохих инструментах, это первый. Paint имеет одно преимущество (и только одно): он уже есть у вас, если вы запустили Windows. С другой стороны, у него куча недостатков. Это (неполный) список: * Вы не можете открыть более одного файла одновременно * Нет управления палитрой. * Нет слоёв или прозрачности * Нет непрямоугольных выделений * Мало горячих клавиш * Ужасно неудобно Вкратце, вы можете забыть про Paint. Сейчас мы посмотрим настоящее ПО.
2. В конце концов...
Люди тогда думают: «Ладно, Paint слишком ограничен для меня, так я буду использовать моего друга Photoshop (или Gimp или PaintShopPro, это одно и то же), которые имеют тысячи возможностей.» Это может быть хорошо или плохо: если вы уже знаете одну из этих программ, вы можете делать пиксель-арт (отключив все опции для автоматического антиалиасинга, и выключив многое из продвинутого функционала). Если вы ещё не знаете эти программы, тогда вы потратите много времени, изуччая их, даже хотя вам не нужна вся их функциональность, что будет пустой тратой времени. Вкратце, если вы уже используете их долгое время, вы можете создавать пиксель-арт (я лично использую Photoshop по привычке), но иначе, много лучше использовать программы, которые специализируются на пиксель-арте. Да, они существуют.
3. Сливки
Программ предназначенных для пиксель-арта много больше, чем кто-то может подумать, но здесь мы рассмотрим только лучшие. Они все имеют очень похожие характеристики (управление палитрой, предпросмотр повторяющихся тайлов, прозрачность, слои, и так далее). Различия у них в удобстве… и цене.

Charamaker 1999 — хорошая программа, но распространение, кажется, приостановлено.

Graphics Gale намного более интересна и легка в использовании, и она идёт по цене около $20, что не так уж плохо. Добавлю, пробная версия не ограничена по времени, и идёт с достаточным набором, чтобы сделать достаточно хорошую графику. Только она не работает с .gif, что не такая уж проблема, поскольку .png в любом случае лучше.

ПО более часто используемое пиксельными художниками, это ProMotion, которая (явно) более удобна и быстра чем Graphics Gale. А, да, она дорогая! Вы можете купить полную версию за скромную сумму… 50 евро ($78).

Позвольте не забыть наших друзей на Mac! Pixen хорошая программа, доступная для Macintosh, и она бесплатна. К несчастью я не могу сказать вам больше, потому что у меня нет Mac. Заметка переводчика (с французского): пользователи Linux(и другие) должны попробовать JDraw, и GrafX2. Я убеждаю вас попробовать их все в демо версиях, и посмотреть которая подходит вам по удобству. В конце концов это дело вкуса. Просто знайте, что однажды начав использовать программу, может быть очень сложно переключиться на что-то другое. Продолжение следует…
Заметки переводчика с французского на английский
Это большое руководство по пиксель арту, написано Филом Разорбаком с LesForges.org. Большое спасибо Филу Разорбаку за разрешение OpenGameArt.org перевести эти руководства и поместить их здесь. (От переводчика на русский: я разрешения не спрашивал, если кто имеет желание, можете помочь, не имею достаточного опыта общения на английском и тем более французском).
Заметка переводчика с английского на русский
Я программист, а не художник или переводчик, перевожу для своих друзей художников, но что добру пропадать, пусть будет тут.

Оригинал на французском где-то здесь www.lesforges.org

Перевод с французского на английский здесь: opengameart.org/content/les-forges-pixel-art-course Я переводил с английского, потому что французский не знаю.

И да, это моя первая публикация, поэтому рекомендации по оформлению приветствуются. Плюс интересует вопрос, остальные части публиковать отдельными статьями, или лучше эту обновлять и дополнять?

Метки:
  • pixel art
  • pixel-art
  • pixelart
  • graphics
  • gamedev
  • 13 ноября 2014 в 19:19 Курс пиксель-арта 4
  • 2 ноября 2014 в 09:53 Курс пиксель-арта 3
  • 29 октября 2014 в 17:40 Курс пиксель-арта 2
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее

Реклама

habrahabr.ru

Pixel Art: Рисуем пиксельное изображение в Photoshop

Я уже писал о pixel art‘e, и обещал написать ещё. Пришло время) Сегодня я покажу более детально как отрисовывать пиксельный рисунок. Теория + Практика.

1) Создадим новый документ , размером 1*1px. Зальём его чёрным и определим как кисть. Назовём её «PixelBrush»

2) Открываем изображение, которое будем превращать в пиксельное. Сделаем его полупрозрачным, чтобы были видно контуры, но линии не были слишком яркими, и мы могли спокойно обводить. Выбираем карандаш, и установим ему кисть «PixelBrush», диаметр 1px. Перед обводкой, необходимо подумать о уровне детализации, который вам походит. Статичное изображение содержит больше деталей, чем анимированное. Обводим контуры на новом слое. В сложных местах, таких, как окружности, я пользовался инструментом Pen, и затем обводил контуры(панель Path-правый клик на контуре — Stroke Path).

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

Прямые/наклонные

Скруглённые линии

Чистим и подправляем контуры.

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

Назовём слой «Colors»

5) Помещаем слой контур и «Colors» в новую папку. Теперь дублируем их и объединяем копии. Правый клик на иконке этого слоя и выбираем Select Pixels. Выбираем папку и создаём маску. Теперь мы можем спокойно работать с нашим персонажем, не боясь, что что-то вылезет за его пределы.

6) Наносим тени

7) Как делать плавный переход.

В пиксель-арте свой способ изображения градиентов, если на простом примере, то это выглядит так:

а более сложный градиент выглядит так:

Я добавил что-то подобное к шапке. Я не стал увлекаться «фотореалом», и не стал использовать много градиентов.

8

8) Сгладим шероховатые линии. Объяснить сложно, так что смотрим примеры:

8a

8b

А вот и наш результат:

У меня не точно соблюдена цветовая гамма, но, надеюсь, сам принцип понятен

Желаю успехов!

Кстати, можете посмотреть блог веб-мастера, который я сам читаю)

Читателям также нравится:

Запущена новая версия сообщества для творческих людей — TopCreator, которое мой блог всячески поддерживает. Мы верим, что проект нужен российским дизайнерам, иллюстраторам и фотографам — мы хотимы быть вам полезны! Очень интересный проект, будьте среди первых. Заходите сюда

naikom.ru


Смотрите также