Анимированный рекламный баннер в Adobe Photoshop CS 6

1. ШАГ 1: Создание нового документа.
2. ЭТАП 2: Подготовка всех элементов, которые будут использоваться в анимации.
3. Этап 3: АНИМАЦИЯ
4. ШАГ 4: Сохраните документ.
5. Входящие условия поиска:

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

ШАГ 1: Создание нового документа.

Откройте Photoshop CS 6 и нажмите кнопку « Файл» → «Создать» («Файл» → «Создать») или сочетание клавиш CTRL + N, чтобы создать новый документ. Мы создадим баннер с размерами 250 × 250 пикселей , поэтому я ввожу данные значения в поля ниже; остальное остается неизменным, то есть:

Разрешение: 72 пикселя / дюйм

Цветовой режим: RGB (помните, что мы создаем графику для Интернета) 8 бит

Фон: белый.

ЭТАП 2: Подготовка всех элементов, которые будут использоваться в анимации.

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

Все эти элементы должны быть должным образом масштабированы так, чтобы они помещались в ограниченном поле нашего баннера (250 × 250 пикселей).

Мы размещаем их один за другим в нашем открытом файле с баннером.

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

В нашем случае есть 9 слоев, по одному на каждый элемент.

Мы расставляем все элементы в нужных местах.

Этап 3: АНИМАЦИЯ

• Если у вас не включена панель «Таймлайн» для анимации, вы должны включить ее сейчас: нажмите « Окно» (Window) и после расширения меню выберите пункт « Таймлайн» .

• Как только он включится, в середине панели «Таймлайн» выберите команду «Создать анимацию кадра» и нажмите кнопку рядом со стрелкой. Если на кнопке отображается текст «Создать временную шкалу видео» (Create Video Timeline), нажмите стрелку рядом с кнопкой и выберите соответствующий параметр в меню.

• Мы отменяем выбор всех слоев, нажимая на сетки, расположенные рядом со слоями - мы хотим, чтобы они стали невидимыми. Только один слой, № 1, останется видимым, на котором расположен красочный логотип нашей компании - он будет анимирован первым.

• Мы нажимаем на слой с логотипом - слой, над которым мы сейчас будем работать.

• Мы уверены, что у нас включен инструмент Переместить ( V Tool) и используем стрелку вниз, чтобы переместить наш логотип вниз, пока он не исчезнет из поля обзора.

• Затем продублируйте кадр (№ 1) анимации, нажав на маленький значок изогнутого квадрата (Дублирует выбранные кадры) рядом со значком корзины.

• В созданной таким образом клетке № 2 (нажмите на нее, чтобы отметить ее), переместите логотип вверх, нажав верхнюю стрелку примерно 55 раз, с момента появления логотипа у нижнего края баннера.

• Затем установите непрозрачность до 40% .

• Скопируйте рамку еще раз (№ 2) → квадратный значок и снова переместите логотип вверх, нажав верхнюю стрелку примерно 80 раз. Теперь установите непрозрачность до 70% .

• Скопируйте кадр 3 (дублирует выбранные кадры), нажмите верхнюю стрелку примерно 97 раз и установите непрозрачность на 100% .

• Нажмите «Кадр 2» и нажмите « Shift» - щелкните «Кадр 3» - таким образом, вы выбрали два кадра одновременно.

• Теперь нажмите на значок « Кадры анимации анимации » , рядом с квадратным значком для дублирования и на появившейся панели « Твин» , в окне « Кадры для добавления» введите 2 - таким образом, мы добавили 2 кадра для завершения движения.

• Просто выберите кадры 5 и 6, нажмите «комета», введите 2 и нажмите «ОК».

• В кадре 9 - щелкните по нему, чтобы выбрать его - включите видимость слоя 2 с первым появившимся текстом - здесь: «Почему мы?» . Поместите его в то же место, как показано на прилагаемом изображении, и сделайте его непрозрачным на 40% .

• В кадре 10 убедитесь, что у вас выбран правильный слой с текстом, и переместите этот текст вверх, нажав стрелку вверх примерно 12 раз. Измените непрозрачность до 70% .

• В кадре 11 нажмите верхнюю стрелку примерно 10 раз, измените непрозрачность (Непрозрачность) на 100% .

• В кадре 12 дважды нажмите верхнюю стрелку.

• Скопируйте рамку 10 и переместите существующую клетку № 11 за существующую рамку № 13.

• Сделайте то же самое с клеткой № 9 - скопируйте и переместите получившуюся клетку № 10 в текущую клетку № 14.

• В кадре 15 отключите видимость слоя с текстом № 1 (на кольце) и включите видимость текста № 2 .

• Теперь все шаги от того, чтобы применить то же самое к тексту № 2 «Что еще вы получаете?» И тексту № 3 «Платите только за результаты». Помните, что там же, где исчезает один текст, появляется следующий.

• В кадре 27 , после отключения видимости текста № 3, включите видимость слоя с розовым квадратом и слоев с монохромным логотипом , который должен находиться точно в том же месте, где был размещен цветной логотип.

• В кадре 28 включите видимость слоя с текстом № 1, поощряющим действие ; переместите этот текст с помощью нижней стрелки за край баннера, затем нажмите верхнюю стрелку примерно 53 раза с момента появления текста на краю. Установите непрозрачность (непрозрачность) до 20% .

• В кадре 29 нажмите верхнюю стрелку примерно 25 раз, установите непрозрачность (Непрозрачность) на 40% .

• В кадре 30 нажмите верхнюю стрелку примерно 30 раз, установите непрозрачность на 70% .

• В кадре 31 нажмите верхнюю стрелку примерно 45 раз, установите непрозрачность на 100% .

• В кадре 32 включите видимость слоя с текстом № 2, поощряющим действие ; переместите этот текст с помощью нижней стрелки за край баннера, а затем нажмите верхнюю стрелку примерно 46 раз с момента появления текста на краю. Установите непрозрачность до 40% .

• В кадре 33 нажмите верхнюю стрелку примерно 13 раз, установите непрозрачность на 70% .

• В кадре 34 нажмите верхнюю стрелку примерно 27 раз, установите непрозрачность (Непрозрачность) на 100% .

• В кадре 35 выберите оба слоя с этими текстами, используя клавишу Shift, и оба текста вместе, используя нижнюю стрелку, нажимая ее примерно в 20 раз, мы также уменьшаем непрозрачность обоих текстов до 70% .

• В кадре 36 нажмите нижнюю стрелку 38 раз, установите непрозрачность на 40% .

• В кадре 37 отключите видимость обоих текстов и включите видимость слоя с помощью имитации кнопки . Переместите его с помощью нижней стрелки за край баннера, а затем нажмите верхнюю стрелку примерно 55 раз с момента появления кнопки на краю. Установите непрозрачность до 40% .

• В клетке № 38 нажмите верхнюю стрелку примерно 70 раз, установите непрозрачность на 70% .

• В кадре 39 нажмите верхнюю стрелку примерно 30 раз, установите непрозрачность (Непрозрачность) на 100% .

Наконец, мы должны изменить время в некоторых кадрах. И так:

• Мы выбираем следующие кадры: 8, 11, 17, 23, 34 и 39 - мы делаем это с нажатой клавишей CTRL .

• В кадре 8 нажмите маленькую стрелку рядом с 0 сек. и из расширенного меню выберите 2.0 - это время будет установлено для нас во всех шести отмеченных кадрах. Это время задержки в тех местах, где наши тексты имеют 100% видимость.

• В кадре 31 установите время на 1 сек. в кадре 36 - 0,5 сек.

• Мы все еще можем установить воспроизводимость анимации - мы можем выбрать из списка: один раз (Один раз), 3 раза (3 раза) и все время (Навсегда) = зацикливание анимации .

ШАГ 4: Сохраните документ.

Последний элемент - сохранение файла в формате .GIF .

• Нажмите Файл → Сохранить для Интернета ... ( Файл → Сохранить для Интернета ... ).

• В появившемся окне с правой стороны мы выбираем подходящие опции - в представленном здесь примере они: GIF 64 No Dither.

• Затем нажмите Сохранить ... ( Сохранить ... ), мы вызываем наш файл и решаем, в какую папку его сохранить → Сохранить, и все готово!

Большое спасибо за внимание к этому уроку, особенно потому что он очень длинный. Я надеюсь, что она окажется полезной и немного расскажет вам о анимации остановки движения, реализованной в последней версии Photoshop CS 6.

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

Входящие условия поиска:

• анимация в фотошопе, постепенное смещение

Агата Войтасик

Агата Войтасик - графический дизайнер, иллюстратор, художник. Рисует, рисует - творит, так как помнит. Он серьезно занимается графикой с 2009 года и до сих пор изучает что-то новое. Если она сама не изучает знания, она делает это на курсах и многочисленных тренингах. Стиль комиксов и плоский дизайн вращаются больше всего. Он пробует свои силы в веб-дизайне. В свободное время он реализует собственные проекты.

Больше сообщений

Похожие

Комментарии