Наверняка все знают о небольших анимированных картинках, иначе говоря о 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-ок: яркость, контрастность и насыщенность.

У нас в 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 анимация сделает акцент на одном аспекте.

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

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

On-line hypah.

Гиф-аппликация на Ваше фото или картинку

Жмем на папочку со стрелкой, выбираем на своем компьютере фото, которое хотим "украсить".
У меня это - фото Милен Фармер, французской певицы и актрисы.
Не всегда фото загружается быстро, иногда приходится немного подождать.
И вот, фото загрузилось.

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

Наигрались с лучами?
Тогда переходим к следующему инструменту.

Баллончик. Как любой обычный баллончик с краской, он способен "пшикнуть" один раз, или, можно, нажав на него, провести любую замысловатую линию. Только здесь мы проводим линию не краской, а разноцветными, мерцающими фигурками.
Эти фигурки вы можете выбрать из выпадающего списка.

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

Украшайте свое фото выбранными мерцающими фигурками и переходите к следующему инструменту.

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

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

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

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

Инструмент Снежинка не создает никакого яркого эффекта, просто красивые снежинки кружатся вокруг своей оси. Форму снежинки выбираете игровыми костями, а другие параметры - рычажками, показанными на скриншоте красными стрелками.

Если вы решили, что уже достаточно украсили свою картинку, жмите на зеленую галочку в правом верхнем углу. Она выделена стрелкой на скриншоте.

Программа начинает обрабатывать и "собирать" вашу картинку. Ждем.

Появляется такая картинка:

Жмем на конвертик со стрелочкой и сохраняем свою картинку на компьютер.
Любуемся результатом:

Вот и все!
Попробуйте. У вас обязательно получится.
Результат можно выложить здесь в комментах. Похвастаться и сравнить с другими работами.))
Здесь же жду вопросы по работе с программой.
Если у вас что-то не получается, спрашивайте в комментах, будем разбираться.

Автор Юлия
Далее - слова автора
Когда делаешь в фотошопе коллаж или открытку, иногда не хочется самому делать анимацию. Проще найти готовую блестяшку или анимацию, такие картинки сохраняются в формате gif, обычную статичную картинку мы сохраняем в формате ipeg, ipg. И сейчас я расскажу, как можно совместить эти два формата. Те, кто давно занимается фотошопом отлично знают, как это делать. Мой урок для начинающих.

Итак, урок - Как наложить gif изображение на простую картинку в фотошопе.

Открываем в фотошопе картинку, на которую хотели бы перенести gif изображение. Я взяла картинку с цветами. Не забываем снять замочек в слоях, кликаем 2 раза левой кнопкой мыши по замочку и в открывшемся окне нажимаем ОК.

Я нашла у себя бабочку в формате gif, открываю картинку в фотошопе.

Мы видим, что у картинки бабочки очень много слоев, чтобы не разрушить анимацию, мы не сможем перетащить бабочку, стоя на одном из слоев. Значит нам нужно перетащить все слои сразу. Встаем на первый слой, он должен быть у нас активным, нажимаем на клавиатуре клавишу Shift и щелкаем левой кнопкой мыши по верхнему слою. Что мы видим?

У нас все слои синего цвета, т.е. активные. Инструментом перемещение мы перетаскиваем бабочку на картинку с цветами. Щелкаем левой кнопкой мыши по первому слою бабочки и теперь у нас активный только 1 слой анимации.

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

А далее мы делаем так: 1 слой в анимации и глазик открыт на 1 слое в панели слоев. Добавляем слой в анимации, нажав на листок внизу, у нас 2 слой анимации - закрываем глазик на 1 слое в слоях и открываем глазик на 2 слое, добавляем слой в анимации - закрываем глазик на 2 слое и открываем на 3-м и точно так же продолжаем на всех слоях, в анимации добавляем слой, в слоях на предыдущем слое закрываем глазик, на новом открываем. Думаю принцип понятен.

Все сделали, запускаете анимацию и смотрите, если все нормально, сохраняете для Web. У меня получилось вот так


Наш урок - Как наложить gif изображение на простую картинку в фотошопе закончен. Вы теперь умеете перемещать картинки в формате gif на картинки в формате ipeg, ipg. Если возникли какие-то трудности, спрашивайте.

И спасибо, что заглянули ко мне!

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