Войти на сайт

Авторизация, ждите ...
×

ТЕМА: Рисуем иконки фэнтези оружия для MV в стиле VX Ace

Рисуем иконки фэнтези оружия для MV в стиле VX Ace 6 года 2 нед. назад #107033

  • NettySvit
  • NettySvit аватар
  • Вне сайта
  • Просветлённый
  • Сообщений: 422
  • Спасибо получено: 1271
  • Проект месяца 1 местоТестерПисательДаритель Стимкея3 место1 место в Обучающем конкурсеПроект месяца 2 место3 место в КодировкеУчительОрганизатор конкурсов

Не всем нравятся иконки в Rpg maker MV за их минималистичность. Я решила показать с помощью простых уроков, как вы сами можете нарисовать иконки фэнтези оружия в стиле VX Ace.

Иконки в MV имеют размер 32 пикселя на 32 пикселя (в VX Ace — 24 на 24). Советую вам использовать сетку с этими значениями.

- Чтобы увидеть сетку в Adobe Photoshop или Aseprite зайдите в View на верхней панели -> Show -> Grid.
- Чтобы изменить значения сетки в Adobe Photoshop, зайдите в Edit -> Preferences -> Guides, Grid & Slices и измените числа на 32 и 32.
- Чтобы изменить значения сетки в Aseprite, зайдите View -> Grid -> Grid Settings и замените числа на 32 и 32.


Несколько советов перед началом:

• Используя инструмент линия и удерживая клавишу Shift, вы можете нарисовать прямую линию без заморочек, а также поворачивать ее на ровные значения. Также с Shift'ом вы можете делать ровные круги и квадраты.

• Используйте референсы во время рисования: ищите в интернете фотографии или картинки оружия и, глядя на них, нарисуйте свои собственные иконки.

• Помните, что иконки не всегда требуют сильной прорисовки (например, как в уроках), их спокойно можно упрощать.

! Иконки из урока вы можете свободно использовать в своих проектах (коммерческих тоже). !

1. Меч

Рисуем тени и блики на мече [ Нажмите, чтобы развернуть ]




В итоге получается такая иконка:



2. Кинжал



В итоге получается такая иконка:



3. Лук

Нарисуйте линию ровного круга размером в 1 пиксель с помощью специального инструмента и оставьте только четверть этого круга — получится линия основы нашего лука. Добавляем выемку посередине этой линии и делаем копию этой линии ниже. Соединяем эти линии и заливаем получившуюся фигуру. В другом слое рисуем тетиву (прямая линия). Между слоем лука и тетивы рисуем стрелу. Обводку добавляем новым слоем выше других слоев (потому у что у лука есть обводка внутри).



В итоге получается такая иконка:



4. Посох



В итоге получается такая иконка:



Так иконки оружия выглядят в игре:



Бонус! Рисуем ключ



В итоге получается такая иконка:



Как добавить свои иконки в игру?
*тык* [ Нажмите, чтобы развернуть ]


Жду ваши работы в комментариях (и вопросы тоже)!
Последнее редактирование: 6 года 2 нед. назад от NettySvit.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, Джекил, Pandarius, Lekste, I_LORD, Демий, poca, Yros, Cabbit, Zoom и еще 14 пользователей

Рисуем иконки фэнтези оружия для MV в стиле VX Ace 6 года 2 нед. назад #107036

  • PringOva
  • PringOva аватар
  • Вне сайта
  • Мастер
  • Сообщений: 224
  • Спасибо получено: 231
  • Проект месяца 1 местоРазработчикПроект месяца 3 местоПроект месяца 2 место
Шаг первый. Меч...
h2b4b95f.png

Ладно, пойду поем :(
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: NettySvit, Aiaz Marx

Рисуем иконки фэнтези оружия для MV в стиле VX Ace 6 года 2 нед. назад #107046

  • I_LORD
  • I_LORD аватар
  • Сейчас на сайте
  • Светлый дракон
  • ;)
  • Сообщений: 778
  • Спасибо получено: 732
  • РазработчикПроект месяца 2 местоВетеранОраторПроект месяца 1 местоПроект года 2 местоПроект месяца 3 местоПаладин
Хороший урок, но думаю, можно было бы подробнее расписать про тени и блики. Для меня это самое сложное.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, NettySvit, VeselyRodger, PringOva

Рисуем иконки фэнтези оружия для MV в стиле VX Ace 6 года 2 нед. назад #107051

  • Noxmils
  • Noxmils аватар
  • Вне сайта
  • Мастер
  • Сообщений: 186
  • Спасибо получено: 350
  • Программист JavaScript ТестерОрганизатор конкурсов
Согласен с Лордом. Теории маловато. Темная линия по центру холодного оружия - это выемка, если я правильно понимаю? еще хотелось бы один пример со светящимися объектами, если можно :blush: . Например, шар на том же посохе или что-нибудь другое
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, NettySvit

Рисуем иконки фэнтези оружия для MV в стиле VX Ace 6 года 2 нед. назад #107056

  • Mur
  • Mur аватар
  • Вне сайта
  • Светлый дракон
  • Мур? Мур! Мур.
  • Сообщений: 574
  • Спасибо получено: 1448
  • Даритель СтимкеяОраторОрганизатор конкурсов2 место УчительПрограммист JavaScript
I_LORD пишет:
расписать про тени и блики. Для меня это самое сложное.

Про тени и блики, честно говоря и расписывать особо не чего. Основное правило это 2 стороны освещены, 2 затемнены, в случае освещения по диагонали. Ну конечно соблюдать во всех работах одинаковое расположение источника света, иначе картинки будут вызывать диссонанс.

Пример с кубиком и источником света:

example.gif


Для придания остроты грани для контрастности можно ещё засветить совсем ярким (в данном случае белым)

А вообще для подбора похожести материалов можно воспользоваться шпаргалкой от Adigun Azikiwe Polack:

DpFAe4sV4AAni6s.png






p.s. Надеюсь NettySvit не в обиде, что я тут хозяйничаю в её темке :blush:
Последнее редактирование: 6 года 2 нед. назад от Mur.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, Pandarius, Lekste, I_LORD, NettySvit, poca, Cabbit, Zoom, Doctor_Bug, WhitePaper и еще 2 пользователей

Рисуем иконки фэнтези оружия для MV в стиле VX Ace 6 года 2 нед. назад #107063

  • Lekste
  • Lekste аватар
  • Вне сайта
  • Светлый дракон
  • Сообщений: 913
  • Спасибо получено: 566
  • ВетеранПрограммист JavaScript Программист RubyДаритель СтимкеяОратор
А при желании, кинжал можно использовать как пипетку, а посох - как отмычку :)
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: NettySvit

Рисуем иконки фэнтези оружия для MV в стиле VX Ace 6 года 2 нед. назад #107065

  • I_LORD
  • I_LORD аватар
  • Сейчас на сайте
  • Светлый дракон
  • ;)
  • Сообщений: 778
  • Спасибо получено: 732
  • РазработчикПроект месяца 2 местоВетеранОраторПроект месяца 1 местоПроект года 2 местоПроект месяца 3 местоПаладин
Я безнадёжен и пиксельарт не моё :wall: :unsure:
Шаг 1,2,3 увеличенный размер

Sword_icon1.png


Теперь размер 32*32

Sword_icon2.png
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, NettySvit, Cabbit, Zoom, Mur, Doctor_Bug, WhitePaper, Snake Fightin, PringOva, Noxmils

Рисуем иконки фэнтези оружия для MV в стиле VX Ace 6 года 2 нед. назад #107066

  • Mur
  • Mur аватар
  • Вне сайта
  • Светлый дракон
  • Мур? Мур! Мур.
  • Сообщений: 574
  • Спасибо получено: 1448
  • Даритель СтимкеяОраторОрганизатор конкурсов2 место УчительПрограммист JavaScript
I_LORD пишет:
пиксельарт не моё

эээ,… :ohmy: ну не знаю. Мелкий пиксельарт и так не просто рисовать, а уж мелкие иконки и подавно. Так что на мой скромный взгляд весь и весьма неплохо :unsure:
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, I_LORD, NettySvit, Zoom

Рисуем иконки фэнтези оружия для MV в стиле VX Ace 6 года 2 нед. назад #107067

  • NettySvit
  • NettySvit аватар
  • Вне сайта
  • Просветлённый
  • Сообщений: 422
  • Спасибо получено: 1271
  • Проект месяца 1 местоТестерПисательДаритель Стимкея3 место1 место в Обучающем конкурсеПроект месяца 2 место3 место в КодировкеУчительОрганизатор конкурсов
PringOva пишет:
Шаг первый. Меч...
h2b4b95f.png

Ладно, пойду поем :(

Главное в иконке, чтобы объект сразу угадывался даже в миниатюре. По-моему, задача выполнена. :)
Меня смущает неровность линии меча. Как я писала в уроке, можно использовать инструмент линия и зажимать Shift. Или сделать это вручную. Тогда каждый пиксель должен соприкасаться гранью с предыдущим:



I_LORD пишет:
Хороший урок, но думаю, можно было бы подробнее расписать про тени и блики. Для меня это самое сложное.

Mur написала об этом и дала полезную шпаргалку, а я напишу про конкретный меч.

Как рисовать блики и тени на мече [ Нажмите, чтобы развернуть ]


Также добавила этот материал в тему урока.

Noxmils пишет:
Согласен с Лордом. Теории маловато. Темная линия по центру холодного оружия - это выемка, если я правильно понимаю?
Честно не знаю, как тут все словами объяснить, все-таки урок по конкретным иконкам, а не про то, как вообще рисовать. Но я буду рада ответить на все возникающие вопросы.
Noxmils пишет:
еще хотелось бы один пример со светящимися объектами, если можно :blush: . Например, шар на том же посохе или что-нибудь другое
Мне кажется, на посохе будет не очень выглядеть, потому что сам шар маленький. Быстро набросала шар с обводкой. Под ним добавила слои с прозрачностью (чем больше круг — тем больше прозрачность). И, по-моему, напоминает свечение (только можно было сделать слои еще более прозрачными, но суть, я думаю, ясна).

Шар со свечением [ Нажмите, чтобы развернуть ]


Надеюсь, помогла!
Mur пишет:
p.s. Надеюсь NettySvit не в обиде, что я тут хозяйничаю в её темке :blush:
Нет, конечно, я только благодарна.))
Lekste пишет:
А при желании, кинжал можно использовать как пипетку, а посох - как отмычку :)
Кинжал без контекста и правда напоминает пипетку.)) И посох можно использовать как булавку или заколку. :mad:

I_LORD пишет:
Я безнадёжен и пиксельарт не моё :wall: :unsure:

А по-моему круто получилось, да еще такой дизайн оригинальный!
Последнее редактирование: 6 года 2 нед. назад от NettySvit.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, I_LORD, poca, Cabbit, Zoom, Mur, Doctor_Bug, WhitePaper, Snake Fightin, PringOva

Рисуем иконки фэнтези оружия для MV в стиле VX Ace 6 года 2 нед. назад #107070

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1704
  • Спасибо получено: 2731
  • Оратор3 место ГотвУчитель2 место Победитель конкурсаОрганизатор конкурсов1 место в ГотвКомпозитор
мне урок напомнил знаменитую картинку "рисуем сову". теории действительно мало. несколько замечаний из того, что мне непонятно и что можно было бы дописать,чтобы урок получился действительно полезным:

1. Рисуем форму.
  1. Как правильно рисовать линии в общем-то написано много где и легко гуглится, но раз уже урок относительно небольшой, то можно показать варианты рисования приемлемых линий: "1-2-1-2", "1-1-1-2-3" и т.д.. Ты тут мельком показала, но можно и подробнее расписать

  2. Как выбрать основной цвет. Или ты брала от балды? Или используешь какую-то уже созданную палитру? Или сама ее делаешь? Если делаешь то как? Или берешь ПА-работы с понравившимися цветами и воруешь оттуда? Или Скачиваешь оригинальную картинку меча, пипеткой вытаскиваешь цвета? Или засовываешь оригинальную картинку в программу для извлечения основных цветов палитры и используешь их?
2. Рисуем тени и блики.
  1. Опять же вопрос цвета. Например для меня легче всего по шкале HSV понизить шкалы S и V на 5-7 пунктов чтобы сделать цвет темнее от основного и повысить если необходимо сделать светлее как писал тут
  2. Ты же подбираешь цвета в цветовом круге, причем блик берешь максимальное значение, практически белый, а вот как берешь тени неясно. На глаз?
  3. Опять ты пишешь "Затем в диапазоне между самым светлый и самым темным цветом добавляем оттенки на лезвие меча (3)". Тоже просто на глаз?

3. Рисуем обводку
  1. Почему обводка у всего оружия одним цветом?
  2. Как выбрать этот цвет? Многие советуют выбирать обводку в тон основному цвету.
Администратор запретил публиковать записи гостям.

Рисуем иконки фэнтези оружия для MV в стиле VX Ace 6 года 2 нед. назад #107073

  • NettySvit
  • NettySvit аватар
  • Вне сайта
  • Просветлённый
  • Сообщений: 422
  • Спасибо получено: 1271
  • Проект месяца 1 местоТестерПисательДаритель Стимкея3 место1 место в Обучающем конкурсеПроект месяца 2 место3 место в КодировкеУчительОрганизатор конкурсов
yuryol пишет:
мне урок напомнил знаменитую картинку "рисуем сову". теории действительно мало. несколько замечаний из того, что мне непонятно и что можно было бы дописать,чтобы урок получился действительно полезным
Во многих пунктах ты упустил очень важное. То, что это конкретный урок рисования конкретных иконок. Это урок тому, как рисовать пиксель-арт и как рисовать вообще. Я не могу расписать в одном уроке теорию цвета, правила рисования линий, основы создания форм и их влияние на восприятие человеки и пр.

Очень жаль, что для тебя этот урок оказался не по-настоящему полезным.
Как выбрать основной цвет. Или ты брала от балды?
Ты же подбираешь цвета в цветовом круге, причем блик берешь максимальное значение, практически белый, а вот как берешь тени неясно. На глаз?
Опять ты пишешь "Затем в диапазоне между самым светлый и самым темным цветом добавляем оттенки на лезвие меча (3)". Тоже просто на глаз?
Да, обычно рисую на глаз, также подбираю цвета. Опять же, урок не по теории цвета. Буду рада увидеть подобный урок на Светлой.
Опять же вопрос цвета. Например для меня легче всего по шкале HSV понизить шкалы S и V на 5-7 пунктов чтобы сделать цвет темнее от основного и повысить если необходимо сделать светлее как писал
Отлично, если ты нашел свой способ подбора нужных оттенков, пользуйся тем, что тебе удобен. Я лишь показала, как подбираю я.
Почему обводка у всего оружия одним цветом?
Потому что так же сделана обводка в иконках на RPG maker VX Ace.
Как выбрать этот цвет? Многие советуют выбирать обводку в тон основному цвету.
Это зависит от цвет Window в игре. Если темный — светлая обводка, если светлый — темная обводка. Лучше избегать чисто черного и чисто белого цветов.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, poca, Cabbit, Zoom, Cosmocat, Noxmils

Рисуем иконки фэнтези оружия для MV в стиле VX Ace 6 года 1 нед. назад #107247

  • Amphilohiy
  • Amphilohiy аватар
  • Вне сайта
  • Светлый дракон
  • Сообщений: 547
  • Спасибо получено: 666
  • Победитель Сбитой кодировкиОраторУчитель2 место ГотвПрограммист Ruby
Меня больше смущает что 2й этап у иконок довольно выборочный. Например посох - на 2м этапе мы ему дали рисунок, а шар не тронули, и лишь потом пролили и на него свет (а так же стрела и 2 эфеса). Не совсем ясно почему, ибо в итоге иконки все равно на 3м этапе будет полностью освещены.

И тоже как-то непривычно что информации маловато, и теплые и холодные цвета не освещены (каламбур непреднамерен), про свет вроде есть, но не упоминается что освещение определяет форму объекта и пр.. Больше похоже на шоукейс.

Inb4 согласен, придирки, меня вообще тут быть не должно.
Я верю, что иногда компьютер сбоит, и он выдает неожиданные результаты, но остальные 100% случаев это чья-то криворукость.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Noxmils

Рисуем иконки фэнтези оружия для MV в стиле VX Ace 6 года 1 нед. назад #107251

  • Iri
  • Iri аватар
  • Вне сайта
  • Познающий
  • Сообщений: 14
  • Спасибо получено: 11
по красоте урок на первом месте :blush:

но научиться по нему не смогла( плоское всё получается, угловатое

потом пошла другим путем.
у лука на второй картинке очень много цветов. чтобы получить столько же я брала картинку деревяшки желтого цвета, увеличивала и воровала цвета оттуда :silly:
чтобы получить плавные края обвела уменьшенную картинку лука *facepalm*
вышло намного лучше, но это художеством трудно назвать ((
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Noxmils

Рисуем иконки фэнтези оружия для MV в стиле VX Ace 6 года 1 нед. назад #107256

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1704
  • Спасибо получено: 2731
  • Оратор3 место ГотвУчитель2 место Победитель конкурсаОрганизатор конкурсов1 место в ГотвКомпозитор
Iri пишет:
чтобы получить столько же я брала картинку деревяшки желтого цвета, увеличивала и воровала цвета оттуда :silly:
чтобы получить плавные края обвела уменьшенную картинку лука *facepalm*
вышло намного лучше, но это художеством трудно назвать ((

если хочешь научиться именно рисовать то так лучше не делать, не научишься. если же главное результат - то как-раз так лучше и делать. и даже проф.художники часто так делают чтоб успеть больше и лучше
Администратор запретил публиковать записи гостям.
Время создания страницы: 0.313 секунд