Как наложить гифку на фото
Содержание
- Как начать пользоваться онлайн фоторедактором PixMix
- Теперь об инструментах онлайн фоторедактора справа.
- Как в Photoshop создать анимированное GIF-изображение
- Шаг 1: Загрузка изображений в Photoshop
- Шаг 2: Откройте окно «Временной шкалы»
- Шаг 3: В окне «Шкала времени» выберите «Создать анимацию кадра»
- Шаг 4: Создайте новый слой для каждого нового кадра
- Шаг 5: Нажмите на ту же иконку меню и выберите пункт «Создать кадры из слоев»
- Шаг 6: Под каждым кадром задайте время отображения до перехода к следующему кадру
- Шаг 7: В нижней части панели инструментов выберите, сколько раз должен проигрываться цикл
- Шаг 8: Просмотрите GIF, нажав на иконку воспроизведения
- Шаг 9: Сохраните GIF, чтобы использовать его онлайн
- Как использовать GIF в маркетинге
- 1) В социальных медиа
- 2) В письмах
- 3) В блоге
- Краткое описание приложения для создания GIF анимации
- Возможно это вас заинтересует
Любите анимационные картинки-блестяшки, а фотошоп в данный момент недоступен? Вам поможет онлайн сервис, который умеет создавать сложные живые картинки с анимированными элементами (там они называются марки или штампы). Более того, вы сможете туда закачивать свои детали для анимированных картинок: блестяшки, анимашки и просто красивые картинки.
Вот одна из анимашек которую я сделала в PixMix за 5 минут
Как начать пользоваться онлайн фоторедактором PixMix
Итак, идём на сервис фоторедактора Picmix и регистрируемся там – это для того, чтобы у вас было больше возможностей. Например, сохранять свои творения прямо в PicMix и делиться с друзьями. А ещё сервис позволяет убирать с картинок свой логотип абсолютно бесплатно! В отличии от других фоторедакторов, которые либо не дают убирать свой логотип с картинки, либо делают это за деньги.
(Чтобы сервис у вас работал в браузере нужно установить Flash Player, который скорее всего у вас уже установлен, а если нет, то браузер об это вам сообщит и отправит по ссылке на сайт, где можно это сделать)
В правом верхнем углу надо нажать на надпись «Присоединиться к нам»
После того, как заполните все нужные строчки, и подтвердите регистрацию нажатием, вас тут же пригласят войти. Жмите на зелёную кнопку «Создать PICMIX» и жмите на кнопку «Фон» в левом верхнем углу.
Выбирайте на компьютере картинку и жмите «Открыть».
Наверху вы увидите 4 кнопочки с эффектами
- Зеркальное отображение
- Сепия
- Негатив
- Чёрно-белый эффект
Так же слева там есть инструменты:
- Заливка – заливает фон, но по-моему удобнее пользоваться кисточкой, которая размещена под значком заливки. Если нужен фон, то просто сделайте по-больше размер.
- Рука – предназначена для того, чтобы двигать gif изображения, которые мы будем добавлять на наш фон. Но она почему то не работает.
- Текст – это понятно, будем писать красивые надписи.
- Стирательная резинка – убирает лишние детали с будущей красивой анимашки.
- Уменьшение картинки
- Увеличение изображения
- Красный крестик – очистить всё, кроме фона
- Сохранить созданную анимационную картинку
Теперь об инструментах онлайн фоторедактора справа.
Там размещены так называемые марки или штампы. Так называются на сервисе PicMix анимированные детали, которые мы будем добавлять на фон и таким образом оживлять наши картинки.
Марки разделены по разделам, в выпадающем меню написаны названия на французском языке. Вы можете переводить названия и выбирать нужные наборы штампов.
А так же вы можете импортировать штамп со своего компьютера. Для этого надо нажать «Импорт штампов» в самом низу. Подробнее о марках читайте ниже.
После того как вы загрузили фон будущей живой картинки. Выбирайте штамп, кликайте на него (жёлтая стрелочка) и жмите на кисть (стрелка зелёная) . После того как кликните мышкой на картинку у вас там образуется кружок – это кисть. Вы можете увеличивать или уменьшать размер путём передвигания ползунка наверху (синяя рамочка) .
Картиночки анимашки, которые вы будете размещать на картинке — не двигаются и не уменьшаются, они просто замостятся, то есть рядами поместятся на фоне. И чтобы оставить одну или несколько в нужных местах, вам надо будет просто подтереть их инструментом «Стирательная резинка».
Вы можете написать блестящий или однотонный текст с обводкой на своём анимированном шедевре. Для этого надо кликнуть на букву «T» (жёлтая стрелочка). Написать текст (синяя стрелка). Наверху выбрать стиль шрифта (Бирюзовая стрела) и обводку (сиреневая) или без обводки (красная).
Выбрать чернила слева (то есть заливку текста), когда вы нажимаете на текст в онлайн фоторедакторе автоматически выставляется раздел «Чернила»
Жмите на слово «Хорошо» и увидите текст на своей анимационной картинке.
Вокруг текста вы увидите прямоугольную рамку и инструменты в каждом углу этой рамки:
- Крестик – удалить
- Стрелочка с двумя наконечниками – сделать надпись больше или меньше
- Стрелочка закруглённая – наклонить в одну, либо в другую сторону
- Прямоугольник в кружке – размножение текста
Вы можете менять «чернила», обводку и стиль текста, не меняя самого текста. Нажимать «Хорошо» и смотреть что у вас получится.
А после того как вы создадите свой шедевр – нужно нажать на зелёную галочку внизу слева от картинки. Когда сервис сгенерирует картинку, вас перекинет на страницу где нужно ввести название картинки. Описание – не обязательно.
Там же вы можете выбрать скорость анимации. По умолчанию там выставлена средняя.
А ещё вам надо нажать на чикбокс «Переслать этот PicMix». Иначе вы не сможете поделиться своей gif анимацией в соцсетях прямо с сервисе фоторедактора, не закачивая их на другой web ресурс (свой сайт например).
И в заключении надо нажать на зелёную кнопку «Реестр».
После этого фоторедактор PicMix сгенерирует вашу блестящую анимированную картинку. И под своей анимационной картинкой вы увидите вот такие функции:
- Поделиться в соцсети фейсбук
- Скачать эту картинку к себе на компьютер
В этом случае картинка сохранится к вам на компьютер и появится в социальной сети Facebook с логотипом PicMix. Как воспользоваться созданной анимированной картинкой без логотипа, читайте здесь.
- Почта Мой PicMix – здесь можно менять скорость анимации
- Экспорт в сайте – здесь вам предоставят коды для установки на web ресурс
- Добавить в избранное
А ещё вы сможете добавить использованные в этой анимационной картинке блестяшки к себе в избранное. И они у вас появятся в разделе «Мои любимые марки» и вы их увидите когда начнёте создавать новую gif картинку. Для этого наводим на марку мышку и в выпавшем окне кликаем на слова «Добавить в избранное».
Марки вы можете так же добавить в избранное в разделе STAMPS на главном меню сайта ПикМикс.
Но вы ведь наверняка хотите поделиться и скачать на компьютер свой анимированный шедевр на компьютер без логотипа PicMix. Поэтому мы идём в раздел меню сайта «Мой счёт»
Далее «Мой PicMix»
Когда нас перекинет на другую страницу — нажимаем на слова «Версия без логотипа»
И наша анимированная картинка открывается в новом окне.
Вы можете её скачать на компьютер. Для этого кликаем по анимашке правой кнопкой мыши и в выпадающем окне выбираем «Сохранить картинку как».
Или поделиться gif картинкой в социальных сетях. Для этого надо скопировать её URL и поделиться им в социальной сети.
Скорее всего на Фейсбуке картинка будет прочитана не сразу, а сначала появится вот такая публикация
Не спешите нажимать на слово «Опубликовать». Обновите страницу и поставьте ссылку туда ещё раз. Если опять появится то же самое, то опять обновите страницу. И только когда появится ваша красавица анимированная картинка, кликайте на слово «Опубликовать».
Красиво смотрится анимированная картинка на Фейсбуке. Гугл+ и Одноклассниках. А вот ВКонтакте картинка получается маленькая и чтобы увидеть анимашку во всей красе надо кликать на неё. Мне это не очень нравится, если честно.
А ещё в разделе «Мой PicMix» вы можете установить аватар для вашей учётной записи в качестве любой, из созданных вами Gif картинок, для этого сервиса.
Теперь вы сможете создавать потрясающие анимационные картинки в онлайн фоторедакторе PicMix и выкладывать их в социальных сетях.
А если вам не слишком то понятны скриншоты и объяснения в моей статье, то предлагаю посмотреть видеоурок
Анимированные GIF помогут привлечь внимание посетителей и могут оказать на них серьезное эмоциональное воздействие. Можно поместить в движущиеся картинки содержимое, которое будет пробуждать пользователей поделиться ею.
GIF несложно создать. Если у вас есть Photoshop и несколько минут времени, можно сделать анимированную GIF очень быстро. В этом руководстве я буду использовать версию Photoshop Creative Cloud 2015 , но и в других версиях программы нужно выполнить похожие действия.
Как в Photoshop создать анимированное GIF-изображение
Вот пример анимированного GIF-изображения , которое можно создать, руководствуясь этой статьей.
Шаг 1: Загрузка изображений в Photoshop
Если у вас уже есть созданные изображения, разместите их в отдельной папке. Чтобы загрузить их в Photoshop , перейдите в Файл> Сценарии> Загрузить файлы в стек :
Затем нажмите « Обзор » и выберите файлы, которые нужно использовать в GIF , а затем нажмите кнопку « ОК ».
Photoshop создаст отдельный слой для каждого изображения, которое вы добавили. Перед тем, как сделать движущуюся картинку, перейдите ко второму шагу.
Если же у вас нет готовых изображений, разместите каждый кадр анимированного GIF как отдельный слой. Чтобы добавить новый слой, перейдите в Слои> Новый> Слой :
Чтобы переименовать слой, перейдите к палитре в правом нижнем углу экрана, дважды кликните по названию слоя по умолчанию и введите новое имя:
Совет: Если хотите объединить слои так, чтобы они выводились в одном кадре GIF, включите видимость для слоев, которые необходимо объединить. Для этого нажмите на иконку «глаза» слева, чтобы они были активны только для слоев, которые необходимо объединить. Затем нажмите Shift + Ctrl + Alt + E . Photoshop создаст новый слой, содержащий объединенный контент для движущейся картинки .
Шаг 2: Откройте окно «Временной шкалы»
Перейдите в Окно> Шкала времени . Она позволяет включать и выключать отдельные слои для различных периодов времени, превращая статическое изображение в анимированное:
Окно временной шкалы появится в нижней части экрана. Оно выглядит следующим образом:
Шаг 3: В окне «Шкала времени» выберите «Создать анимацию кадра»
Выберите это значение из выпадающего меню, но потом обязательно нажмите на него для активации движущихся картинок:
Теперь временная шкала должна выглядеть примерно так:
Шаг 4: Создайте новый слой для каждого нового кадра
Для этого сначала выберите все слои: Выделение> Все слои .
Затем нажмите на иконку меню в правой части экрана временной шкалы:
Из появившегося выпадающего меню выберите пункт « Создать новый слой для каждого нового кадра »:
Шаг 5: Нажмите на ту же иконку меню и выберите пункт «Создать кадры из слоев»
Каждый слой превратится в кадр GIF :
Шаг 6: Под каждым кадром задайте время отображения до перехода к следующему кадру
Перед тем, как создать движущуюся картинку, нажмите на время под каждым кадром и выберите, как долго они должны отображаться. В нашем случае мы выбрали 0,5 сек. на кадр:
Шаг 7: В нижней части панели инструментов выберите, сколько раз должен проигрываться цикл
По умолчанию цикл будет проигрываться « Один раз », но можно задать столько раз, сколько нужно. Нажмите « Другое », если нужно указать произвольное число повторений:
Шаг 8: Просмотрите GIF, нажав на иконку воспроизведения
Шаг 9: Сохраните GIF, чтобы использовать его онлайн
Как сохранить движущуюся картинку: перейдите в Файл> Сохранить для Web :
Затем выберите в выпадающем меню « Набор » тип GIF-файла , который вам нужен. Если у вас есть GIF с градиентом, выберите « GIF с дизерингом », чтобы предотвратить появление цветных полос. Если в изображении используется много сплошных цветов, можно выбрать опцию без дизеринга.
Число рядом с GIF определяет, сколько цветов будет сохранено в формате GIF по сравнению с исходным JPEG — или PNG-изображением . Более высокий процент дизеринга обеспечивает передачу большего количества цветов и увеличивает размер файла:
Нажмите кнопку « Сохранить », чтобы сохранить файл на компьютере. Загрузите GIF-файл на ресурсе, где хотите его использовать.
Как использовать GIF в маркетинге
1) В социальных медиа
Pinterest был первым социальным ресурсом, который разрешил добавлять движущиеся картинки , после чего то же сделал Twitter . А к лету 2015 к ним присоединился Facebook . На любой из этих социальных платформ анимированные гифки могут стать отличным способом выделиться в монотонном потоке новостных лент.
2) В письмах
Анимированные GIF-файлы отображаются в электронной почте так же, как и обычные изображения. Так почему бы не заменить неподвижные изображения анимированными?
Это может привлечь внимание читателей и повысит эффективность проводимой кампании. А / B тестирование, проведенное Bluefly , показало, что электронные письма с анимированными GIF-изображениями дают на 12% больше прибыли, чем их статичные версии. Используйте GIF для демонстрации товаров, анонсов событий или иных целей.
3) В блоге
Ваш блог не обязательно должен быть посвящен движущимся картинкам, чтобы на него можно было добавлять GIF-файлы .
Как вы будете использовать GIF-изображения в своих маркетинговых кампаниях? Напишите об этом в комментариях.
Данная публикация представляет собой перевод статьи « How to Make an Animated GIF in Photoshop [Tutorial] » , подготовленной дружной командой проекта Интернет-технологии.ру
Сделайте гиф-анимацию из ваших фотографий
Краткое описание приложения для создания GIF анимации
Возможно это вас заинтересует
Что бы создать GIF анимацию из своих фотографий, выберите фотографии с верхней ленты вашего альбома (если вы авторизованны на сайте), либо загрузите с диска компьютера. В нижней ленте приложения, вы найдете шаблоны GIF анимации. Кликнув на любом шаблоне, вы увидите в центральной части приложения как будет окончательно выглядеть ваша ГИФ-анимация. Гифки разделены по разделам, что бы вам проще было найти нужную заготовку анимации.
Как поменять фотографию в гифанимации? — В каждом шаблоне есть несколько кадров в которых сменяются ваши фотографии, количество фотографий в гиф-анимации для каждого шаблона ограничено. Фотографии которые используются на данный момент в анимации находятся снизу, под вашими фотографиями. Они отличаются по размеру, и количество их задано жестко шаблоном гиф-анимации. Текущий кадр, в котором происходит смена фотографии, отмечен стрелкой. Он автоматически сменяется на следующий, если вы выбираете фотографию для данного кадра анимации. То есть когда вы выбираете из фотоальбома фотографию, или загружаете ее с компьютера, она попадает в кадр который отмечен стрелкой в ленте кадров GIF анимации.