Как сделать гифку из фото? Как сделать GIF анимацию.

Всем привет. Анимация gif — это анимированное видео. Используется для привлечения внимания, в вконтакте используются как приколы. Изначально администрация Вконтакте выступала против добавления gif анимации на сайт. Время идет, популярность анимированных видео в интернете возросла. Чтобы не отставать от «моды» разработчики Вконтакте дали возможность добавлять гифки на стену. У пользователей возник вопрос: как добавить гифку в Вк .

Скачиваете понравившиеся gif изображение себе на компьютер. Возникли трудности или не знаете как скачать гифку? Вот маленькая инструкция из двух шагов.

Как сохранить гифку на компьютер

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

Как загрузить gif Вконтакте

Добавлять gif анимацию надо следующим образом. Входите в раздел меню Документы .

Если его нет, нужно настроить. Жмите шестерёнку возле меню, или в настройках ⇒ Общее ⇒ Настройка пунктов меню .

В разделе Документы жмёте Добавить документ .

Выбираете файл на компьютере. Ограничение по обьёму файла — 200 Мб. После загрузки указываете доступность, метки при необходимости, по которым gif-файл будет доступен в поиске.

Как добавить гифку в Вк на стену

Второй способ добавить gif не предусматривает загрузки на комп. Просто копируете ссылку понравившегося изображения, вставляете в пост и отправить.

Как добавить gif сообщением в вк

Проделав манипуляции, описанные выше, можно отправить gif анимацию сообщением любому собеседнику.

Где найти gif анимацию в Вконтакте

Gif анимацию можно найти на просторах интернета в достаточном количестве. Забейте в поиск — гифки для Вк, прикольные гифки, допустим, и тысячи сайтов выдадут свои предложения. В самом Вконтакте есть сообщества где можно найти гифку: vk.com/best_gif и vk.com/gif_01. Выбираете понравившуюся, добавляйте в документы и делитесь с друзьями.

Создать gif самому

Делится популярными изображениями, конечно классно. Но высшим пилотажем будет делится гифками созданными самим. Вконтакте запустил приложение чтобы можно было сделать гифку из видео онлайн — http://vk.com/gifcreator .

Необходимо выполнить следующие действия:

• загрузить видео в приложение;
• выбрать промежуток видео для редактирования;
• указать размер изображения;
• кликнуть «Создать анимацию»;
• по завершению процедуры нажать «Получить ссылку». Без этого гифка удалится через некоторое время с архива приложения.
• полученной ссылкой можете делится с друзьями, GIF — анимация появится у вас на стене.

Как видите, всё очень просто. Надеюсь, вопрос как добавить гифку в Вк снят.

Отпишитесь в комментариях, пригодилась ли Вам статья.

Желаю удачи!

Собрать GIF из отдельных кадров можно с помощью специальных приложений или универсальных графических редакторов. Рассмотрим доступные варианты.

Способ 1: Easy GIF Animator

Простая и одновременно продвинутая по функционалу программа, позволяющая сделать гифку как из видео, так и из фотографий.

1. Откройте программу. В блоке опций «Мастера создания» щёлкните по пункту «Создать новую анимацию» .



2. Откроется окно «Мастера создания анимации» . В нём нажмите на кнопку «Добавить изображения» .
   
   
   Запустится «Проводник» — используйте его, чтобы открыть каталог с фотографиями, из которых хотите сделать GIF. Добравшись до нужной папки, выделите файлы (удобнее всего это сделать комбинацией CTRL+ЛКМ ) и нажмите «Открыть» .
   
   
   Вернувшись обратно к «Мастеру…» , можете изменить порядок изображений, используя кнопки-стрелки. Для продолжения работы нажимайте «Далее» .



3. Настройте циклы и задержку готовой анимации, затем снова используйте кнопку «Далее» .



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



5. Нажмите «Завершить» .



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



7. Для сохранения результата щёлкните по пункту меню «File» .
   
   
   Далее выберите пункт «Сохранить» .



8. Снова откроется «Проводник» — перейдите в нём директорию, в которой хотите сохранить полученную гифку, введите имя файла и используйте кнопку «Сохранить» .



9. Готово – в выбранной папке появится GIF-анимация.

Использовать Easy GIF Animator очень удобно, но это платная программа с коротким сроком действия пробной версии. Впрочем, для единичного использования подойдёт прекрасно.

Способ 2: GIMP

Свободный графический редактор ГИМП является одним из самых удобных решений для нашей сегодняшней задачи.

Как видим, очень и очень просто, справится даже начинающий пользователь. Единственный недостаток ГИМП – медленно работает с многослойными изображениями и тормозит на слабых компьютерах.

Способ 3: Adobe Photoshop

Самый технически навороченный также имеет в своём составе инструменты для превращения серии фотографий в GIF-анимацию.

Заключение

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

Ранее на сайте мы рассматривали сторонние , однако большинство из них запросто может заменить обычный Фотошоп. Анимированные 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 анимацию в Фотошопе или есть дополнения, пишите в комментариях.

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

Как загрузить гиф с компьютера

И так, если вы сделали либо скачали откуда-нибудь гифку и хотите добавить ее к себе на страницу (стену), для начала ее необходимо загрузить в документы. Для этого заходим на свою страничку и нажимаем на одноименную ссылку в левом меню:

Открывается список наших загруженных файлов. Если их пока нет, то, естественно, списка пока никакого не будет. Нажимаем на кнопочку «Добавить документ», чтобы загрузить его со своего жесткого диска:

Выскакивает окошко с ограничениями, в котором сказано, что файл не должен превышать 200 мб и не нарушать авторские права. Также перечисляются поддерживаемые типы файлов, среди которых интересующий нас gif.

Мы все это читаем и нажимаем на кнопку «Выбрать файл»:

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

Гифка появляется у вас в сохраненных доках и вы теперь можете ее вставлять куда-угодно. Начнем со своей стены.

Как добавить gif на стену вк

Заходим на свою главную страничку, начинаем писать сообщение на стене до того места, пока не нужно будет вставлять анимацию. Далее нажимаем «Еще – Документ». Смотрим на скриншот:

У нас подгружается список наших доков. Напротив нужной гифки нажимаем на кнопку «Прикрепить»:

На стену можно также добавлять гифки не только со своих доков. Их в социальной сети Вконтакте тысячи. Поэтому можно в окошке добавления файла воспользоваться поиском и вбить какое-нибудь слово. Я вбиваю «приколы» и жму «Enter».

У нас находится куча анимашек. Напротив нужной также необходимо нажать кнопочку «Прикрепить»:

После того, как анимация в окошко добавлена, жмем на кнопочку «Отправить»:

Как отправить gif-анимацию сообщением вк

Загружать с компьютера гифки и искать их мы с вами уже научились, теперь рассмотрим, как их отправлять сообщениями.

Находим собеседника, которому хотим отправить анимацию. Пишем сообщение, далее нажимаем «Еще – Документ»:

Выполняем уже знакомую нам процедуру и прикрепляем гифку:

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

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

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

В конце концов люди начали спрашивать нас: «Как вы создаете GIF анимации?». Пришло время раскрыть секрет.

Дизайн GIF изображений

1. Секретный ингредиент

Вот мой небольшой секрет: все мои GIF анимации сначала были видео-файлами. Обычно я использую ScreenFlow , который я кстати также применяю для создания видео наших продуктов. Это простая программа, которая в то же время содержит множество полезных анимационных инструментов.
После того как я сохраняю анимацию как видео файл, я импортирую его в Photoshop через File > Import > Video Frames As Layers.

Совет: Если ScreenFlow или After Effects вам не по карману, то создайте анимацию в Keynote, и экспортируйте ее как видео. Наконец-то, хоть какое-то применение этой функции в Keynote.

2. Меньше цветов = больше веселья

Если вы хотите делать крутые GIF анимации, то нужно с особым трепетом подойти к выбору цвета. Это повлияет не только на размер файла, но и позволит создать более продолжительные анимации с маленьким размером файла. (Для меня маленький - это менее 1MB)

3. Используйте размытие в движении (motion blur), если возможно

Такие программы как ScreenFlow и After Effects позволяют экспортировать видео с применением размытия в движении. Это не только придаст вашей анимации профессиональный вид, но и упростит процесс уменьшения размера файла в Photoshop.

4. Будьте (отчасти) ленивыми

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

Экспорт GIF анимаций

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

5. Удалите кадры-дубликаты

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

Если это не поможет, попробуйте заново импортировать видео, но на этот раз выберите параметр Limit To Every 2 Frames. Это должно значительно уменьшить размер файла.

Совет: Если ваша анимация состоит из более 150 кадров, то возникнут проблемы при попытках уменьшить размер файла.

6. Меньше цветов

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

7. Измените параметр Lossy* (потери)

Если честно, то я даже не знаю, что этот параметр означает. Но я точно знаю, что если вы поставите его на уровне между 1 и 10, то избавитесь от лишних килобайтов без потери качества.

*«Потери» (Lossy) - допустимый уровень потери графической информации в растровом файле, позволяющий уменьшить файловый размер изображения

Ничего не изменилось! Помогите!

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

От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!