Автор Юлия
Далее - слова автора
Когда делаешь в фотошопе коллаж или открытку, иногда не хочется самому делать анимацию. Проще найти готовую блестяшку или анимацию, такие картинки сохраняются в формате gif, обычную статичную картинку мы сохраняем в формате ipeg, ipg. И сейчас я расскажу, как можно совместить эти два формата. Те, кто давно занимается фотошопом отлично знают, как это делать. Мой урок для начинающих.
Итак, урок - Как наложить gif изображение на простую картинку в фотошопе.
Открываем в фотошопе картинку, на которую хотели бы перенести gif изображение. Я взяла картинку с цветами. Не забываем снять замочек в слоях, кликаем 2 раза левой кнопкой мыши по замочку и в открывшемся окне нажимаем ОК.
Я нашла у себя бабочку в формате gif, открываю картинку в фотошопе.
Мы видим, что у картинки бабочки очень много слоев, чтобы не разрушить анимацию, мы не сможем перетащить бабочку, стоя на одном из слоев. Значит нам нужно перетащить все слои сразу. Встаем на первый слой, он должен быть у нас активным, нажимаем на клавиатуре клавишу Shift и щелкаем левой кнопкой мыши по верхнему слою. Что мы видим?
У нас все слои синего цвета, т.е. активные. Инструментом перемещение мы перетаскиваем бабочку на картинку с цветами. Щелкаем левой кнопкой мыши по первому слою бабочки и теперь у нас активный только 1 слой анимации.
А теперь нам нужно, чтобы бабочка двигалась. Для этого открываем окно анимации. Глазик на картинке и на 1 слое открыты. У нас активный слой анимации, на всех остальных слоях глазик выключен.Проставляем время в анимации, у меня 0,2 сек.
А далее мы делаем так: 1 слой в анимации и глазик открыт на 1 слое в панели слоев. Добавляем слой в анимации, нажав на листок внизу, у нас 2 слой анимации - закрываем глазик на 1 слое в слоях и открываем глазик на 2 слое, добавляем слой в анимации - закрываем глазик на 2 слое и открываем на 3-м и точно так же продолжаем на всех слоях, в анимации добавляем слой, в слоях на предыдущем слое закрываем глазик, на новом открываем. Думаю принцип понятен.
Все сделали, запускаете анимацию и смотрите, если все нормально, сохраняете для Web. У меня получилось вот так
Наш урок - Как наложить gif изображение на простую картинку в фотошопе закончен. Вы теперь умеете перемещать картинки в формате gif на картинки в формате ipeg, ipg. Если возникли какие-то трудности, спрашивайте.
И спасибо, что заглянули ко мне!
Возникла задача создать гифки на определенную тему.
Дело в том, что баннеры и тизеры лучше всего работают анимированные. Продажа реального товара проще всего получается если покупатель визуально видит рекламируемые товары. Поэтому лучше всего делать такие баннеры из обзоров нужного товара. Благо в 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. Насколько я знаю, подобных сервисов в Интернете довольно так много. Похвастайтесь, если вдруг знаете что-то получше.
Здравствуйте Друзья! В этой статье мы разберемся как сделать GIF анимацию различными способами. Из простых картинок и из видео, с помощью онлайн сервисов и с помощью различных бесплатных программ.
С развитием анимации появились мультфильмы которые практически все смотрели, смотрим и будем смотреть. Дальнейшее развитие привело к появлению фильмов вместе с анимацией. Отличным примером этого является картина «Кто подставил кролика Роджера». С развитием технологий появилась компьютерная анимация которая вывела фильмы и мультики на качественно новый уровень. В этой статье мы научимся создавать простенькие GIF анимации.
Способ хорош тем, что не нужно скачивать и/или устанавливать дополнительные программы.
Существует множество сервисов для создания Gif-анимации. На себе попробовал три из них и из этих трех мне понравился http://gifovina.ru/
Переходим на сайт сервиса и с помощью кнопки Добавить кадры загружаете изображения.
Если вы добавили сразу несколько изображений, то возможно они выстроились в неправильном порядке. Что бы это поправить наводите мышку на изображение которое вы хотите переместить. В верхнем левом углу изображения появляется значок , взяв мышкой за который можно поместить рисунок в другое место очереди
Так же в правом верхнем углу изображения появляется крестик позволяющий удалить картинку .
Под каждой картинкой есть поле с цифрой. Это длительность кадра в секундах. По умолчанию это 1 секунда. Длительность можно менять кликнув на это поле и с помощью ползунка установить требуемое время или с помощью клавиатуры задать необходимую длительность.
Можно настроить эффекты перехода между кадрами. Для этого нажимаем на значок перечеркнутого круга между изображениями и в открывшемся меню выбираем необходимый эффект.
После выбора эффекта будет доступна длительность этого эффекта которую так же можно настроить.
По центру вы можете отредактировать выделенный кадр. Возможности редактирования заключаются в добавлении различных фигур на изображения . Внутри этих фигур можно задать надпись. На выбор доступно два шрифта. Последний можно выбрать любого размера, сделать его жирным и/или курсивом.
Можно задать цвета фона, текста и границ фигуры.
Справа в окошке редактирования анимации доступны следующие возможности .
Размер . Есть возможность задать размер анимации. Из выпадающего списка выбираете нужный или выбираете Настроить… и во всплывающем окошке задаете необходимый размер.
Чем больше размер анимации, тем больше вес GIF файла.
GIF анимация создана.
Что бы сделать GIF анимацию из видео потребуется установить какую-нибудь программку. Мне понравилась iWisoft Free Video Converter . Скачать эту бесплатную программу можно с официального сайта http://www.iwisoft.com/videoconverter/ .
Скачиваете, устанавливаете и запускаете.
В открывшемся окошке с лева вы видите оригинал видео , то что у вас получится будет с права. С помощью шкалы под шкалой времени вы можем ограничить время вашей анимации. Мне необходим небольшой кусочек из видео который выбран на рисунке .
С помощью рамочки в окошке оригинального видео вы можете выбрать часть кадра которую хотите видеть в своей анимации. Можно настроить кучу эффектов при необходимости.
Сразу открывается папочка с нашей анимацией. У меня получился GIF файл размером 33 МБ при том что исходное видео весит < 19 МБ).
В поле вставляем ссылочку на видео из YouTube и нажимаем Показать видео .
На видео можно будет выбрать любые 10 секунд для создания GIF анимации. Задается это перетягиванием ползунка на шкале ниже видео.
Время начала и конца анимации можно точно указать вручную. Для этого нажимаем ссылку «введите время вручную « и задаем.
Если выбрать Продвинутый режим создания гифки, то дополнительно можно будет задать ширину анимации перемещением ползунка.
Когда все готово нажимаем Продолжить.
Вот так просто можно создать Gif анимацию онлайн из видео на YouTube.
Есть простенькая программка позволяющая создавать GIF анимации. Скачать ее можно по ссылке
Там же на английском описаны основные возможности утилиты.
Программка не требует установки. Скачиваете архив распаковываете и запускаете GifCam.exe
Открывается окошко программы которое будет снимать то, что вы хотите видеть в своей GIF анимации.
У нас в 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 анимацию в Фотошопе или есть дополнения, пишите в комментариях.
