Создание сайтов
CreoSeo - раскрутка сайтов в поисковиках
Ответы на вопросы
Создание сайтов | О раскрутке сайтов |  О создании сайтов |  О безопасности сайтов |  Вопрос - ответ | Контакты
Статьи о HTML/DHTML: "Как делается GIF-анимация"
анимашка

Чтобы делать небольшие мультяшки вам понадобятся: Программа для рисования и Программа для компоновки кадров (аниматор).

В качестве программы для рисования можно использовать любой графический редактор: Paint, Paint PRO, Adobe Photoshop. В нем вы будете создавать кадры вашей будущей анимации. Записывать их лучше сразу в GIF- формате, но это не обязательно....
*Комментарии:  Если вы собираетесь использовать анимированный GIF для своих web-страниц, то для того, чтобы анимация хорошо смотрелась на любом фоне, лучше делать рисунки-кадры на прозрачном фоне.
Подробнее о прозрачности GIF-файла почитайте здесь!

Затем в программе-аниматоре вы выставляете очерёдность кадров, устанавливаете время задержки для каждого из них,

компановка фреймов в программе-аниматоре

... и сводите все кадры в один файл, т.е. записываете как анимационный GIF (GIF89A Format).





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

Например, есть очень хорошие аниматоры:
ULEAD's GIF Animator. пробная версия программы - 15 дней
GIF Construction


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



Или можно использовать 2-е картинки и установить между ними какой-нибудь эффект перехода (Transitions)

Например, вот две картинки: первая картинка и вторая картинка.
Результатом применения эффектов перехода может быть такая анимашка: эффект перехода




Для создания несложной анимации можно использовать и Adobe ImageReady. Иногда это очень удобно, т.к. эта программа связана с Adobe Photoshop, и можно легко осуществлять редактирование переходя туда и обратно; кроме того, Adobe ImageReady и сама - отличный редактор и оптимизатор графики. Единственным недостатком программы как аниматора является отсутствие эффектов прорисовки и наличие всего одного эффекта перехода




Существует также возможность делать GIF-анимацию в 3D-программах.


В этом случае вам не потребуется по-кадровая прорисовка движения. Достаточно задать любому объекту в 3D-программе циклическое действие (например: один полный поворот вокруг оси)

и записать полученную анимацию как серию фреймов (make movie as image files). Затем эти фреймы можно скомпоновать обычным способом в программе-аниматоре.

Если в качестве программы-аниматора вы используете Adobe ImageReady, то для монтажа кадров вам не нужно вызывать каждое изображение, достаточно выбрать из меню функцию:
File -> Import -> Folder as Frames...
Folder as Frames...
и указать папку в которую вы записали кадры вашей будущей анимации, программа сама составит их в ленту, определяя очерёдность по именам.

анимашка


Для некоторых 3D-программ и этого всего не требуется, т.к. они идут с готовым встроенным плагином для перевода файла в анимационный GIF.





*Комментарии:  Если вы хотите, чтобы ваша анимация "включалась" от наведения на неё курсора, то для этого, вам понадобятся два файла: анимированный и статичный, где в качестве статичного используется первый кадр анимации.
Подробнее почитайте здесь!



Розалия Очакова
Art-Ro

Ваши комментарии
Все сообщения [6]

Вам нужна реклама в интернете? Вы можете заказать продвижение сайта у нашего оптимизатора. Поисковая оптимизация (раскрутка сайта) требует особых усилий в отличие от контекстной рекламы. Также вы можете заказать у нас создание сайта. Обращайтесь!

 


   
 

Рейтинг@Mail.ru