Как рисовать пиксельную траву
Обновлено: 06.07.2024
Ann Maulina — индонезийская комиксистка и концепт-художница со степенью бакалавра в области дизайна визуальных коммуникаций. Недавно она поделилась кратким пошаговым уроком по рисованию растительности.
Прежде чем мы разберём, как рисовать листву, уточним определение глубины резкости, которая очень важна при рисовании фона и окружения.
Вот её простая формула: передний план, средний план и задний план.
- Передний план: обычно изображается в темных тонах и темных цветах с низкой насыщенностью, имеет много деталей. На стилизованных рисунках передний план часто рисуется в виде силуэта.
- Средний план: здесь находится основной фокус изображения. Он имеет самую высокую интенсивность цветов по сравнению с другими планами.
- Задний план: светлые тона, светлые неинтенсивные цвета. Мало деталей.
На этом этапе нам не нужно беспокоиться о том, какой цвет использовать. Выберите цвет и нарисуйте некоторые из «внешних» листьев, окружающих саму форму. Не размещайте их слишком далеко друг от друга. Убедитесь, что на рисунке светлая и темная области отличаются друг от друга.
Вот несколько шагов по рисованию кустов, листья которых растут в разных направлениях. В основе каждого из них — одна и та же простая форма.
Смешайте цвета с помощью большой кисти.
Нарисуйте немного травы простой кистью. Точно так же, как мы рисовали листья на кусте. Используйте пипетку, чтобы брать один и тот же цвет из размытого нижнего слоя и рисовать травинки.
Добавьте немного дикой поросли.
Несколько шагов для рисования различных типов деревьев с различными основными формами.
Используйте тот же метод, что и при рисовании травы: смешайте цвета, а затем нарисуйте скопления листвы.
Точно так же, как при рисовании кустарника, лучше использовать направления роста в качестве ориентира.
Добавьте детали. Художница создала несколько просветов между «гроздьями» листьев и добавила другой цвет на ствол.
Как уже упоминалось ранее, объекты на переднем плане очень детализированы, поэтому иногда на переднем плане нужно прорисовывать каждый листик.
Чтобы нарисовать отдельные листья, стоит начать с центральной линии действия. Ниже приведены некоторые примеры того, где можно найти эти линии.
Разные листья имеют разную форму, но обычно у них есть центральная линия, подобно позвоночнику в человеческом теле. Эту линию можно использовать в качестве линии действия для рисования листа. Ниже приведены несколько листьев в разных ракурсах, рисование которых начиналось только с одной похожей центральной линии.
Эти линии можно использовать и при рисовании ветви листьев.
У разных растений разные паттерны разветвления листьев. На изображении ниже показаны три разных рисунка на трех разных растениях, которые Энн нашла в саду своей мамы. Используйте их в качестве руководства, если хотите добавить больше деталей и характеристик листве, которую рисуете. Обычно проще вбить в строку поиска название растения и изучить форму и паттерны, прежде чем рисовать его.
Изучение паттерна непосредственно с реального растения перед вами даст лучший результат, потому что вы можете рассматривать его со всех сторон, чтобы не пропустить ни одной детали.
- Всегда используйте референсы! Избегайте рисования по памяти. Существует бесчисленное множество видов травы, кустарников и деревьев. Используйте несколько разных референсов, чтобы создать красивые комбинацию и композицию.
- Не нужно все мелко детализировать. Добавляйте детали в основном в тех областях, на которых вы хотите сосредоточить внимание зрителя. Обычно фокус находится на переднем плане или посередине, но никогда не на заднем плане.
Сначала посмотрите на общую картину, детали изучите позже. Используйте простые фигуры для создания общей формы, а затем используйте направляющие линии в качестве ориентира при добавлении деталей.
Всё именно так, ну почти)
Зашёл за этой картинкой.
Все просто, между шагом 1 и шагом 2 в случае с совой находится шаг "5 лет обучения академическому рисунку". Плохо или хорошо это, не знаю, но рисование (как и музыка) - это такое занятие, в котором результат можно получить только пройдя долгий период задрачивания непосредственно навыков от азов до сложных материй. Обойти это нельзя никакими лайфхаками, кистями, фильтрами и так далее. Только годами сидеть и рисовать, рисовать, рисовать.
Ну и что я сделал не так?
Комментарий удален по просьбе пользователя
Ты будешь первым фанатом моего аниме про кусты?
Два куста таких разных, но близких хотели бы быть вместе(наверное), и вот один из них решается отправится в долгое путешествие к своему любимому кусту.
Комментарий удален по просьбе пользователя
Надеюсь речь шла только о размере прикрепленной картинки.
Комментарий удален по просьбе пользователя
Еще 99 раз и рисую свое аниме.
Симпатично, но яркие листики на чёрном слишком выделяются.
Смотрите, основная идея в том, чтобы рисовать четкие листья на границе зон переходов, там где меняется цвет и тон.
У вас темные листья почти равномерно распределены по всему кусту, в том числе в светлой зоне. У автора же темные листья вырастают из темной зоны и визуально с ней объединяются. Их задача - выйти на более светлый участок и как бы разбить его силуэт, при это оставаясь связанными с родной средой.
На среднем зеленом и светлом зеленом применяется та же логика. Самые светлые листья видно по контуру шара-куста - они выходят за границы и разбивают силуэт, показывают, что объект - это не просто шарик, а куст. Средне-зеленые подчиняются той же логике: - выходят из средней зеленой зоны и переходят на светлую. Например, у вас неплохо получился краешек слева, но надо еще пару кустиков сделать, чтобы стало совсем хорошо)
я бы не сказал что что то не так, вполне себе недурно
Как всегда спасибо за отличный материал!
Спасибо, что читаете нас с:
Спасибо, очень хорошо объяснили
Рады подготавливать и делиться полезностями!:з
Хороший урок, только кисти нужны такие
Кисти за тебя рисовать не будут, тот кто рисовать умеет сделает не хуже и со стандартными кистями
Смешно. То-то у всех художников наборы своих кистей заготовок.
Они скорее для ускорения процесса, чем для его непосредственного понимания. Некоторые просто рисуют все двумя тремя кистями
Подтверждаю. Я профессиональный художник. У меня овер 1000 разнообразных кистей, как бесплатных, так и за бешеные деньги. Но пользуюсь 95% времени я только двумя.
Oh, my sweet summer child. Я хочу чтобы ты узнал что-то новое, например, базу о рисовании:
1. Итак, кисть отличается от другой кисти - границами и текстурой, это важно тк в рисовании обычно используются 4 типа смешивания, переходов, 4 типа граней: sharp - firm - soft - lost. Жесткая грань - для четкости. Самая слабая - для перехода от горизонта к небу например. Важно то, как при использовании одной кисти создаются эти переходы. На Скриншоте 1 отображены три кисти и переходы, какие ими образуются, вверху обычная круглая, ниже аэрограф и в самом низу текстурная, с поребриками. На скриншоте 2 - результат работы этими кистями. Слева фигуры четкие и текстурные, это потому, что использовалась четкая круглая и текстурная кисти и переходы создаваемые ими тоже четкие. Все грани видны и эффекта будто у тебя зрение "-6" нет. Справа фигуры размыты, это пример аэрографа - второй кисти. В обоих случаях задача выполнена и картина нарисована. Кисть влияет исключительно на стиль.
2. Итак, вам не нравится ручной процесс создание переходов и вместо постоянного тыкания туда-сюда вы хотите провести линию градиента сразу. Создаете себе такую кисть и экономите время. Результат как правило другой, отличается от ручного. Не лучше, не хуже, но другой. Или используя стандартную кисть вам нужно закрасить тонкий волосок. Вы нажимаете на ручку и кончик получается толстый и жирный. Вам нужно использовать ластик чтобы стереть его и сделать аккуратным, это долго. Проще создать кисть, которая в зависимости от нажатия будет регулировать ТОЛЩИНУ проводимого мазка. Это экономит время и нервы. Вы счастливы.
3. Ваша задача нарисовать концепт, и образ травы вообще не важен. Можно вять травинку и сделать из нее кисть. Захерачить половину холста - "типа лес"
Создание тайлов: рисуем траву
Небольшое руководство по созданию тайлов основной травы, земли и высокой травы.
[на примере тайлов для RPG Maker 2000, RPG Maker 2003, EasyRPG]
Начиная рисовать свой тайлсет многие в первую очередь рисуют траву. И это весьма разумно и обоснованно, ведь она будет почти везде и весь верхний слой в идеале должен хорошо с ней совмещаться.
Одна из самых простых схем создания подобного тайла следующая:
1) сначала заливаем весь квадратик тайла основным цветом. Я выбрала тёмный зелёный;
2) добавляем вторым цветом небольшой паттерн. Например, галочки из трёх пикселей;
3) в случайном порядке добавляем пару пикселей, можно другого цвета.
Всегда следует проверять, нормально ли стыкуются края тайлов. Полезно и взглянуть на получившуюся картинку с разным увеличением.
Землю можно нарисовать по тому же принципу, что и основную траву, изменив при этом цвет и паттерн.
Далее рассмотрим густую высокую траву.
Для хорошей сочетаемости предлагаю бать в палитру хотябы пару цветов, используемых в тайле низкой травы (я позаимствовала с прошлого тайла два цвета и добавила два новых: самый тёмный и самый яркий).
1) на основном цвете рисуем нужные нам кустики.
Предлагаю сразу рисовать не в квадратике размером с тайл (у меня 16х16), а вылезти за его пределы сверху и слева. Таким образом повторяющийся рисунок будет не прямо по центру клетки, а чуть с краю. Это в свою очередь поможет сгладить не очень хороший эффект поклеточного размещения тайлов и ивентов на карте (то есть, кустики будут расти между клетками)
2) вырезаем верхнюю честь травы, которая не влезла в квадратик тайла, и переносим её в нижнюю часть рабочего врадрата (попутно удаляя основной цвет, чтобы не закрыть имеющуюся нарисованную часть.
Аналогично переносим не влезший кусочек, расположенный слева от тайла, в вравую часть.
3) проверяем, как будет выглядеть карта, залитая только нашей новой травой.
В моём примере в первой попытке трава получилась не такой густой, как я хотела. Поэтому я для себя выделила белыйм кружочком проблемную проплешинку. Затем нарисовала на её месте кустик травы (который чуть вылез за границы тайла справа и снизу). Затащила "вылезшие" части кустика в квадратик тайла. Ещё раз проверила, как будет смотреться.
Итого у нас есть три тайла:
Для использования их в игре нам нужны переходы между ними.
Переходы от одного тайла к другому:
1) берём квадратик из девяти клеток, залитых нашим тайлом, и художественно обрезаем края;
2) накладываем полученную картинку на клетки,залитые вторым тайлом;
3) немного редактируем нижний слой (в моём случае это клетки с низкой травой. Я добавила пару светлых пикселей по краям);
4) редактируем верхний слой (добавило тёмную окантовку земле на стыке с травой, чтобы придать объём)
Для создания автотайла нужна ещё графика при изгибах.
Мы просто моделируем ситуацию (достаточно крестика из автотайла):
У нас готов один автотайл с переходом от основной травы к земле!
Аналогично рисуем и другие переходы и проверяем на карте, как это всё смотрится.
PS. Если общая картинка вышла немного не та, которую очень хотелось, то не нужно бояться переделывать. Очень важную роль играет цветовая гамма.
Увидев эту мрачную карту, я начала экспериментировать с цветами. Рекомендую перекрашивать до того момента, пока карта не понравится. Лично мне помог советом Alexb, предложив сделать высокую траву более сочной.
Как-никак, из этих эти тайлов будут состоять карты. А тайлы, которые хочется использовать, повышают желание маппить
Правило 1
Запомните, что трава не растет равномерно! Она растет в самых разных направлениях.
Поэтому помните, что если ее нарисовать всю расположенную прямо вверх, как в примере А, то это будет выглядеть грубо и не естественно. Даже после использования газонокосилки у травы не может быть такой эффект. Только в одном случае трава может быть нарисована в одном направлении, это когда вы рисуете очень сильный ветер (и тогда трава должна быть довольно длинной!)
Смотрите по теме: Как рисовать деревья
Правило 2
Трава имеет множество цветов и оттенков!
Каждый из этих цветов справа я взяла прямо из этой фотографии травы с моего двора, чтобы показать вам, что трава содержит не одни цвет!
Трава содержит множество цветов, которые варьируют от желто зеленого до темно зеленых. Пожалуйста, не делайте вашу траву одного цвета, или даже просто двумя! Красочная трава выглядит правдоподобной травой!
Цифровая покраска травы (Photoshop, Paint tool SAI)
Начните с покраски плоскости светло зеленым цветом, там где должна быть ваша трава.
Теперь выберите обычную кисть с жесткими краями и желтый или салатовый цвет, а затем начните добавлять линии разной величины и направления (на переднем плане травинки будут выглядеть длиннее)
После того как вы покрасите всю плоскость светлыми травинками, возьмите зеленый темного цвета и повторите предыдущее действие.
Еще раз выполните те же действия с менее насыщенным зеленым цветом. После добавьте некоторые более мелкие травинки темно-зеленым и светло-зеленым цветом для более сложного вида.
Покраска травый маркерами Copics
Материалы:
- Бумага Copic (эту бумагу может заменить картон)
- Маркеры Copic следующих тонов: YG03 (желто зеленый), YG66 (зеленый горох), YG17 (зеленая трава), YG67 (мох)
Хаотично и небрежно покрасьте плоскость цветом YG03 там, где вы хотите, что бы была трава.
Смотрите по теме: Как рисовать облака
Возьмите цвет YG66 и добавьте поверх толстые и крупные мазки, направленные снизу вверх, но в разных направлениях (вправо и влево). Помните, что трава растет в разных направлениях!
Продолжаем добавлять толстые мазки, взяв цвет YG17. Если вы рисуете траву на большой площади, то чем дальше она от вас, тем меньше должно быть мазков.
Теперь выбираем самый темный зеленый YG67 и рисуем тонкие мазки. Нет необходимости заполнять всю площадь травы, попробуйте добавить эти мазки между другими нарисованными травинками.
Вы можете остановиться на последнем шаге, если вы хотите нарисовать траву, которая выделяется, и имеет более контрастный вид.
Но, так как трава обычно не является основным элементом картины, я предпочитаю смягчить все линии и смешать траву с помощью цвета YG03, что поможет сделать ее менее детальной.
В этой статье я расскажу, как нарисовать пиксель арт в Photoshop CC / CS6. Для этого мы используем пиксельную графику:
Создайте новый квадратный документ со сторонами от 20 до 100 пикселей ( в зависимости от того, насколько большой спрайт ). Я буду работать с холстом 50 на 50 пикселей:
Еще одно изменение, вернитесь в Настройки > Общие и измените интерполяцию изображения на « По соседним пикселям (сохраняет четкие края) »:
Теперь все готово, чтобы мы могли приступить к созданию пиксельной графики!
Мы начнем с создания спрайта одиночного персонажа.
Начнем с файла размером 50 на 50 пикселей, который мы создали. Я добавлю фоновый слой со сплошным цветом. После этого мы сможем видеть сетку.
В нижней части палитры слоев нажмите на иконку, которая выглядит как наполовину заполненная окружность. Выберите параметр « Цвет » и задайте для нового слоя нейтральный цвет заливки:
Добавьте новый прозрачный слой поверх этого слоя заливки цветом. Перейдите в Слой> Новый> Слой или просто нажмите иконку с загнутым листом в меню в нижней части палитры слоев.
С помощью инструмента « Карандаш » нарисуйте тело персонажа игры с пиксельной графикой. Я хочу сделать тело как можно более простым, а затем в конце подкорректировать его. Мы добавим больше деталей, когда создадим основную форму.
Подсказка: Для каждого нового элемента добавляйте дополнительный слой, чтобы иметь возможность вернуться позже и откорректировать.
Подсказка: Если хотите создать прямую линию, кликните один раз в том месте, где вы хотите ее начать, а затем, удерживая нажатой клавишу Shift , кликните в месте, где хотите завершить линию. Photoshop автоматически создаст прямую линию между двумя точками.
Вы можете создавать тело, как вам нравится. Вот, как это сделала я:
Рисунок 12: Порядок создания частей тела, начиная с головыТеперь мы добавим одежду, волосы и лицо. Используйте базовую форму тела как шаблон, чтобы создать одежду. Я хочу добавить шесть новых слоев для рубашки, брюк, обуви, волос, лица и мелких деталей:
Рисунок 13: Добавление деталей персонажа, начиная с рубашки
Файл Photoshop так, как он есть на текущий момент.
На данном этапе урока пиксельной графики нашего парня уже можно было бы назвать завершенным, но я хочу добавить больше глубины с помощью света и тени.
Дополнительный шаг, добавление теней
Создадим сведенную копию всех слоев. Для этого отключите видимость слоя заливки цветом ( нажмите на иконку глаза слева от миниатюры слоя ), затем нажмите Command-Option-Shift-E (Mac) или Ctrl-Alt-Shift-E (PC) . Это автоматически создаст сведенную копию всех видимых слоев поверх остального стека слоев.
Теперь я предлагаю поместить слои в отдельную папку и отключить ее видимость. Чтобы быстро сгруппировать слои, выберите их и кликните по ним, а затем нажмите Ctrl / Option -G :
Добавьте новый слой и измените его режим смешивания. Режим смешивания можно задать с помощью выпадающего меню в верхней части палитры слоев, слева от параметра непрозрачности. По умолчанию в этой программе для пиксельной графики он установлен на « Нормальный ».
В конце у меня получилось два слоя теней: первый с непрозрачностью 25%, а второй с непрозрачностью 45%:
Это идеальный размер для мобильных устройств, где предпочтение отдается компактной графике.
Если хотите, чтобы изображение было больше, перейдите в Изображение> Размер изображения , и задайте для параметра « Ресамплинг » значение « По соседним пикселям (четкие края) ».
Подводя итоги
В следующей части этого руководства, я возьмусь за создание других графических элементов фэнтези игры: врага, оружия, а также элемента здоровья.
Читайте также: