Создание GIF анимированного интерфейса в Adobe Photoshop

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

1.  Разрабатываем App UI (интерфейс приложения)

Шаг 1

Начнем проектирование интерфейса приложения. Создаем новый файл ( CTRL + N ) с размером холста 400 PX по  700 PX , затем нажмите кнопку ОК .

Шаг 2

Нажмите Просмотр> New Guide (новая направляющая) , чтобы сделать новые направляющие, которые помогут нам в точнойм размещении элементов интерфейса. Установите галочку в вертикали с позицией 15 пикселей .

Шаг 3

Добавить еще вертикальные направляющие на каждой стороне холста с 15 PX расстоянием между каждой направляющей. (15-30-45 px с другой стороны 385 - 370 - 355px)

Шаг 4

Нарисуйте еще ​​направляющие, на этот раз по горизонтали на 30 , 75 и 125 PX .

Шаг 5

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

Затем, создайте новый слой и выберите вторую секцию, а затем заполнить его темно-голубым цветом, # 265a80 .

Шаг 6

Добавить текст заголовка приложения в верхней части интерфейса.

Шаг 7

Добавить логотип с названием. Я просто добавил свой логотип сайта на новый слой.

Шаг 8

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

Шаг 9

Cоздайте новый слой и выберите третью секцию, а затем заполнить его темно-голубым цветом, # 265a80.

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

Шаг 10

Добавьте на третью секцию меню с помощью Type Tool (текст) , содержащий новости и категории. Установите цвет первого пункта меню, в данном случае, ВСЕ белый, чтобы показать, что категория активна. Продублируйте его ( CTRL+J ), а затем установить активность другго пунктменю, в данном случае ГРАФИКА. Теперь на панели  Слои, установите слою с активным пунктом ГРАФИКА  непрозрачность до 0% , чтобы скрыть его.

Шаг 11

Заполните остальную часть интерфейса темно-голубым цветом, # 265a80. Положите этот слой под все элементы графического интерфейса.

Шаг 12

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

Шаг 13

Примените Stroke (обсодка) , Inner Gl (внутреннее свечение) , и Outer Glow (внешнее ввсечение) , тень, чтобы добавить больше контраста в пресс-зоне. Двойной щелчок по слою, а затем примените следующие настройки на скриншотах ниже:

Шаг 14

Нарисуйте белый прямоугольник с закругленными углами на верхней части предыдущей формы. Мы поставим здесь новости изображение и примените Inner Glow к ней со следующими настройками:

Шаг 16

Загружаем фотографию (которую хотим там использовать) и помещаем ее под белую округлую форму прямоугольника. Ткните  CTRL+Alt+G , чтобы преобразовать выбранный слой с фотографией в Clipping Mask (маска слоя). Фото автоматически перейдет внутренний слой позади него. И в итоге - фото отлично помещается сверху индивидуальной области новостей.

Шаг 17

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

Шаг 18

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

Шаг 18

Добавить отдельную новость на всю площадь приложения. Она будет показана при выборе индивидуальный новости.

Шаг 19

Переложите все отдельные элементы (Новости и новость на полный экран) в отдельные группы. 

В данный момент, мы не будем использовать новость на полный экран, поэтому установите его непрозрачность 0%.

1. Индикатор нажатия

Шаг 1

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

Шаг 2

Сделать большую окружность, установите обводку в 4px белым цветом, и снимите заливку цветом.

Шаг 3

Добавьте еще одну форму круга, на этот раз тоньше. Установите его размер обводки 2 px .

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

3.  Прокручивание окнв приложения.

Шаг 1

Теперь мы, наконец, готовы начать строить нашу анимацию интерфейса.Откройте  Timeline (панель анимации) панель, а затем сделайте новый кадр. Потом сделайте еще один новый кадр.

Шаг 2

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

Шаг 3

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

Шаг 4

Активируйте  группу слоев нажатие и все слои новостной сетки. Используйте Move Tool (перемещение) , чтобы переместить их вверх (все элементы UI должны быть на верхних слоях.).

Шаг 5

Чтобы сделать автоматически плавную анимацию между текущим и предыдущим кадром надо добавить ключевые кадры - нажмите Tween (создать промежуточные кадры) из меню Timeline (анимация).

Шаг 6

Установите анимацию 5 для дополнительного кадра.

Шаг 7

Теперь у нас есть анимацию новостей сетки движущегося вверх на каждом кадре.

Шаг 8

Протестируйте анимацию, нажав на значок воспроизведения в  Timeline панели.

Шаг 9

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

Шаг 10

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

Вот анимация которая у нас получилась - прокрутка UI (пользовательского интерфейса).

4.  Нажатие ссылки

Шаг 1

Теперь пришло время, чтобы оживить нажатие ссылки в меню. Во-первых, сделайте новый кадр. Установить  Непрозрачность текста меню с выбранным жирным вариантом  ВСЕ  в меню на 0%, а  ГРФИКА прозрачности выбранного варианта установливаем в значение 100% .

Шаг 2

Активируйте полностьюгруппу нажатие и установите ей непрозрачность 0%. Измените длительность кадра на  0,2 секунды

Шаг 3

Создайте новый кадр с длительностью  0,1 секунды . На этот раз скрываем тонкий круг.

Шаг 4

Добавим еще один кадр и отключам следующий тонкий круг.

Шаг 5

Добавить новый кадр и скрыть полностью группу "нажатие".

Шаг 6

Создайте новый кадр и затем установите  непрозрачность нескольким элемнтам в сетке без тега ГРФИКА в 0% .

Шаг 7

Пперетащите отдельные видимые элементы в сетке, заполняя пустые пространства над ними.

Шаг 8

Заполните промежуточными кадрами - между текущим кадром и предыдущая. Для более быстрой анимации выставил значение "добавить кадров" 4 .

Установите продолжительность в последнем кадре  2 секунды .

Теперь наша анимация такая:.

6. Нажатие на новость

Шаг 1

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

Шаг 2

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

Шаг 3

Добавить еще один кадр. Скрыть второй тонкий внешний круг.

Шаг 4

Добавить еще один кадр с длительностью 0,1 секунды . Скрыть полностью группу "нажатие" и сделать новый кадр. Показать полную новсть, которую мы сделали ранее в разделе 1 , установив непрозрачность на 100% . Скрыть сетку с маленькими новостями установив его непрозрачность до 0% . Добавить промежуточные кадру между текущим кадром и предыдущим.

Что получилось:

7. Преобразовываем слои Анимация в Frames

Шаг 1

В Timeline панели, нажмите Flatten Frames Into Layers (создать слои из кадров) .

Каждый кадр будет преобразован в плоском слое. Если у вас есть 33 кадра, вы также получите 33 плоских слоя: слой Кадр 1 взяты из содержания кадра 1, слой Кадр 2 взяты из кадра 2, и так далее.

Шаг 2

Выберите все слои кадров в панели Layers (слои).

Перетащите слои на фото телефона, которое скачали заранее

Шаг 3

В Timeline панели выберите Создание кадров анимации , а затем нажмите новый кадр.

Шаг 5

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

Шаг 6

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

Шаг 7

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

В итоге вот что получилось!