Как в photoshop сохранить gif: Сохранение и экспорт видео и анимации в Photoshop

Разное 

Содержание

Как сохранить видео или анимацию из After Effects в Gif формат

Посмотреть видео-урок

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

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

1. Сохранение в GIF с помощью плагина

Первый способ, который мы рассмотрим, является самым простым, речь идёт о популярном плагине GifGun, с помощью которого буквально за один клик можно экспортировать проект After Effects в gif формат. Поскольку плагин является платным, думаю желающих использовать данный способ будет не много, особенно среди новичков. Использование GifGun будет актуальным для профессиональной деятельности на платной основе, т.е. для пользователей, которые часто выполняют коммерческие проекты и сумма в 30 долларов, а именно столько стоит плагин на данный момент, будет для них не значительной, в сравнении с удобством использования плагина.

GifGun достаточно просто устанавливается, как и большинство плагинов After Effects. Для начала работы с ним нужно скаченный архив плагина распаковать в папку «Scripst», которая расположена в корневой директории папки «Support Files». После распаковки плагина запускаем After Effects, переходим в верхнем меню в пункт «File» — «Scripts» и запускаем скрипт GifGun. Далее в появившемся окне вводим лицензионный код, нажимаем «Ок» и у нас появляется окошко плагина.

Тут можно выставить нужные настройки для будущей гифки, такие как размер, количество кадров в секунду, выбрать место сохранения и другие мелочи, после чего просто нажимаем на кнопку «Make GIF» и плагин сохраняет проект в гиф файл.

Главный недостаток GifGun — это платная лицензия. Конечно, если вы не совсем чайник и термины типа «кряк»,»торрент» вам знакомы, то вы знаете где взять этот плагин бесплатно. Я же не собираюсь нарушать авторские права разработчика, тем более у нас ещё имеется целых два способа, которые абсолютно легальны и бесплатные.

2. Экспорт кадров в Photoshop и сохранение в GIF

Переходим ко второй способу, он пожалуй, самый распространённый, на него есть уже куча видео на Ютуб и заключается данный способ в экспорте из After Effects через Photoshop.

Первым делом, как и при обычном экспорте мы выбираем в верхнем меню «Composition» — «Add to Render Queue» и в настройках рендеринга вместо формата AVI, который стоит по умолчанию, выставляем «Photoshop Sequence» и указываем путь сохранения.

Лучше создать отдельную папку для сохранения, потому что файлов будет много. Нажимаем «Render» и ждём. По окончанию рендеринга переходим в нашу папку и видим тут кучу файлов в формате PSD, каждый файл представляет собой отдельный кадр из нашего видео-ролика. Т.е. After Effects разобрал наш ролик на кадры и каждый кадр сохранил в PSD файл. Теперь нам нужно с помощью Photoshop собрать все эти кадры в единый ролик или анимацию и сохранить уже всё это в гифку.

Открываем фотошоп, выбираем в верхнем меню «Файл» — «Открыть как» и в директории с нашими кадрами выбираем самый последний файл, ставим галочку «Последовательность изображений» и нажимаем открыть.

В появившемся окне устанавливаем нужную частоту кадров, можно оставить как и в проекте After Effects, а можно немного уменьшить. Тут важно иметь в виду, что чем больше частота кадров, тем плавнее и качественнее будет выглядеть Gif анимация, но тем и больше она будет весить, а соответственно, дольше грузиться браузером.

Теперь нажимаем «ок» и фотошоп преобразует все выбранные файлы в один видео-слой. Переключаем рабочую среду на «Движение», чтобы проиграть видео, как видим, оно работает.

Теперь стандартным способом сохраняем это видео в гифку. В верхнем меню выбираем «Файл» — «Экспортировать» — «Сохранить для Web», выбираем gif формат и сохраняем анимацию.

Видите, анимация будет весить слишком много, потому что у нас большой формат FullHD, можно перед сохранением просто его уменьшить раза в три. Выберем «Изображение» — «Размер изображения» и установим ширину, допустим на 400 пикселей. Снова сохраняем стандартным способом в гифку и увидим, что теперь она будет весить приемлемо.

Главные два минусам данного способа — это конечно же временные затраты, а так же наличие фотошоп и хотя бы не большой навык работы в нём. Хотя, оба минуса, кому-то будут вовсе и не минусами, а наоборот.

3. Экспорт видео в Photoshop и сохранение в GIF

Ну и наконец вишенка на торте — третий способ, который лично мне нравится больше, чем два предыдущих, но тут уже всё зависит конечно от ваших задач. Работает этот способ следующим образом: из After Effects мы рендерим нашу анимацию или видео в формат AVI и с помощью фотошопа просто сохраняем это видео в гифку. Фотошоп работает с AVI форматом, поэтому никаких танцев с бубном производить не нужно.

Просто открываем отрендеренное видео и стандартным способом сохраняем его в gif анимацию.

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

Вот такие три способа экспорта gif анимации из After Effects мы сегодня разобрали, а какой из них удобнее и эффективнее, думаю каждый уже из вас выберет для себя сам.

Как создать гифку в Photoshop

Как сохранить gif в хорошем качестве Photoshop?

Чтобы загрузить их в Photoshop, нажмите Файл> Сценарии> Загрузить файлы в стек. Затем нажмите кнопку «Обзор» и выберите файлы, которые хотите использовать в создаваемом GIF-изображении. Нажмите «ОК». После этого Photoshop создаст отдельный слой для каждого добавленного изображения.

Как сохранить видео в gif в фотошопе?

Как только все будет готово, перейдите в меню Файл — Сохранить для Web (File > Save for Web) и примените настройки, как показано на скриншоте. После этого нажмите кнопку Сохранить (Save) и сохраните анимацию в формате GIF.

Как сделать анимацию из фотографий в фотошопе?

Чтобы создать покадровую анимацию, в Photoshop используется следующий общий рабочий процесс.

  1. Откройте новый документ.
  2. Добавьте слой или преобразуйте слой заднего плана.
  3. Добавьте содержимое к анимации.
  4. Выберите кадр.
  5. Отредактируйте слои выбранного кадра.
  6. По мере необходимости добавьте кадры и редактируйте слои.

Как самому сделать gif файл?

Создать GIF анимацию онлайн: инструкция.

  1. Создание gif анимации на онлайн конструкторе Gifius.ru происходит в три простых шага:
  2. Шаг 1. Загрузите картинки. …
  3. Шаг 2. Задайте настройки анимации. …
  4. Шаг 3. Скачайте готовую анимацию.

Как сохранить анимацию в фотошопе без потери качества?

Как уменьшить gif анимацию без потери качества через Photoshop

  1. Устанавливаем QuickTime, если он не установлен. …
  2. Открываем Photoshop — выбираем Файл -> Импортировать -> Кадры видео в слои. …
  3. Далее идем в (панель инструментов) Изображение -> Размер изображения -> в открывшемся окне выбираем нужный размер (например 100 на 100 пикселей) — нажимаем на ОК.

Как сохранить GIF из браузера?

Сделайте это с помощью поисковой системы, например, Яндекса или Google. Щелкните правой кнопкой мыши по анимации. Нажмите Сохранить изображение как. В некоторых браузерах эта опция называется «Сохранить картинку как».

В каком формате сохранять анимацию?

Можно сохранить анимацию в виде GIF-файлов для просмотра в Интернете. Видео и анимацию можно сохранить как фильм QuickTime или PSD-файлов.

Как сохранить видео в формате GIF?

Как сконвертировать MP4 в GIF

  1. Шаг 1. Загрузите mp4-файл(ы) …
  2. Выберите «в gif» Выберите gif или любой другой формат, который вам нужен (более 200 поддерживаемых форматов)
  3. Загрузите ваш gif-файл Позвольте файлу сконвертироваться и вы сразу сможете скачать ваш gif-файл

В каком приложении можно сделать живое фото?

Живое фото в Инстаграм можно сделать с помощью приложения для iPhone или программы для Windows (если у вас телефон на Android ) — PLOTAGRAPH. Подробно в блоге http://instagrammar.ru/foto/kak-sdela… 2.

Создание Gif анимации в фотошопе cs5.

— Фотошоп

Создание Gif анимации в фотошопе cs5.

Подробности

С помощью программы фотошоп CS5

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

Давайте создадим анимационное изображение прыгающего смайлика, и вы увидите, что в этом нет ничего сложного.

Открываем программу фотошоп, в которой с помощью овального выделения создаем окружность. Для того чтобы она получилось ровной зажимаем клавишу Shift.

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

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

Создадим новый слой, на котором нарисуем глаза и рот. Для удобства редактирования каждый объект рисуем на новом слое. В итоге у нас получился вот такой смайлик.

Отредактировав расположение глаз и рта выделяем все слои и щелкнув правой кнопкой мыши выбираем: Объединить слои.

Теперь у нас получился один слой с изображением смайлика. Переименовываем его в 1 и копируем.

Скопированный слой будем считать новым кадром нашей анимации. Для того чтобы смайлик у нас получился прыгающим сдвигаем его немного вниз и слегка сплющиваем применив: Свободную трансформацию Ctrl+t.

Называем его 2 и создаем еще несколько копий слоев и редактируем их. В итоге получаем следующее.

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

Теперь непосредственно приступим к созданию анимации.

Нажимаем вкладку Окно и выбираем Анимация.

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

Теперь мы видим первый кадр нашего анимационного изображения.

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

Копируем кадр, нажав на кнопку создания нового кадра.

Редактируем видимость слоев второго кадра.

И так далее создаем все кадры нашей анимации.

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

Теперь нам осталось только сохранить анимацию смайлика. Формат для сохранения обязательно нужно выбрать Gif, иначе анимация у нас не получится.

В итоге мы получили вот такой милый смайлик.

Как сделать анимацию в фотошопе.

Анимированные GIF файлы с его помощью фотошопа делаются достаточно легко и быстро. Они, как правило, состоят из нескольких изображений (кадров), которые при пошаговой смене и образуют финальный результат. Сегодня постараемся максимально детально рассмотреть данный вопрос от А до Я:

  • импорт картинок в гифку;
  • настройки GIF анимации в Adobe Photoshop;
  • экспорт / сохранение в GIF формат или видео.

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

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

Важное примечание. Если вам нужно быстро создать простейшую Анимацию из нескольких кадров в Фотошопе, перейдите на урок — .

Я довольно-таки давно интересуюсь покадровой анимацией, хотя и изучила мало материалов. Все книги, которые я начинала читать, довольно длинные, трудные и «сухие».

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

Многие советовали мне переходить на другие программы (например, TVP Animation Pro ), но я, не желая подстраиваться под новые интерфейсы других программ, решила делать всё в Фотошопе.

А этот урок я написала специально для тех, кто не понимал технологию создания покадровых анимаций конкретно в Фотошопе. Кто не хотел чуть-чуть покопаться и понять, что к чему.

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

Короткие анимации – это анимированные аватарки, смайлики и т.д.

Длинные анимации – это мультфильмы, видео и т.п.

Сначала я расскажу теорию, а затем мы создадим анимацию на практике.

Важное дополнение

Многие спрашивают: «Почему моя анимация такая дёрганная, мой персонаж/объект быстро/медленно двигается?»
Отвечаю: ваш персонаж/объект двигается быстро , потому что вы нарисовали мало кадров.

Ваш персонаж/объект двигается медленно , потому что вы нарисовали много кадров.

Ваш персонаж/объект дёргается, потому что вы не проследили за предыдущим движением и нарисовали следующее, которое не согласованно с предыдущим.

Запомните: в одной секунде 24 кадра!

Поэтому, когда вы соберётесь создавать свою анимацию, помните: 24 кадра = 1 секунда, 24 кадра = 1 секунда. Никогда не забывайте об этой очень важной детали.

Короткие анимации

Я думаю, вы часто сталкивались с анимациями на аватарках, с анимированными смайликами.
Некоторые смайлики сделаны во Flash’e , но свои я рисую в Фотошопе. Не стоит думать, что такие короткие анимации делать легко. С одной стороны – да, они небольшие по размеру, но с другой – пока отрисуешь эти 15 —30 кадров, замаешься (а представьте, если вы хотите создать трёхминутный клип, то вам придётся делать 4320 кадров!).

Что вы должны помнить и знать?

Допустим, вы захотели нарисовать себе на аватарку девушку с развевающимися от ветра волосами. Значит:

Во-первых, волосы это вам не картон – под воздействием ветра средней силы они будут являться поперечными волнами.

Примерно так это показано на схеме:


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

И, наконец, слабый ветерок аккуратно приподнимает и опускает волосы.

Слабый ветер:

Средний ветер:

Сильный ветер:

Всё то же самое относится к ткани и одежде — они будут вести себя примерно так же, как и волосы.

А теперь, например, вы захотели нарисовать анимацию с движением своего персонажаобъекта. значит:

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

Таких примеров можно привести огромнейшую кучу, но лучше посмотреть:

Чтобы не попасть впросак с этими движениями перед действиями (ДПД), чаще анализируйте и наблюдайте за движениями людей или животных.

Небольшое дополнение

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

Поймите, что без этого ваша анимация будет мёртвой, ужасной и некрасивой!

Лучше поработайте над ней и никогда не спешите.

Длинные анимации

Ооо, вот тут-то и начинается всё самое интересное!

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

Но, в силу того, что я не знаю, в каких они работают программах, я пытаюсь понять весь процесс, используя механизмы Photoshop-a.

И знаете, я ведь нахожу ответы на все свои вопросы!

Но давайте будем разбирать всё по порядку.

Процесс создания длинной анимации

1. Изначально нам нужна ИДЕЯ

Например, вы решили сделать небольшой клип, в котором будут танцевать несколько девушек.

Если вы матёрый художник-аниматор, вы можете в своём клипе «заставить танцевать» от 3 и более девушек.

Но в начале своего пути аниматора лучше ограничиться одной-двумя.

2. Теперь вам необходимо составить раскадровку по сценам (РПС)

Что это такое, и с чем её едят?

Представьте себе фильм. Теперь представьте кол-во различных видов из разных камер. Крупный план, пейзаж, камера, следующая за персонажем…


Ладно, когда их не так много. Но когда мы делаем целый клип их может быть больше 30 штук!
Поэтому умные дяденьки и тётеньки аниматоры пользуются такой прекрасной штукой, похожей на расчерченную книжечку.

В ней они изображают сцены.

Только одни рисуют в каждом отсеке таблицы одну сцену, потом другую, третью и т.д., а другие рисуют в каждом отсеке таблицы изображения через несколько секунд (извиняюсь, если непонятно объяснила).



Очень удобно и то, что можно делать сбоку описания, а то, бывает, нарисуешь, потом через некоторое время посмотришь, и не поймёшь — что это я тут изобразила?

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

3. Теперь вам нужно придумать фон, концепт персонажей и движения

Движения рисуем в книжечке РПС.

Если у вас не одна сцена в клипе, то придётся рисовать несколько разных фонов. Рисуйте их в отдельных файлах.
И запомните одну вещь — фон не появляется из ничего. Так что если вы хотите, чтобы камера как бы отъезжала вбок, то фон там тоже должен быть. т.е. придётся рисовать фон по длине (или по ширине, а может и по тому, и по другому) больше.

Затем вы продумываете внешний вид вашего персонажа и начинаете создавать анимацию.

От теории переходим к практике

Давайте вот с этого момента вы немного подумаете над ИДЕЕЙ и, вообще, над пунктом «Процесс создания анимации». К чему это я? К тому, что сейчас вам будет нужен подопытный кролик, которого вы будете заставлять двигаться. Мы не будем делать клип, в котором 4320 кадров. Лучше всего и легче всего будет понять, как создать покадровую анимацию по 24 —72 -кадровой анимации.

Что ж, начнём!

1. Создаём новый документ. Для своей анимации я взяла небольшой размер – 400 x 500 px.

2. Теперь, если у вас нет внизу слева окна «Анимация », смотрим наверх, открываем вкладку «Окно » — «Анимация ».*

* — В примерах используется русифицированная версия Photoshop CS2 .


На скриншоте выше мы видим окно анимации в котором есть первый кадр, ниже него небольшая панель, на которой расположены кнопки:

Всегда/однажды — выбрав «Всегда» вы зациклите анимацию. Если вы выберете «Однажды», анимация будет проигрываться только один раз. (Оба варианта анимаций в моём уроке есть: зацикленная — где показан принцип ДПД, воспроизводимая один раз — где показана смена сцен).

Выберите первый кадр — возвращает нас к самому началу.

Выбирает предыдущий кадр — не будем звать Кэпа. (=

Играет анимацию/Останавливает анимацию — Play/Stop.

Выбирает следующие кадры — следующий кадр. Ваш Кэп!

Tweens кадры анимации — с помощью этой кнопки мы можем добавить плавные переходы между двумя кадрами посредством добавления новых.

Дублирует выбранные кадры — не совсем верное название… Лучше бы было «Добавление нового кадра».

Удаляет выбранные кадры — корзина.

3. Теперь мы можем начинать рисовать. для этого созданный ранее вами фон поставьте на Background (Задний план / Фон).


4. Затем создайте новый слой (Ctrl+Shift+Alt+N) и нарисуйте на нём своего персонажа.

4. Теперь начинается самое трудное: нам нужно нарисовать мно-о-ого раз подряд одного и того же персонажа в разных позах.

Создаём новый кадр, и… Тут есть два варианта:

А) Либо вы начинаете каждый раз рисовать своего персонажа заново, либо..

Б) Копируете предыдущий слой и изменяете его (дорисовываете-стираете, а не пользуетесь трансформацией! Такой инструмент вам будет нужен редко, потом напишу, когда).

Поднатаскавшись в анимации вы сможете безболезненно пользоваться обоими вариантами. (Можете попробовать каждый из них в отдельном документе).

Вариант А:

1. Мы нарисовали наш первый кадр.

2. Чтобы видеть, как изменять следующий, мы уменьшаем прозрачность слоя примерно до 30% и создаём новый слой, на котором уже рисуем кролика для второго кадра.

3. Дорисовываем второй кадр и отключаем видимость у предыдущего, первого слоя.


Вариант Б:

1. Создаем кадр с персонажем и делаем этот слой невидимым.

2. Затем дублируем его (Ctrl+J), перетащив слой на кнопочку «Создать новый слой» левее корзины.

3. Теперь делаем второй слой видимым и начинаем его изменять.

Таким образом, дублируя предыдущие слой, вы создаёте новые кадры и изменяете именно их, а не один и тот же.

5. Сидим, рисуем кадров 10 —15 …

6. И смотрим, что получилось.


Получился бегущий кролик.

Причём ни одна его часть не скопирована: каждый кадр нарисован заново.

Смотрите сами:


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

Почти конец

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

И, после того, как мы сохранили нашу gif -анимацию как видео файл формата .avi , например, можно смело идти в Киностудию Windows Live .
Там уже делайте с вашим клипом всё, что душе угодно.

А затем вы можете загрузить свой клип на youtube.com и наслаждаться проделанной работой.

Всем БОЛЬШОЕ СПАСИБО за внимание, с вами была Lero-art. Извините меня за косноязычие, странность изложений и другие огрехи в уроке, если таковые есть. Все они от того, что мысли путаются, а слова не складываются в предложения…

Но, надеюсь, вы почерпнули для себя что-то новое и интересное!

Задумывались ли вы, как создаются анимированные GIF-файлы? Автор урока предлагает вам за одну ночь освоить некоторые секреты анимации с помощью этого урока. Так же вы научитесь использовать Шкалу времени (Timeline) , которая доступна в версии Photoshop CS6. А теперь начнём!

Результат урока.

Шаг 1

Создайте новый документ (Ctrl + N ) с размерами файла 800 х 500 пикселей. Залейте фон любым цветом, который вы хотите. Теперь идём в меню Слои — Стиль слоя — Наложение градиента (Layer> Layer Styles> Gradient Overlay). Примените следующие настройки: Стиль Радиальный (Radial), цвета от чёрного (# 000000) к синему (# 54799b), который будет использоваться в центре.

Шаг 2

Создайте новый слой и назовите его Noise Layer . Выберите инструмент Заливка (Paint Bucket Tool) и залейте созданный слой тёмным цветом (# 231f20). Оставьте активным слой Noise Layer и идите в меню Фильтр — Шум — Добавить шум (Filter> Noise> Add Noise). В диалоговом окне настроек фильтра поставьте такие значения: Эффект (Amount) 3%, распределение Равномерное (Uniform) и нажмите ОК.

Шаг 3

Нажмите комбинацию клавиш (Ctrl + U) и в появившемся диалоговом окне настроек коррекции введите значения Насыщенности (Saturation) 100%: Измените этому слою режим наложения на Мягкий свет (Soft Light).

Примечание переводчика: для того чтобы добиться такого цвета как у автора на скриншоте, можно при коррекции Цветовой тон / Насыщенность (Hue/Saturation) значение Цветового тона (Hue) поставить на — 140.

Шаг 4

Добавьте любой текст, который вы хотите. Здесь мы будем использовать текст логотипа сайта 123RF. В стилях слоя используйте Обводку (Stroke). Значения размера обводки выберите по своим предпочтениям.

Примечание переводчика: На скрине автора уже растрированный текст вместе со стилем Обводка. Чтобы у вас получилось так же, после того как применили обводку, уберите Заливку (Fill ) слоя с текстом на 0%, преобразуйте этот слой в смарт объект, а затем растрируйте его.

Шаг 5

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

Тиснение (Bevel & Emboss)

Внутренняя тень (Inner Shadow)

Внутреннее свечение (Inner Glow)

Наложение цвета (Color Overlay)

Внешнее свечение (Outer Glow)

Тень (Drop Shadow)

Шаг 6

Как только вы закончите создавать световые эффекты с помощью стилей слоя, перейдите в палитру слоёв и уменьшите этому слою значение Заливки (Fill) на 0%.

Шаг 7

Дублируйте слой, который вы создали в шаге 5 и отключите этой копии все стили слоя. Настройте теперь стили так:

Внутренняя тень (Inner Shadow)

Внутреннее свечение (Inner Glow)

Шаг 8

Ниже результат после того как вы применили стили слоя.

Шаг 9

Теперь мы создадим движущиеся световые пятнышки. Создайте 5 слоев поверх существующих, и переименуйте их как 1,2,3, R и F. Если у вас свой текст создайте слои в соответствии с вашими буквами. Сгруппируйте эти слои в папку, которой дайте название Light Spots и смените режим наложения на Осветление основы (Color Dodge).

Активируйте инструмент Кисть (Brush Tool), выберите мягкую кисточку, установите Непрозрачность (Opacity) на 95% и белым цветом нарисуйте пятнышки поверх текста. Для каждой буквы отдельное световое пятно на своём слое. Ниже на скриншоте вы можете рассмотреть, как слои выглядят у автора в палитре слоёв.

Шаг 10

Теперь идём в меню Окно — Шкала времени (Window > Timeline). Вы заметите, что ваши слои уже построены в этой палитре в левой её части. Выделите каждый из пяти слоёв со световыми пятнами, которые находятся в группе Light Spots и убедитесь что индикатор текущего времени (голубой слайдер) стоит на нулевом кадре. Теперь на каждом слое в группе, при его активности, нажмите на опцию Позиция (Position), чтобы создать ключевой кадр.

Примечание переводчика: Для того чтобы активировать шкалу времени, нажмите кнопку Создать временную шкалу для видео (Create Video Timeline) и все ваши слои загрузятся в шкалу времени. Выделен в ней будет тот же слой или группа, что и в палитре слоёв.

Шаг 11

Установитеиндикатор текущего времени (голубой слайдер) на отметке 01:00 F и переместите слои со световыми пятнами по траектории их движения относительно контура буквы.

Шаг 12

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

Очень часто в сети встречаются смешные или печальные вырезки из видео. Они циркулируют из комментария в комментарий, дополняя интересный пост или кратко характеризуя ситуацию. Любой момент, который вас заинтересовал вас в фильме, сериале или видео с YouTube, можно переделать в Gif-анимацию. Для этого достаточно только иметь Фотошоп версии CS3 или новее. Более старые версии не поддерживают работу с анимацией. Для наиболее комфортной работы рекомендуется пользоваться Photoshop CS5, CS6, CC 2014 или новее.

В первую очередь нужно скачать то видео, фрагмент из которого необходимо сделать анимацией. Будет лучше, если вы предварительно вырежете нужные несколько секунд из всей записи. Однако это можно сделать и средствами самого Фотошопа. Важно помнить, что программа поддерживает только определенные форматы видео: *.mov, *.mpeg, *.mpg, *.avi и *.mp4.

Итак, для того, чтобы сделать из нужного отрезка видео анимацию, потребуется загрузить его в Фотошоп. Как это сделать:

  • В верхнем меню найти раздел «Файл».
  • Кликнуть на него и в выпадающем меню навести курсор на строку «Импортировать».
  • В появившемся справа разделе меню кликнуть на «Кадры видео в слои…».
  • Возможно, программа немного подвиснет. Не надо её торопить. Должно открыться новое окно, в котором необходимо отыскать файл с фрагментом видео, и выбрать его.

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

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

Галочка в окне «оставить каждый * кадры» удалит из записи каждый кадр, порядковый номер которого будет указан. Это сделает анимацию более «лёгкой», но за счёт прерывистости.

Когда Photoshop обработает видео, кадры из него появятся на панели слоёв. По умолчанию будет показываться только один, самый первый. Он же будет самым нижним из всех.

Теперь каждый слой можно обработать отдельно – добавить текст, какое-то дополнение или эффект. Если к самому верхнему слою применить какой-либо эффект – он будет отображаться на протяжении всего видео. Точно так же будут отображаться все слои, которые не относятся к кадрам. Если вам требуется, чтобы какой-либо объект исчез в нужный момент – поставьте слой с ним над кадром, после которого он должен исчезнуть. А если нужно, чтобы появлялся только на каких-то отдельных кадрах – просто продублируйте несколько раз этот объект и объедините слой с ним и каждым необходимым слоем видео отдельно (одна копия – один слой).

Чтобы продублировать какие-либо слои, нужно нажать на них правой кнопкой мыши и найти строку «Создать дубликат слоя».

А теперь немного о редактировании анимации. На шкале времени, которая появляется внизу рабочего поля, в правом-верхнем углу есть выпадающее меню. Желательно туда заглянуть и проверить некоторые настройки. В частности, нас особенно могут заинтересовать:


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

Следующие четыре кнопки после выпадающей меню позволяют просмотреть анимацию со всеми внесенными правками. Затем идет кнопка «Добавить промежуточные слои» (та же функция, что и у аналогичного раздела в меню), и кнопка «Создать копию выделенных слоев». Это может заметно упростить создание каких-либо повторяющихся действий. Достаточно выделить несколько кадров на шкале времени (зажать клавишу Ctrl и кликать на каждом кадре мышкой), а затем нажать на эту кнопку.

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

После окончательной настройки всех параметров анимации её необходимо сохранить. Выберите раздел меню «Файл», а в нем найдите «Сохранить для Web…».

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

Здесь же можно настроить конечные размеры анимации (ширина и высота), количество используемых в ней цветов и просмотреть, что в итоге получилось. Если всё устраивает – необходимо нажать на кнопку «Сохранить…». После этого осталось только выбрать, куда и под каким именем сохранить готовый файл.

Здравствуйте, читатели моего блога!

Вот как и обещал, уроки фотошоп продолжаются!

Сегодня мы обсудим такой вопрос: «Как создать анимацию в фотошопе?» . Я попробуй дать вам подробную инструкцию по созданию анимации. А в конце предоставлю небольшой видеоурок…

Как сделать анимацию в фотошопе : что она под собой подразумевает и сложно ли это?

Делать анимацию в фотошопе довольно просто, если знать как ее делать=) Но а если честно, то попробовав один раз, вы все будете делать с закрытыми глазами… Именно в этой статье, под моим четким руководством вы научитесь делать анимацию без каких либо проблем!

Анимация, мы станем настоящими аниматорами?

Наша анимация — это плавное появление надписи, которое мы будем делать с помощью инструмента Анимация в фотошопе, именно этим мы и займемся. Сегодня вы сможете побывать в роли начинающего аниматора=)

Ну что начнем?

Для начала определимся, что нам нужно! А нужен нам фотошоп: не важно какая версия. Можете воспользоваться версией, которой пользуюсь я, скачать можете !

Открываем программу фотошоп и выводим вкладку анимация на рабочую среду: Окно — Анимация . В моей версии программы эта вкладка называется Шкала времени , поэтому я делаю так (ставим галочку ):

В итоге у вас появится вот такая панель внизу:

P.S. Я ее немного обрезал…

Ну а теперь с помощью вкладок Файл — Создать… , или нажатием на клавиши CTRL+N — создаем новый файл. Выставляем размеры, жмем ок и пишем наш текст, с которого будем делать анимацию. У меня вот что получилось:

P.S. Это я немного с деформацией поигралс я=)

Этот кадр автоматом стает в нашу Шкалу времени , ставим его на скорость 0,1 сек и с помощью Создание копии выделенных кадров создаем еще 10 (это зависит от того как вы будете выставлять прозрачность — дальше посмотрите и все поймете ):

P.S. Это уже готовая картинка.

На первом кадре отключаем картинку (нажмите на вторую картинку и в слоях отключите видимость слоя — надпись, и данную картинку перетяните на первое место ). В итоге, у меня 10 кадров со скоростью по 0,1 сек, а последний (11 кадр ) — 1 сек.

На второй картинке текст должен быть включен, меняем только прозрачность: в слоях правой кнопкой мыши делаем клик по слою с надписью, выбираем вкладку — Параметры наложения…

В Основные параметры — Непрозр. ставим 10%. Такие действия повторяем с каждым кадром, увеличивая прозрачность: второй — 20 %, третий — 30% и т.д., пока не дойдем до 100% — финальный кадр (именно из-за того как вы будете использовать прозрачность зависит количество кадров ).

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

Остальные кнопки Шкалы времени я не объясняю: думаю, кнопка play и другие вам знакомы… (чтобы просмотреть, что за кнопка перед вами — просто наведите курсором мыши на нее и у вас перед глазами появится надпись с обозначением )

Как сохранить анимацию в фотошопе?

Выбираем формат Gif (он там уже автоматом стоит) и жмем Сохранить… (выбираем путь сохранения, к примеру — рабочий стол ), Все анимация сохранилась=)

P.S. С анимации можно убрать фон — удалив слой «Фон» (но у меня он сливается с шаблоном)

Я думаю, тут и без видеоурока все понятно… Но все равно, как и обещал, вот смотрите:

На сегодня все, пока!

как создать анимированный GIF в фотошопе — 2019-2020

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

Дизайн анимации

Запустите Photoshop (CS6 Extended или любую версию CC) и выберите «Файл»> «Создать». В появившемся диалоговом окне введите ширину и высоту анимации (скажем, 300×250 пикселей). Введите 72 для разрешения, установите для меню Color Mode значение RGB и выберите sRGB в меню Color Profile.

sRGB — это стандартное цветовое пространство для Интернета, поэтому проектирование в этом пространстве позволяет избежать смещения цвета при сохранении файла.

Затем создайте контент, используя слои. Чтобы добавить изображения в документ, выберите «Файл»> «Вставить встроенный» («Файл»> «Поместить в более ранние версии»). Photoshop окружает изображение ручками изменения размера; Удерживая клавишу Shift, перетащите любой угловой маркер, чтобы изменить размер изображения, а затем нажмите «Return». Повторите для каждого изображения. Не забудьте включить слой для брендинга (скажем, ваш логотип) и слой «призыва к действию» (скажем, «нажмите здесь, чтобы получить 50% от вашего первого присутствия»). Последний дает вашей аудитории действие, и позволяет вам оценить показатель успеха объявления. Как только ваш контент будет завершен, отключите значки видимости слоя (обведены) для всего, кроме того, что вы хотите видеть в первом кадре.

Эта панель слоев отображает весь анимационный контент. Как видите, видны только слои для первого кадра.

Теперь выберите «Окно»> «Временная шкала». На появившейся панели щелкните значок, указывающий вниз, справа от кнопки «Создать временную шкалу видео» и выберите «Создать анимацию кадра». Нажмите появившуюся кнопку «Создать анимацию кадра», и Photoshop создаст один кадр, представляющий то, что в данный момент видно на панели «Слои». Каждый кадр служит заполнителем для контента, который вы хотите показать на экране, который вы контролируете, используя видимость слоя.

Вот как выглядит панель «Таймлайн», когда вы впервые открываете ее (вверху), и вот как она выглядит после нажатия кнопки «Создать анимацию кадра».

Чтобы добавить новый кадр, нажмите кнопку «Дублировать выбранные кадры» (обведено). Поскольку содержимое кадра определяется видимостью слоя, новый кадр идентичен первому. На панели «Слои» используйте значки видимости, чтобы отобразить только те слои, которые содержат контент для второго кадра анимации. Продолжайте добавлять кадры и корректировать видимость слоя, пока не закончите анимацию. Здесь после финальной фотографии костюма появляется рамка призыва к действию, за которой следует «пустая» рамка, содержащая только фон.

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

Вы также можете добавить плавный переход между кадрами, который называется анимацией движения. Чтобы сделать это, активируйте фрейм, который вы хотите добавить в следующий (скажем, фрейм «призыв к действию»), и нажмите кнопку Tween (она выглядит как диагональный ряд квадратов и находится слева от дублирующейся кнопки). В появившемся диалоговом окне скажите Photoshop, какой кадр нужно поменять активным (здесь был использован следующий кадр), и укажите, сколько кадров затухания вы хотите в поле «Кадры для добавления». Нажмите OK, и Photoshop добавит новые рамки (обведено).

Чем больше кадров вы добавляете, тем больше размер файла, поэтому используйте его с осторожностью!

Настроить воспроизведение

Используйте меню задержки кадров под каждым кадром, чтобы контролировать, как долго он виден. Сохраняйте брендинг и призывайте к действию кадры на экране достаточно долго, чтобы их можно было прочитать (скажем, две секунды) и ускорить анимацию кадров (0, 5 секунды). Затем щелкните меню параметров зацикливания (обведено) и выберите 3, чтобы анимация повторялась три раза. Нажмите кнопку «Воспроизвести» (также обведено), чтобы просмотреть свои работы.

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

Когда вы закончите, выберите «Оптимизировать анимацию» из всплывающего меню панели «Таймлайн» (обведено). В появившемся диалоговом окне оставьте оба параметра включенными: Bounding Box тесно обрезает каждый кадр до его содержимого, а Redundant Pixel Removal делает неизменными пиксели прозрачными в последующих кадрах). Выберите «Файл»> «Сохранить как» и выберите «Photoshop» в меню «Формат», чтобы сохранить слои, чтобы их можно было редактировать позже.

Оптимизация анимации позволяет сохранить небольшой размер файла.

Экспортировать файл

Выберите «Файл»> «Сохранить для Интернета» в Photoshop CS6 Extended или «Файл»> «Экспорт»> «Сохранить для Интернета в CC» и выберите GIF в меню формата в правом верхнем углу (обведено кружком). Если вы включили фотографии с градиентами в анимацию, установите для параметра «Размывание» значение «Диффузия» и поэкспериментируйте с настройкой количества справа (также обведено кружком). Если ваша анимация не включает полноцветные фотографии, попробуйте уменьшить поле «Цвета», чтобы уменьшить размер файла. Используйте раздел «Анимация» в правом нижнем углу (обведено кружком), чтобы предварительно просмотреть свой фрагмент перед его сохранением.

Вот, могущественное диалоговое окно Save for Web.

Полученный GIF будет воспроизводиться в любом веб-браузере: используйте команду «Файл»> «Открыть» браузера или перетащите GIF-файл в окно браузера. Вы также можете просмотреть его с помощью QuickLook: просто щелкните имя файла и нажмите клавишу пробела на клавиатуре.

Как сделать GIF анимацию в фотошопе

Всем привет. Расскажу, как быстро сделать простую GIF анимацию для баннера, логотипа, да и друзей можно порадовать, например поздравлением, сделанным своими руками. Сегодня мы будем создавать анимацию в Adobe Photoshop.

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

Сам баннер не сильно «за мудрен», но захотелось сделать небольшую анимацию, для привлекательности. Анимацию делала в Adobe Photoshop CS5.

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

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

По началу сама немного спотыкалась, так как раньше не использовала Adobe Photoshop, для изготовления анимации, но оказалось все очень просто. Самое главное желание, немного знаний и идеи для GIF.

Создание GIF анимации в фотошопе

Начинаем с самого простого, это создания нового документа, нужного нам размера. Я использовала 730*410 пикселей, с разрешением 72 пикселей на дюйм.

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

Теперь нужно продумать, дизайн будущей GIF и набросать заготовки картинок, которые будут использоваться в анимации. При чем каждый объект на новом слое. Примерно вот так, как у меня…

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

Далее, нам нужно будет открыть «Анимацию», с ее помощью мы и будем создавать GIF. По умолчанию она выключена.

Включаем ее в верхнем меню на вкладке «Окно» — «Анимация» и отмечаем этот пункт птичкой.

Теперь она у нас появится внизу, под файлом. Приступаем к ее наполнению, для начала перетаскиваем нужные слои и располагаем их в порядке появления. Каждому слою, своя дорожка.

Снимаем замок с нулевого слоя и начинаем создавать свой шедевр.

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

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

Затем, внизу, нажимаем на значок копирования, и во втором файле включаем глазик. Далее, копируем второй файл и включаем, при помощи глазика третий слой. Так поступаем со всеми последующими слоями.

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

Чтобы сделать плавный переход между слоями, следует задать интервал анимации в каждом слое. Я поставила по 0. 5 секунды, просмотрела, меня это устроило, Вы можете задать свои интервалы.

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

Как сохранить GIF и уменьшить его вес без потери качества в фотошопе

Для сохранения созданной нами GIF анимации, вверху, в панели жмем на «Файл», далее находим пункт «Сохранить для Web и устройств…». Но сохранять пока не торопимся.

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

Далее, внизу под файлом мы видим вес нашей анимации и если он слишком большой, то будем уменьшать его до нужного. Для этого обращаем внимание на пункт «Потери», обычно там установлено нулевое значение. Для уменьшения веса, всего лишь следует передвинуть бегунок, пока нас не устроит размер файла, да и визуальная потеря качества анимации при этом не страдает. Я установила значение 62.

Можно еще раз просмотреть, что у нас получилось, нажав на кнопку проигрывателя. Если все понравилось, нажимаем на «Сохранить».

Откроется окно, где следует указать имя папки, в которую будет помещен файл. Задать имя нашей GIF анимации и в пункте «Формат» выбрать как будет сохранен файл, а именно «Только изображения» или в формате HTML, я выбрала первый пункт, нажала на кнопку «Сохранить».

Просматривала сохраненный файл с помощью Яндекс браузера.

Если вдруг вам не понятно, что я рассказала, посмотрите это видео, в котором видно полное создание анимации.

Друзья, сегодня мы с вами рассмотрели, как можно быстро создать GIF анимацию и как правильно ее сохранить. Надеюсь, этот урок был для вас полезен.

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

Думаю я не сильно намудрила с уроком, как вы считаете? И при длительной тренировке, у нас с вами будут получаться хорошие ролики. До новых встреч.

Поделиться ссылкой:

Как сделать Gif в Photoshop

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

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

Мне нравятся GIF-ы тем, что их вообще не сложно сделать. При наличии Photoshop и пары свободных минут запилить гиф — плёвое дело.

Учимся делать GIF-ы в Photoshop

Вот такую, например, гифку можно забабахать в этой программе:

Итак, приступим.

Шаг первый. Загружаем изображения в Фотошоп.

Когда у вас есть готовая серия картинок.

Для начала соберите все имеющиеся изображения в отдельной папочке. Нажмите File > Scripts > Load Files Into Stack (Файл > Сценарии > Загрузить файлы в стек), чтобы закинуть их в программу.

Затем жмём Browse (Обзор), выбираем файлы, подтверждаем действие кнопочкой ОК.

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

Когда у вас нет серии картинок.

Сделайте для каждого кадра по новому слою, выбрав Layer > New > Layer (Слои > Новый > Слой).

Обязательно подпишите каждый слой разными именами — это позволит легко отследить их во время создания GIF. Чтобы сделать это, откройте меню Layer (Слои) (ищите в правом нижнем уголочке экрана), щёлкните два раза мышкой по дефолтному имени слоя, и впишите новое имя. Когда переименуете все слои, жмите Enter.

Шаг второй. Переходим к Timeline (Шкала времени).

В верхней панели выбираем Window > Timeline (Окно > Шкала времени).

Должно появиться вот такое окошко:

Шаг третий. Меняем параметр в Timeline.

Если вы видите вот такую кнопку «Create Video Timeline» (Создать шкалу времени для видео), её нужно поменять на «Create Frame Animation» (Создать анимацию кадра).

Теперь окошко Timeline должно иметь примерно такой вид:

Шаг четвёртый. Создаём каждому кадру новый слой.

Для начала надо выбрать все слои, нажав в верхней менюшке Select > All Layers (Выделение все слои).

Затем кликаем по значку меню — в верхнем правом уголке экрана Timeline.

Появится выпадающее меню, где нужно поставить галочку напротив «Create New Layer for Each New Frame» (Создать новый слой для каждого нового кадра).

Далее опять жмём меню на экране Timeline, выбираем «Make Frames From Layers» (Создать кадры из слоёв).

Шаг пятый. Выставляем время каждого кадра.

Под кадрами вы увидите маленькие окошечки, щёлкните по ним, чтобы установить желаемый временной промежуток. В нашем случае это 0,5 секунд на кадр.

Шаг шестой. Выставляем количество повторений.

Внизу тулбара выберите количество повторений кадра.

По умолчанию будет выставлено Once (Однократно), однако вы можете зацикливать кадр столько, сколько захотите. Чтобы выставить своё значение, выберите Other (Другое).

Шаг седьмой. Предпросмотр гифки.

Чтобы предварительно посмотреть на результат своих трудов, нажмите кнопку воспроизведения.

Шаг восьмой. Сохранение и экспорт.

Довольны получившимся гифом? Если да, то сохраните его для использования в сети, нажав в верхней панели управления File > Export > Save for Web (Legacy) (Файл > Экспортировать > Сохранить для Web (старая версия)).

Затем в выпадающем списке настроек выберите тип GIF-а. Если у вас гиф с градиентами, выберите Dithered GIF (GIF с дизерингом), чтобы не было бандинга (цветные полосы). Если ваше изображение перенасыщено сплошными цветами, можете отказаться от дизеринга, выбрав No Dither (без дизеринга).

Число, стоящее рядом с GIF-ом, означает величину (и точность) сравнения с исходными файлами JPEG или PNG. Тот, кто работал с изображениями в Adobe, знает, чем выше процент дизеринга, тем больше будет размер у файла.

Осталось сохранить анимацию на компьютер, нажав кнопку Save (Сохранить).

анимации — Как сохранить файл анимированного GIF с помощью Photoshop?

анимация — как сохранить файл анимированного GIF с помощью Photoshop? — Обмен стеками графического дизайна
Сеть обмена стеков

Сеть Stack Exchange состоит из 177 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

Посетить Stack Exchange
  2. 0
  3. +0
  6. Авторизоваться Зарегистрироваться

Graphic Design Stack Exchange — это сайт вопросов и ответов для профессионалов, студентов и энтузиастов графического дизайна.Регистрация займет всего минуту.

Зарегистрируйтесь, чтобы присоединиться к этому сообществу

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил

Просмотрено 353к раз

Я делаю .gif в Photoshop CS5. При сохранении этой анимации я использовал шаги = File> Save for web & devices> Preset = GIF 128 Dithered> GIF> Save . После сохранения файла .gif анимация не отображается. Так что не так с процедурой?

Создан 06 июл.

пуджапуджа

52933 золотых знака55 серебряных знаков88 бронзовых знаков

4
  • Файл должен иметь временную шкалу или последовательность кадров.(Окно > Временная шкала )
  • Вам необходимо установить параметры анимации в диалоговом окне «Сохранить для Интернета»:

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

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

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *