У нас в InVision, GIF анимации используются не для баловства - они играют важную роль с точки зрения маркетинга и обучения. Поэтому мы даже пытались использовать их на нашей главной странице вместо анимаций, сделанных с помощью кода.
В конце концов люди начали спрашивать нас: «Как вы создаете GIF анимации?». Пришло время раскрыть секрет.
Совет: Если ScreenFlow или After Effects вам не по карману, то создайте анимацию в Keynote, и экспортируйте ее как видео. Наконец-то, хоть какое-то применение этой функции в Keynote.
Если это не поможет, попробуйте заново импортировать видео, но на этот раз выберите параметр Limit To Every 2 Frames. Это должно значительно уменьшить размер файла.
Совет: Если ваша анимация состоит из более 150 кадров, то возникнут проблемы при попытках уменьшить размер файла.
*«Потери» (Lossy) - допустимый уровень потери графической информации в растровом файле, позволяющий уменьшить файловый размер изображения
От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!
Ранее на сайте мы рассматривали сторонние , однако большинство из них запросто может заменить обычный Фотошоп. Анимированные GIF файлы с его помощью делаются достаточно легко и быстро. Они, как правило, состоят из нескольких изображений (кадров), которые при пошаговой смене и образуют финальный результат. Сегодня постараемся максимально детально рассмотреть данный вопрос от А до Я:
Скриншоты ниже представлены из Photoshop СС, но работа с GIF анимацией в CS6 и других версиях программы плюс-минус аналогична. Возможно, визуально инструменты будут немного отличаться, но в целом, принцип и алгоритм действий похожие. В качестве примера рассмотрим тривиальную задачу как создать GIF анимацию в Фотошопе из фотографий, сменяющих друг друга. Недавно с помощью этого руководства сделал гифку о своих приключениях для итогового поста за 2016 год в персональном блоге.
Процесс занял буквально минут 5-10. Тут важно просто внимательно выполнять все шаги. В конце поста найдете англоязычный видеоурок по данной теме.
Добавление изображений GIF анимации в Photoshop
Первым делом нужно загрузить в графический редактор все картинки/фото, которые будут участвовать в анимации. Добавьте их в один проект разными слоями — этот будут кадры для результирующего GIF файла. Проверьте размеры картинок и их отображение чтобы все было как вам нужно. Слои можно скрывать (с помощью иконки глаза слева от слоя) дабы просматривать все объекты.
В центре данной панели есть выпадающий список, где нужно выбрать вариант «Create Frame Animation» и кликнуть по кнопке. В результате этого действия Timeline немного преобразится, и вы должны увидеть в качестве первого кадра картинку из самого верхнего слоя.
На следующем шаге выделяете все слои в проекте (кликаете по ним удерживая клавишу Ctrl). После этого открываете контекстное меню в правом верхнем углу окна Timeline и по выбираете «Make Frames From Layers».
Из всех видимых и выделенных слоев Adobe Photoshop создаст кадры анимированного GIF. В результате увидите их в панели Timeline.
Настройки GIF анимации в Фотошопе
Здесь вам нужно будет указать 2 вещи: продолжительность отображения разных кадров + число повторений гифки. Начнем с первого. Под каждым объектом-картинкой в Timeline найдете время показа и стрелочку вниз. Кликаете по ним и во всплывающем меню выбираете длительность карда.
Элементам можно указывать разное время либо задать параметр одновременно для нескольких из них (совместное выделение как и в слоях — с помощью Ctrl).
Чтобы «зациклить» GIF в Фотошопе при создании анимации выбираете значение Forever в соответствующей настройке как показано на скриншоте ниже.
Тамже есть возможность указать любое нужное вам число повторений. Рядом находится кнопка Play, позволяющая проиграть анимированный GIF и посмотреть как будет выглядеть итоговый результат.
Сохранение GIF анимации в Фотошоп
В финальной части нашего руководства рассмотрим как правильно сохранить GIF анимацию в Фотошопе. Для этой цели используется знакомый всем инструмент Save for Web, однако в последних версиях Adobe Photoshop СС он располагается в новом месте меню (File — Export). К счастью Alt + Shift + Ctrl + S все еще работает.
В открывшемся окне настроек надо выбрать формат GIF, а также убедиться, что настройка Looping Options установлена в Forever. В нижнем правом углу окна есть возможность запустить созданный вами анимированный GIF в Photoshop для предпросмотра.
Если все функционирует так, как нужно, кликаете Save и сохраняете файл на локальном компьютере. Чтобы проверить работоспособность GIF требуется открывать его в браузере, т.к. встроенный просмотрщик Windows анимацию не проигрывает.
Кстати вы также легко можете экспортировать ваш проект в видео формат. Порядок действий аналогичный как при сохранении GIF анимации, но в Фотошоп меню выбираете пункт File — Export — Render Video.
В открывшемся окне будут разные настройки видео, но ничего дополнительно менять не нужно, просто кликаете по кнопке Render. В итоге получите mp4 файл со слайдшоу фотографий/изображений.
Напоследок предлагаем глянуть англоязычный видеоурок про создание анимированных GIF в Photoshop. Алгоритм работы там такой же, как и в статье, но возможно, вам будет проще воспринимать информацию по видео.
Если у вас остались еще какие-то вопросы о том как сделать GIF анимацию в Фотошопе или есть дополнения, пишите в комментариях.
В статье мы рассмотрим 10 бесплатных, а также наиболее интересных онлайн-сервисов по созданию GIF-анимации.
Каждый представленный сайт отличается своими наворотами.
Одни просты и минималистичны, другие имеют расширенный функционал настроек и эффектов, третьи – со своими особенностями.
В конце статьи приведена таблица с краткими характеристиками каждого инструмента.
Читайте также: Создать коллаж из фотографий онлайн - ТОП-15 сервисов
Сервис | Русский язык | Исходный файл | Удобство | Функциональность |
---|---|---|---|---|
– | Видео с компьютера, Youtube, Instagram | + | + | |
– | Изображения с компьютера, видео с Youtube | – | – | |
MiniMultik |
+ | Изображения с компьютера, из интернета, с веб-камеры | – | + |
– | Изображения с компьютера | + | – | |
Mothereffing AnimatedGif |
– | Изображения с компьютера | + | – |
MakeAGif |
– | Видео с компьютера, Youtube, Facebook, изображения с компьютера, веб-камеры | + | – |
– | Изображения с компьютера, видео с компьютера и интернета | – | – | |
Picasion |
+ | Изображения с компьютера | – | – |
– | Изображения и видео с компьютера и интернета | + | + | |
+ | Изображения и видео с компьютера | + | – |
Читайте также: Уменьшаем размер изображения в формате JPG: ТОП-5 Простых простых способов
Gifs.com – представляет собой сервис видеохостинга Youtube. Содержит много опций, позволяющих создавать разнообразные гифки.
Обратной стороной такой многофункциональности, вкупе с англоязычным интерфейсом, может стать сложность для освоения новичком.
Материалом для анимации может служить практически любой Gif-файл или видео, загруженное с компьютера, перенесенное Youtube, Instagram, Vine и других ресурсов.
Видеохостинг сам перенаправит вас на сайт Gifs.com и подготовит выбранное видео для работы.
Как только видео полностью загрузится, слева от него появится меню со всеми параметрами. С помощью него можно добавить в Gif-ку надпись, понравившиеся стикеры, графические фильтры и многое другое.
Для того чтобы выбрать интересующий вас отрезок видео выделите его на временной шкале, расположенной внизу экрана.
После этого под шкалой появится дополнительные две строки: START TIME и END TIME, где можно подкорректировать время отмеренного участка.
Временная шкала
При нажатии в меню на каждый новый эффект появляется строка под шкалой времени с дополнительными настройками. Подобная строка позволяет регулировать время появления спецэффекта.
Кнопка Create Gif справа вверху переправит вас на страницу, где можно будет вести название гифки. Для того чтобы установить размер анимации и скачать ее необходимо зарегистрироваться на сайте Gifs.com.
На сайтЧитайте также:
Данный сервис позволяет за пару кликов сделать простое Gif-изображение. Незнание языка совсем не помешает процессу творчества, настолько там все понятно. Сайт поддерживает работу с видео из Youtube и с картинками, загруженными с компьютера.
Среди четырех инструментов присутствует функция добавления эффектов Gif effects. Но эффекты выложены в готовом виде и применимы только к статичным изображениям, вставить их в Gif уже не получится. Есть и эффект Reverse Gif – воспроизведение наоборот.
На сайтДля создания Гифки из картинок воспользуемся инструментом Gif from pictures на главной странице:
Для создания гифки из видео выбираем в меню пункт Youtube to Gif:
Читайте также: ТОП-10 Сервисов и программ для бесплатного онлайн распознавания текста
MiniMultik – российский инструмент по созданию анимации из графических файлов. Обладает специфическим набором функций, который не встретишь на большинстве других сервисов.
Пользователю доступна настройка каждого кадра по отдельности, рисование и скругление углов изображения. Для удобства на сайте приведено подробное описание по каждому шагу.
Недостатками сервиса можно назвать устаревший дизайн сайта, не столь удобный интерфейс и обилие рекламы (если у вас установлен блокировщик рекламы, то его придется отключить).
На сайтСоздание Gif на MiniMultik:
1 Для загрузки файлов на сайт перенесите их в выделенную область. Укажите URL источника, воспользовавшись функцией «Добавить ссылку» под этой областью. Рядом расположена ссылка на создание фотографии через веб-камеру.
Если вы намерены применять единые параметры ко всем картинкам, то не вносите изменений в этой области.
Читайте также: Как определить шрифт по картинке? Лучшие сервисы 2017 года
GifMaker – простой и понятный инструмент с минималистическим внешним видом. Основой для Gif-анимации может служить лишь графические картинки, взятые с компьютера. А процесс создания производится на пару действий.
В разделе, расположенном с правой стороны, пользователю доступно: изменение размера (для удобства добавлена функция: проценты) и скорость смены эпизодов (вплоть до 10 000 миллисекунд).
При нажатии кнопки Create GIF Animation ниже автоматически создаются ссылки для просмотра и скачивания результата.
По сути «гифка» — это изображение, которое объединяет в себе анимацию и рисунок. Главной особенностью гифки является то, что она очень проста в создании. Сегодня мы расскажем Вам о таком явлении Интернета, как гифки и расскажем как их делать.
Что происходит когда собака облизывает лицо
Как вести себя если вас окружают хамы
Как мы писали, создание «гифки» — простой процесс. Сегодня используют специальные онлайн сервисы для создания «гифок». Мы расскажем Вам, как сделать «гифку» из фотографии использовав онлайн сервис:
О чем больше всего сожалеют люди в конце жизни
Преимущества употребления кофе
15 шокирующих пластических операций, завершившихся плачевно
Сегодня «ВКонтакте» самая популярная социальная сеть на просторах стран СНГ. Возможности которые предоставляет «ВКонтакте», давно уже вышли за рамки обычного общения с помощью сети Интернет: можно играть в игры, смотреть видео, слушать музыку и многое другое. Сейчас вы узнаете, как проводить различные манипуляции с гифками Вконтакте.
«Гифки» можно найти на просторах сети Интернет. Если у Вас есть готовая гифка, или которую Вы создали, ее можно вставить в «Вконтакте». Вам будет нужно:
Если Вы нашли в Интернете или на страницах друзей в «Вконтакте» интересные гифки, Вы можете их сохранить для себя и использовать в нужное время. Вам будет нужно:
Возникла задача создать гифки на определенную тему.
Дело в том, что баннеры и тизеры лучше всего работают анимированные. Продажа реального товара проще всего получается если покупатель визуально видит рекламируемые товары. Поэтому лучше всего делать такие баннеры из обзоров нужного товара. Благо в Youtube наверняка найдется не один десяток обзоров на нужный вам товар.
Самый простейший и удобный способ сделать собственные гифки для рекламных целей — это сгенерировать их из видео.
Кстати, это могут быть необязательно рекламные материалы. Очень хорошо работают анимированные GIF-изображения и в оформлении обычных статей. Ведь люди «залипают» в хорошие и интересные гифки. А значит дольше находятся на странице и изучают ее. Что напрямую влияет на , а значит и на
Кстати, это отличный способ оформить статью уникальными изображениями. Простых способов достать в интернете которые не так уж и много. Вот несколько из них: . А использование гифок — это отличная и интересная практика, которая положительно влияент на восприятие контента читателем.
Просто идем в youtube, ищем подходящий ролик, просматриваем, выбираем несколько секунд видео, где показывает нужные нам кадры.
Теперь понадобится сервис. Таких сервисов много, но какие-то из них очень неудобные, какие-то платные. Я перепробовал с пяток разных сервисов, и нашел наиболее удобный, который позволяет выбрать нужный фрагмент с точностью до десятых долей секунды. И таким образом создать четкую анимацию, без лишних кадров. Многие сервисы дают выбрать фрагмент только с помощью ползунков, которыми довольно сложно отрегулировать начало и длительность фрагмента с такой точностью
Сервисы из топа Google показали не самые лучшие инструменты для этого. На первый я вообще не смог загрузить видеоролик, а на втором не смог точно указать нужный фрагмент ползунком.
Указываем нужный фрагмент. Очень удобно, что можно сделать предпросмотр и выбрать нужные кадры с точностью до десятых долей секунды. После предпросмотра анимированного изображения можно изменить границы. И так делать сколько угодно итераций.
Сервис простой и удобный, работает быстро.
Но это еще не все. Ведь не всегда нам подойдет весь фрагмент из видео. Часто нужно его дополнительно обработать — добавить какие-то эффекты, надписи или обрезать GIF. Да те же черные границы, или срезать ватермарк самого сервиса. Данный сервис это не умеет. Благо, есть много других. И опять надо выбирать среди них. Поэтому идем в другой сервис, который позволяет это делать удобно.
Для этого наиболее удобным оказался сервис ezgif.com и его функция обрезки GIF — crop
Здесь просто мышкой выделяем нужную часть анимированной картинки и жмем Crop IT. И опять, нам доступен предпросмотр. Если вариант не устраивает — можно изменить границы. В итоге можно вырезать анимированный баннер любого подходящего формата.
Небольшой мануальчик про то, как можно создать gif-анимацию онлайн, без установки программ. Установить придется только одно маленькое расширения для нашего любимого Google Chrome. А видео для создания гифок будем брать с видеохостинга YouTube.com. Предупреждение: Всех тех, кто при виде названия браузера Chrome начал плеваться, просьба отойти от экрана - статья не для вас.
Для чего все это нужно? Можно просто побаловаться, можно вставлять эти самые гифки к себе в блог, а можно наполнять ими свою страничку в соц сети. Я ради интереса недавно создала gif-анимацию из видео про кошачьи проделки и выложила в тематическую группу на Google+. Результат - картинка набрала около 400 плюсиков и более 80 перепостов менее чем за двое суток.
Люди любят такой контент, почему бы этим не воспользоваться? Если вы блогер и пишете статьи, в которых одними рассказами не отделаешься, а нужно что-то показать, то вы можете снять видео или сделать скринкаст, выложить на Ютуб и сделать гифки из частей видео. Все это дело можно встроить при помощи кода, так что за место на хостинге можно не переживать. Но лучше обо все по порядку.
Как всегда, я люблю немного потянуть резину. Давайте уже начну что ли. Сразу скажу, тестировала я это расширение только с видео YouTube, хотя, по утверждению создателей полезного довеска для браузера, с Vimeo все тоже должно работать. Но вы уж это сами проверяйте если хотите.
Тогда давайте приступим к созданию гиф-анимации.
Сделать это действительно очень просто. Но для начала вам потребуется кое с чем согласиться. Не пугайтесь, вам нужно всего лишь зайти на страницу http://www.youtube.com/html5
и согласиться участвовать в тестировании HTML5-плеера. Если вас что-то не устроит, то в дальнейшем вы всегда сможете зайти и отказаться.
После этой нехитрой манипуляции вам останется скачать расширение для браузера Chrome (оно называется MakeGIF Video Capture) и найти подходящее видео. Вы можете выбрать абсолютно любое видео на YouTube - не важно ваше оно или нет. Выбрали? Тогда нажмите на воспроизведение, а затем нажмите на кнопку расширения в оминбоксе. К сожалению это расширение не может похвастать богатыми настройками и эффектами. Максимум что вам удастся сделать - это настроить качество анимации, максимальное количество кадров (до 1000) и размер картинки. Также вы можете вставить какой-либо простенький текст, а также заставить анимацию проигрываться задом наперед (зачастую так гораздо смешнее и интереснее).
Итак, выбираете нужный момент в видео и нажимаете на старт. В процессе можно нажать на паузу и опустить ненужное. Когда момент, который вы решили запечатлеть, подошел к концу, нажмете на стоп. И не беда, если попадутся лишние кадры. Вы сможете их попросту вырезать.
Если анимация готова, то можно загрузить ее к себе на компьютер или же отправить на онлайн-сервис MakeGif.com. Второй вариант гораздо привлекательнее, потому что для вас открываются дополнительные возможности. Какие? Сейчас расскажу.
Таким образом, при помощи расширения MakeGIF Video Capture и сайта MakeGif.com вы получаете сразу два полезных в работе инструмента для создания gif-анимации онлайн, без установки программ на свой PC. Насколько я знаю, подобных сервисов в Интернете довольно так много. Похвастайтесь, если вдруг знаете что-то получше.