Сделать домашней|Добавить в избранное
 
 
» » Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1

Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1

Автор: adminok от 19-11-2014, 20:28
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1

Возможно, вы видели крутые анимированные GIF-ки, которые используются для показа дизайна интерфейсов на Behance, Dribble или других платформах дизайнерской сообщества, и удивлялись - как же они их создали? Анимированные GIF-ки быстро стали одним из лучших способов демонстрации жестов и анимации в мобильных приложениях, поскольку они более информативны чем традиционные раскадровки и статические скриншоты. В первой части я покажу, как создать вышеприведенный анимированный GIF, а во второй части - объясню, как корректно экспортировать свои файлы и оптимизировать их. Скачивание файла проекта также доступно. В последнем, третьем уроке, я более полно раскрою переходы и анимацию. Основными аспектами этих анимированных GIF-ов является:
  • Демонстрация реальных рабочих процессов;
  • Передача красивых переходов между различными состояниями программы;
  • Малый размер, удобный для использования в интернете.


Что ж, давайте перейдем к делу. Ниже перечислены ресурсы, которые могут вам понадобиться.
Инструменты
Вам понадобятся:
After Effects CS6 или CC
Photoshop CS6 или CC
ресурсы
Фоновое изображение с видом Лондона и с iPhone в перспективе.
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1

процесс
Наш дизайн процесс очень простой, и я приведу его краткое содержание для тех, кто скорее сразу перескочит до конца. Я не буду объяснять запутанные переходы, которые реализованы в After Effects (в третьей части этой серии я объясню переходы и их реализацию в АЕ), однако я сделаю обзор основных моментов процесса.

В After Effects:

1. Создайте переходы в одной композиции (composition);
2. Создайте презентацию в другой композиции;
3. Экспортируйте композицию;
В Photoshop:
4. Создайте GIF.

Создание композиции с переходами
Шаг 1. Запустите After Effects и выполните команду Composition → New Composition. Задайте стандартные размеры для iPhone (320 × 480 пикс., Или 640 × 960 пикс.), Частота кадров (Frame Rate) 29 продолжительность (Duration) 6 секунд.
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1


Шаг 2. Импортируйте фоновое изображение с видом Лондона, кликнув на File → Import → File. Тогда перетащите файл PNG с окна Project в окно Comp 1. Измените размеры изображения, чтобы заполнить экран.
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1

Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1


Шаг 3. Создайте три синие прямоугольники (Shape Layers) с шириной 120 пикс., Которые будут появляться и падать вниз экрана во время анимации, и четвертый прямоугольник с шириной 360 пикс. Наберите текст о погоде и прогноз температур.
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1


Шаг 4. Добавьте текст «Снегопад» наверху и облако с шестью кружками (здесь вы примените свой переход и анимацию текста и shape layers для желаемой динамики). Я опишу мои переходы и прикольную анимацию, которую вы можете применить, в третьей части.

Шаг 5. Сохраните проект, но на закрывайте.

Создание композиции с презентацией
Шаг 1. Создайте новую композицию внутри этого же проекта. Она автоматически называться Comp2. Размеры 1280 × 720 пикс., Частота кадров: 29 Продолжительность будет зависеть от продолжительности вашего эффекта. У меня это 6 секунд.
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1


Шаг 2. Импортируйте фоновое изображение из iPhone и приспособьте его размеры к экрану.
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1


Шаг 3. Перетащите Comp1 из окна проекта в Comp2. Композиция, которую мы создали ранее, отображается как слой во второй композиции.
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1

Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1


Шаг 4. Как и в Photoshop, нам следует деформировать (Distort) слой Comp1, чтобы он совпадал с изображением на фоновом слое. Выбрав слой Comp1, кликаем на Effect → Distort → Corner Pin.
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1


Шаг 5. Перемещаем углы с помощью круга с крестиком на Comp1 таким образом, чтобы они совпали с углами на вашем фоновом изображении, пока композиция не станет выглядеть завершенной.
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 1


Некоторые ключевые моменты
Когда вы запустите свою вторую композицию, анимация первой воспроизводиться автоматически. Сохраните проект. Отлично, мы создали композицию After Effects с основной анимацией и представили ее на фоне мобильного телефона. В следующей части мы покажем, как сохранить проект и при необходимости - сохранить его в формате GIF. А пока - наслаждайтесь своим творением.

Вас может заинтересовать цена полистирол гранулы от компании "Азбука полимеров"
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Комментарии:

Оставить комментарий
 
 
Яндекс.Метрика