Первый урок в программе pencil. Создание прототипов

Pencil 2D animation – это бесплатное программное обеспеченье, предназначенное для работы с рисованной анимацией. Программа без проблем запускается на разных платформах – MS Windows, Linux, Mac OS. Однако она больше подойдёт для любителей и новичков, которые только осваивают азы 2D-анимации.

Инструменты для рисования

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

Правая панели инструментов располагает настройками цветов и прозрачности. К сожалению, нормальный градиент в этой программе сделать не получится, так как нет нужного функционала.

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

Программа поддерживает работу с графическими планшетами.

Импорт файлов

В свою композицию вы можете добавлять видео, гифки, звук и другие изображения. Последние можно редактировать в основной рабочей области. Но не стоит забывать, что программа предназначена в первую очередь для работы с векторной графикой, поэтому с растровым изображением можно делать только самые примитивные манипуляции, например, увеличить/уменьшить его размер и т.д.

Что касается импортированных звуков и видео, то тут тоже не слишком много доступных функций. Вы можете обрезать видео/звуковую дорожку, отрегулировать звук, переместить её в композиции и на этом всё. Все манипуляции с видео/звуковом производятся в нижней панели с таймлайном.

Работа с анимацией

В данном случае можно анимировать отдельные слои, где может быть один или несколько объектов. Вся работа будет производиться в графе таймлайна, что расположена в нижней части рабочей области.

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

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

Экспорт готовых работ

Примечательно, что программа не имеет собственного расширения для рабочих файлов, что сильно неудобно, когда речь идёт о больших проектах, так как нет возможности продолжить работу с того места, где её закончили.

К счастью, с сохранением готовых работ всё нормально. Вы можете сохранить их в виде слайдов из PNG-изображений (актуально для очень небольших проектов), либо экспортировать в GIF, Flash или формат QuickTime. Последнее актуально только для пользователей Mac OS, либо тех, кто установил на компьютер специальное приложение от Apple.

Как итог, программа ещё нуждается в доработке, но при этом отлично подойдёт для новичков, либо тех, кто занимается анимацией не профессионально. У программы есть несколько форумов поддержки, а также обучающие YouTube-каналы (в том числе и на русском языке). Однако проект в данное время практически заброшен.

Итак, давайте сразу договоримся. Я буду "Pensil v0.3.3b" называть "пенсил", что бы было удобнее.

В пенсиле очень много разных штучек. Думаете, не разобратся? Очень ошибаетесь! Программка очень лёгенькая. Если не разбирётесь, то читайте инструкцию, и разберётесь уже 100%.

Итак,

Посмотрите: точь в точь как в паинте. Давайте объясним смысл всехкнопочек.

1.значёк "карандаш". Этой штукой вы можете рисовать и правда как карандашом. Трудно заточенным. Только немного тонкие линии иногда. Можно размер выбирать. Ну, это вы и сами поняли бы.

2.Значёк кисти. Эта штуковина рисует немного светящимися линиями. Карандаш рисует не так. Когда нарисуешл один кружок, будет красный, а вокруг как красная тень. Интересно, попробуйте.

3.Перо. Наверное, им рисовать удобнее всего. Знаете почему? Он рисует без тени, без тонких полос, которые просвечивают иногда. Размер тоже, менять можно. Довольно удобно.

4."много линия". Если честно, я не очень понимаю как ею пользоватся. Пока из опыта, говорю, не очень удобно. Нарисовал что то, а другая линия стирает.. Трудгная и неудобная штука, но иногда нужная.

5.Стерательная резинка. Как ею пользоватся, вы наверное знаете. Стирает только белым.

6.Чистка. Ну, он очищаетвсё поле. Не нажимайте, когда рисуете то, что нравится вам.

7.Закраска. Ну, вы понимаете. Закрашивает не всё сразу, а полосочками. Не очень удобно, но что есть. Иногда удобно.Довольно просто.

8.Пипетка. Нажмите на цвет (любой. Например, платье девочки рыжее) и в пипетке этот цвет будет, которым вы сможете закрасить во всех кнопочках.

9."выбрать". если честно, что за штука до сих пор не поняла, но она думаю, не нужна будет, не особо важная.

11.Рука. Переносить придметы, картинки. Полезная вещичка.

12. Пальчик. Я не разобралась ещё... Но не особо нужная.

А теперь, как пользоватся!

1шаг. откройте пенсил. Выберите карандаш, перо или кисть. Нарисуйте что то на белом листе. К примеру мы рисуем кошку. Закрасть рисунок. Нажмите рядом со словом "keys" +. Появится новый лист. Только, там, будет что то типо тени прошлого. Не замечаем.Рисуем далее.

2.Так рисуем пока не нарисовались. Хоть 100 кадров, хоть 10. Теперь, смотрим свои труды. Жмите кнопку "плей".

Для более полного понимания принципов анимации, необходимо знать ряд простейших понятий.

Концепт – общее, краткое описание идеи, с целью передать основной смысл разработки, ее цели. Так же концептом является небольшой набросок, рисунок, отображающий основные черты персонажа. Прежде чем сделать окончательный рисунок того или иного персонажа, иногда концепт перерисовывают десятки раз, перебирая десятки вариантов.Шрек до, и после концепта.

Сценарий – сюжетная схема, по которой создается некоторое действие (спектакль, фильм, мультфильм…). Предназначен для четкого понимания замысла автора сценария исполнителю (воплотителю).

Раскадровка – это последовательная серия рисунков, которые рассказывают картинками всю историю, сценарий с начала и до конца. Для рисования раскадровки, достаточно навыков рисования на уровне «палка палка огуречик».

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

Раскадровка эпизода из мультфильма «Франкенвинн».

Аниматик – это анимированная раскадровка. Здесь определяется хронометраж (затрата времени) всего фильма/ролика, его частей, эпизодов и сцен. На этом этапе получается четкое видение будущего фильма/ролика, являющееся будущим руководством для всего производства.

Область для рисования находится в середине экрана

Инструменты слева (панель 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 - простой C++ / Qt редактор для создания растровой и векторной 2D графики и анимации.

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

Pencil работает не только с векторной графикой, но и с растровыми изображениями (поддерживается работа с камерой и звуком) . Создаваемые в приложении проекты могут включать несколько слоёв (как растровых, так и векторных) .

Рисование это важная оставляющая Pencil , имеется набор основных инструментов (кисть, карандаш, ручка и пр...) , имеются стандартные функции копирования и вставки. К нарисованному изображению можно добавить тень, установить статический фон и применить другие эффекты. Имеется возможность загрузки ранее заготовленных изображений формата PNG .

Несмотря на возможность создания рисунков, Pencil всё же больше предназначен для планирования временной шкалы оживления, предполагающей последовательное разложение на ней кадров из изготовленных рисунков и настройки ключевых кадров будущего ролика. Благодаря шкале времени проект будет более гибок в плане исправления, внесения изменений и корректировки. Шкала позволяет выполнять целый набор действий управления, можно создавать, перемещать, редактировать, а так же удалять поля. Возможно изменение длинны строки и размера, есть возможность правки "назад/вперёд ".

Работа с "фотокамерой " позволяет устанавливать произвольную точку откуда начнётся просмотр созданной анимации или кара. Используемый алгоритм (по-кадровой анимации) позволяет воспроизвести анимацию с возможностью регулировать частоту кадров и настроить циклическое воспроизведение.

Pencil поддерживает добавление звука, готовую анимацию приложение экспортирует (сохраняет) в последовательные изображения (в формате GIF) , в формат SVG (для векторной анимации) , в формате SWF (флеше) и формате XML с несжатым AVI форматом (это даёт возможность сохранить ролик таким, каким он был создан и предварительно просторен в Pencil) .

Может быть установлен как плагин до 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 формат.