Статьи, приемы, хитрости и Уроки по Photoshop, Illustrator, Web дизайну и кодингу.

Создание 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)

15px гиды

Шаг 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 для дополнительного кадра.

анимации из 5

Шаг 7

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

Шаг 8

Новости сетки анимация 2

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

Шаг 9

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

копия кадра

Шаг 10

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

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

анимированные прокрутки 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 (слои).

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

iphone ПИК

Шаг 3

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

Шаг 5

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

место новости анимация в экране iPhoneподходят края

Шаг 6

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

анимировать все

Шаг 7

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

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

закончил новости анимация
Последнее изменениеПонедельник, 04 Август 2014 17:34
SeRbGa

SeRbGa

мечтатель

Сайт: www.serbga.ru
Другие материалы в этой категории: « Как сделать банер для сайта в Photoshop

Оставить комментарий

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


Защитный код
Обновить

Наверх

Популярные статьи

  • 1
  • 2
  • 3
  • 4

последние комментарии

ON-Line Блог SeRbGa.ru предоставляет самую свежую и актуальную информацию для веб-дизайнеров и разработчиков в виде тематических материалов, уроков созданных собственноручно, а так же переводов статей и новостей, полученных с зарубежных информационных ресурсов.

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на данный сайт!

ДИСКЛЕЙМЕР/DISCLAIMER:

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