Как пользоваться программой pencil

Как пользоваться программой pencil

Основные понятия анимации

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

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

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

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

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

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

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

Практика 1

Разработай идею для анимированного мультфильма или рекламы не более чем на 1.5 – 2 минуты.

Помни, что этапы создания анимации зависят от того, какова цель этой анимации. Если это анимация простого рекламного баннера с простейшими элементами, то можно обойтись всего лишь проработкой концепта, раскадровкой (не обязательно), аниматиком (не обязательно), и уже непосредственно анимацией.

Проработка рекламного ролика – более трудоемкий процесс. Он требует как описания идеи, концепта, так и полного написания сценария, с последующими раскадровкой, аниматиком, наложением звука, анимацией и монтажем.

Самой сложной является работа с анимационным фильмом. Это очень трудоемкий процесс, требующий определенного терпения, умения, а также любви и увлеченности данным ремеслом.

Начни разработку идеи по этапам, разбирая каждый пункт.

1. Напиши концепт идеи. На этом этапе идет общее, краткое описание идеи, если это рекламный ролик или мультипликационный фильм – то краткая подача сюжета, его сути, смысла и основных моментов. Ниже приведен пример концепции фильма «Аватар»:

«Частично парализованный ветеран войны Джек прибывает на планету Пандора, населенную гуманоидной расой На’ви. Землянин оказывается в центре конфликта родной и местной культур, оказывающимся началом смертельно опасного приключения.»

2. Проработай не более двух персонажей для истории или рекламного ролика.

3. Сделай не большую раскадровку на основе уже готового сценария. К каждой сцене нарисуй последовательность картинок, напоминающую комикс, являющийся графическим кратким описанием идеи, каркасом, на основе которого будет создаваться уже основная анимация, как показано на рисунке ниже. Раскадровка делается на листе бумаги.

Анимация в Pencil 2d

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

Pencil бесплатная программа с открытым исходным кодом. Официальный сайт программы https://www.pencil2d.org/

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

Инструменты слева (панель 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)Нарисуйте мяч в середине области для рисования.

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). Не забывай, что предыдущий кадр можно дублировать.

GIF анимация

GIF анимация – это популярный формат изображений, который поддерживает анимацию картинок. GIF анимацию очень часто используют для рекламных баннеров в интернете вместо больших и неудобных в подключении видео файлов.

GIF это сокращение от полного названия Graphics Interchange Format. Стандарт этого изображения поддерживает только 8-битную палитру, из-за чего для отображения изображения может быть использовано только 256 цветов. Но за счет такой узкой палитры цветов удается добиться небольших размеров файлов с изображениями по сравнению с другими форматами.

Создать такую анимацию можно двумя способами:

2. Графический редактор

GIF из видео

Для создания gif из видео воспользуйся ресурсом giphy

Вставь ссылку на ролик из youtube

Выбери начало и продолжительность

Добавь заголовок и нажми кнопку создать GIF (Create GIF)

Дождись выполнения обработки

Наслаждайся полученным результатом

Для загрузки нажми кнопку Download

Практика 5

Создай свою шедевральную гифку из youtube ролика. Результат сохрани на компьютере и отправь преподавателю по электронной почте.

Практика 6

Создание gif в графическом редакторе

1. Скачай, распакуй и запусти программу UnFREEz

2. Создай 7 простых рисунков в программе Pain.NET. Первый рисунок фон и цифра 1, второй рисунок фон и цифра 2, но на другом месте и так далее. Рисунки сохраняй в формате GIF.

Должно получиться что-то вот такое

3. Перетащи все сохраненные рисунки в программу UnFREEz и нажми кнопку Make Animated GIF

4. Наслаждайся полученным результатом

Домашнее задание

1) По созданной в классе раскадровке, используя Pencil 2D, создай свой анимационный ролик

суббота, августа 28

Руководство пользователя — Pencil 0.4.3b

Программа для создания традиционной анимации pencil-043b

Обзор

Карандаш документ состоит из слоев. Есть в настоящее время 4 типов слоев: растровые изображения, векторные изображения, звука и камеры. В окне Временная шкала в нижней части экрана показывает, существующих слоев. По умолчанию, новый документ содержит слой растровых и векторных слоев на вершине, но вы можете добавлять и удалять слои, как вы хотите (с помощью или кнопки рядом с надписью "Layers" или в меню Layer).

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

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

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

Слои
Чтобы выбрать слой, который вы хотите изменить, просто нажмите на него в список слоев (или использовать стрелки вверх и вниз). Вы можете изменить порядок слоев, перетаскивая их имени. Для влияет на способ слоев изображения отображаются в верхней части друг с другом, это не влияет на звук и камеры слоев. Свойства слоя, например, свое имя, можно изменить, дважды щелкнув по имени (см. выше).

Читайте также:  Датчики на протечку воды в квартиру

Слои можно активировать или отключить, нажав на кружок в самом слева от значка. Отключить слой образ скрыт от холста зрения.

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

Рисунок

Bitmap рисунок

Векторной графики

Когда слой векторное изображение, выделение, вы можете использовать те же инструменты, чтобы сделать на этом слое. Основное различие заключается в том, что все ваши чертежи и инсультов преобразуются в геометрические фигуры. В результате, вы можете увеличить или расширить свой рисунок без получения какого-либо "пиксель" (сглаживание) эффект. При изменении цвета в палитре цвета, цвет меняется автоматически в векторные изображения. Точек векторных кривых можно регулировать при помощи пальцев инструмент. Это делает векторные изображения идеально подходит для готовой "четкой" рисунки (как правило, характер в анимации), тогда вы можете предпочесть растровые изображения для быстрого проекты или более сложные / нечетких изображений (как правило, опыт работы в анимации). Примечание 1 — карандаш инструмент предназначен для кривых, которые не будут отображаться в финальный розыгрыш. Таким образом, эти невидимые кривые отображаются только как пунктирные кривые, которые вы можете скрывать и показывать с помощью кнопки. Чтобы сделать видимым кривых, использовать перо или полилинии инструмент.

Примечание 2 — для векторных изображений, инструмент Paint Bucket (используется для заполнения контур) не является 100% надежным, потому что эта операция не является тривиальной для векторных фигур (поверьте мне на это!). Таким образом, вы, возможно, потребуется нажать несколько раз в разных местах до того, желаемый контур заполнен. Если он не работает, убедитесь, что контур закрыт (увеличение и / или использовать кнопку план дисплей — или нажмите F1). Если вы обнаружили разрыв, закройте ее ручку, карандаш или полилинии. Если он все еще не работает, перекроить по некоторым переходов, чтобы убедиться, все кривые связаны между собой.

Масштабирование и поворот

Оживляющий

Теперь мы хотим сделать и анимации. Как отмечалось выше, дело в том, чтобы создать несколько ключевых образов в слое.

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

Это позволит быть, например, (если вы представляете размахивая шар на веревочке), право большинства, среднего и левого рамках мяч движется. Хитрость заключается в разработке, то, как быстро вы хотите, чтобы двигаться, и как вы хотите, чтобы ваш шар изменять скорость.

Думая о, это поможет вам понять, что вы делаете и не нужно, как аниматор, когда вы (или если вы уже делается), более сложные анимации, вам нужно будет быть очень консервативной о рисовании только кадры вам действительно нужно, а вам часто придется сроки и работать с сотнями кадров.

Количество кадров в секунду?

Вообще, съемки последовательности будет использовать времени 25 кадров в секунду (FPS).

Теперь, когда мы знаем, что это, как аниматор, вы можете найти рисунок 25fps не требуется вообще. Часто аниматоры и зрители, смотря им рады использования и просмотра 12fps. Хотя это даст вам меньше пространства для маневра в плане бесшовных подробно бесшовной бесшовных, 12fps более чем вероятно, что является лучшим для использования в большинстве случаев.

Но возиться с кадров и опыта, это очень важно.

Onion skin

Настройка ключей

Загрузка изображений

Фотокамеры

Камеры слой позволяет определить данный вид, с определенной пропорции, в Ваши неограниченные полотне. Более того, вы можете определить вид для каждой клавиши камеры, трек, и вид линейной интерполяцией между клавишами. Чтобы сделать это, просто создать камеру слоя, переместите красного кустарника на нужный кадр и использовать ручной инструмент для настройки мнение внутри камеры просмотра кадра. Дважды щелкнув на имя камеры, вы можете установить разрешение камеры просмотра кадра.

Карандаш имеет несколько элементарных поддержки звука. Чтобы добавить какой-нибудь звук, создать звуковой слой. Затем выберите "Импорт звука . " в меню "Слой" и выбрать звуковой файл (WAV только формат поддерживается на Windows; версия Mac можно импортировать в любом формате, который может быть прочитан QuickTime). Это создаст треугольный ключ в звуковой дорожки. Ключ указывает, где звук будет начать играть. Вы можете перемещать этот ключ как и любой другой ключ. Звуковой слой не играет звук, когда он отключается. Все звуки могут быть включены или выключены для всей анимации нажатием кнопки звукового сигнала в линии времени контроля.

Читайте также:  Как настроить детские часы телефон с gps

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

Пример

Векторной графики

Вот типичный пример, чтобы сделать один кадр. Мы начинаем в растровый слой и, используя инструмент "карандаш" нарисовать характер:

Как только проект закончен, мы идем в векторный слой и использования инструмента Реп "чернила" характер, т.е. сделать чистые линии в верхней части проекта. Для того чтобы нарисовать именно, вам может потребоваться, чтобы увеличить изображение. Чтобы сделать это, выберите ручной инструмент
и правой кнопкой мыши на изображение (или нажмите кнопку с Apple-ключ на Mac) и перетащите мышь. Вы получите динамический зум в центре картины. Если у вас возникли некоторые трудности рисунок с помощью инструмента Реп (особенно с помощью мыши, а не стилет), вы также можете использовать инструмент полилинии .

Следующим шагом будет поставить некоторые цвета. Выберите инструмент Paint Bucket и выберите цвет в палитре (нажмите на черный квадрат, чтобы показать цветовую палитру). Палитра приходит с ограниченным числом стандартных цветов. Вы можете изменить их в любое время и добавить столько же цвета, как вы хотите. После того как вы выбрали цвет, нажмите кнопку с помощью инструмента краски Пакет внутри области, которую требуется заполнить. Убедитесь, что нет никакого разрыва в документе. Иногда программа не в состоянии заполнить в регионе. В этом случае щелкните в другом месте или увеличения в регионе попробуйте еще раз.

Если вы хотите, вы можете добавить тени на изображение. Чтобы сделать это, используя инструмент "карандаш". Используется с векторными слоями, этот инструмент создает штриховые путь, который не появляются в окончательном варианте анимации. Эти пути будут определять границы тени. После этого вы можете заполнить эти регионы с более темными цветами.

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

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

The Pencil Project поставил своей целью создание свободного (на открытых исходниках) срéдства для создания диаграмм и прототипов GUI на движке от Файерфокса.

Его ужé обсуждали на Хабрахабре в позапрошлом году; с тех пор в Pencil появились средства экспорта (в HTML, PNG, документы Openoffice.org, Word и PDF), а также просмотр клипартов.

Существуют версии «Карандаша», встраиваемые в Firefox, а есть и отдельные.

Pencil распространяется по лицензии GPL v2 и работает всюду, где способен работать Firefox 3. Например, первую версию Pencil проверяли на Windows XP и Windows Vista.

Вон там вы можете видеть нескольких блоггеров Мозиллы в восторге от того, что в Pencil за пару минут удалось набросать вот такой интерфейс:

Редакторский дайджест

Присылаем лучшие статьи раз в месяц

Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.

  • Скопировать ссылку
  • Facebook
  • Twitter
  • ВКонтакте
  • Telegram
  • Pocket

Похожие публикации

  • 11 марта 2016 в 16:33

Автоматическое обновление расширений Firefox

Технокнига, часть 2: литература по СУБД, разработке фронтенда, проектированию интерфейсов и углубленному программированию на Java

Job Stories для проектирования интерфейсов

Вакансии

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Комментарии 19

В группе на Google можно найти дополнительные темплейты:

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

Пробовал несколько раз создавать небольшие схемки некоторых проектов, но что-то отталкивает от этого плагина…

Скачал, поставил (Ubuntu 10.04 Firefox 3.6 Mozilla/5.0 (X11; U; Linux i686; ru; rv:1.9.2) Gecko/20100125 Ubuntu/10.04 (lucid)

К сожалению подходит только для создания небольших проектов и не сильно сложных проектов. Хотя по правде сказать в нем содержится процентов 80-90% что я использую в повседневной жизни в visio.
Нет импорта visio-проектов. Навигация по неудобная (zoom не работает по колесиков мышки). По shift + scroll тоже по горизонтали не перемещает, а я к этому уже привык.

Группировка/Разгруппировка только в меню, нет иконки в toolbar’е, правда есть хоткей на эту операцию. Когда сгруппирован шейп и текст в нем, нельзя скажем изменить длинну шрифта (не самого шрифта, а место который он занимает) приходиться разгруппировывать.

Нет (или не нашел) управление «на передний план», «на задний». Очень нужная вещь.
Шейпы приходиться тащить через все окно, не очень удобно.

Но в целом неплохое впечатление. Желаю удачи.

Нет (или не нашел) управление «на передний план», «на задний». Очень нужная вещь.

Живет в свойствах элемента (правый клик — Arrangement).

Вообще, для простейших прототипов — сойдет.

Ссылка на основную публикацию
Как повернуть диаграмму на 90 градусов
Научимся вращать (поворачивать) график функции относительно начала координат. Для примера используем график функции y=x*sin(10*x). Координаты (x'; y') в результате поворота...
Как отключить блокировку приложений на андроиде
Установка приложений Android как из Play Маркет, так и в виде простого APK файла, скачанного откуда-либо может быть заблокирована, причем...
Как отключить боковые кнопки на мышке
Всем привет! С момента изобретения компьютерной мыши, Дугласом Энгельбаром, этот претерпел значительные трансформации: корпус давно не делают деревянным, да и...
Как повернуть купольную камеру видеонаблюдения
Страница 12 5 Регулировка положения видеокамеры Положение купольной видеокамеры можно регулировать по двум осям. Следя за изображением на мониторе, отрегулируйте...
Adblock detector