Создать анимацию онлайн

ЕгороваТатьяна — 17.11.2013
СОЗДАНИЕ АНИМАЦИИ ОНЛАЙН

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



Как я делала анимашку смотрите в ролике.





Подробнее
Для создания такой анимашки желательно подготовить картинки одного размера по ширине и высоте. Но это не обязательно.
Я отобрала 7 изображений разного размера(см. фото 1)
<

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

Теперь расскажу о настройках анимации.

Жмем СЮДА,чтобы попасть на сайт.

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

ФОТО А.


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

2. Размер. Можно поставить галочку в Авто, тогда размер анимашки подстроится под самое большое изображение. Размеры 100х100, 200х200, 300х300 подойдут для создания аватарок и баннеров.

3. Галочка в Указать позволяет задать ширину и высоту анимашки самостоятельно и нужного размера.

4. Указываем нужные размеры.

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

ФОТО Б.


1. Круглые углы. Чем больше значение в окошке, тем круче будет закругление на углах. Вот пример

Сдвинув до упора влево ползунок, Вы избавитесь от закруглений.

2. Длительность кадров. Чем выше значение, тем дольше отображается картинка. Здесь задается одно-общее время для всех кадров.

3. Длительность эффектов. Чем больше значение, тем дольше или медленнее отображение переходных кадров.

4. Если Вы поставите галочку в Использовать все эффекты, то они будут появляться все какие есть один за одним.
Пример.

Галочку можно убрать совсем и не выбирать эффектов. Тогда кадры будут отображаться резко, скачками

5. Убрать галочку и кликнуть на 1-2 или выборочно на несколько эффектов. Только выбранные эффекты будут появляться на анимации.

ФОТО В.


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

1. Нажимаем на Текст.

2. При необходимости выставляем толщину обводки шрифта. Она позволит лучше выделить текст на пестром фоне.

3. Выбираем шрифт текста.

В поле Цвет вызываем кликом генератор цвета и выбираем нужный.

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

5. Сохраняем и закрываем окно.

Очень интересный эффект получается, если загрузить 2 (или несколько) одинаковых картинок. Одну оставить без изменений, на других написать текст. Выбрать один первый эффект перехода. И вот что получается - плавное появление текста на картинке. Пример. Загрузила 3 одинаковых картинки. На одной написала "Здравствуй", на другой "зимушка-зима". И вот что получилось



ФОТО Г.


1. Рисовать.

2. Здесь выставляем размер кисти.

3. Цвет выбираем через генератор цвета

4. Рисуем, удерживая левую кнопку мышки.

5. Сохраняем и закрываем окно.

***********

Для сохранения своей анимации кликаем на кнопку Создать анимацию. Ждем когда картинка загрузится на сайт. Кликаем по появившейся надписи "Ваша анимация готова! Смотрите анимацию по этой ссылке". Снова ждем пока загрузится. Когда анимационная картинка полностью откроется, кликаем по ней правой кнопкой мышки и потом в выпадающем меню левой кнопкой по Сохранить картинку как... Сохраняем на комп.

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

Вот и всё!

Удачи!
Код поста для Mail.ru тут
еще разные уроки
Что можно скачать бесплатно

Оставить комментарий

Популярные посты:

• Архив