Как создать анимированные GIF-файлы макетов прототипов, как на Dribbble?
Я уверен, вы видели, как Dribbblers загружают анимированные макеты своих проектов.
Вот пример:
Я могу создавать макеты в Photoshop и даже применять к ним простую анимацию Tween, но мне никогда не удается заставить мои GIF-файлы выглядеть так, как в примере здесь.
Что Dribbblers используют для создания этих анимаций?
Обратите внимание, что анимация также включает точки касания и идеальное движение. Я хотел бы преобразовать мои макеты Photoshop, чтобы сделать то же самое.
Как я могу создать анимированный пример своих мокапов, похожих на те, что созданы Dribbblers?
Что нужно знать, чтобы создать что-то подобное в After Effects:
Когда вы запускаете AE, вы можете нажать Cmd+N, чтобы создать новый проект с одной композицией внутри него.
Если у вас уже есть открытый проект, нажатие Cmd+Nтолько создает новую композицию.
В этом проекте я использовал 2 композиции. GUI
comp для хранения графического интерфейса и его анимации. iphone
comp для хранения как фона, так и GUI
компа.
Вторая композиция с анимацией графического интерфейса должна быть такого же размера, как экран, или, по крайней мере, иметь такое же соотношение сторон. Позже, когда вы собираетесь разместить его на экране, он может растянуться и выглядеть странно, если соотношение сторон отключено.
After Effects имеет довольно хорошую систему для импорта файлов .psd, но мне не нравится ее использовать, потому что, если вы потеряете, переместите или переименуете файл .psd, After Effects не сможет его найти, и вам придется заменять кадры для каждого слой отдельно.
Если вы импортируете папку изображений в проекты и вы, например. переименуйте папку с изображениями, вам нужно заменить только одно изображение, и все отсутствующие изображения будут восстановлены (если все отсутствующие изображения находятся в одной папке). Также таким образом меньше беспорядка.
Щелкните правой кнопкой мыши внутри панели «Проект» слева и выберите:Import > Multiple files
...или вы можете просто перетащить файлы на эту панель
Я использовал slicy для экспорта своих изображений из фотошопа.
По сути, вы захотите сохранить все движущиеся объекты отдельно. Вам также может понадобиться сохранить несколько статических объектов отдельно.
В этом проекте я потенциально мог бы сохранить верхний и нижний колонтитулы как один, но у заголовка была тень, которая проходила над первой кнопкой, поэтому мне пришлось сохранить их отдельно.
Вот описание того, как я сохранял файлы изображений в фотошопе, прежде чем импортировать их в AE.
Переместите ключевые кадры ближе друг к другу, чтобы ускорить анимацию, или подальше друг от друга, чтобы замедлить ее.
сценарий: вы анимировали что-то от A до B и хотите сделать паузу на X миллисекунд, а затем перейти от B к C.
Когда вы анимировали B, перейдите вперед по временной шкале и щелкните значок ключевого кадра слева, здесь:
Он должен выглядеть серым, так что не волнуйтесь. Это просто означает, что в этой позиции нет ключевого кадра.
Поскольку ключевой кадр № 2 и только что созданное преобразование ключевого кадра № 3 имеют одинаковые значения, между этими двумя ключевыми кадрами теперь есть пауза. Затем вы можете продолжить анимацию в обычном режиме, переместившись вперед по временной шкале и снова изменив значения.
Я просто хотел воспользоваться этим временем, чтобы сказать вам, что все они работают так же, как анимация положения ( ... минус перетаскивание ).
Просто используйте ползунки с цифрами, которые появляются при нажатии горячих клавиш ниже.
Просто выберите объект(ы) и нажмите одну из этих горячих клавиш и начните анимацию. Если вы ничего не выбираете, он показывает методы преобразования для каждого объекта в композиции.
На панели Comp вы увидите раскрывающийся список Parent для каждого объекта.
Вы можете использовать его, чтобы определить родителя для объекта.
Если вы затем переместите родительский элемент, вы заметите, что дочерний элемент теперь перемещается вместе с ним. То же самое касается анимаций, которые вы прикрепляете к родительскому элементу.
Если вы анимируете родительский объект для вращения, дочерний будет следовать...
Итак, возможно, вы заметили, что анимация кнопки не останавливается на стене, а останавливается очень эластично.
Для этого можно использовать выражения After Effect Expression (они также могут делать гораздо больше).
Чтобы применить скрипт 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, потому что я ленивый...
Вот простая анимация положения, демонстрирующая, как замедление и этот конкретный сценарий выражения могут оказать огромное влияние на анимацию.
Итак, после того, как GUI анимирован, пришло время разместить его на экране устройства.
Effects > Distort > Corner pin
В AE нет собственного метода для этого, но не волнуйтесь, способы есть.
Я предпочитаю делать так:
Projects panel
Composition > Add to render queue
Cmd+Ctrl+MЧестно говоря, это не так уж и плохо...
Таким образом, хотя приведенный выше метод показывает, как экспортировать файл без потерь, это не тот способ, которым вы должны экспортировать видеофайлы.
Вы делаете это так:
Projects panel
(если их несколько)Composition > Add to adobe media encoder queue
Cmd+Alt+MЗначит, AE не может найти ваши файлы? Сделай это:
Replace footage > File...
Файлы проекта можно найти here.
ЭТО БЕСПЛАТНЫЙ АНИМИРОВАННЫЙ МАКЕТ .PSD ФАЙЛ прокрутки веб-сайта и анимации меню, полностью редактируемой и анимированной в фотошопе. Невероятно легко редактировать и играть, вы можете скачать файл бесплатно здесь , у меня также есть обучающее видео о том, как легко редактировать эту халяву.
Если вы посмотрите в комментариях к этому конкретному посту, парень говорит, что использовал Adobe After Effects http://www.adobe.com/uk/products/aftereffects.html .
Есть два способа сделать это.
Воссоздайте/макетируйте желаемую анимацию в анимационной программе (одной из которых является After Effects), а затем экспортируйте ее в виде анимированного gif. Очевидно (как вы уже поняли), это также будет включать в себя создание «фальшивых» прикосновений и других взаимодействий, чтобы продемонстрировать, что происходит.
Создайте функциональный прототип, а затем запишите вывод с вашего устройства через AppleTV или аналогичный через выход HDMI, когда он передается на ваш телевизор.
И то, и другое невероятно трудоемко, и путешествие само по себе.
Но вариант 2 имеет ОГРОМНЫЕ преимущества по сравнению с вариантом 1. Не последним из них является то, что вы изучите основы программирования.
Однако гораздо важнее то, что с некоторыми очень базовыми возможностями интерактивного программирования вы сможете перебирать варианты и альтернативные подходы намного быстрее, чем кто-либо, использующий программное обеспечение для анимации.
И у вас будет что-то действительно интерактивное для демонстрации вашего дизайна. Кроме того, изображение было протестировано в интерактивной среде на устройстве, поэтому оно уже точно соответствует пикселям и цветам.
Но подождите, я знаю. Вы боитесь. Будет тяжело, да?
Нет, если у вас есть iPad.
Codea — это самый дешевый и быстрый способ сделать тривиальную (и ОЧЕНЬ сложную) анимацию и интерактивность на самом простом и чистом языке сценариев на земле... Lau.
Если у вас нет iPad, приобретите его.
А пока продолжайте изучать processing.org, так как вы сможете создавать такие же интересные макеты внутри него:
Обработка использует другой язык сценариев, который называется Javascript. Он такой же простой, но не такой элегантный, как Lua.
Вы также можете создать анимацию пользовательского интерфейса с помощью Keynote. Это довольно просто и идеально подходит для создания анимации пользовательского интерфейса. Затем я использовал After Effects, чтобы просто поместить видео в телефон.
Шаг 1: Сначала я создал анимацию пользовательского интерфейса для основного доклада и сделал это: http://vimeo.com/108991829
Шаг 2: Затем я поместил видео в макет iPhone After Effects, который нашел в Интернете, и сохранил файл .mov. Следуя инструкциям этого видео: http://youtu.be/VeZGwjVwDrc
Шаг 3: С помощью фотошопа и следуя инструкциям я сделал это.
если вы хотите придерживаться Keynote и экспортировать его в формате Quicktime, думаю, не помешает попробовать:
GIF Brewery позволяет конвертировать короткие клипы из ваших видеофайлов в GIF. Если вы хотите создать новейшую кошачью GIF-ку или предоставить предварительный просмотр более длинного видео, GIF Brewery для вас.
Вам больше не нужно извлекать кадры из фильмов и возиться со слоями в Adobe® Photoshop®. Вместо этого позвольте GIF Brewery сделать всю утомительную работу за вас.
Кроме того, GIF Brewery содержит множество других функций для выражения вашего творчества. Вы можете добавить подписи, чтобы воссоздать диалог или добавить несколько фильтров изображений.
Мне очень нравятся все инструкции, данные @Joonas.
ckpepper02
Йоонас
Наг
Йоонас
Наг
Наг
Йоонас