Рисование gif: Создание gif-анимации с помощью Brush Ninja — Дидактор

Создание gif-анимации с помощью Brush Ninja — Дидактор

Предлагаю познакомиться ещё с одним бесплатным редактором создания  анимированных GIF-файлов. В отличие от некоторых подобных инструментов, он одинаково хорошо работает в веб-браузерах как на персональных компьютерахWindows или Mac, так и на всех мобильных устройствах.

Brush Ninja — это максимально упрощённый инструмент создания gif-анимаций, которым можно пользоваться любому.

Чтобы сделать анимированный GIF на Brush Ninja, просто зайдите на сайт и начните рисовать в пустом редакторе сцены. Вы можете нарисовать столько сцен, сколько хотите.

Редактор обладает несколькими инструментами, доступными слева и справа от сцены.

 

Редактор разделен на три секции. Большой белый квадрат — это текущий кадр, там, где вы создаёте свою анимацию.

Группа кругов — ваши кисти. Различные размеры представляют размер кисти. Нажмите, чтобы выбрать нужный размер.

Группа цветов — это цвета краски. Нажмите, чтобы поменять цвета.

Под каркасной рамкой находится панель управления. Здесь вы можете изменить настройки анимации и воспроизвести анимацию.

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

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

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

Под каждым кадром на временной шкале у нас имеются две кнопки: копирования предыдущего кадра и удаления лишних фреймов.

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

Вот мой маленький набросок.

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

a hungry #cat #animation today. Make your own at https://brush.ninja #brushninja

Публикация от Ben (@brushninjaapp)

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

В чём может быть полезность инструмента?
Для дистанционного обучения или во время объяснения в классе такие анимированные GIF-файлы могут быть полезны для отображения шагов решения математической задачи. Это может быть демонстрация протекания какого-либо процесса на уроках физики, химии, окружающего мира в начальных классах. Разумеется, учитель может найти ещё массу примеров использования авторских gif-анимаций.

Безусловно, Brush Ninja можно рекомендовать ученикам для создания собственных gif-проектов.

Рубрики: В помощь учителю, онлайн сервисы | Метки: конструкторы, учебное видео

Gif-анимация — как это делается? Часть 2 | Техника и Интернет

Создаём анимацию

Сначала определим, какие результаты мы ожидаем увидеть. Допустим, вы умеете рисовать и хотите создать рекламный мультфильм. Что вы будете рекламировать, как вы будете рисовать, это уж сами определяйтесь — можете это делать непосредственно на рабочем столе «Ulead GIF Animator» или в любом графическом редакторе. Можно также рисовать от руки на бумаге и сканировать рисунки.

Допустим, вы решили рисовать в «Ulead GIF Animator». Возможностей здесь, конечно? поменьше, чем в «Adobe Photoshop», но есть опции, позволяющие добавлять новые слои, что очень удобно при работе с анимацией. Панель инструментов для рисования здесь очень проста. Кисть, стирательная резинка, заливка, прямоугольное выделение, овальное выделение, трансформация и добавление текста.

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

Панель инструментов

Начнём с прямоугольного выделения. Поиграем с настройками. «Soft edge» — «сглаженная кромка». По умолчанию в этом атрибуте стоит 0, и в этом случае при выделении у нас получается прямоугольник с ровными углами, но если выставить 1 и выше, то углы будут сглаживаться. При максимуме у нас получится неровный овал. «Anti-aliasing» — «устранение контурных неровностей», большой роли при рисовании эта настройка не играет. «Equal width and height» — если включить этот атрибут, то вместо прямоугольника будет получаться квадрат.

Та же система при работе с овальным выделением. При нулевом значении «Soft edge» и включенном «Equal width and height» у нас получается идеально ровный круг. Если «Soft edge» выставить на максимум, то круг выйдет искажённый. А если отключить «Equal width and height», то мы нарисуем овал.

Кисть также можно видоизменять. Она имеет только две формы — круглую и квадратную. Настройки позволяют изменять толщину мазка, прозрачность, степень размытости и способ рисования. Первый способ рисования — обычный: рисуя, мы просто мы водим мышкой по экрану. Второй способ удобен для нанесения идеально ровных линий и производится двумя кликами мыши — от пункта «А» в пункт «Б». Ширина кисти может быть от тоненькой, не толще волоска, до широкой полосы, которой в три-четыре мазка можно закрасить полхолста. Линии, которые оставляет размытая кисть, похожи на след от красящего баллончика и красиво смотрятся.

Стирательная резинка имеет те же самые настройки, что и кисть.

Заливка. После того, как мы нажмём на кнопку заливки, следует подобрать цвет, который нам требуется. Для этого мы обратимся к библиотеке цветовой гаммы. Мы найдём её в самом низу панели инструментов. Откроется окно, показывающее текущий колор, в котором мы выберем цвет любого оттенка — заливай сколько хочешь!

Есть возможность писать текст на изображении. Шрифты и поддержка языков зависят от настроек вашего компьютера. Есть одно большое «НО»: кириллицу программа воспринимает только в том случае, если мы станем просто писать текст на картинке. В программе есть возможность создавать анимированные тексты, и при использовании опции «add banner text…» кириллица не воспринимается.

Мы наконец нарисовали картинку и решили приступить ко второму кадру (в скобках замечу, что если в кино под кадром подразумевается сцена, снятая одной камерой, которая может длиться и полсекунды, и сорок минут, то здесь кадр — это просто одно изображение). Чтобы перейти к следующему кадру, нам нужно скопировать нашу картинку, затем в управлении панели раскадровки добавить новую рамку (кнопка «Add frame») и вставить в неё наше изображение.

Чтобы выделить картинку, надо правой кнопкой мыши кликнуть на ней в рабочем столе и в открывшемся окне выбрать «selection», затем «All». Есть способ попроще: в меню «frame» нужно выбрать опцию «duplicate frame (s)», но сначала необходимо выделить нужный кадр (кадр выделяется в панели раскадровки одним кликом). Вставив картинку в новую рамку, мы продолжим с ней работать. То есть, где-то подотрём резинкой, где-то добавим несколько штрихов, чтобы при просмотре чувствовалось движение.

Здесь есть одно небольшое «но»: для того, чтобы начать работать с выбранным кадром (а нам часто придётся возвращаться к предыдущим картинкам, чтобы что-то в них исправить), обязательно нужно кликнуть на этот кадр в менеджере объектов, иначе мы не сможем пользоваться инструментами. В том случае, если в менеджере объектов нужная картинка не будет выделена, при попытке что-либо нарисовать или произвести какое-нибудь другое действие с изображением, выскочит диалоговое окно с такой надписью: «No active object for the operation». Что в переводе на наш родной язык будет звучать примерно так: «нечего мышкой тыкать куда попало, сначала инструкцию почитайте» (ругается программа довольно часто, я всегда забываю выделить картинку в менеджере).

Но, наконец, мы обошли все подводные камни и стали работать дальше. И так далее, кадр за кадром, мы нарисуем наш рекламный мультфильм. Чем больше кадров мы сделаем, тем лучшего качества будет мультик и тем весомей в мегабайтах выйдет gif-файл.

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

Теги:

компьютеры,
анимация,
кадры,
рисование,
программы

Ресурсы для учителей Brush Ninja | Brush Ninja

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

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

Эти второклассники продемонстрировали свои технические и творческие способности, используя Brush Ninja, чтобы сделать деревья для каждого времени года.

Твиттер тренера Раонака

Веселье с #brushninja сегодня во 2 классе.

Твиттер Эми Хакаби

4th сегодня завершили свою научную анимацию с помощью #brushninja.

Твиттер Betz Creative Chaos

Я: Вы что-то делаете про воду?

S: Это осадки

Я: снова победил четвероклассник

Твиттер Криса Высоцки

Создание с помощью Brush Ninja.

Твиттер Ивонн Страуд

Сегодня мы использовали инструмент для цифрового искусства Brush Ninja, чтобы создать анимированного медведя Падси

Tweeted by FOG_Squirrels

См. другие примеры использования Brush Ninja учителями →

Преимущества Brush Ninja?

  • Brush Ninja бесплатно . Бесплатное программное обеспечение снижает затраты. Никаких лицензий на программное обеспечение, никакого нового оборудования. Все, что вам нужно, это веб-браузер, он просто работает.
  • Вход в систему не требуется . Вы можете открыть веб-сайт и сразу приступить к работе.
  • Просто использовать . Моя цель состояла в том, чтобы сделать его максимально простым в использовании. Мой 2,5-летний ребенок может (и делает) создавать анимацию в Brush Ninja. В основном это каракули, но он может рисовать, добавлять новые кадры и воспроизводить то, что он сделал.
  • Отслеживание и реклама отсутствуют . Нет необходимости беспокоиться о вашей конфиденциальности или продаже личной информации. Вы можете ознакомиться с политикой конфиденциальности здесь.

Как использовать Brush Ninja в образовании?

  • Для иллюстрации концепций и знаний . Закрепите знания учащихся, попросив их создать слайд-шоу с ключевой информацией.
  • Показать свою работу . Особенно полезно для математики, учащиеся могут отображать свои мыслительные процессы, а затем упорядочивать анимацию, чтобы показать окончательный результат.
  • Творческое письмо . Представьте рассказы, анимационные комиксы или короткие мультфильмы.
  • Анимированные идеи . Brush Ninja — отличный способ записывать идеи для творческих проектов.
  • Презентации . Добавьте движения в презентации, создав простые анимации представляемой темы.
  • Развивающие игры . Например, игра-угадывание в стиле Pictionary/Charades или викторины.

Членство и учетные записи пользователей

Brush Ninja имеет необязательные учетные записи пользователей; однако во многих случаях студентам они не нужны. Учетные записи пользователей Brush Ninja оплачиваются и открывают дополнительные функции для опытных пользователей. Основное приложение бесплатно для всех и всегда будет таковым.

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

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

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

Пример использования

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

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

Полезные инструменты для учителей

  • Падлет . Простая онлайн-доска объявлений. Отличное место для студентов, чтобы опубликовать свои анимации. Их можно сгруппировать на разных досках по темам. Ниже приведены несколько примеров использования Padlet для отображения анимации учащихся:
    • Коллекция анимаций, созданных студентами, которые с нетерпением ждут каникул.
    • Образ Маргарет/Гретхен из «Фауста»
    • Студенты, изучающие испанский язык
  • Банси . Приложение для презентаций, в которое вы можете добавить свои анимации Brush Ninja.

Учебники

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

  • Как использовать Brush Ninja (видео на YouTube)
  • Использование Brush Ninja и Screencastify для создания научных презентаций
  • Как использовать Brush Ninja для обучения китайскому языку (видео на YouTube, на китайском языке)
  • Учи как борец

Полезные документы

Это официальная документация Brush Ninja, объясняющая некоторые из распространенных вопросов, которые я получаю при использовании Brush Ninja.

  • Как преобразовать анимированный Gif в видео
  • Как экспортировать анимацию. Поделитесь анимацией с друзьями или учителями.
  • Глоссарий терминов анимации
  • Начало работы с анимацией
  • Как открыть файл Brushninja — Загрузка файла.
  • Как сохранить анимацию — сохраните анимацию, чтобы открыть ее позже.
  • Как загрузить анимацию Brush Ninja в Google Docs и Google Slides
  • Как загрузить анимацию Brush Ninja в SeeSaw
  • Часто задаваемые вопросы

Это как MSPaint для GIF!

GIFPaint — это как MSPaint для GIF!

Новый гифка
Сохранить GIF
Галерея
Помощь

GIFBrush

DotsLineSprayPlaceStretch

Library

GIFPaint DefaultApple Emoji

Скорость анимации:

Непрозрачность слоя трассировки

Предварительный просмотр

Новая гифка

Ширина
Рост
Рамки

Закрыть
новый гиф

GIFPaint

Выпуск 5

Простое приложение для анимации HTML5, вдохновленное MacPaint, Deluxe Paint и MSPaint.

Создано Джеймсом Хиксом, если у вас есть какие-либо отзывы или ошибки, вы можете связаться с ними в Twitter. Я также хотел бы увидеть какие-нибудь классные GIF-файлы, которые вы делаете с помощью GIFPaint, и опубликовать их в GIFPaint Tumblog 9.0003

Использование GIFPaint стало возможным благодаря следующим проектам с открытым исходным кодом:
Processing.js, omggif, jsgif, FileReader.js, jQuery

Закрыть

Использование GIFPaint

GIFpaint находится в стадии разработки, некоторые вещи могут сломаться/измениться/улучшиться в ближайшие недели.

Все инструменты в GIFPaint используют обе кнопки мыши, левая кнопка рисует/заполняет/захватывает первую цветовую ячейку, а правая кнопка использует вторую цветовую ячейку

GIFPaint имеет горячие клавиши для большинства вещей:0003

  • Стрелка влево — Предыдущий кадр
  • Стрелка вправо — Следующий кадр
  • Z — Отменить
  • A — Добавить рамку
  • C — Рамка для копирования
  • P — Вставить рамку
  • B — Инструмент «Кисть»
  • F — Инструмент для заполнения ковша
  • I — Пипетка для чернил
  • T — Сделать фото с веб-камеры
  • + — Увеличить размер кисти
  • — — Уменьшить размер кисти
  • X — Поменять местами левый и правый цвета
  • [и] — Переключение луковой шелухи

Горячие клавиши в GIFPaint — это просто клавиши, вам не нужно удерживать Command или CTRL.