3 способа заставить анимированные GIF-скриншоты дизайна работать для вашего портфолио

После того, как ваш последний проект веб-дизайна завершен, пришло время показать его и добавить в свое портфолио. Посетители вашего сайта (и потенциальные клиенты!) захотят увидеть вашу потрясающую работу в действии. Отличные изображения — это ключ, и в цифровом пространстве будут моменты, когда вы захотите проиллюстрировать функциональность проекта. Демонстрация этого с помощью анимированных скриншотов может быть идеальным решением.

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

Почему анимированные скриншоты важны для вашего портфолио

Независимо от того, произносите ли вы это «GIF» или «JIF», важно помнить, что GIF-файлы могут быть чем-то большим, чем просто забавными котиками и видеоклипами с умным слоганом. Анимированные GIF-файлы ваших проектов должны быть привлекательными и тщательно спланированными, чтобы показать функциональность дизайна. Анимация элементов интерфейса имеет как функциональную, так и эстетическую цель, поэтому GIF-файл показывает это. Как насчет демонстрации меню и вариантов, которые предлагает ваша работа? Как насчет того, чтобы показать, как работает прокрутка? Демонстрация функциональности помогает пользователю ясно увидеть, как приложение или веб-сайт могут ему помочь.

Инструменты для создания GIF

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

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

Как создать анимированные скриншоты GIF в Adobe Photoshop

На мой взгляд, Adobe Photoshop и Adobe After Effects — лучшие инструменты для работы. Оба позволяют в значительной степени контролировать конечный продукт. Мне лично нравится Photoshop для создания снимков экрана в формате GIF (и большинство дизайнеров хорошо знакомы с ним), поэтому следующий пример будет построен именно так. Давайте начнем!

Отображение функций прокрутки

Этот дизайн был выполнен в Adobe XD, но затем экспортирован в Photoshop с соответствующими названиями слоев. В примере есть слой под названием «Список местоположений MinTour» для страницы списка, «Список сада скульптур» для страницы сведений, а часть, которая находится за пределами исходного представления прокрутки, называется «Переполнение списка сада скульптур».

Первая часть

1. Настройка временной шкалы и список местоположений

Функция временной шкалы — это то, что мы будем использовать для создания различных экранов для конечного продукта. Убедитесь, что панель временной шкалы открыта, выбрав « Окно» > «Временная шкала» .

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

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

Необязательно: если вы хотите показать, куда нажимает пользователь, иногда это отображается точкой. Для этого добавьте дополнительный кадр с точечной областью.

2. Индивидуальные данные о местоположении

Возможность организовать с помощью слоев является огромным преимуществом и поможет вам сохранить все в порядке, пока вы создаете GIF-захват экрана. Перейдите к параметрам на панели «Таймлайн» и выберите «Новый кадр». То же самое и здесь — убедитесь, что правильные слои скрыты/отображены. Для этого мне нужно было показать отдельный список, поэтому слой списка местоположений скрыт.

3. Индивидуальные сведения о местоположении прокручивают содержимое

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

4. Выберите продолжительность

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

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

5. Предварительный просмотр

Хорошо взглянуть на то, что происходит до сих пор. В нижней строке панели «Таймлайн» есть кнопка воспроизведения. Попробуйте и посмотрите, можно ли что-то улучшить.

(Необязательно) управление анимацией

Вещи упорядочены правильно, но они кажутся немного нервными. Анимацию скриншотов можно настроить, чтобы все выглядело более плавно. В параметрах временной шкалы есть параметр «Tween». Чтобы автоматически сделать плавную анимацию между текущим и предыдущим кадром, можно автоматически вставить больше кадров.

От листинга до переполнения списка был добавлен Tween, чтобы он больше напоминал действие прокрутки. Эти новые кадры были настроены на очень короткую продолжительность 0,05 секунды (прокрутка в приложении происходит относительно быстро).

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

6. Сохранение GIF-файла захвата экрана (только экранный поток)

Если вы хотите включить это как просто анимированный экран, сохранение будет последним шагом. В это время создается анимация скриншота, ее нужно только сохранить в правильном формате GIF. Возможно, вы привыкли сохранять статическое изображение, но сохранение последовательности изображений отличается. Выберите « Файл» > «Сохранить для Интернета» , чтобы сохранить этот файл GIF.

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

В правом нижнем углу также есть некоторые настройки «Анимация»; вы можете выбрать Looping, если хотите, чтобы это повторялось бесконечно. Вы также можете зациклить заданное количество раз, если хотите. Сохраните его в нужном месте, и он готов к работе!

Часть вторая: Многоуровневые экраны на устройстве

Если вы решили продолжить, потребуются дополнительные шаги, чтобы наложить его на слои, чтобы оно выглядело более реалистично на телефоне. На панели «Таймлайн» выберите «Свести кадры в слои». Каждый кадр будет преобразован в плоский слой, который в конечном итоге будет состоять из 26 кадров (таким образом, будет 26 слоев).

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

1. Отрегулируйте размер холста для анимированного снимка экрана.

Фоновое изображение имеет размер 1300 X 920, поэтому размер холста необходимо отрегулировать, чтобы точно соответствовать этому размеру. Перейдите в Изображение > Размер холста и введите правильные размеры.

2. Подготовьте слои для размещения на экране телефона.

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

3. Двойная проверка кадров

Это хорошее время, чтобы убедиться, что кадры все еще такие, как вы планировали. Если вы воспроизведете анимацию на панели «Таймлайн», вы увидите анимированную последовательность.

4. Перекос экранов

Важно, чтобы были выбраны все слои экрана, чтобы их можно было наклонить одновременно, чтобы они оставались однородными. Edit > Transform > Skew — вот где это делается.

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

5. Настройка изображения и сохранение снимка экрана в формате GIF

Настало время внести любые коррективы. Цвет, контраст или любые другие последние штрихи должны быть сделаны перед сохранением. Сохранение анимации аналогично тому, что было сделано в первой части, шаг 6.

В этом примере фон был обесцвечен, а контрастность увеличена, чтобы анимация действительно выделялась. Теперь он появляется на реальном устройстве!

Гифи

Если Photoshop не является вашим предпочтительным инструментом, есть бесплатный и простой инструмент под названием Giphy. (Помимо профессионального использования, вы также можете сделать много забавных GIF-файлов!)

Если вы выберете «Слайд-шоу», это хороший вариант для создания анимационного снимка экрана. Чтобы использовать это, вам нужно будет сохранить отдельные файлы экранов. Затем вы перетащите неподвижные изображения, и процесс начнется.

После загрузки файлов выберите «Создать слайд-шоу». Когда вы закончите соединение изображений, вы можете скачать файл. Это так просто!

Запиши это

Это приложение довольно простое; он записывает действие, которое происходит на экране вашего компьютера, загружает запись на веб-сайт Recordit.io и создает ссылку для общего доступа с возможностью загрузки GIF.

Когда Recordit установлен на вашем компьютере, на панели задач появляется значок. Когда выбрано, вы можете перетащить и выбрать область экрана, которую вы хотите записать. Это было идеально, когда я перешел в режим предварительного просмотра в Adobe XD и смог использовать прототип для демонстрации.

После выбора области, которая будет включена, появится кнопка записи. Когда вы нажимаете «Запись», Recordit записывает все, что происходит на вашем экране, в установленных вами границах. Когда вы закончите запись, просто выберите «Стоп».

Это займет несколько секунд, но после остановки записи появится всплывающее окно со ссылкой на запись, размещенную на сайте Recordit.io.

Анимированные GIF-файлы снимков экрана — отличный способ продемонстрировать взаимодействие пользователей и то, как работают ваши дизайн-проекты. Видео также имеет свое место, но GIF-файлы можно создавать очень быстро, и их легко добавить в свое онлайн-портфолио.

Бесплатный рабочий лист: Целевая аудитория и личность клиента

Ищете практическое руководство, которое поможет вам сделать ваш контент интересным и привлекательным? Этот трехстраничный интерактивный PDF-файл поможет вам найти свою аудиторию, проверить свой контент и создать план развития вашего бизнеса.

Если вам понравилась эта статья, вам также могут понравиться следующие:

• Как создать анимацию SVG с помощью CSS
• Как создать видеогалерею WordPress
• Как использовать ссылки для пропуска, чтобы сделать ваш сайт WordPress более доступным