Сделать gif-анимацию не сложно, если у вас есть Фотошоп.
Сейчас я расскажу как ее сделать.
Создаете многослойный документ. Для простоты объяснения я создал два слоя.
Открываете окно Windows→Workspace→Motion
В появившейся области Timeline создаете фреймы и поочередно присваиваете каждому фрейму соответсвующий слой.
Внизу под каждым фреймом задаете время отображения слайда. Для первого слайда я указал 1,5 секунды, для второго секунду.
Нажмите кнопочку Play и поэкспериментируйте с выбором оптимальной задержки кадров анимации.
Чтобы каждый раз не нажимать кнопку. можете сделать непрерывный процесс, выставьте значение Forever.
Когда добьетесь неоьходимого интервала смены кадров, работу можно считать законченной. Сохраните исходник в PSD и анимацию в формате GIF. Укажите большее количество цветов, если градиент в изображении будет слишком упрощенным. состоящим из точечек.
Результат будет таким:
Я рассказал кратко, самое необходимое. Более подробно о создании gif-анимации в Фотошопе рассказывается в обучающем видео. Попробуйте, у вас обязательно получится!
СОХРАНЕНИЕ АНИМАЦИИ
В ФОТОШОПЕ
Как сохранить в фотошопе? – это легче чем вы можете себе представить, существует несколько видов сохранения файлов, которые вы создаёте или редактируете в фотошопе. В нашем случае файлы, которые мы создаём мы привыкли называть изображениями.
Частенько мне задают вопрос: «Как сохранить анимацию в фотошопе?» - этот вопрос является одним из главнейших в сохранении изображений в фотошопе. Ответ на этот вопрос очень прост, для того чтобы сохранить анимацию в фотошопе нужно выполнить следующие действия: нажать на верхней панельке Файл - Сохранить для Web устройств – существует так же более быстрый вариант с использованием горячих клавиш, хотя для меня он и не является более лёгким, я пользуюсь мышкой, но если кто-то хочет попробовать вот сама команда: Alt+ Shift + Ctrl + S
После того как вы выполните эти действия, то перед вами откроется новое окошко в котором вы сможете установить настройки для вашего изображения, а именно, вы можете задать качество сохраняемого изображения, это нужно для того чтобы если вы решите залить этот файл на свой Web-сайт, этот файл не весил слишком много, но при этом вы можете выбрать оптимальное для вас размер изображения с оптимальным потерием качества.
В разделе «Установки» вы можете задать формат вашего изображения, а затем произвести настройки по данному формату. Что бы сохранить анимацию вам потребуется выбрать качество.GIF - после чего сохранить свой файл на компьютер.
Надеюсь, вы поняли, как сохранить в фотошопе нужное вам изображение. Тот способ, который я расписал, может применяться в основном, когда вам нужно сохранить анимацию (это единственный способ для сохранения анимации в фотошопе, другого пока не придумали) или статическое изображение для сайта.
Но я не ответил бы на вопрос «как сохранить в фотошопе» досконально, если бы не рассмотрел другой способ сохранения изображений в фотошопе. Можно нажать Файл – Сохранить (Английская версия звучит так: File – Save), после чего перед нами появится окошко, в котором мы сможем выбрать формат, а также путь к тому месту, куда именно мы хотим сохранить изображение.
И ещё один способ сохранения выглядит так: Файл – Сохранить как… (Английская версия звучит так: File - Save as…) в данном варианте перед вами, так же как и в предыдущем варианте появится окно, в котором вы выбираете нужный вам формат и путь к тому месту, куда вы хотите сохранить файл (изображение)
Но при этом повторюсь, последние два варианта не подходят при сохранении гиф анимации, вы можете выбрать в них формат.gif, но при этом изображение останется не анимированным, а будет иметь лишь фрагмент одного из кадров (Можете испытать этот вариант и увидите что получится)
Так же стоит заметить, что в первом варианте вы не сможете сохранить ваш файл в разрешении.psd - этот формат читает фотошоп, то есть если вы сохраните ваш файл в этом формате, то вы в любой момент сможете открыть его с помощью фотошоп и продолжить работу над изображением, при этом сохранится последовательность слоёв, одним словом вы вернётесь к тому месту с которого закрыли фотошоп.
Как это выглядит в действии см.скрины
шаг1 
шаг2 
После того как мы сделали анимацию в Фотошоп, возникает вопрос - как эту красоту сохранить?
Если Вы работаете в PhotoshopCS3 1. Заходим Файл - Сохранить для Web и устройств... (или Ctrl+Shift+Alt+S)
2. В появившемся окне устанавливаем нужное количество цветов используемых в изображении (самое большее 256), здесь - же устанавливаем формат изображения Gif. В этом - же окне Вы можете еще раз просмотреть свою анимацию (убедится, что все работает нормально).
3. После того как все параметры установлены, нажимаем кнопку Сохранить. У нас появится другое окно "Сохранить оптимизированный как". В строке Папка указываем путь к месту куда будем сохранять нашу анимацию. В строке Имя файла соответствено присваем имя анимации. В строке Тип файла выбираем "Только изображения (*.gif)" в случае если Вам нужна только анимированная картинка, и "HTML и изображения(*.html)" - если Вам нужна не только картинка, но и HTML код (к примеру для вставки на сайт).
Если Вы сохраняете анимацию через Image Ready
1. После того как Вы создали анимацию в Photoshop, нажмите на кнопку "Перейти в Image Ready", которая находится в самом низу панели инструментов. У нас откроется программа Image Ready.
2. В правой части рабочего окна находится палитра Оптимизация, на этой палитре устанавливаем нужное количество цветов используемых в изображении (самое большее 256), здесь - же устанавливаем формат изображения Gif. У меня английская версия, поэтому картинки будут с английскими надписями, но думаю все равно будет понятно.
3. После того как установлены нужные параметры на палитре Оптимизация идем в меню Файл - Сохранить оптимизированный как...(или Ctrl+Shift+Alt+S).
4. Появится одноименное окно "Сохранить оптимизированный как". В строке Папка указываем путь к месту куда будем сохранять нашу анимацию. В строке Имя файла соответствено присваем имя анимации. В строке Тип файла выбираем "Только изображения (*.gif)" в случае если Вам нужна только анимированная картинка, и "HTML и изображения(*.html)" - если Вам нужна не только картинка, но и HTML код (к примеру для вставки на сайт).
Приветствую вас в очередном уроке, благодаря которому вы узнаете как сохранить gif анимацию в фотошопе правильно. Что бы после сохранения она выглядела так, как вы ее делали, без лишних разводов, острых краев и прочей мелочи, с которыми многие сталкиваются.
Как сохранить в формате GIF
Примечание: формат gif доступен только, если изображения в 8 бит/канал. (гиф поддерживает исключительно 8 битный/канал имейте это виду).
Для преобразования изображения в 8 бит/канал зайдите во вкладку Изображение -> Режим -> 8 бит/канал.
Для сохранения анимации выберите Файл -> Сохранить для web -> Формат оптимизированного файла (GIF).
Обязательно установите галочку рядом с Преобразовать в sRGB, это позволит сохранить именно те цвета которые вы использовали, для отображения в браузере.
Примечание: в большинстве случаев (90%) устанавливают "постоянно".
Перед нами большое диалоговое окно. Давайте некоторые из параметров рассмотрим подробнее.
Цвета
Обратите внимание на данный параметр (максимальное количество цветов в цветовой таблице, по умолчанию он установлено 64. Данное число считается средним (типо золотая середина) значением, и отлично подходит практически для всего.
Например для черно-белой анимации я считаю значение 64 излишни большое. Для ч/б анимации устанавливаю значение 16, мне кажется оно идеальным. А для анимации например каких либо web элементов (кнопок, баннеров, аватаров и пр.) среднее значение бывает слишком мало, что приводить к неприятным разводам. давайте рассмотрим на примере:
| Вы увидели хоть малейшую разницу?
Единственное что хочу заметить, на больших анимациях варьируется размер исходного файла.
А теперь следующий пример, на web кнопке
Сохранено gif со значением цвета 64 (размер 18,9 kb)
Сохранено gif со значением цвета 256 (размер 37,9 kb)
Чувствуется разница правда? и в качестве и размере. Всегда приходится чем то жертвовать, в моем случае я отдаю приоритеты "Качеству" лишние 19 кб меня так не пугают, в отличии от качества.
Чересстрочно
Данный параметр не менее важен как и все остальные. Если сохранить анимацию с активной галочкой Чересстрочно, в браузере анимация будет идти вместе с загрузкой изображения. А если сохранять не используя данный параметр, анимация будет показана только после полной загрузки изображения. Использование данного параметра сокращает время загрузки, однако значительно влияет на размер исходного файла.
Как правило чересстрочно активна по умолчанию, использовать ее или нет решайте сами.
Давайте повторим основные моменты сохранения gif анимации в фотошопе:
- Выберите Файл -> Сохранить для web -> GIF
- Установить галочку возле sRGB
- Установить параметры повторов (постоянно, однократно, другое)
- Нажать кнопку "Сохранить"
Есть пара вопросов:
- Вы используете "Чересстрочно" ?
- Для вас важнее качество или размер?
Файлы в формате GIF повсюду. Некогда скромные анимированные изображения теперь являются неофициальным языком интернета. GIF анимация — это самый быстрый способ выразить эмоции в Twitter, а ещё мы можем тратить часы на её просмотр пролистывая ленту новостей в VK, Facebook или Одноклассниках.
Существует достаточно большое количество сайтов, на которых можно найти уже готовые гифки на самые различные тематики. Но ничто не сравнится с GIF анимацией, которая сделана своими собственными руками. Думаете, что это сложный процесс? Вы ошибаетесь, это довольно просто. Быстро создать GIF анимацию можно в графическом редакторе Photoshop, конвертируя уже существующее видео, либо используя серию статических изображений. Давайте рассмотрим подробнее, как это делается.
Примечание: Во всех примерах из этой статьи я использую Photoshop CC 2017.
Как создать GIF анимацию из видео
Для начала необходимо запустить Photoshop, перейти в «Файл» > «Импортировать» > «Кадры видео в слои» и выбрать необходимую видеозапись.
В открывшемся диалоговом окне можно будет выполнить импорт всей видеозаписи, либо выбрать только её определённую часть. Если вы выберете второй вариант, перетащите ручки под окном предварительного просмотра, чтобы установить начальную и конечную точки. Часть видеозаписи, находящаяся между этими ручками, будет импортирована.
Примечание: Имейте в виду, что чем больше видео, которое вы импортируете, тем больше будет ваш GIF. Также, если вы импортируете слишком длинную видеозапись, выбор «Оставить каждый 2 Кадры» (или больше) — это простой способ уменьшить размер, не слишком сильно влияя на качество.
Убедитесь, что установлена галочка в окошке «Создать покадровую анимацию», затем нажмите «OK». Начнется процесс импортирования видеозаписи. Это может занять некоторое время, в зависимости от размера клипа. После завершения импорта откроется рабочая область, в которой каждый кадр видеозаписи будет размещен на собственном слое.
В нижней части экрана находится палитра шкала времени. Она показывает все кадры, из которых будет состоять ваша GIF анимация.
Вы можете добавлять и удалять кадры по своему усмотрению, или редактировать любой из существующих слоев так же, как редактируете слои на любом другом изображении. Для предварительного просмотра вашей GIF-анимации просто нажмите кнопку «Воспроизвести» внизу шкалы времени.
В итоге должно получиться что-то вроде этого:
Создание GIF анимации из серии статических изображений
Если у вас нет видеозаписи для использования её в качестве основы для вашей GIF анимации, вы сможете создать её вручную из серии статических изображений. Это немного сложнее, особенно если вы хотите сделать что-то крутое, но основной процесс прост.
Вы создаёте свой GIF из одного файла изображения, содержащего несколько слоев. Каждый слой – это отдельный кадр вашей будущей анимации. Существует два способа начать работу:
- Если вы уже создали изображения для своей анимации, импортируйте их, выбрав «Файл» > «Сценарии» > «Загрузить файлы в стек…». Нажмите «Обзор» и выберите свои изображения, затем нажмите «ОК». Каждое изображение будет помещено на отдельный слой внутри одного и того же файла.
- Если вы еще не создали изображения, сделайте это сейчас. Помните, что каждое отдельное изображение — это часть будущей анимации.
Теперь вы готовы начать создавать анимацию.
Анимирование статических изображений
Вот как это работает. Когда вы вручную создаете кадр анимации, в него включается каждый видимый слой. Слои, которые отключены, не будут участвовать в создаваемом кадре.
Для создания первого кадра сделайте самый первый слой видимым, а все остальные отключите. Затем, создавая второй кадр, сделайте второй слой видимым, а затем третий слой в третьем кадре и так далее. Когда вы начнете, всё станет понятнее.
Для начала создания анимации откройте шкалу времени, если она у вас не открылась автоматически. Для этого в верхней панели нажмите «Окно» и в открывшемся меню выберите «Шкала времени». В центре раскрывшейся панели нажмите «Создать анимацию кадра». Это действие приведёт к созданию первого кадра вашей анимации. В палитре «Слои» скройте слои, которые не должны быть частью кадра.
Теперь нажмите кнопку «Новый кадр», которая будет дублировать предыдущий кадр. Еще раз скройте лишние слои, а те, которые должны участвовать в кадре, сделайте видимыми.
Повторяйте этот процесс, пока не добавите все необходимые для анимации кадры.
Завершение
В завершение, установите время отображения каждого кадра. Выделите первый кадр, а затем щелкните по последнему с зажатой кнопкой «Shift», для того чтобы выделить их все. Теперь щелкните стрелку вниз под одним из кадров и выберите задержку. Отсутствие задержки означает, что анимация будет работать быстро, в то время как установленное количество секунд заставит кадры оставаться на экране в течение заданного периода времени.
Наконец, установите параметры цикла, которые вы найдете в нижней части панели «Шкала времени». Этот параметр отвечает за то, сколько раз будет воспроизводиться ваша анимация. В большинстве случаев вы будете выбирать вариант «Всегда».
Теперь нажмите кнопку «Воспроизвести» в нижней части экрана, чтобы просмотреть получившуюся анимацию. Вы должны увидеть что-то вроде этого:
Вы можете редактировать кадры, просто выбирая их и меняя видимость слоёв (вы также можете изменить непрозрачность или сделать другие более сложные настройки). Добавьте дополнительные слои, если они вам нужны, или нажмите значок корзины, чтобы удалить их.
Когда вы будете довольны получившимся результатом, можете переходить к разделу «Сохранение анимации», либо читайте дальше, чтобы улучшить получившуюся анимацию.
Усовершенствование анимации путём добавления промежуточных кадров
Photoshop поддерживает мощную анимационную функцию создания промежуточных кадров. Это позволяет создавать более плавные анимации, автоматически генерируя переходные кадры между двумя существующими кадрами. В этом примере я собираюсь обойти все кадры, чтобы придать звездному небу эффект мерцания.
Для начала выберите первый кадр и нажмите кнопку «Создание промежуточных кадров» панели инструментов в нижней части шкалы времени.
В открывшемся диалоговом окне установите пункт «Промежуточные кадры» в значение «Следующий кадр», а для пункта «Добавить кадров» укажите значение по своему усмотрению. Более высокое значение означает более плавный, но медленный переход. Нажмите «OK», чтобы создать промежуточные кадры.
Теперь повторите этот процесс для других исходных кадров, которые вы добавили. Когда доберётесь до последнего, установите «Промежуточные кадры» в значение «Первый кадр». Это поможет создать плавный переход к началу цикла вашей анимации.
Нажмите кнопку воспроизведения, чтобы просмотреть эффект.
Сохранение анимации
Когда вы закончите, сначала сохраните файл в формате «.PSD». Это сохранит всю информацию о слоях и анимации для того, чтобы вы смогли позже отредактировать вашу анимацию, если потребуется. После этого можно переходить непосредственно к сохранению.
Для сохранения созданной анимации перейдите в «Файл» > «Экспортировать» > «Сохранить для Web (старая версия)…». В открывшемся окне выберите формат GIF, а в поле «Цвета» укажите 256. Для того, чтобы уменьшить общий размер файла, уменьшите размер в поле «Размер изображения».
Вы cможете увидеть, размер анимации в левом нижнем углу окна предварительного просмотра. Если он слишком большой, перетащите ползунок «Потери» вправо. Это повлияет на качество, но значительно уменьшит размер файла.
Похожие статьи
