Для более полного понимания принципов анимации, необходимо знать ряд простейших понятий.
Концепт – общее, краткое описание идеи, с целью передать основной смысл разработки, ее цели. Так же концептом является небольшой набросок, рисунок, отображающий основные черты персонажа. Прежде чем сделать окончательный рисунок того или иного персонажа, иногда концепт перерисовывают десятки раз, перебирая десятки вариантов.Шрек до, и после концепта.
Сценарий – сюжетная схема, по которой создается некоторое действие (спектакль, фильм, мультфильм…). Предназначен для четкого понимания замысла автора сценария исполнителю (воплотителю).
Раскадровка – это последовательная серия рисунков, которые рассказывают картинками всю историю, сценарий с начала и до конца. Для рисования раскадровки, достаточно навыков рисования на уровне «палка палка огуречик».
К каждой сцене рисуется картинка с указанием того, что происходит в кадре. Параллельно с прорисовыванием раскадровки, из уже готовых материалов, начинается сборка аниматика. Также раскадровку называют сторибордом .
Раскадровка эпизода из мультфильма «Франкенвинн».
Аниматик – это анимированная раскадровка. Здесь определяется хронометраж (затрата времени) всего фильма/ролика, его частей, эпизодов и сцен. На этом этапе получается четкое видение будущего фильма/ролика, являющееся будущим руководством для всего производства.
Область для рисования находится в середине экрана
Инструменты слева (панель tools) используются для рисования на странице.
Временная шкала (Time Line) в нижней части экрана используется для добавления дополнительных кадров и управления анимированной последовательностью.
Цветовая палитра находится в правой части экрана.
Практика 2
Скачай архив с программой Pencil 2d , распакуй его, а затем запусти программу.
Создай анимацию прыгающего мяча. Начни с рисования шара в первом кадре. Ты можешь рисовать карандашом, используя растровый или векторный слой.
1)Ты можете изменять растровый на векторный рисунок, щелкнув по слою битмапа или векторному слою в строке времени в нижней части экрана. Начни с Bitmap. Нажмите на битмап-слой на временной шкале, чтобы убедиться, что он выбран.
2)Выбери инструмент «Карандаш» и установи размер между 10-11 пикселями с помощью ползунка.
3)Нарисуй круг в верхней части области для рисования.
4)Добавь ещё один кадр во временной шкале
5)Временная строка показывает, что ты сейчас работаешь во 2-м кадре анимации.
6)Нажми значок Onion Skin Previous Frame. Когда эта опция включена, ты увидишь предыдущий ключевой кадр (чуть светлее). Когда эта опция не активна, ты не видишь предыдущий ключевой кадр. Убедитесь, что значок Onion Skin Previous Frame включен.
7)Нарисуйте мяч в середине области для рисования.
8)Добавь ключ 3.
9)Нарисуй мяч в нижней части графической области.
10)Добавь ключ 4.
11)Нарисуй мяч в середине графической области.
12)Добавь ключ 5.
13)Нарисуй мяч в верхней части графической области
14)Выключи Onion Skin Previous Frame (Показать предыдущий кадр). Выбери первый кадр на линии времени.
15)Установи количесво кадров в секунду (frames per seconds(FPS)) 12, нажми кнопку Play и наслаждайся полученной анимацией.
16)Покажи анимацию своему преподавателю и сохрани её. File → Save
Векторные изображения
Как тебе известно, растровые изображения это изображения, которые состоят из крошечных прямоугольных точек индивидуального цвета - пикселей, объединенных воедино. Каждый пиксель имеет свое особое расположение на картинке и свое индивидуальное значение цвета.
Векторные это изображения, состоящие из множества отдельных, масштабируемых объектов (линий и кривых), которые определены с помощью математических уравнений.
Поэтому их можно увеличивать либо уменьшать без потери качества. Формула остается той же, меняется только масштаб. Формула, как правило, описывает плавную кривую и при любом значении эта кривая так и останется плавной.
Если ты попробуешь увеличить картинку с векторной графикой, то ты заметишь, что пиксели практически незаметны, то есть качество осталось на прежнем уровне. Если увеличивать изображение с растровой графикой, то оно заметно потеряет в качестве.
Pencil 2d поддерживает и векторный формат, выполни следующее упражнение, чтобы в этом разобраться.
Практика 3
1. Создай новый файл. File → New.
2. Нажми на Vector Layer на временной панеле. Точка, расположенная рядом с векторный слоем станет черной, когда он выбран.
3. Нажми на инструмент Pen(перо). Используй ползунок, чтобы установить размер между 10-11.
4. Нарисуй шар в верхней части графической области.
5. Добавь больше 4 кадров, которые показывают шарик, движущийся по экрану. У тебя будет всего 5 кадров.
6. Выбери 5-ый кадр на временной панеле. В векторном рисунке можно изменять форму.
7. Выбери инструмент Smudge Tool. Нажми пальцем на объекте, чтобы появились квадратики.
8. Щелкни и перетащи один из квадратиков, чтобы изменить форму.
9. Перетащи разные квадратики в разные места, чтобы получилась сумасшедшая форма.
10. Сохрани свою анимацию и покажи её преподавателю, всё это ты уже делал в предыдущем задании.
Практика 4
Создай анимацию того, как ты рисуешь покемона. Ниже ты найдешь картинку с шагами. Постарайся задействовать как можно большее количество кадров (минимум 30). Не забывай, что предыдущий кадр можно дублировать.
Pencil 2D animation – это бесплатное программное обеспеченье, предназначенное для работы с рисованной анимацией. Программа без проблем запускается на разных платформах – MS Windows, Linux, Mac OS. Однако она больше подойдёт для любителей и новичков, которые только осваивают азы 2D-анимации.
Инструменты для рисования
Все инструменты для рисования расположены в левой панели инструментов. Вы можете рисовать линии, замкнутые фигуры, делать заливку, настройки фигур. Также в программе предусмотрены инструменты размытия, ластик и инструмент выделения определённой области.
Правая панели инструментов располагает настройками цветов и прозрачности. К сожалению, нормальный градиент в этой программе сделать не получится, так как нет нужного функционала.
В программе даже имеются слои, правда, функций, связанных с их работой очень мало, и они в основном требуются для создания анимации. Однако при помощи слоёв вам будет легко работать с проектами, где имеется много элементов.
Программа поддерживает работу с графическими планшетами.
Импорт файлов
В свою композицию вы можете добавлять видео, гифки, звук и другие изображения. Последние можно редактировать в основной рабочей области. Но не стоит забывать, что программа предназначена в первую очередь для работы с векторной графикой, поэтому с растровым изображением можно делать только самые примитивные манипуляции, например, увеличить/уменьшить его размер и т.д.
Что касается импортированных звуков и видео, то тут тоже не слишком много доступных функций. Вы можете обрезать видео/звуковую дорожку, отрегулировать звук, переместить её в композиции и на этом всё. Все манипуляции с видео/звуковом производятся в нижней панели с таймлайном.
Работа с анимацией
В данном случае можно анимировать отдельные слои, где может быть один или несколько объектов. Вся работа будет производиться в графе таймлайна, что расположена в нижней части рабочей области.
Анимация создаётся при помощи создания точек на временной шкале. Для каждого слоя временная шкала отдельная, благодаря чему можно анимировать практически любой элемент композиции.
К сожалению, у временных точек не так много настроек, поэтому создать профессиональную анимацию вряд ли получится. Также в верхней части панели таймлайна есть инструменты добавления новых слоёв, временных точек, управления видео и звуком, а также графа настройки FPS.
Экспорт готовых работ
Примечательно, что программа не имеет собственного расширения для рабочих файлов, что сильно неудобно, когда речь идёт о больших проектах, так как нет возможности продолжить работу с того места, где её закончили.
К счастью, с сохранением готовых работ всё нормально. Вы можете сохранить их в виде слайдов из PNG-изображений (актуально для очень небольших проектов), либо экспортировать в GIF, Flash или формат QuickTime. Последнее актуально только для пользователей Mac OS, либо тех, кто установил на компьютер специальное приложение от Apple.
Как итог, программа ещё нуждается в доработке, но при этом отлично подойдёт для новичков, либо тех, кто занимается анимацией не профессионально. У программы есть несколько форумов поддержки, а также обучающие YouTube-каналы (в том числе и на русском языке). Однако проект в данное время практически заброшен.
Из минусов - после отрисовки в этом приложении вектор приходится приличненько так подчищать, так как образуется очень много лишних точек. Из плюсов - можно нажатием одной кнопки перетащить картинку с айпада сразу в Иллюстратор, и это безумно удобно!
Есть еще очень крутое приложение для рисования под названием Procreate - оно тоже бесплатное оно стоит около $6, и, в отличие от Adobe Draw, рисовать там можно только растр, который потом нужно переводить в вектор. Там куча настроек, кисточек и прочих няшек, но у меня лично рисование там, что называется, не пошло, сама не знаю, почему (но знаю, что многие его обожают).
#2 ОБРАБОТКА КОНТУРОВ
Правда, чтобы этот способ сработал, понадобится дополнительное приложение, которое называется Astropad и стоит денег. С помощью этого приложения можно «транслировать» экран компьютера на айпад. То есть, запустив иллюстратор и приложение Астропад, можно превратить Айпад про в эдакий Синтик (кто не в курсе - это такой графический планшет от Wacom, который позволяет рисовать «прямо на себе»).
Если у вас уже есть Синтик - опять же, вас этот способ чистки не удивит. Но так как у меня роль выполняет Wacom Bamboo, который лежит сбоку от компьютера и не имеет своего экранчика (то есть по сути работает как более удобное подобие мышки), иметь возможность править «прямо по экрану» с помощью Айпада Про мне весьма понравилось.
В теории можно и рисовать прям так же - сразу в иллюстраторе, но при работе через Астропад все-таки возникает небольшая задержка в появлении линий, и поэтому мне больше нравится использовать это приложение для «допиливания» картинок. Я открываю картинку после трейса в иллюстраторе, подключаю айпад через USB провод (так соединение надежнее), запускаю Астропад и с помощью инструмента «карандаш» правлю линии. Из минусов - в версии CC выделение постоянно самоотменяется, поэтому приходится держать одну руку на клавиатуре, чтобы нажимать CMD + A (и кто придумал отменить сохранение выделения при работе с этим инструментом? Явно какой-то злой человек)
#3 ЗАПИСЬ ПРОЦЕССА РИСОВАНИЯ
Сейчас в тренде видео, по которым видно, как вы быстро, легко и круто рисуете. Ну или даже не круто, но рисуете - всем нравится наблюдать за ускоренным процессом. Поэтому если вы думаете о том, как бы раскрутиться в соцсетях, то запись видео процесса рисования - это оно. Я, признаться, пока этот тренд игнорирую - не потому что не понимаю его важности, скорее потому что в моем текущем месте обитания слишком темно, чтобы снимать приличные видео (а рисовать на улице уже холодновато). Ну и я имею ужасную привычку нависать над рисунком, что сильно затрудняет процесс съемки top view (видна одна макушка, которая, как я выяснила, у меня не очень фотогеничная:)).
И да, записывать процесс можно и без айпада про. Но ведь классно же, когда и картинку отрисовал, и видео записал:)
encil - удобный open-source бесплатный инструмент прототипирования для создания mockup "ов. Подходит для создания любых пользовательских интерфейсов, но мы будем рассматривать создание веб интерфейсов.Может быть установлен как плагин до firefox, либо как standalone приложение (в таком случае firefox у меня все равно поставился по зависимостях).
Удобный для быстрого составления схемы страниц сайта, чтобы не чертить на бумаге. Также позволяет добавить интерактивность, связав страницы. Простой и быстрый в освоении инструмент.
Разберемся с установкой и покажем пример использования.
Установка:
Windows - скачиваем и устанавливаем в пару кликов,
Wget https://github.com/prikhi/pencil/releases/download/v2.0.14/pencil-2.0.14-ubuntu-all.deb
устанавливаем:
Sudo dpkg -i pencil-2.0.14-ubuntu-all.deb
ArchLinux :
Yaourt -S pencil
Можем теперь запустить Pencil
Элементов интерфейса просто огромнейшее количество. (Единственное, что не стоит останавливаться на вкладке web, она довольно скудная. Но можно использовать элементы с других вкладок (например, для кнопок))
Для примера создадим mockup этого блога. Нам понадобятся элементы из вкладок "Basic Web Element" и "Desktop - Sketchy GUI".
Элемент Html texts удобен тем, что может генерировать Lorem Ipsum (Правая кнопка мыши -> Actions) При добавлении єлементов сразу появляется линейка для выравнивания (тоже удобно):
Новые страницы создаем, кликнув правой кнопкой мыши по панели вкладок, либо по кнопке "New page". Страницы можно соединять, создавая некоторое подобие поведения. (Если у вас более одной страницы, можно кликнуть по ссылке правой кнопкой и выбрать пункт "Link to"). Эта фича станет видимой, если экспортнуть файл, к примеру, в pdf или html формат.
