19.23M

Категория:

Информатика

Похожие презентации:

Мы из ТГМУ

Заголовок в три строки

Информационная безопасность

Информационная безопасность (§ 75 - § 82) - 2013

Информационная безопасность (§ 75 - § 82) - 2018

Токарные инструменты

Основы информационных технологий и кибербезопасности в деятельности органов внутренних дел РФ

Компьютерная анимация

Методы и средства создания и сопровождения сайта

Общественное объединение родителей «Бумеранг добра»

М2. У1. Разбор интерфейса и возможностей программы Aseprite

Цели урока
1.Познакомиться с интерфейсом и основными
функциями Aseprite.
1.Изучить базовые инструменты рисования и
работы со слоями.
1.Освоить создание кадров (фреймов) для
анимации.
1.Создать простую анимацию персонажа.

3.

4.

Aseprite
Это популярный графический редактор, предназначенный для создания
пиксельной графики и анимации.
Основные возможности Aseprite:
1.
2.
3.
4.
5.
Рисование пиксель-арта:
инструменты для точной работы с
каждым пикселем, включая кисти,
заливки, выделение, градиенты и
многое другое.
Создание анимации: поддержка
работы с кадрами (фреймами) и
слоями, что упрощает создание
анимированных объектов.
Работа со слоями: позволяет рисовать
на разных слоях для удобства
редактирования.
Гибкая настройка палитры: создание
и управление цветовой гаммой.
Простой интерфейс: удобное рабочее
пространство, которое легко освоить
даже новичкам.

5.

Работы
в Aseprite
Всё что вы видите на экране создано при помощи программы Aseprite.

6.

Пиксели
Перед началом выполнения задания, давайте разберемся в том, что же
такое пиксели?
Пиксель — это мельчайший элемент цифрового
изображения. Название произошло от английских
слов "picture" (картинка) и "element" (элемент).
Каждый пиксель имеет один цвет и вместе с
другими пикселями формирует изображение.
Изображение: Увеличенное фото, где видны
отдельные пиксели.

7.

Пиксели
Все пиксели имеют форму маленьких квадратов, которые хранят в себе
определенный цвет, множество таких квадратов собирают картинку. Её
то мы и видим на экране. Если вы приблизитесь к монитору достаточно
близко, то заметите эти маленькие квадратики.
Большее количество
пикселей дает нам более
плавные фигуры на экране,
чем меньше пикселей, тем
легче нам увидеть
квадратики у этих форм.
Возможно вы слышали о
том, что мониторы имеют
свое разрешение, например:
1280х720 и 1920х1080.
Как раз эти числовые
данные означают сколько
пикселей по ширине и
высоте имеет монитор.

8.

Этапы
рисования
При рисовании объектов при помощи пикселей есть свои этапы,
которым необходимо следовать, чтобы добиться лучших результатов.
Давайте рассмотрим эти этапы:
1.
2.
3.
4.
5.
Размер: на этом этапе вы
определяете рост вашего
персонажа. Чем выше персонаж, тем
больше пикселей будет
использовано.
Уточнение: с помощью простых
форм создается примерный вид и
положение героя. Для этого этапа не
нужен цвет, поэтому вы можете
использовать черный цвет.
Покрас: на этом этапе необходимо
покрасить работу в необходимые
цвета.
Тени: темные участки создаются на
персонаже, чтобы придать ему
объема.
Анимация: завершающий этап, в
котором мы анимируем героя.

9.

Этап:Размер
В этом этапе вы должны определить размер вашего объекта.
Учтите, что чем больше ваш
персонаж, тем больше
работы вы будете выполнять.
На рисунке справа вы можете
заметить одного и того же
персонажа, сделанного при
помощи разного количества
пикселей.
В будущем, при создании
спрайтов мы будем
использовать размеры холста
64х64. Это не совсем
маленькая картинка и не
совсем большая.
Такой размер будет
оптимальный для нас.

10.

Этап:Уточнение
Когда мы разобрались с размерами холста и персонажа, пришло время
понять как персонаж будет стоять.
Мы будем уточнять нашу
фигуру при помощи пятен у
которых будет лишь один
цвет.
В этом этапе главное указать
форму объекта, на которую
мы в дальнейшем будем
накладывать цвета и детали
для более точного вида
спрайта.
Не стоит сильно вдаваться в
детали и рисовать сложные
формы.
Лучше начать с
прямоугольных форм, так нам
легче будет анимировать
героя в будущем.

11.

Этап:Покрас
Если вы нашли свою форму персонажа то можно перейти к следующему
этапу, а именно покрасу.
В этапе с покрасом вы
вольны выбирать любые
цвета, но важно следить за их
сочетанием.
Так же на этом этапе можно
подумать и о деталях. К
примеру добавить элементы
одежды, пририсовать плащ и
прическу и тд.
Однако следите за тем, чтобы
не создать слишком много
деталей, так как их в
дальнейшем придется тоже
анимировать и тратить время.

12.

Этап:Тени
Этот этап не обязателен так как затрачивается лишнее время и без него
можно обойтись, однако он значительно улучшает вашу работу.
Тени отлично показывают
форму и объем объекта.
Без них объект кажется
плоским и выглядит как
разноцветное пятно, но с
ними любой объект
становится понятным.
Некоторые художники
усложняют тени и свет и
добавляют градации и
разные оттенки для теней.
Мы же будем использовать
всего один цвет для тени,
который будет накладываться
на другие цвета и затемнять
их.

13.

Этап:Анимация
И вот когда все этапы пройдены мы можем переходить к завершающему
этапу - Анимация.
Это один из важнейших этапов при
помощи которого мы вдохнем жизнь в
наш объект.
Из прошлого модуля мы знаем, что на
каждое движение персонажа нужна
своя анимация. Позже мы будем
создавать такую анимацию.
И несмотря на то, что во время
стояния персонаж по логике должен
быть неподвижен обычная статичная
картинка будет создавать впечатление
недоработки.
И поэтому мы сделаем анимацию
небольшого движения во время
статичного положения персонажа.
Такая анимация называется - idle
анимация.

14.

Интерфейс
Aseprite
Aseprite как и любой другой графический редактор использует те же
инструменты и функции. Так что если вы пользовались сторонними
редакторами, то можете с легкостью разобраться и в нём.

15.

Интерфейс
Aseprite
Создание файла:
Для того, чтобы создать новый файл
для рисования необходимо перейти
во вкладку “File” и нажать на пункт
“New”.
Перед вами откроется окно настройки
холста. Чаще всего мы будем
вписывать следующие размеры: 16х16,
32х32, 64х64.
Особо внимательные могли заметить,
что все эти размеры отлично делятся
на 2.
Пункт “Background” всегда должен
стоять на “Transperent”, этот пункт
выключает фон и делает его тем
самым прозрачным.
File
New
Transp.
ok

16.

Интерфейс
Aseprite
Окна Aseprite:
Палитра: Изменяет и сохраняет цвета
для покраски объектов.
Слои: Позволяют рисовать разные
объекты отдельно от всего. Например
тело можно нарисовать на одном слое,
а голову на другом и отдельно
анимировать их, не выделяя каждый
элемент отдельно.
Инструменты: Позволяют создавать
разные формы и линии. С их помощью
мы будем создавать все спрайты.
Настройки инструментов: Каждый
инструмент имеет свои настройки, по
типу размера. Каждый инструмент
имеет уникальные настройки, но
многие настройки у них одинаковы.
Палитра
Слои
Инструменты
Настройки
инстр.

17.

Интерфейс Aseprite
Настройки
инстр.
Инструменты
Холст
Палитра
Слои\Таймлайн

18.

Уделите клавиатурному тренажеру 5 минут
ССЫЛКА

19.

20.

Создание
спрайта
Начнем с первого этапа и разберемся в высоте персонажа.
Создайте холст размером
32х32 пикселя.
В палитре выберите
телесный цвет.
Выберите инструмент линия
и поставьте ее размер на 2
пикселя в настройках
инструмента.
Создайте ножки на равном
удалении от средней линии
холста примерно на три
квадрата в высоту.
Линия

21.

Создание
спрайта
Пятно:
Возьмите инструмент область
и тем же цветом создайте
прямоугольник.
Не делайте его до конца
холста. Нужно оставить место
для волос или других деталей
сверху.
Так же не делайте слишком
высоко, чтобы герой не
казался вытянутым.
Область

22.

Создание
спрайта
Пятно:
Возьмите инструмент ластик
с размером 2 пикселя и
сотрите левый верхний угол.
Добавьте руки при помощи
того же инструмента “Линия”.
Состоять руки будут из двух
составляющих. Одна будет
длиной 2 пикселя и вторая
часть также два пикселя.
Дальше остается создать
вторую руку зеркально
первой.
Линия

23.

Создание
спрайта
Цвета и уточнение деталей:
Выберите цвет для волос, в
примере указан коричневый
цвет.
Самостоятельно вы можете
создать форму волос и
наличие бороды с усами при
помощи инструмента “Линия”
с размером в 1 пиксель.
Не стоит сильно увлекаться с
формой волос. Попробуйте
повторить форму головы и
дополните пятно.
Линия

24.

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

25.

Создание
спрайта
Тень:
Позже мы научимся делать
тень быстрее с помощью
режимов наложения, но пока
принцип создания будет
следующий:
Скопируйте цвет кожи и
затемните его в окне
палитры.
Нанесите тень на левую
сторону персонажа при
помощи инструмента “Линия”
с размером в 1 пиксель.
Проделайте всё тоже самое с
плащом и элементами
одежды.
Линия

26.

Анимирование
Теперь можем перейти к созданию idle анимации для нашего героя.
Из прошлого модуля мы узнали, что для
анимации необходимо создавать
фреймы.
Чтобы создать фрейм в Aseprite
необходимо нажать комбинацию клавиш
“Alt+N”.
Создайте еще три фрейма, чтобы в сумме
их оказалось 4. Перейдите на второй,
кликнув по нему на таймлайне и
инструментом “Прямоугольное
выделение” выделите персонажа по
грудь.Затем опустите его на один
пиксель.
На третьем фрейме опустите его на два
пикселя.
И на последнем фрейме снова опустите
его на один фрейм.

27.

Экспорт
Далее можно переходить к экспорту. Все наши анимированные спрайты
должны быть сохранены в формате gif.
Нажмите комбинацию клавиш
“Ctrl+Shift+S”. Перед вами должно
открыться окно для сохранения
нашей анимации.
Выберите путь сохранения
“Рабочий стол” и сохраните проект
в формате GIF.
Не забудьте назвать свою работу.

28.

КОНЕЦ
1.Вам понравился урок?
1.С какими сложностями вы столкнулись?
1.Остались ли у вас вопросы?

29.

Лорем Ипсум
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas
accumsan lacus vel facilisis?
Mitchel
Crunch
Robots
Burger

М2. У1. Разбор интерфейса и возможностей программы Aseprite

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

35.