You might also like
Привет всем, я хочу представить вам новейшую версию баннера GIF. В этой статье я покажу вам, как создавать баннерные GIF-файлы с помощью Photoshop. В целом, я привык создавать баннеры и анимацию в AdobeFlash и AdobeAnimate. Конечно, Photoshop не может сравниться с этим пакетом по возможностям анимации. Однако очень простые и интересные баннеры можно создавать в Photoshop, поскольку в новых версиях, начиная с CS5, появилась возможность создавать анимированные прозрачности, масштабы, перспективы и т.д. В качестве примера рассмотрим процесс создания gif-баннера в Photoshop. проекта в названии статьи. Если вас заинтересовала эта вариация баннера и вы не можете создать ее самостоятельно, вы можете заказать создание такой анимации. Заполните форму обратной связи. Мы ответим вам.
Примеры анимированных баннеров в Photoshop
Примеры баннеров, которые можно создать в Photoshop:.
Создание анимированного баннера в Photoshop — инструкция
Вы создаете новый документ размером 600×200 пикселей.
Сначала соберите баннер в статичном виде. Давайте поместим нашего главного героя, рыбу, на слой. Здесь вы можете получить бесплатные ресурсы для своего проекта. Статья ‘Топ-8 сайтов с бесплатными ресурсами для дизайнеров:.
Используйте любой инструмент фигуры, чтобы разместить диалог на слое.
Помните, что редактировать фигуры (векторные объекты) можно с помощью инструмента выделения узлов.
Вот что я сделал. Я удалил ненужные элементы на первом слое фигуры и добавил еще три эллипсоида, чтобы диалоговое облако выглядело так, будто оно выходит изо рта рыбы.
Далее текст размещается на слое документа в том порядке, в котором он появляется.
Поскольку текст отображается по одному, естественно, что в статичной версии слои накладываются друг на друга.
Последний текстовый слой отображает все отключенные слои.
Также обратите внимание, что текстовый слой нужно обрезать до размера слоя-фигуры диалогового облака, чтобы он действовал как рамка, в которой текст больше не виден.
Теперь все слои готовы. Они отсортированы в порядке появления (снизу вверх). Теперь можно приступать к анимации.
Выбрать окно — Временная шкала.
В появившейся панели нажмите Создать временную шкалу видео.
Это создаст временную шкалу, содержащую все слои, которые можно перемещать и анимировать.
Фоновый слой блокируется и не появляется на временной шкале, но всегда будет виден.
Чтобы анимировать фон, дважды щелкните по слою, чтобы разблокировать его.
Каждый слой на временной шкале имеет атрибут анимации.
Разверните список слева от названия слоя, чтобы увидеть их. Вы можете изменить их положение, непрозрачность и стиль.
Аналогично, щелчок правой кнопкой мыши по названию самого слоя на фрагменте временной шкалы открывает список дополнительных действий анимации.
Вы можете активировать ключевые кадры для определенного слоя, нажав на значок часов рядом с именем атрибута движения.
Желтый ромб (значок ключевого кадра) появится там, где находится маркер временной шкалы. Например, первоначально.
Вы можете изменить значение объекта-атрибута, например, положение, и значение сохраняется в этом ключевом кадре.
Затем нужно переместить указатель временной шкалы в новую позицию, чтобы установить новое значение и ключевой кадр.
Нажмите на ромбовидный значок рядом с именем атрибута (на временной шкале появится новый значок ключевого кадра) и установите новое значение для атрибута.
Например, переместите объект в новое место.
Теперь давайте применим то, чему вы научились.
Рыба должна появляться слева направо, а прозрачность должна меняться от 0 до 100%. График в данном случае следующий.
После отображения рыбы в разделах появляется диалоговое облако.
Сначала эллипс, затем сама фигура.
Вы можете перемещать фрагменты каждого слоя на временной шкале, распределять их положение так, чтобы они появлялись в нужный промежуток времени, и задавать движение параметром непрозрачности каждого слоя.
Применим ту же процедуру для фигуры.
Далее используем тот же алгоритм для анимации текста.
Однако текст имеет параметр перспективы, а не позиции, что позволяет не только изменить положение текста в начале его движения, но и изменить масштаб от малого к большому.
Для этого используйте стандартный инструмент трансформации объектов (Ctrl + T).
Изначально текстовый слой обрезается по форме фигуры, поэтому текстовый слой виден только внутри нее.
Для второго текста стиль также был изменен. В параметры наложения слоя добавлен градиент.
Наконец, разровняем все края детали.
Для этого нужно потянуть за правый край каждой детали и настрочить их все одновременно. Убедитесь, что все объекты не исчезают внезапно.
Вы можете установить непрозрачность каждого контура на 0. Нажмите пробел, чтобы воспроизвести показанное.
Чтобы сохранить результат, выберите Файл — Сохранить в Web.
Выберите формат Gif и укажите, что анимация повторяется непрерывно.
Хотя Photoshop не был создан для сложной анимации (и это логично), эти простые действия можно использовать для получения нужного результата при создании gif-баннера.
Особенно если вы используете Photoshop вместо Flash и чувствуете себя как рыба в воде.
В своей статье я раскрываю секреты создания анимированных баннеров в Photoshop и рассказываю о том, как не просто использовать готовые анимации видеокадров, например, при создании эффектов, напоминающих живые фильмы.
Следите за обновлениями на блоге DesigninLife!
по электронной почте или в социальных сетях.
И мы будем размещать больше полезных статей и новых уроков по Photoshop из мира дизайна.
