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

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

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

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

процесс

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

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

В Photoshop:
4. Создайте GIF.

Мы закончили одну композицию, Comp1 выглядит следующим образом
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 2


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


Следует отметить, что любые изменения Comp1 автоматически учитываются на Comp2, ускоряя процесс создания дизайна.

экспорт композиции

Шаг 1. Чтобы экспортировать композицию, сохраните ее как .mov, выбрав Composition → Pre-render. Запустите рендеринг и конвертацию файла. Таким образом вы сохраните Comp2 как видеофайл формата .mov.

Шаг 2. Запустите Adobe Photoshop и откройте созданный файл .mov.
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 2


Шаг 3. Сохраните файл, выбрав File → Save for web. Важно внести следующие изменения:
Тип файла. Убедитесь, что выбрано GIF;
Размер изображения. Установите ширину 600 пикс., Чтобы уменьшить размер выходного файла;
Анимация. Чтобы быть уверенным в том, что GIF повторяться по кругу, выберите опцию Навсегда (Forever).
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 2


Просмотрите анимацию, и если вы довольны качеством, сохраните файл. Прекрасно, вы успешно создали анимированный GIF.

Если у вас нет Photoshop, вы можете воспользоваться LICEcap, чтобы захватить анимированный GIF непосредственно с Adobe Affect Effects. Это один из лучших бесплатных инструментов для создания анимированных GIF-ов и анимаций-инструкций. В этой программе нет такого хорошего контроля за цветами как в Photoshop, но ее вполне достаточно, чтобы выполнить задание.

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

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

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