Часть 1. Создание юзербара

Шаг 1. Создание документа

Шаг 2. Градиент.

Шаг 3. Текстура

Рисуем текстуру карбона

Шаг 4. Текст.

Шаг 5. Рамка.

Часть 2. Анимация юзербара в фотошопе

Шаг 1. Добавление иконки к анимации.

Шаг 2. Разбираемся с палитрой анимации.

Шаг 3. Анимируем юзербар.

Шаг 4. Сохранение в Gif – анимацию.

Заключение

UPD: сложна и запутана логика минусующих…

Как быстро создать GIF анимацию в Photoshop

Файлы в формате GIF повсюду. Некогда скромные анимированные изображения теперь являются неофициальным языком интернета. GIF анимация – это самый быстрый способ выразить эмоции в Twitter, а ещё мы можем тратить часы на её просмотр пролистывая ленту новостей в VK, Facebook или Одноклассниках.

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

Примечание: Во всех примерах из этой статьи я использую Photoshop CC 2017.

Как создать GIF анимацию из видео

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

Для начала необходимо запустить Photoshop, перейти в “Файл” > “Импортировать” > “Кадры видео в слои” и выбрать необходимую видеозапись.

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

Примечание: Имейте в виду, что чем больше видео, которое вы импортируете, тем больше будет ваш GIF. Также, если вы импортируете слишком длинную видеозапись, выбор «Оставить каждый 2 Кадры» (или больше) – это простой способ уменьшить размер, не слишком сильно влияя на качество.

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

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

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

Как сохранить созданную gif анимацию читайте в разделе «Сохранение анимации» в конце этой статьи.

В итоге должно получиться что-то вроде этого:

Создание GIF анимации из серии статических изображений

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

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

1. Если вы уже создали изображения для своей анимации, импортируйте их, выбрав «Файл» > «Сценарии» > «Загрузить файлы в стек…». Нажмите «Обзор» и выберите свои изображения, затем нажмите «ОК». Каждое изображение будет помещено на отдельный слой внутри одного и того же файла.
2. Если вы еще не создали изображения, сделайте это сейчас. Помните, что каждое отдельное изображение – это часть будущей анимации.

Теперь вы готовы начать создавать анимацию.

Анимирование статических изображений

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

Для создания первого кадра сделайте самый первый слой видимым, а все остальные отключите. Затем, создавая второй кадр, сделайте второй слой видимым, а затем третий слой в третьем кадре и так далее. Когда вы начнете, всё станет понятнее.

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

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

Повторяйте этот процесс, пока не добавите все необходимые для анимации кадры.

Завершение

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

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

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

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

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

Усовершенствование анимации путём добавления промежуточных кадров

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

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

В открывшемся диалоговом окне установите пункт «Промежуточные кадры» в значение «Следующий кадр», а для пункта «Добавить кадров» укажите значение по своему усмотрению. Более высокое значение означает более плавный, но медленный переход. Нажмите «OK», чтобы создать промежуточные кадры.

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

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

Сохранение анимации

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

Для сохранения созданной анимации перейдите в «Файл» > «Экспортировать» > «Сохранить для Web (старая версия)…». В открывшемся окне выберите формат GIF, а в поле «Цвета» укажите 256. Для того, чтобы уменьшить общий размер файла, уменьшите размер в поле «Размер изображения».

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

Наконец, нажмите «Сохранить», чтобы создать свою GIF анимацию.

Как сделать GIF анимацию в Фотошопе, сохраняем анимированный gif

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

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

Добавление изображений GIF анимации в Photoshop

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

Далее в меню Window (Окно) включаете отображение панели Timeline (Шкала времени).Инструмент отвечает за создание GIF анимации в Photoshop. Расположите его снизу в рабочей области.

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

На следующем шаге выделяете все слои в проекте (клика по ним удерживает Ctrl). После этого открывающего окна контекстного меню в верхнем углу шкалы времени и по выбираете «Создавать кадры из слоев».

Из всех видимых и выделенных слоев 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 для предпросмотра.

Если все функционирует так, как нужно, кликаете Сохранить и сохранить файл на локальном компьютере. Чтобы проверить работоспособность GIF требуется открывать его в браузере, т.к. встроенный просмотрщик Windows анимацию не проигрывает.

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

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

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

Если у вас остались какие-то вопросы о том как сделать GIF анимацию в Фотошопе или есть дополнения, пишите в комментариях.

Как создать Gif анимацию в Фотошоп / Фотошоп-мастер

Задумывались ли вы, как анимированные 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 и перейдите в меню Фильтр — Шум — Добавить шум (Фильтр> Шум> Добавить шум). В диалоговом окне настроек фильтра поставьте такие значения: Эффект (Amount) 3%, распределение Равномерное (Uniform) и нажмите ОК.

Шаг 3

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

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

Шаг 4

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

Примечание переводчика: На скрине автора уже растрированный текст вместе со стилем Обводка. Чтобы у вас получилось так же, после того, как применили обводку, уберите Заливку ( Заливка ) слой с текстом на 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), выберите мягкую кисточку, установите Непрозрачность (непрозрачность) на 95% и белым цветом нарисуйте пятнышки поверх текста. Для каждой буквы отдельное световое пятно на своём слое. Ниже на скриншоте вы видите, как слои выглядят у автора в палитре слоёв.

Шаг 10

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

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

Шаг 11

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

Шаг 12

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

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

Шаг 13

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

Шаг 14

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

Селективное (Выборочное)
Случайное (Распространение)
Постоянно (Навсегда)

Шаг 15

Вот и готова наша очень крутая анимашка с движущимися световыми пятнышками. Автор желает вам успехов и достижения уровня профи J

Автор: clair123rf

Как создать анимацию в Photoshop. Пошаговая инструкция — руководство на Skillbox

В Photoshop анимируют двумя способами:

• Рисуют несколько кадров, вручную изменяя положение и свойства элементов. Если анимация достаточно длинная, то прорисовка каждого кадра занимает много времени.
• Вставьте промежуточные кадры. Необходимо вручную задать лишь состояния макета: в начале и в конце анимации. Нужные кадры между этими состояниями добавит сам Photoshop. Этот способ подойдёт, чтобы показать появление и исчезновение объекта или его перемещение.

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

Поэтому добавляем ещё один кадр в «Шкалу времени» с помощью кнопки «Создать копию кадров».

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

На следующем кадре проверяю, виден ли слой с балалайкой.

После работы с изображением балалайки настраиваю появление текстовой строки. В первом кадре я выделяю текст «Душа поет» и сдвигаю его вправо за пределы макета. С текстом «3 строки» поступаю так же — сдвигаю влево, пока он не исчезнет.

Во втором кадре возвращаю текст назад.

Отлично. Теперь промежуточные кадры между вставками.

Для этого нажимаю кнопку «Создание промежуточных кадров» на «Шкале времени».

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

Чем больше кадров, тем дольше анимация и плавнее двигается элемент. Если кадров слишком мало — элементы будут двигаться рывками.

Я добавил шесть промежуточных кадров. Этого хватит, чтобы текст двигался достаточно быстро, но не дёргался.

Первая часть анимации готова.Теперь её можно воспроизвести и посмотреть, что получилось.

Нажимаю на кнопку воспроизведения на «Шкале времени».

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

Появление, исчезновение и движение можно комбинировать друг с другом, чтобы добиться ещё более интересных эффектов.

Как в Photoshop создать анимированное GIF-изображение

Анимированные GIF привлечь внимание посетителей на них серьезное эмоциональное воздействие. Можно использовать в движущиеся картинки содержимое.

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

Вот пример анимированного GIF-изображения, которое можно создать, руководствуясь этой статьей.

Если у вас уже есть созданные изображения, разместите их в папке. Чтобы загрузить их в Photoshop, перейдите в Файл> Сценарии> Загрузить файлы в стек:

Затем нажмите «Обзор» и выберите файлы, которые нужно использовать в GIF, а затем нажмите кнопку «ОК».

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

Если же у вас нет готовых изображений, разместите каждый кадр анимированного GIF как отдельный слой. Чтобы добавить новый слой, прокладывать в Слои> Новый> Слой:

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

Совет: Если хотите объединить слои так, чтобы они выводились в одном кадре GIF, включите видимость для слоев, необходимо объединить.Для этого нажмите на иконку «глаза» слева, чтобы они были активны только для слоев, которые необходимо объединить. Затем нажмите Shift + Ctrl + Alt + E. Photoshop создаст новый слой, обеспечивающий объединенный контент для движущейся картинки.

Перейдите в Окно> Шкала времени. Она позволяет переключать отдельные слои для различных периодов времени, превращая статическое изображение в анимированное:

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

Активация движущихся картинок:

Теперь временная шкала должна выглядеть примерно так:

Для этого сначала выберите все слои: Выделение > Все слои.

Затем нажмите на иконку меню в правой части временной шкалы:

Из появившегося выпадающего меню выберите пункт «Создать новый слой для каждого нового кадра»:

Каждый слой превратится в кадр GIF:

Перед тем , как создать движущуюся картинку, на время работы над каждым кадром, как долго они должны работать. В нашем случае мы выбрали 0,5 сек. на кадр:

По умолчанию цикл будетаться «Один раз», но можно установить количество раз, сколько нужно.Нажмите «Другое», если нужно указать произвольное число повторений:

Как движущуюся картинку: продолжить в Файл> Сохранить для сохранения в Интернете:

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

Число рядом с GIF определяет, сколько цветов будет сохранено в формате GIF по сравнению с исходным JPEG— или PNG-изображением.Более высокий процент дизеринга передачи большего количества цветов и увеличьте размер файла:

Нажмите «Сохранить», чтобы сохранить файл на компьютере. Загрузите GIF-файл на ресурсе, где хотите его использовать.

Pinterest был первым социальным ресурсом, который разрешил анимированные движущиеся картинки, после чего то же сделал Twitter. А к лету 2015 к ним присоединился Facebook. На любой из этих социальных платформ анимированные гифки могут стать отличным способом выделиться в монотонном потоке новостных лент.

ированные GIF-файлы в электронной почте так же, как и обычные изображения. Так почему бы не заменить неподвижные изображения анимированными?

Это может привлечь внимание читателей и повысит эффективность проводимой кампании. А / B тестирование, проведенное Bluefly, показало, что электронные письма с анимированными GIF-изображениями дают на 12% больше прибыли, чем их статичные версии. Используйте GIF для демонстрации товаров, анонсов событий или целей.

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

Данная публикация представляет собой перевод статьи «Как сделать анимированный GIF в Photoshop [Учебное пособие]», подготовленной дружной командой проекта Интернет-технологии.ру

телеграм канал. Подпишись, будет полезно!