Анимационные эффекты. Красивый анимированный эффект

Наверняка все знают о небольших анимированных картинках, иначе говоря о GIF-ках. Пользователи сайта vk.com особенно знакомы с ними, потому что там есть возможность добавлять их в комментариях. Конечно, есть такой вариант, как брать уже готовые изображения. Но не всегда найдешь то что хочешь, и, поэтому я хочу рассказать о сервисах, которые позволяют создать собственные анимированные изображения. При этом от вас не требуется каких-либо супернавыков владения компьютером. В полной новости приводится ряд сервисов, поэтому какой-нибудь из них подойдет и вам!

GIF анимации онлайн

1. Loogix

Чтобы воспользоваться данным сервисом вам необходимо как минимум 3 изображения. Если вам нужна GIF-ка, которая содержит более 3 изображений, тогда вы можете добавить до 10 изображений с помощью ссылки с текстом «Add one more picture». Сервис может создать анимировенное изображение в 5-ти различных скоростях. Также есть возможность добавления эффектов для вашей анимации (например «Размытие»).

    Также этот сервис включает еще две возможности для создания анимаций:
  • Создание обратных анимаций

2. Picasion

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

    Помимо основного сервиса есть еще три:
  • Создание блестящих GIF
  • Создание аватарок
  • Изменение размера изображения

3. Gickr

Как и два предыдущих сервиса Gickr для создания анимации использует от 3 до 10 изображений. Также этот сервис позволяет не только создавать анимации различных размеров, но и с различными скоростями (до 10 секунд). Присутствует возможность импортировать изображения с сайтом Flickr и Picasa.

4. MakeaGIF

Makeagif представляет собой еще более упрощенный сервис для создания анимаций, чем рассмотренные предыдущие. Почти по центру находится большая кнопка с текстом «add pictures», с помощью которой можно загрузить необходимые изображения. Для того чтобы загрузить сразу несколько изображений необходимо удержить клавишу CTRL и выделять нужные.

    Плюс к этому сервису есть еще:
  • Создание GIF из роликов Youtube
  • GIF-ки с помощью веб-камеры
  • Преобразование видео в анимацию GIF

5. GIFMaker.me

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

6. ImgFlip

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

7. GIFPal

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

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

Для того чтобы «оживить» картинку, включите лентуАнимация - именно на ней собраны все инструменты для работы с движением.

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

Все эффекты в PowerPoint разбиты на четыре группы:

Вход - эффекты, связанные с появлением элемента на экране. Объ­екты могут постепенно проявляться на экране, «вылетать» на слайд сбоку или внезапно появляться на экране.

Выделение - уменьшение или увеличение размеров объекта, измене­ние цвета или вращение объекта вокруг своего центра.

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

Пути перемещения - движение элемента по определенной траектории (вверх, вниз, вправо, влево или по траекториям в виде звезды или круга).

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

Любой эффект может использоваться отдельно или в сочетании с другими эффектами. Например, сочетая эффект входаВылет и эффект выделенияИзменение размера, можно сделать так, что строка текста нач­нет появляться на экране с левой стороны, одновременно увеличиваясь в размере.

Все эти изменения происходят не одновременно, а в заданном вами порядке (последовательность обозначается номерами (тегами), кото­рые появляются рядом с каждым элементом). Тег отображается только в обычном режиме при выборе вкладкиАнимация.

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

Чтобы открытьОбласть анимации выберите пункт с таким же названи­ем на вкладкеАнимация в группеРасширенная анимация.

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

Временные шкалы показывают длительность эффектов.

Значками представлен тип эффекта анимации. В данном примере это эффектВход.

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

Выберите элемент списка, чтобы увидеть значок меню (стрелка вниз), а затем щелкните значок, чтобы открыть меню.

С помощью этого меню можно настроить начало анимации:

Запускать щелчком - эффект анимации начинается по щелчку в слай­де.

Запускать вместе с предыдущим - эффект анимации воспроизводится вместе с предыдущим эффектом. Этот параметр объединяет воспро­изведение нескольких эффектов.

Запускать после предыдущего - эффект анимации начинается сразу по­сле окончаниявоспроизведения предыдущего эффекта из списка.

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

А теперь самое главное: для каждого элемента вы можете назначить не один, а сразу несколько эффектов. При этом они не обязательно должны следовать друг за другом, а могут быть разделены значительными проме­жутками времени. Скажем, надпись может «прилететь» на экран в начале демонстрации, а в конце - точно таким же образом «вылететь» с него.

Можно еще усложнить задачу: создать НЕСКОЛЬКО видов пример­но одинаковых элементов (например, несколько видов рамки с текстом реплики) и наложить их друг на друга. Работай мы в обычном графи­ческом редакторе - получилась бы каша. Но с помощью спецэффектов мы можем разделить эти элементы во времени. Исчезнет один - и на его месте тут же появится другой.

Вот так с помощью спецэффектов вы можете создать целое шоу из одного-единственного слайда.

Для того чтобы несколько элементов презентации имели одинако­вые эффекты анимации, не нужно монотонно повторять одни и те же операции, стараясь ничего не перепутать и не забыть - PowerPoint позволяет копировать анимацию по образцу подобно тому, как с помо­щью форматирования по образцу копируется форматирование текста. Благодаря анимации по образцу можно скопировать анимацию из одно­го объекта или слайда и вставить форматирование в другой объект или слайд, в несколько слайдов или в образец слайдов, который влияет на все слайды. Можно даже скопировать анимацию из одной презентации в другую.

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

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

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

Когда вы загрузили фотографии, и выбрали нужный анимационный шаблон и довольны результатом, что бы сформировать и сохранить полученную анимацию нажмите кнопку “Готово". Формирование анимации требует немного времени, подождите, после приложение даст вам возможность сохранить гиф-анимацию на диск. Надеюсь вам понравиться наше приложение и вы зайдете еще на сайт создать прикольную GIF анимацию. Если у вас возникли вопросы или пожелания по работе приложения пишите в комментариях (пока только для пользователей vk.ru и facebook.com), либо в разделе "Отзывы и комментарии" (см. внизу справа).

В этом Photoshop уроке вы узнаете, как на изображение добавить красивый, сказочный анимированный эффект.

Анимированный эффект – результат:

В качестве основы я буду использовать такую , где пошагово расписано, как её создавать. Итак, приступим!

Откройте Photoshop и создайте в нём новый документ размером 800 на 600 пикселей.

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

Кликните по ней правой кнопкой мыши и выберите команду Создать дубликат группы.

Теперь мы можем приступить к созданию нашей анимации. Для начала откройте панель анимации, перейдя в меню Window > Animation (Окно - Анимация).

В результате откроется такая шкала времени для создания анимации.

Здесь необходимо перейти к кадрам, для этого нажмите на кнопку Convert to Frame Animation (Преобразовать в покадровую анимацию).

Теперь мы можем работать с кадрами. Существует несколько способов создания анимации. Таким образом выберите первый кадр и кликните по значку Duplicates selected frames (Создание копии выделенных кадров) в нижней части шкалы времени.

Начинается самое интересное. Откройте группу glitter, которую мы недавно продублировали. Выберите первый слой и переместите его содержимое немного вниз.

Проделайте то же самое с остальными слоями этой группы. Только не перемещайте их слишком далеко от предыдущего перемещения.

Далее кликните по значку Tweens (Создание промежуточных кадров), который так же находится в нижней части шкалы времени. В открывшемся окне установите значение 50 для опции Frames to Add (Добавить кадров). Таким образом, у нас получилась хорошая плавная анимация.

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

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

Снова создадим промежуточные кадры. Нажмите на кнопку Tweens (Создание промежуточных кадров), в открывшемся окне установите 30 кадров.

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

Так же вы можете выбрать, сколько раз нужно воспроизвести анимацию. Здесь я выбрал Forever (Постоянно).

Теперь вы можете воспроизвести анимацию и проверить, всё ли в порядке. Сначала нажмите на значок «Преобразовать в шкалу времени видео», а затем на Play (Воспроизвести).

Если вас устраивает, как работает анимация, то сохраните её, для этого перейдите во вкладку File > Save for Web & Devices (Файл – Сохранить для Web и устройств) или нажмите комбинацию клавиш Ctrl + Alt + Shift + S. Для сохранения анимации установите формат GIF.

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

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

Вот одна из анимашек которую я сделала в PixMix за 5 минут

Как начать пользоваться онлайн фоторедактором PixMix

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

Картиночки анимашки, которые вы будете размещать на картинке — не двигаются и не уменьшаются, они просто замостятся, то есть рядами поместятся на фоне. И чтобы оставить одну или несколько в нужных местах, вам надо будет просто подтереть их инструментом «Стирательная резинка».

Вы можете написать блестящий или однотонный текст с обводкой на своём анимированном шедевре. Для этого надо кликнуть на букву «T» (жёлтая стрелочка). Написать текст (синяя стрелка). Наверху выбрать стиль шрифта (Бирюзовая стрела) и обводку (сиреневая) или без обводки (красная).

Выбрать чернила слева (то есть заливку текста), когда вы нажимаете на текст в онлайн фоторедакторе автоматически выставляется раздел «Чернила»

Жмите на слово «Хорошо» и увидите текст на своей анимационной картинке.

Вокруг текста вы увидите прямоугольную рамку и инструменты в каждом углу этой рамки:

  1. Крестик – удалить
  2. Стрелочка с двумя наконечниками – сделать надпись больше или меньше
  3. Стрелочка закруглённая – наклонить в одну, либо в другую сторону
  4. Прямоугольник в кружке – размножение текста

Вы можете менять «чернила», обводку и стиль текста, не меняя самого текста. Нажимать «Хорошо» и смотреть что у вас получится.

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

Там же вы можете выбрать скорость анимации. По умолчанию там выставлена средняя.

И в заключении надо нажать на зелёную кнопку «Реестр».

После этого фоторедактор PicMix сгенерирует вашу блестящую анимированную картинку. И под своей анимационной картинкой вы увидите вот такие функции:

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

Марки вы можете так же добавить в избранное в разделе STAMPS на главном меню сайта ПикМикс.

Когда нас перекинет на другую страницу — нажимаем на слова «Версия без логотипа»

И наша анимированная картинка открывается в новом окне.

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

Скорее всего на Фейсбуке картинка будет прочитана не сразу, а сначала появится вот такая публикация

Не спешите нажимать на слово «Опубликовать». Обновите страницу и поставьте ссылку туда ещё раз. Если опять появится то же самое, то опять обновите страницу. И только когда появится ваша красавица анимированная картинка, кликайте на слово «Опубликовать».

Красиво смотрится анимированная картинка на Фейсбуке. Гугл+ и Одноклассниках. А вот ВКонтакте картинка получается маленькая и чтобы увидеть анимашку во всей красе надо кликать на неё. Мне это не очень нравится, если честно.

А ещё в разделе «Мой PicMix» вы можете установить аватар для вашей учётной записи в качестве любой, из созданных вами Gif картинок, для этого сервиса.

Теперь вы сможете создавать потрясающие анимационные картинки в онлайн фоторедакторе PicMix и выкладывать их в социальных сетях.

А если вам не слишком то понятны скриншоты и объяснения в моей статье, то предлагаю посмотреть видеоурок



Есть вопросы?

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: