Пользователь
113 сообщений
Мужчина
|
В этом посте раскажу как можно создать простой анимационный баннер в photoshop CS5. Данный урок больше расчитан для начинающих пользователей фотошопа, хотя возможно и уверенные пользователи найдут здесь, что-то интересное.
Итак приступим. Для начала создадим холст размером 468x60px, именно этот размер баннера считается стандартным.
Заливаем наш холст абсолютно любым градиентом или цветом.
Совет: Добавить градиенты можно нажав кнопку "треугольник" в таблице с заготовками. Инструкция на скрине:
Далее накладываем фильтры на наш фон (градиентную заливку):
Фильтр - Шум - Добавить шум
Фильтр - Штрихи - Наклонные штрихи, настраиваем как на рисунке, если хотите добиться такого эффекта как на моем баннере:
Теперь перейдем непосредственно к стилям слоя "Фон", для этого выделяем наш слой и кликаем по нему два раза левой кнопкой мыши.
Открывается окно со стилями слоя. Нам понадобится внутреннее свечение, глянец и обводка.
Подробно по скринам:
Свечение:
Глянец:
Обводка
В итоге получаем готовый фон, на котором уже можно размещать, соответсвенно, текст нашего баннера. Подробно расписывать данный процесс не буду, т.к. каждый для себя выберет подходящий шрифт, цвет, стиль...
Графическая работа закончилась, теперь перейдем к анимации нашего баннера.
Открыть рабочую область с анимацией можно через меню "Окно" --> "Анимация".
Первое, что нужно сделать, это создать дубликат первого кадра. Для этого кликаем по квадратику на панеле с анимацией
В данном уроке я раскажу про анимацию движения и моргания текста. Не важно текст это или какой либо предмет, главное запомнить ход выполнения .
Анимация появления объекта
Выделяем первый кадр, а слои с текстами делаем невидимыми (ВНИМАНИЕ! на втором кадре текст должен остаться!), для этого достаточно убрать "глазок" со слоя. Выглядит всё это примерно так:
Выделяем оба кадра (1 и 2) и нажимаем на кнопку "Создание промежуточных кадров"  .Перед вами появляется окно с созданием промежуточных кадров. Для создания плавного появления текста на баннере будет достаточным и 3 кадров.
В атрибутах слоя везде должны быть проставлены галочки.
Для проверки нажмем кнопку "Запуск воспроизведения анимации", если текст плавно появляется и резко изчезает, то всё сделано верно.
Для плавного исчезновения текста, создайте дубликат 1 кадра, перетащите кадр вправо, чтобы находился первым с правой стороны, тоесть проще говоря сделать его шестым кадром, выделить 5 и 6 кадры и создать промежуточные кадры с теми же значениями, что описаны выше.
Анимация движения
Анимация движения текста делается иным способом. Создаем дубликат 1 кадра. На втором кадре выделяем текстовые слои и с помомощью клавиатурных стрелок перемещаем в любую сторону на несколько пикселей.
Возвращаемся к 1 кадру и делаем "промежуточные слои" между 1 и 2 кадром, при этом галка может быть проставлена только на "Положении".
В атрибутах слоя везде должны быть проставлены галочки.
Чтобы вернуть текст в исходное положениям ("не бросая его"), нужно создать дубликат 1 кадра, перетащить его в конец шкалы и сделать промежуточные кадры!
Для сохранения анимационных баннеров переходим в "Файл" -> "Сохранить для web и устройств".
На этом мой урок окончен, комментируйте, задавайте вопросы, с радостью отвечу!
Источник: Доступно только для пользователей
By sergius
Скопировал со своего блога. В сети подобного урока нет. Будет на webXlife and uSite 
|
|
|
|
|
|
Бывалый
692 сообщения
Мужчина
|
Хороший урок 
|
|
|
|
|
|
Designer
979 сообщений
Мужчина
|
sergius, Всё огонь, только зачем на текст лепить "Наложение цвета"?
Это я для тебя делал?
|
|
|
|
|
|
