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

Наг

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

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

Вот пример:

Я могу создавать макеты в Photoshop и даже применять к ним простую анимацию Tween, но мне никогда не удается заставить мои GIF-файлы выглядеть так, как в примере здесь.

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

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

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

ckpepper02

Мне кажется, именно Creative Dash положил начало этому тренду или, по крайней мере, сделал его популярным на Dribbble . Большинство их снимков представляют собой анимированные GIF-файлы, чтобы продемонстрировать их потрясающие навыки пользовательского интерфейса.

Йоонас

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

Наг

@Joonas Это здорово! Не могли бы вы опубликовать несколько быстрых инструкций о том, как вы этого добились?

Йоонас

Да, я планировал сделать это завтра, так как уже поздновато. Самое интересное в AE заключается в том, что как только вы научитесь анимировать объект из точки А в точку Б, вы в значительной степени будете знать, как анимировать: непрозрачность, вращение, масштабирование и опорную точку. Потому что все они работают примерно одинаково.

Наг

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

Наг

@Joonas У тебя была возможность написать, как ты это сделал? Я пробовал играть с AE, но мои анимации по-прежнему не выглядят усовершенствованными. Благодарю, если вы могли бы поделиться своим процессом.

Йоонас

Еще не совсем. Я напишу это позже, когда вернусь с работы (~ 6 часов).

Йоонас

Что нужно знать, чтобы создать что-то подобное в After Effects:

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



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

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

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

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

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



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

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

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

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

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

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

Я использовал slicy для экспорта своих изображений из фотошопа.



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

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

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

Вот описание того, как я сохранял файлы изображений в фотошопе, прежде чем импортировать их в 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 для каждого объекта.

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

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

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

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



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

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

Для этого можно использовать выражения 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 анимирован, пришло время разместить его на экране устройства.

  1. Поместите композицию с графическим интерфейсом внутрь композиции iPhone, точно так же, как вы размещаете изображения внутри композиции.
  2. Дважды щелкните композицию iPhone на панели «Проект».
  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. Затем просто нажмите Render в правом верхнем углу или на этой панели.
  5. Найдите экспортированный файл и откройте его в фотошопе.
  6. Сохранить для ИнтернетаCmd+Shift+Alt+S
    • Сохранить как .gif

Честно говоря, это не так уж и плохо...



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

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

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

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

Наг

Конечно! Еще раз спасибо! У вас есть аккаунт в Твиттере, где я могу упомянуть вас вместе с этим ответом? Я уверен, что многие люди хотели бы прочитать это.

Йоонас

@Nagarjun Ну нет, но вы можете дать ссылку прямо на этот ответ , если хотите.

LCarvalho

@Joonas Этот ответ должен иметь гораздо больше баллов ... чрезвычайно профессионально ...

Марсело

ЭТО БЕСПЛАТНЫЙ АНИМИРОВАННЫЙ МАКЕТ .PSD ФАЙЛ прокрутки веб-сайта и анимации меню, полностью редактируемой и анимированной в фотошопе. Невероятно легко редактировать и играть, вы можете скачать файл бесплатно здесь , у меня также есть обучающее видео о том, как легко редактировать эту халяву.введите описание изображения здесь

наука

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

Наг

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

наука

Если вы погуглите, то найдете множество ресурсов об анимации пользовательского интерфейса в Aftereffects. Вот несколько ресурсов для начала: news.layervault.com/stories/…

Смущенный

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

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

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

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

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

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

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

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

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

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

http://codea.io

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

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

http://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 Brewery позволяет конвертировать короткие клипы из ваших видеофайлов в GIF. Если вы хотите создать новейшую кошачью GIF-ку или предоставить предварительный просмотр более длинного видео, GIF Brewery для вас.

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

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

Мне очень нравятся все инструкции, данные @Joonas.