Войти на сайт

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

ТЕМА: Рисуем простые тайлы 16x16px в Aseprite [видео]

Рисуем простые тайлы 16x16px в Aseprite [видео] 1 год 1 мес. назад #113448

  • NettySvit
  • NettySvit аватар
  • Вне сайта
  • Просветлённый
  • Сообщений: 360
  • Спасибо получено: 1063
  • 3 местоПроект месяца 3 местоОрганизатор конкурсовПисатель1 место в Обучающем конкурсе2 место Разработчик1 место в ГотвТестер3 место в Кодировке
В этом видео вы узнаете:
  1. Как подготовиться к рисованию тайлов:
    • Поиск референсов;
    • Сайты с цветовыми палитрами;
    • Выбор размера тайла;
    • Подготовка программы Aseprite к рисованию тайлов.
  2. Как нарисовать тайлы:
    • Куста;
    • Дерева;
    • Объединяющие 4 тайла дерева;
    • Каймы из деревьев;
    • Кувшина в 3 разных цветах;
    • Бочки и ящика;
    • Стула и скамейки.

Ссылки из видео [ Нажмите, чтобы развернуть ]
Последнее редактирование: 1 год 1 мес. назад от NettySvit.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, AnnTenna, Lekste, I_LORD, Kerotan, sando, Jas6666, Cabbit, Zoom, Doctor_Bug и еще 12 пользователей

Рисуем простые тайлы 16x16px в Aseprite [видео] 1 год 1 мес. назад #113450

  • Lekste
  • Lekste аватар
  • Вне сайта
  • Светлый дракон
  • Сообщений: 891
  • Спасибо получено: 542
  • Программист RubyДаритель СтимкеяОраторВетеранПрограммист JavaScript
"Так что, если не хотите оказаться на зоне (светлой?), не нужно повторять тайлы, нарисованные другими авторами". :D
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: NettySvit, Phileas

Рисуем простые тайлы 16x16px в Aseprite [видео] 1 год 1 мес. назад #113451

  • OffSide
  • OffSide аватар
  • Вне сайта
  • Оседлый
  • Сообщений: 27
  • Спасибо получено: 34
  • 2 место
Хороший урок! Только начал смотреть и уже сразу полезная инфа пошла :) Сайты сохраню,а то вечно проблемы с палитрой... Да и не мешало бы научиться рисовать,хоть что-то в пикселях (да и рисовать вообще) :laugh: Кстати по поводу аспрайтера . Сам не юзал,но очень хвалят. На сайте итч.ио я находил вот такой пиксельный редактор emad.itch.io/jpixel мб кому-то будет интересен .
P.s. Хотелось бы увидеть в будущем подобный урок по пиксель рисованию,не только тайлов,а по рисованию вообще... :blush:
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: NettySvit

Рисуем простые тайлы 16x16px в Aseprite [видео] 1 год 1 мес. назад #113488

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1474
  • Спасибо получено: 2290
  • Оратор1 место в ГотвУчительКомпозиторОрганизатор конкурсов2 место 3 место ГотвПобедитель конкурса
отличный урок, всего 20 минут, всё структурировано,без воды и эканий.
нужные места ускорены, ссылки прикреплены, а главное есть результат - симпатишный мини-тайлсет с разными видами тайлов
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Lekste, NettySvit

Рисуем простые тайлы 16x16px в Aseprite [видео] 1 год 1 мес. назад #113517

  • Doctor_Bug
  • Doctor_Bug аватар
  • Вне сайта
  • Просветлённый
  • Из горизонта события! ▪_■
  • Сообщений: 469
  • Спасибо получено: 601
  • Проект месяца 3 место3 место в КодировкеПрограммист Ruby3 место
Офигенный урок, Баг очень доволен =3
Всегда хотел заняться пиксель-артом, но времени не хватало (главный враг Лень)
Баг изучает это Panda3D pygame
А слушает эту музыку ~~> Мое сердце
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: NettySvit, Noxmils

Рисуем простые тайлы 16x16px в Aseprite [видео] 1 год 1 мес. назад #113520

  • BlackLevel
  • BlackLevel аватар
  • Вне сайта
  • Бывалый
  • Сообщений: 63
  • Спасибо получено: 24
Ща узнаем идёт ли такое разрешение
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: NettySvit

Рисуем простые тайлы 16x16px в Aseprite [видео] 1 год 1 мес. назад #113521

  • BlackLevel
  • BlackLevel аватар
  • Вне сайта
  • Бывалый
  • Сообщений: 63
  • Спасибо получено: 24
Bush.png

И он сдалека даже неплохо выглядит
Последнее редактирование: 1 год 1 мес. назад от AnnTenna. Причина: объединила посты в один, чтоб не было дабблпоста
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: NettySvit, Doctor_Bug

Рисуем простые тайлы 16x16px в Aseprite [видео] 1 год 1 мес. назад #113538

  • NettySvit
  • NettySvit аватар
  • Вне сайта
  • Просветлённый
  • Сообщений: 360
  • Спасибо получено: 1063
  • 3 местоПроект месяца 3 местоОрганизатор конкурсовПисатель1 место в Обучающем конкурсе2 место Разработчик1 место в ГотвТестер3 место в Кодировке
BlackLevel пишет:
Bush.png

И он сдалека даже неплохо выглядит

Неплохой кустик получился.) Но подойдет он для игр с видом сбоку типа платформеров. У рпг мейкеров обычно используется вид на 3/4 сверху.

Не знаю, какой программой ты пользуешься, но в Aseprite есть сверху пунктик Pixel Perfect при выборе инструмента Pen


Pixel Perfect нужен, чтобы пиксели между собой не склеивались
Без Pixel Perfect / С Pixel Perfect [ Нажмите, чтобы развернуть ]

Так линия выглядит ровнее и "чище".

Немного исправила тайл, сделав линии почище, и, по-моему, стало выглядеть поаккуратнее.


Цвета в плане переходов из одного в другой хорошо подобраны, но мне они кажутся слишком яркими
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]


Но искусство вообще дело субъективное, так что все эти советы теряют свой смысл, если все эти неровности в узоре и яркость цветов сделаны намеренно.:silly:
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Doctor_Bug

Рисуем простые тайлы 16x16px в Aseprite [видео] 1 год 2 нед. назад #113868

  • Erckert
  • Erckert аватар
  • Вне сайта
  • Бывалый
  • Сообщений: 73
  • Спасибо получено: 177
  • 2 место ГотвПисатель 3 место
Очень приятный стиль. Урок тоже хорош, помог мне разуплотнить мозг и открыть для себя новые горизонты, а то я зациклился на рисовании контурами. А теперь можно мазюкать всякое в 16х16 :laugh:



(Ёлочки, обожаю рисовать ёлочки)
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: NettySvit, Jas6666, Cabbit, Doctor_Bug, SeaWolf, PringOva, Noxmils

Рисуем простые тайлы 16x16px в Aseprite [видео] 6 мес. 3 нед. назад #116035

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

вот допустим понраивлась мне палитра с небольшим кол-вом цветов.



но цветов немного и мне хочется добавить еще. как мне это сделать, чтобы не испортить палитру? можно конечно на глаз, но порой цвета на мониторе выглядят совсем иначе на телефоне, даже если они "веб-безопасные".

1. самый легкий способ в лоб, который иногда работает: взять какой-нибудь цвет из этой палитры и изменить него тон до нужного. например я скопировал красный и просто изменил тон, чтоб получить фиолетовый, розовый и салатовый. салатовый не попал а остальные более менее. насколько этот способ норм?

_016.png


2. есть еще какой-нибудь способ?
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: NettySvit, Jas6666, Doctor_Bug, Iri

Рисуем простые тайлы 16x16px в Aseprite [видео] 6 мес. 3 нед. назад #116040

  • Демий
  • Демий аватар
  • Сейчас на сайте
  • Модератор
  • Здесь могла быть ваша реклама
  • Сообщений: 1479
  • Спасибо получено: 1348
  • ТестерРазработчикУчитель1 место в Готв3 местоПисатель 2 место3 место ГотвВетеран
Есть шикарная штука для этого дела. Там онлайн можно смотреть сочетания и даже выбирать разные варианты этой сочетаемости:
Сайт.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: yuryol, Адский дровосек

Рисуем простые тайлы 16x16px в Aseprite [видео] 6 мес. 3 нед. назад #116043

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1474
  • Спасибо получено: 2290
  • Оратор1 место в ГотвУчительКомпозиторОрганизатор конкурсов2 место 3 место ГотвПобедитель конкурса
Демий пишет:
Есть шикарная штука для этого дела. Там онлайн можно смотреть сочетания и даже выбирать разные варианты этой сочетаемости:
Сайт.

этот сайт я знаю, пользуюсь иногда для сайтов, чтобы к одному цвету подобрать еще несколько
а вот в случае когда у тебя много цветов и надо подобрать один, то как им пользоваться? берешь любой цвет из той палитры которую я указал, и подбираешь к нему розовый цвет из триады? на другие цвета из палитры можно вообще внимания не обращать?

Администратор запретил публиковать записи гостям.

Рисуем простые тайлы 16x16px в Aseprite [видео] 6 мес. 3 нед. назад #116048

  • Phileas
  • Phileas аватар
  • Вне сайта
  • Оседлый
  • Сообщений: 28
  • Спасибо получено: 28
  • Проект месяца 3 место
yuryol пишет:
этот сайт я знаю, пользуюсь иногда для сайтов, чтобы к одному цвету подобрать еще несколько

Вот ещё сайт с похожим функционалом (я использую для выбора цветовой палитры в презентациях):
Adobe Color
Мой проект:
Эпидемия Магии

In my humble opinion [ Нажмите, чтобы развернуть ]
Последнее редактирование: 6 мес. 3 нед. назад от Phileas.
Администратор запретил публиковать записи гостям.

Рисуем простые тайлы 16x16px в Aseprite [видео] 6 мес. 3 нед. назад #116050

  • NettySvit
  • NettySvit аватар
  • Вне сайта
  • Просветлённый
  • Сообщений: 360
  • Спасибо получено: 1063
  • 3 местоПроект месяца 3 местоОрганизатор конкурсовПисатель1 место в Обучающем конкурсе2 место Разработчик1 место в ГотвТестер3 место в Кодировке
Phileas пишет:
Вот ещё сайт с похожим функционалом (я использую для выбора цветовой палитры в презентациях):
Adobe Color
Прошу прежде чем писать в теме, ознакомиться с ней. Этот сайт уже есть в списке под спойлером.

yuryol пишет:
давно хотел спросить и всё никак не собирался.

вот допустим понраивлась мне палитра с небольшим кол-вом цветов.

но цветов немного и мне хочется добавить еще. как мне это сделать, чтобы не испортить палитру? можно конечно на глаз, но порой цвета на мониторе выглядят совсем иначе на телефоне, даже если они "веб-безопасные".

Я, честно, ничего не могу сказать. Я не знаю никаких читов и лайхаков кроме готовых цветовых палитр.

Советую все-таки не искать простые решения, а изучить теорию цвета. Там нет ничего сложного, зато если изучишь, то потом уже не будет вопросов какой еще цвет/оттенок добавить/убрать. :)

В этом видео даны основы теории цвета вместе с примерами, рекомендую посмотреть:
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Jas6666

Рисуем простые тайлы 16x16px в Aseprite [видео] 6 мес. 3 нед. назад #116052

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1474
  • Спасибо получено: 2290
  • Оратор1 место в ГотвУчительКомпозиторОрганизатор конкурсов2 место 3 место ГотвПобедитель конкурса
NettySvit пишет:
В этом видео даны основы теории цвета вместе с примерами, рекомендую посмотреть:
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]

снова видео про основы *facepalm* таких видео сотни и во всех них говорят одно и то же - обсасывают тон,насыщенность и комплиментарные/триадные. при этом что делать, если надо использовать более четырех цветов, они не говорят. и подобные уроки про цвета далее одного урока не уходят

NettySvit пишет:
Я, честно, ничего не могу сказать. Я не знаю никаких читов и лайхаков кроме готовых цветовых палитр.

Советую все-таки не искать простые решения, а изучить теорию цвета. Там нет ничего сложного, зато если изучишь, то потом уже не будет вопросов какой еще цвет/оттенок добавить/убрать. :)

ну так если для тебя ничего сложного, то почему ты не смогла ответить на мой вопрос? если под "изучением теориии цвета" ты понимаешь просмотр подобных видеоуроков то я знаток цвета.
кто-то же составляет эти палитры. так вот как они их составляют?
Последнее редактирование: 6 мес. 3 нед. назад от yuryol.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Адский дровосек

Рисуем простые тайлы 16x16px в Aseprite [видео] 3 мес. 3 нед. назад #118127

  • Pandarius
  • Pandarius аватар
  • Вне сайта
  • Бывалый
  • Сообщений: 71
  • Спасибо получено: 64
  • Поддержка Фонда
Такой вопрос. Можно ли в aseprite сделать следующее:
1) Я нарисовал куб
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]

2) Дальше я хочу на новом слое закрасить его, точнее даже залить. Если я просто создаю новый слой, он заливает весь холст. Если не ошибаюсь, в фш можно было сделать слой, который ограничен линиями предыдущего слоя.Если тут такая возможность?
Желаемый результат заливки:
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]
Последнее редактирование: 3 мес. 3 нед. назад от Pandarius. Причина: картинки
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy

Рисуем простые тайлы 16x16px в Aseprite [видео] 3 мес. 3 нед. назад #118128

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


1-30.png



Можно, в настройках заливки включаешь чекбокс «contiguous» и переключаешь режим заливки в «refer visible layers»
:blush:

Результат:


2-21.png



3-16.png



4-8.png
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, Pandarius, Jas6666, Doctor_Bug, Iri

Рисуем простые тайлы 16x16px в Aseprite [видео] 3 мес. 3 нед. назад #118129

  • Pandarius
  • Pandarius аватар
  • Вне сайта
  • Бывалый
  • Сообщений: 71
  • Спасибо получено: 64
  • Поддержка Фонда
Mur пишет:
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]
Спасибо, я ещё и подсмотрел, как квадрат правильно нарисовать, а то на этих углах сверху, ух, сгорел. Часа два рисовал то так, то сяк))
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy

Рисуем простые тайлы 16x16px в Aseprite [видео] 3 мес. 3 нед. назад #118135

  • Mur
  • Mur аватар
  • Вне сайта
  • Светлый дракон
  • Мур? Мур! Мур.
  • Сообщений: 570
  • Спасибо получено: 1432
  • Даритель СтимкеяУчитель2 место Программист JavaScript ОраторОрганизатор конкурсов
MoonGuard пишет:
Спасибо, я ещё и подсмотрел, как квадрат правильно нарисовать, а то на этих углах сверху, ух, сгорел. Часа два рисовал то так, то сяк))

Это не мой квадрат, это плагин делает :silly:

С какой-то бета-версии сделали поддержку плагинов. для рисования изометрических фигур называется — «[KAM] Isometric box»



1-31.png
Последнее редактирование: 3 мес. 3 нед. назад от Mur.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, Pandarius, Doctor_Bug, Noxmils
Время создания страницы: 1.043 секунд