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

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

Вот пример:

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

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

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

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

Вещи, которые вам нужно знать, чтобы создать нечто подобное в 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.

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

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

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

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

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

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

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

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

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

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

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

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

http://codea.io

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

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

http://processing.org/

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

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

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

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

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

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

GIF Brewery

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

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

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

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