Как сделать анимированный GIF в фотошопе

  1. Шаг 1. Настройте размеры и разрешение вашего документа Photoshop -
  2. Размеры
  3. разрешение
  4. Цветовой режим
  5. Шаг 2. Импортируйте файлы изображений в Photoshop -
  6. Создание GIF из видео
  7. Шаг 3: Откройте окно шкалы времени -
  8. Шаг 4: конвертируйте ваши слои в рамки -
  9. Шаг 5: дублируйте кадры для создания анимации -
  10. Шаг 6: Установите время задержки каждого кадра -
  11. Шаг 7: Установите количество циклов анимации -
  12. Шаг 8: Предварительный просмотр и повторение вашей анимации -
  13. Шаг 9. Экспортируйте документ Photoshop в формате GIF. -
  14. Обрезать размер файла
  15. Уменьшить информацию о цвете
  16. Конвертировать в sRGB
  17. Сохранить
  18. Шаг 10: Поделитесь готовым фотошопом GIF! -
  19. Ищете профессиональную помощь в создании анимации?

GIF, или «Graphics Interchange Format», представляет собой сжатый формат файла изображения, который позволяет анимацию. Есть много способов создать GIF, но Photoshop работает быстро и просто, со встроенными инструментами для манипуляции изображениями и анимации.

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

Эти кадры - то, что мы собираемся построить в этом руководстве, чтобы анимировать рекламный баннер GIF

Узнайте, как я сделал этот GIF! Фото через Грэм Волшебник ,

Без лишних слов, вот как сделать анимированный GIF в Photoshop.

Шаг 1. Настройте размеры и разрешение вашего документа Photoshop
-

Настройте документ заранее. Даже если ваша единственная цель - создать совместный GIF-файл для ваших друзей в социальных сетях, если размер ваших фотографий или видео будет определять размер вашего документа, это может сделать файл больше, чем вам нужно, что приведет к низкому качеству. GIF. В общем, где-то в области 600px-800px хорошо для квадратного изображения.

В общем, где-то в области 600px-800px хорошо для квадратного изображения

Установите размеры, разрешение и цветовой режим вашего документа Photoshop

Размеры

Для этого проекта мы работаем с баннерной рекламой GIF, которая имеет стандартные правила определения размеров. Я выбрал макет 720 × 300. Убедитесь, что ваши единицы в пикселях.

разрешение

Чтобы размер файла был как можно меньше, разрешение 150 подойдет. Я пошел с 300, так как я знаю, что мой GIF не будет таким большим. Убедитесь, что ваши единицы в пикселях / дюйм.

Цветовой режим

Наконец, для экрана создаются анимированные GIF-изображения, поэтому установите цветовой режим на цвет RGB. Нажмите Создать, чтобы открыть новый документ.

Шаг 2. Импортируйте файлы изображений в Photoshop
-

Создание GIF из неподвижных изображений

Перейдите в « Файл»> «Сценарии»> «Загрузить файлы в стек» и нажмите кнопку «Обзор» в появившемся окне «Загрузить слои». Это открывает окно Finder / Explorer, где вы можете просматривать ваши файлы и выбирать все те, которые вам нужны. Когда вы закончите, нажмите Открыть, а затем ОК в следующем окне. Файлы будут импортированы в отдельный документ, из которого вы можете выбрать все слои и перетащить их в рабочий документ.

Создание GIF из видео

Если вы конвертируете видео в GIF, выберите «Файл»> «Импорт»> «Кадры видео в слои» .

Шаг 3: Откройте окно шкалы времени
-

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

Шаг 4: конвертируйте ваши слои в рамки
-

Если у вас уже есть готовые изображения, нажмите на значок меню гамбургера на временной шкале и выберите «Создать кадры из слоев».

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

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

Шаг 5: дублируйте кадры для создания анимации
-

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

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

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

хотел их, что привело к плавной анимации скольжения вниз

Фото через Грэм Волшебник ,

Шаг 6: Установите время задержки каждого кадра
-

Настройка продолжительности находится в нижней части каждого кадра.

Вы можете найти таймер задержки внизу каждого кадра (время в секундах с выпадающей стрелкой рядом с ним).

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

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

Совет: Многие кадры с короткими задержками - это ключ к плавной анимации, в то время как несколько кадров с длинными задержками создают резкий эффект остановки движения.

Шаг 7: Установите количество циклов анимации
-

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

Шаг 8: Предварительный просмотр и повторение вашей анимации
-

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

Шаг 9. Экспортируйте документ Photoshop в формате GIF.
-

Файл> Экспорт> Сохранить для Web (Legacy)…

Прежде всего, не забудьте сохранить свой рабочий PSD!

Когда вы будете готовы экспортировать окончательный GIF- файл , перейдите в « Файл»> «Экспорт»> «Сохранить для Web» (Legacy) . (Примечание: если вы работаете с более старой версией Photoshop, это, вероятно, Файл> Сохранить для Web и устройств). Это откроет окно экспорта.

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

Обрезать размер файла

Ваша основная цель с оставшимися опциями - сохранить размер файла небольшим, уменьшив количество деталей в GIF, не жертвуя качеством изображения. Помните, что большой размер файла означает медленное время загрузки, что может быть особенно наказуемым для маркетинговых целей, таких как рекламные баннеры, когда зритель не ищет ваш контент и не будет ждать его загрузки. Стремитесь остаться ниже 1 МБ. До 5 МБ выполнимо на большинстве веб-сайтов, но это толкает. Вы можете увидеть размер файла GIF в левом нижнем углу панели, содержащей изображение для предварительного просмотра.

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

Это настройка, на которую следует обратить внимание в окне «Сохранить для Web».

Уменьшить информацию о цвете

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

Конвертировать в sRGB

sRGB, или «Стандартный RGB», имеет более узкий диапазон цветов, чем «Adobe RGB» по умолчанию, поэтому обязательно установите этот флажок.

Сохранить

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

Чтобы убедиться, что все получилось хорошо, вы можете просмотреть готовый файл GIF, перетащив его в поле URL браузера

Мой готовый баннер GIF. Фото через Грэм Волшебник ,

Шаг 10: Поделитесь готовым фотошопом GIF!
-

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

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

Ищете профессиональную помощь в создании анимации?
Работайте с одним из наших талантливых дизайнеров!

Эта статья была изначально написана Ребеккой Крегер и опубликована в 2013 году. Она была обновлена ​​новой информацией и примерами.

Похожие

как сделать блог популярным
Добавить слайдер изображений в заголовок WordPress
Создать слайдеры изображений и вставить их в заголовок WordPress очень просто. В этом пошаговом руководстве мы покажем вам, как создавать слайдеры изображений в WordPress, и добавьте слайд-шоу в заголовок вашего сайта WordPress или блога. Слайдер изображений также известен как слайд-шоу или слайд-шоу фотографий. По сути, это анимированные изображения, которые можно использовать в качестве рекламы, баннера на сайте, веб-фотоальбома и так далее. Вот что мы собираемся достичь в следующих
Действие Photoshop для создания текстового баннера с изображением
Нас часто спрашивают, как создать баннер с текстовым изображением, как показано на скриншоте справа. Они очень популярны, если вы загружаете изображения, чтобы помочь посетителям с навигацией. Вот загружаемое действие фотошопа, которое вы можете попробовать. Вы можете редактировать действие по своему усмотрению. Обращаем ваше внимание, что справочная служба theimagefile не может поддерживать программное обеспечение сторонних производителей.
Как правильно выбрать блог-платформу?
Блог-платформы Первое о чем следует задуматься блогеру-новичку - это выбор блог-платформы. То есть какой у нас будет блог и где он будет размещаться. Хотя существует несколько тысяч вариантов, все они делятся на три следующие типы: - Автономные блоги; - Блог-платформы; - Блоги интегрированы в новостные сайты. Рассмотрим более подробно их типичных и популярных представителей. Первыми будут автономные
С чего начать в YouTube?
... возможно. Каждый день видеохостинг собирает миллионную аудиторию, которая ждет нового вида. Ежедневная число просмотров видеороликов превышает 4 миллиарда. Чтение утренних газет с успехом сменилось просмотром свежего видео, а никому не известные таланты в один день становятся звездами. Возможности, предлагаемые YouTube как обычным пользователям, так и брендам огромные. Но залог успешного пользования этими услугами - это собственный канал. Более подробно о
Как написать популярную статью, или как моя статья была прочитана более 200 000 раз!
... шагов навстречу Шенгенской зоне или как открыть шопинг-визу ; 4) Как добраться из Львова в Краков ; 5) Новые правила регистрации на подачу документов на шенген-визу в пункт приема визовых анкет
Как правильно писать статьи в дневнике
Многие из нас задумывались над созданием блога. Некоторые даже делал первые шаги, а вдохновение некоторых даже хватало на год блоґування. Но блог - это такая вещь, которая не может держаться слишком долго на голом энтузиазме и в конце концов должно подкрепляться чем-то,
Как кошки-викинги отличались от современных кошек
Одежда из кошачьих шкурок была модной с воинами викингов. Мы знаем древние египтяне любили кошек а как же викинги? Недавние генетические исследования показал, что эти мореходные скандинавские исследователи привели одомашненных кошек на свои
Как легко разместить форму на вашем сайте
Контактные формы. Каждый хочет их на своем сайте. Кажется, это довольно стандартный компонент, о котором каждый должен знать, как тыльная сторона его ладони. Но это не правда. Снова и снова я сталкиваюсь с людьми, которые тянут свои волосы, пытаясь получить простую контактную форму (или любую форму) на своем сайте, или выполняют ее очень многословно и неэффективно. Это руководство научит вас, как использовать лучшие инструменты для быстрого создания
Вот как сохранить автономные карты в новом приложении Google Maps для iOS 7.x
... вление Google Maps для iOS и Android приносит важную функцию, которую многие пользователи могут найти полезной / интересной. Карты Google теперь имеют особую функцию автономных карт . Он встроен прямо в приложение как отдельная функция. Есть старый метод кеширования карт мы писали о. Тебе это больше не нужно. Новая функция автономных карт работает намного лучше и
Как взломать учетные записи Facebook и пароли
... шаг в этой атаке - определить адрес электронной почты, используемый для входа в профиль пользователя. Если злоумышленник еще не знает адреса электронной почты цели, угадайте, что? Большинство людей перечисляют эту информацию в разделе контактов своего профиля на Facebook. Шаг 2: Теперь все, что нужно сделать злоумышленнику, это нажать на Забыли пароль? Нажмите кнопку и введите предполагаемый адрес электронной почты получателя. Далее злоумышленник нажмет на Это

Комментарии

Как сделать слайдер изображений в WordPress?
Как сделать слайдер изображений в WordPress? Прежде чем мы собираемся добавить слайдер изображений на наш сайт WordPress, нам нужно сначала создать слайдер изображений. Как мы уже упоминали выше, слайдеры изображений - это в основном анимированные картинки. Мы можем загрузить статические фотографии или изображения из фотоальбома на нашем компьютере в WordPress и использовать плагин слайд-шоу или слайдера для WordPress для упорядочивания фотографий. В наши фотоальбомы можно добавить больше
Возьмите в качестве примера этот заголовок: «Как вести успешный блог 5 эффективных советов по написанию текстов?
Возьмите в качестве примера этот заголовок: «Как вести успешный блог 5 эффективных советов по написанию текстов?». Числа понятны и помогают привлечь внимание, поэтому они еще долго будут оставаться в тренде. Будьте честны Вы полностью контролируете ваш контент, но не поддавайтесь соблазну и не злоупотребляйте этим. Нет смысла искажать факты или придумывать новые о том, в чем Вы не разбираетесь. Пишите о том, в чем Вы уверены; если же Вы недостаточно подкованы в каких-то
4. Как ускорить индексацию записи?
4. Как ускорить индексацию записи? Сейчас лучший способ для этого - распространение в социальных сетях. Добавьте сами свою собственную статью в сети, которые вы используете и дайте возможность это сделать вашим читателям, разместив социальные кнопки «поделиться» а своем сайте. Это поможет не только ускорить индексирование, а и привлечь больше людей на сайт за счет друзей Ваших читателей в соц. сетях. Хотите узнать больше и разобраться подробнее? Приглашаем Вас
В Excel, как вы могли бы быстро и легко извлечь реальные изображения из URL-адресов изображений?
В Excel, как вы могли бы быстро и легко извлечь реальные изображения из URL-адресов изображений? Преобразование URL-адресов изображений в реальные изображения с кодом VBA Преобразуйте имя файла в фактические изображения
Хотите знать, как скачать видео с YouTube на Mac ?
В Excel, как вы могли бы быстро и легко извлечь реальные изображения из URL-адресов изображений? Преобразование URL-адресов изображений в реальные изображения с кодом VBA Преобразуйте имя файла в фактические изображения
С этим давайте сразу перейдем к самому важному вопросу, который, вероятно, у вас на уме, какой хостинг для вашего блога лучший и как вы знаете, что искать?
С этим давайте сразу перейдем к самому важному вопросу, который, вероятно, у вас на уме, какой хостинг для вашего блога лучший и как вы знаете, что искать? Прежде чем мы начнем, вот единственное, что важнее, чем веб-хостинг Итак, ясно, что хостинг является действительно важной составляющей вашего онлайн-бизнеса. Тем не менее, есть одна вещь, которую я осмелюсь сказать, является более важным.
Как сделать изображение уникальным?
Как сделать изображение уникальным? Здесь можно применить одну хитрость. Откройте изображение в фотошоп. Далее выберите в меню Image (Изображение) = Rotate Canvas (Повернуть полотно) = Flip Canvas Horizontal (отразить полотно по горизонтали). Этот трюк создает зеркальное отражение. После этого сохраните изображение и проверьте еще раз в сервисе TinEye. Не всегда удается снизить до 0, но добиться значительного сокращения нельзя. Казалось
Как вы выбираете курс?
Как вы выбираете курс? Посмотреть все три платформы. Темы перекрываются, но в дублированном варианте стоит пройтись по некоторым темам. Во-первых, повторение подкрепляет знания, а во-вторых, каждая из этих платформ имеет несколько иной подход к обучению. Выбор за вами. Ооо мама и дочка, таких материалов много, и это только начало . Так много людей хотят платить за ежемесячный буткемп или передовой курс разработчика, так как
Как мы можем с вами связаться?
Как мы можем с вами связаться? Убедитесь, что введенный вами адрес электронной почты не связан с другим профилем Facebook. Шаг 5: Этот шаг немного сложнее, потому что он задает секретный вопрос. Если злоумышленник знает цель лично, это будет чрезвычайно легко. Однако, если злоумышленник не очень хорошо знает цель, он может сделать обоснованное предположение. Иногда они даже копают профиль жертвы в Facebook, чтобы найти информацию о возможных правильных ответах на секретный
Возможно, вы наиболее знакомы с такими именами, как Norton, McAfee и AVG, но действительно ли они лучше?
Возможно, вы наиболее знакомы с такими именами, как Norton, McAfee и AVG, но действительно ли они лучше? Мы протестировали и рассмотрели новейшие пакеты - как премиум, так и бесплатные антивирусы - от крупнейших компаний в области кибербезопасности, поэтому вы можете быть уверены, что нашим рекомендациям можно доверять. Более 80 антивирусных программ и пакетов безопасности были проверены и пересмотрены нашими экспертами по состоянию на апрель 2019 года, чтобы дать вам самое лучшее решение для
Почему я хочу это сделать?
Почему я хочу это сделать? Возможно, вам нравится меню «Пуск» Windows 10, которое по сути является расширением и изменением меню «Пуск» Windows 8. Возможно, система Metro UI на основе плитки вас не раздражает, и у вас нет проблем с удалением традиционного стиля меню «Пуск». Если так, то это руководство, конечно, не для вас, и это здорово, что новый макет не беспокоит вас и не заполняет вас приступами ностальгии по GUI прошлых лет.

Ищете профессиональную помощь в создании анимации?
Ищете профессиональную помощь в создании анимации?
Как правильно выбрать блог-платформу?
Мы знаем древние египтяне любили кошек а как же викинги?
Если злоумышленник еще не знает адреса электронной почты цели, угадайте, что?
Шаг 2: Теперь все, что нужно сделать злоумышленнику, это нажать на Забыли пароль?
Как сделать слайдер изображений в WordPress?
Возьмите в качестве примера этот заголовок: «Как вести успешный блог 5 эффективных советов по написанию текстов?
4. Как ускорить индексацию записи?
4. Как ускорить индексацию записи?