Как создавать анимированные GIF-макеты из макетов прототипов, как на Dribbble?

38

Я уверен, что вы видели, как Dribbblers загружали анимированные макеты своих проектов.

Вот пример:

Я могу создавать макеты в Фотошопе и даже применять к ним простые анимации анимации, но я никогда не смогу заставить мои GIF-изображения выглядеть как пример здесь.

Что Dribbblers используют для создания этих анимаций?

Обратите внимание, что анимация также включает точки касания и идеальное движение. Я хотел бы преобразовать мои макеты Photoshop, чтобы сделать то же самое.

Как я могу создать анимированный пример моих макетов, похожих на созданные Dribbblers?

пилить
источник
Мне кажется, что Creative Dash начал эту тенденцию или, по крайней мере, сделал ее популярной на Dribbble . Большинство их снимков - анимированные гифки, демонстрирующие их удивительные навыки пользовательского интерфейса.
ckpepper02
1
Я хотел увидеть, как трудно это сделать в AE, и должен сказать, что это было удивительно легко. Полу времени, но довольно весело. Вот что я сделал. Я стал ленивым и оставил слой подсветки телефона под графическим интерфейсом: / ..но да, я бы сказал, что любой может сделать это, если я смогу сделать это с моим небольшим знанием AE.
Joonas
@Joonas Это здорово! Не могли бы вы опубликовать несколько быстрых инструкций о том, как вы этого добились?
Наг,
Да, я планировал сделать это завтра, так как уже поздно. Самое интересное в AE - это то, что как только вы научитесь анимировать объект из точки A в точку B, вы в значительной степени узнаете, как анимировать: непрозрачность, вращение, масштаб и точку привязки. Потому что все они работают примерно одинаково.
Joonas
Пожалуйста, поделитесь, как только вы напишите это! Имеет смысл, это выглядит довольно просто, но я все еще хотел бы видеть, как эксперты делают это.
Наг

Ответы:

58

Вещи, которые вам нужно знать, чтобы создать нечто подобное в After Effects:

введите описание изображения здесь



Как сделать проект и композицию

Когда вы запускаете AE, вы можете нажать, Cmd+Nчтобы создать новый проект с одной композицией внутри.

Если у вас уже открыт проект, нажатие Cmd+Nтолько создает новую композицию.

В этом проекте я использовал 2 композиции. GUIКомп для хранения графического интерфейса и его анимации. iphoneКомп для хранения как фона, так и GUIкомп.

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



Импорт изображений в AE

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

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

Как импортировать изображения в проект

Щелкните правой кнопкой мыши внутри панели Project слева и выберите: Import > Multiple files

... или вы можете просто перетащить файлы на эту панель

Я использовал ломтик, чтобы экспортировать мои изображения из фотошопа.



Какие объекты вы должны сохранить как отдельные файлы изображений

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

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

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

введите описание изображения здесь



Анимация 101

Анимация положения:

  1. Анимация положения:
    • Выберите ваш объект в списке на левой стороне шкалы времени.
    • Нажмите P
    • Нажмите на значок секундомера, который теперь находится под выбранным слоем. Это автоматически добавляет первый ключевой кадр, где бы ни находился ваш индикатор времени (это красная линия на временной шкале).
    • введите описание изображения здесь
    • переместить индикатор времени вперед на временной шкале. Перетащите это или Cmd+{Arrow left or right}илиCmd+Shift+{Arrow left or right}
    • в средстве просмотра композиции перетащите ваш объект в положение, в которое вы хотите переместить его (вы также можете использовать его Shift+arrow keys, как в фотошопе или перетаскивая числовые значения.).
    • Другой ключевой кадр появляется на временной шкале, и теперь у вас есть анимация.
    • введите описание изображения здесь
    • Вы можете воспроизвести анимацию, нажав space

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

Продолжение анимации после паузы.

сценарий: вы анимировали что-то от A до B, и вы хотите сделать паузу на X на миллисекунды, а затем перейти от B к C.

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

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

Поскольку ключевой кадр №2 и недавно созданное преобразование ключевого кадра №3 имеют одинаковые значения, между этими двумя ключевыми кадрами теперь есть пауза. Затем вы можете продолжить анимацию, двигаясь вперед по временной шкале и снова меняя значения.

Анимация других вещей, таких как вращение или непрозрачность

Я просто хотел воспользоваться этим временем, чтобы сказать вам, что все они работают так же, как анимации положения (... минус перетаскивание).

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

Горячие клавиши для различных методов преобразования:

  • P - Позиция
  • T - непрозрачность
  • R - вращение
  • S - Масштаб
  • A - Якорная точка

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



Как подчинить объекты другим объектам

На панели Comp вы увидите раскрывающийся список Parent для каждого объекта.

Вы можете использовать его для определения родителя объекта.

введите описание изображения здесь

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

Если вы анимируете родительский объект для вращения, ребенок будет следовать ...



Добавление эластичности в вашу анимацию

Поэтому, возможно, вы заметили, что анимация кнопки не останавливается на стене, а останавливается очень гибко.

Выражения After Effects могут быть использованы для достижения этой цели (это может сделать гораздо больше).

Чтобы применить сценарий Expression к анимации, Alt+{mouse click}установите секундомер и вставьте в сценарий.

введите описание изображения здесь

Выражение, которое я использовал в анимации кнопок

Первые 3 переменные amp, freq, decayмогут быть отредактированы, чтобы получить различные результаты из этого.

Вы можете применить этот же скрипт к анимации на основе движения. Например, на прозрачность анимации это не влияет.

Также можно найти здесь.

amp = .1;
freq = 1.0;
decay = 9.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}


Облегчение ....

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

Я использовал Ease Ease в этом «круге индикатора касания», чтобы он выглядел немного более человечным, как движение.

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

Тогда из списка: Keyframe assistant > Easy Ease введите описание изображения здесь

Я часто использую Easy Easy, потому что я ленивый ...

Фото или не случилось ...

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

введите описание изображения здесь



Размещение анимированных композиций / видеороликов на экране

Итак, после того, как графический интерфейс анимирован, самое время разместить его на экране устройства.

  1. Поместите GUI-комп внутри iPhone-компа, точно так же, как вы размещаете изображения внутри композиции.
  2. Дважды щелкните iPhone Comp на панели «Проект».
  3. Выберите графический интерфейс введите описание изображения здесь
  4. Из верхнего меню Effects > Distort > Corner pin
  5. Затем просто перетащите каждый угол, чтобы соответствовать углам экрана устройства.

введите описание изображения здесь



Экспорт в .gif

У AE нет нативного метода для этого, но не волнуйтесь, есть способы.

Я предпочитаю делать это:

  1. Нажмите на композицию в Projects panel
  2. Composition > Add to render queue Cmd+Ctrl+M
  3. Затем внизу, где обычно находится временная шкала, вы выбираете, что экспортировать и куда.
    • Я обычно экспортирую без потерь. MOV
    • Если вы нажмете «Настройки рендеринга», вы можете выбрать частоту кадров, в противном случае будет использоваться частота кадров Comp.
  4. Затем просто нажмите рендер в верхнем правом углу или на этой панели.
  5. Найдите экспортированный файл и откройте его в фотошопе.
  6. Сохранить в Интернете Cmd+Shift+Alt+S
    • Сохранить как .gif

Это честно не так уж плохо ...



Экспорт в виде видеофайла

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

Вы делаете это так:

  1. Сохраните файл вашего проекта.
  2. Нажмите на композицию в Projects panel(если у вас более одного)
  3. Composition > Add to adobe media encoder queue Cmd+Alt+M
  4. Перетащите предустановку из правого столбца в левый столбец
  5. Нажмите на кнопку воспроизведения.
  6. Если вы не выбираете папку экспорта, по умолчанию она идет прямо рядом с файлом проекта.


Как заменить отснятый материал

AE не может найти ваши файлы? Сделай это:

  • Щелкните правой кнопкой мыши один из отсутствующих материалов на панели «Проект».
  • Из списка Replace footage > File...
  • Найдите свои кадры и прочее


Другие полезные горячие клавиши

  • U- Показывает все используемые ключевые кадры в компе (если у вас ничего не выбрано). Действительно полезно, когда вам нужно переместить несколько ключевых кадров одновременно, например.
  • U( Двойное нажатие ) - показывает все, что было изменено.
  • E( Двойное нажатие ) - показывает все используемые выражения.
  • J - Переход к предыдущему ключевому кадру.
  • K - Переход к следующему ключевому кадру.
  • space - Играет комп
  • Iили homeклавиша - перемещает индикатор текущего времени в начало на временной шкале.
  • Cmd+K - Текущие настройки композиции.
  • Cmd+I - Импорт файлов.
  • Alt+{Arrow keys left and right} - Выберите ключевые кадры и нажмите горячие клавиши, чтобы переместить их.
  • Alt+Shift+{Arrow keys left and right} - Выберите ключевые кадры и нажмите горячие клавиши, чтобы переместить их.


Файлы проекта можно найти here.

Йонас
источник
@Nagarjun Если вы найдете что-то, чего здесь нет, просто дайте мне знать.
Joonas
Конечно! Еще раз спасибо! У вас есть аккаунт в Твиттере, на котором я могу упомянуть вас вместе с этим ответом? Я уверен, что многие люди хотели бы прочитать это.
Наг
@Nagarjun Ну нет, но вы можете сделать ссылку прямо на этот вопрос , если хотите.
Joonas
@Joonas Этот ответ должен иметь гораздо больше баллов ... очень профессионально ...
LCarvalho
6

Это бесплатный анимированный макет. PSD ФАЙЛ веб-сайта прокрутки Доу и анимация меню полностью редактировать и анимировать в фотошоп смешно легко редактировать и играть, вы можете скачать файл бесплатно здесь , у меня также есть видео-учебник о том, как это легко редактировать эту халяву. введите описание изображения здесь

Марсело
источник
4

Если вы посмотрите в комментариях к этому конкретному сообщению, парень говорит, что он использовал Adobe After Effects http://www.adobe.com/uk/products/aftereffects.html

Sci
источник
1
Как они могут идеально имитировать жесты мобильного дизайна? Я понимаю, что After Effects специально не предназначен для таких нужд, но это универсальный инструмент для работы с графикой.
Наг,
3
Если вы выполните поиск в Google, есть много ресурсов об анимации пользовательского интерфейса в эффектах. Вот некоторые ресурсы, с которых можно начать: news.layervault.com/stories/…
Sci
3

Есть два способа сделать это.

  1. Пересоздайте / создайте макет нужной анимации в анимационной программе (одной из которых является After Effects), а затем экспортируйте ее в виде анимированного GIF-файла. Очевидно (как вы уже поняли), это будет включать также создание «поддельных» прикосновений и других взаимодействий, чтобы продемонстрировать, что происходит.

  2. Создайте функциональный прототип, а затем запишите выходной сигнал с вашего устройства через AppleTV или аналогичный через выход HDMI, когда он передается на ваш телевизор.

Оба невероятно трудоемки и путешествие само по себе.

Но вариант 2 имеет ОГРОМНЫЕ преимущества по сравнению с вариантом 1. Не в последнюю очередь это то, что вы изучите основы программирования.

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

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

Но подожди, я знаю. Вы боитесь. Это будет сложно, верно?

Нет, если у вас есть iPad.

Codea - это самый дешевый и быстрый способ создания тривиальных (и ОЧЕНЬ сложных) анимаций и интерактивности на самом простом и чистом языке сценариев в мире ... Лау.

http://codea.io

Если у вас нет iPad, купите его.

А пока продолжайте изучать processing.org, так как вы сможете делать такие же интересные макеты в этом:

http://processing.org/

При обработке используется другой язык сценариев, который называется Javascript. Это так же просто, но не так элегантно, как Lua.

Смущенный
источник
3

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

Шаг 1. Сначала я создал анимацию пользовательского интерфейса на лейтмотиве и сделал это: http://vimeo.com/108991829

Шаг 2: Затем я поместил видео в iPhone после макета эффектов, который нашел в Интернете, и сохранил файл .mov. Следуя инструкциям на этом видео: http://youtu.be/VeZGwjVwDrc

Шаг 3: С помощью фотошопа и следуя инструкциям я сделал это.

введите описание изображения здесь

Сандип Гаджула
источник
-1

если вы хотите придерживаться Keynote и экспортировать его в формате Quicktime, я думаю, что это не помешает попробовать:

GIF Brewery введите описание изображения здесь

GIF Brewery позволяет конвертировать короткие клипы из ваших видеофайлов в GIF. Если вы хотите создать новейшую GIF-версию кошки или предоставить более длинный видеоролик, GIF Brewery - для вас.

Вам больше не нужно извлекать кадры из своих фильмов и возиться со слоями в Adobe® Photoshop®. Вместо этого позвольте GIF Brewery сделать всю утомительную работу за вас.

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

Я действительно люблю все инструкции, данные @Joonas, хотя.

Daviiid
источник