Гиф фотоэффекты. Гиф-аппликация. Украшаем фотографии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Способ 1: Gifius

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

Способ 2: Gifpal

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

1. Для начала работы на этом сайте нужно запустить Флеш Плеер: для этого нажмите на соответствующую иконку, которая выглядит следующим образом:



2. Подтвердите намерения использовать Flash Player кнопкой «Разрешить» во всплывающем окне.



3. Щелкните «Get started now!» .



4. Выберите пункт «Start without webcam» , чтобы исключить использование веб-камеры в процессе создания анимации.



5. Кликните по «Select Image» .



6. Добавьте новые картинки в личную библиотеку с помощью кнопки «Add Images» .



7. Выделите необходимые для анимации картинки и нажмите «Открыть» .



8. Теперь нужно добавить картинки в панель управления GIF. Для этого поочерёдно выбираем из библиотеки по одному изображению и подтверждаем выбор кнопкой «Select» .



9. Окончательно переносим файлы в обработку, кликнув на соответствующую иконку фотоаппарата. Выглядит она так:



10. Подберите задержку между кадрами с помощью стрелок. Значение в 1000 ms равно одной секунде.



11. Щелкните «Make a GIF» .



12. Загрузите готовый файл с помощью кнопки «Download GIF» .



13. Введите имя для вашей работы и кликните «Сохранить» в этом же окне.

Преобразование видео в анимацию

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

Способ 1: Videotogiflab

Сайт, предназначенный специально для создания анимации с видеороликов форматов MP4, OGG, WEBM, OGV. Большим плюсом является наличие возможности регулировать качество выходного файла и просмотр сведений о размере подготовленного GIF.

1. Начинаем работу с нажатия кнопки «Выберите файл» на главной странице сайта.
2. Выделите видеоролик для преобразования и подтвердите выбор, кликнув «Открыть» .



3. Преобразуйте видеозапись в GIF, щелкнув «Start Recording» .



4. Если хотите сделать анимацию меньше загруженного файла по продолжительности, кликните на нужном моменте «Stop Recording / Create GIF» для прекращения процесса преобразования.



Когда всё будет готово, сервис покажет информацию о размере полученного файла.

5. Отрегулируйте количество кадров в секунду (FPS) с помощью ползунка ниже. Чем больше значение, тем лучше будет качество.



6. Скачайте готовый файл путем нажатия кнопки «Сохранить анимацию» .

Способ 2: Convertio

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

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

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

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

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

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

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

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

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

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

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


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

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