| Наш опрос |
Оцените мой сайт
Всего ответов: 1
|
|
| Лучший сайт |
 |
|
| Статистика |
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
|
|
| Каталог статей |
Анимированные спецэффекты на Userbar, Навороченный юзербар
Шаг 1.
Создаем новый документ (Ctrl+N) 350х20px.
Создаем новый слой (Sift+Ctrl+N).
Берем инструмент Gradient Tool (G), тип “Linear Gradient”, выставляем цвета #4e4e4e, #161616 и заливаем наш фон:
Шаг 2.
Создаем группу (Layer > New > Group).
Создаем в ней новый слой (Shift + Ctrl + N).
Берем инструмент Brush Tool (B.) размером 3px, выставляем основной цвет белый и нажимаем клавишу “F5”, настраиваем “Shape Dynamics” как на картинке:
Шаг 3.
Рисуем
горизонтальную линию (зажмите “Shift” при рисовании), заходим в стили
этого слоя (Layer > Layer Style > Blending Options) и настраиваем
как на картинке:
Шаг 4.
Закрываем
окно “ Blending Options ”, в списке слоев щелкаем правой кнопкой по
этому слою и выбираем “Copy Layer Style”. В этой же группе создаем еще
один слой. В списке слоев щелкаем по нему правой кнопкой мыши и
выбираем “Paste Layer Style”, для применения к нему такого же стиля как
и у предыдущего слоя.
Далее берем инструмент Brush Tool (B.) размером 1-2px, и рисуем искры:
Шаг 5.
Повторите шаг №4 для создания четырех – пяти слоев с искрами. Варьируйте расположение искр:
Шаг 6.
Временно скройте эту группу (в списке слоев щелчок по иконке глаза, около этой группы)
Создайте еще одну группу и в ней создайте слой, к нему примените тот же стиль, что и для предыдущих слоев. Берем инструмент Brush Tool (B.),
выбираем из списка стандартную кисть размером 45px с размытыми краями и
ставим точку в середине документа. После этого создаем еще 8 слоев все
с тем же стилем и ставим на каждом из них по одной точке, кистями с
размерами 80, 120, 160, 200, 300, 400, 500 и 800px:
Шаг 7.
Создаем новую группу.
Берем инструмент Horizontal Type Tool (T)
и слева пишем “SUPER USERBAR”, я использовал шрифт “Arial”, размер
12pt. Создайте копию этого слоя (Ctrl+J) и примените к ней стиль как на
картинке:
Шаг 8.
Создайте
11 копий слоя с текстом (с эффектом), далее выбираем верхний из этих
слоев и удаляем все буквы, кроме первой. Переключаемся на второй слой и
удаляем все буквы, кроме первой и второй. Выполните это действие для
всех этих копий, удаляя на каждом слое на одну букву меньше, чем на
предыдущем. Вот все наши текстовые слои:
Шаг 9.
Создаем новую группу.
Берем инструмент Horizontal Type Tool (T) и справа пишем “CLICK HERE”.
Сразу
же создадим 4 копии этого слоя. К оригиналу этого слоя применяем стиль
как у текста “Super userbar”. Далее выбираем любую копию, нажимаем
“Ctrl+T” и сверху на панели выставляем значения “W: 50%” и “H: 50%”,
жмем “Enter”. Далее выбираем вторую копию, нажимаем “Ctrl+T” и
выставляем “W: 75%” и “H: 75%”. Для третьей копии выставляем “W: 90%” и
“H: 90%”. Четвертую оставляем без изменений:
Шаг 10.
Далее, над всеми группами создаем новый слой, берем инструмент Rectangular Marquee Tool (M), создаем выделение в половину верхней части юзербара и заливаем белым цветом:
Шаг 11.
Меняем режим наложения для этого слоя на “Overlay” и выставляем “Opacity: 40%”:
Шаг 12.
Теперь,
в списке слоев, поместите нашу первую группу над группой со словами
“Super userbar”, а группу №2 со вспышками, поместите над всеми группами.
Теперь, перед создание анимации, сверим, что у нас в списке слоев, снизу вверх:
1) Фоновый слой.
2) Группа 3, в которой 13 слоев с текстом “Super userbar”.
3) Группа 1, в которой 4 слоя с искрами и 1 слой с линией.
4) Группа 4, в которой 5 слоев с надписью “CLICK HERE”.
5) Группа 2, в которой находятся 9 слоев со вспышкой из центра.
6) Слой – блик.
Теперь скрываем все слои, кроме слоев в группе 1, слоя с фоном и слоя с бликом.
Разместите слои группы 1 слева, за областью холста и потом скройте их тоже:
Шаг 13.
Запускаем “Image Ready” (Shift+Ctrl+M).
Если у вас Photoshop CS3, то вам не нужно запускать “IR”, вместо этого, просто откройте окно анимации “Window > Animation”.
Для
избегания вопросов рассмотрим окно анимации, а вернее кнопки которые
нам понадобятся. Их название нам не важно, просто запомните:
Кнопка №1 – создать новый кадр.
Кнопка №2 – создать промежуточные кадры.
Кнопки №3 – выставить время для кадра.
Шаг 14.
Приступим к созданию анимации.
Напомню, что на первом кадре, у нас скрыты все слои, кроме фона и блика.
Создаем новый кадр и делаем видимым слой с белой надписью “Super userbar”.
В
окне анимации зажимаем “Ctrl”, выбираем оба кадра и жмем на кнопку
добавления промежуточных кадров, появится окно “Tween”, выставите в нем
в поле “Frames to Add” значение “4” и нажмите ок. Теперь у нас 6
кадров, выставите для последнего время “0,5 sec”:
Шаг 15.
Создаем
новый кадр. Выставляем для него время “0” (No delay) и делаем видимым
слой с линией (Группа 1), при этом искры по-прежнему должны быть
скрыты. Создаем еще один кадр, берем инструмент Move Tool (V),
зажимаем “Shift” и перетаскиваем линию вправо, так, что бы ее основание
было чуть правее последней буквы “R”, в надписи “Super userbar”.
Выделяем эти два кадра и создаем 11 промежуточных кадров:
Шаг 16.
Возвращаемся к кадру №8.
Проверьте, что в группе №3, слой с надписью без эффектов, расположен под слоями с эффектами, если это не так, то перенесите его.
Делаем
видимым слой с буквой “S”. Переключаемся на кадр №9, скрываем слой с
буквой “S” (по идее, он должен скрыться сам) и делаем видимыми слой с
буквами “SU”. Повторите это действие для всех слоев с буквами. На 19-ом
кадре, у вас должна быть полная надпись “Super userbar” с эффектами:
Шаг 17.
Возвращаемся к кадру №8.
Делаем видимым один из слоев с искрами. С помощью Move Tool (V),
располагаем его на основании линии. Переключаемся на кадр №9, и делаем
видимым другой слой с искрами, тоже располагаем его на основании.
Повторите это действие до 18 кадра, чередуя слои с искрами, а на 19
кадре, оставьте видимым тот же слой с искрами, что и на 18, но
установите для него “Opacity: 50%”:
Шаг 18.
Создаем
новый кадр, скрываем слой с искрами. Передвигаем нашу линию примерно до
середины юзербара и скрываем ее. Выбираем кадры №19, 20, и создаем 5
промежуточных кадров, для кадра №25 выставляем время “0,5sec”:
Шаг 19.
Создаем новый кадр (26), устанавливаем для него время “0”. Делаем видимым слой с маленькой надписью “Click here” (Группа 4).
Снова
создаем новый кадр (27), делаем видимым следующий слой с надписью
“Click here”, не скрывая предыдущий (обратите внимание на то, что слои
должны располагаться от меньшего к большему, снизу вверх, т.е. нижний
слой – это самый маленький, верхний - большой).
Создаем кадр (28), скрываем маленькую надпись и делаем видимым третий по размеру слой видимым.
Создаем кадр (29), скрываем второй по размеру слой и делаем видимым четвертый.
Создаем кадр (30), скрываем третий слой, делаем видимым слой с эффектом и устанавливаем для него “Opacity: 50%”.
Создаем кадр (31) и выставляем для слоя с эффектом “Opacity: 100%”:
Шаг 20.
Создаем новый кадр (32), скрываем надпись с эффектом. Выбираем кадры №31, 32 и создаем 2 промежуточных кадра.
Создаем новый кадр (35), снова делаем видимой надпись с эффектом. Выбираем кадры №34, 35 и создаем 2 промежуточных кадра.
Создаем
новый кадр (38), скрываем надпись с эффектом. Выбираем кадры №37, 38 и
создаем 2 промежуточных кадра. Выставляем для последнего кадра (40)
время “0,5 sec”:
Шаг 21.
Создаем новый кадр (41), выставляем для него время “0”.
И делаем видимым слой, с маленькой вспышкой из центра (группа 2).
Создаем новый кадр и сделайте видимой большую вспышку, а маленькую скройте.
Создайте таким образом по одному кадру для каждого слоя.
Теперь на последнем кадре (49), полностью скрываем группы №1, 3, 4.
Создаем
новый кадр (50), скрываем на нем группу №2. Выбираем кадры № 49, 50 и
создаем 5 промежуточных кадров, для последнего (55) выставляем время “1
sec”.
Ну а теперь нам остается только сохранить это в .GIF формате. Для этого нажмите “Shift+Ctrl+S”:
|
| Категория: Мои статьи | Добавил: DarkAngel (14.06.2009)
|
| Просмотров: 691
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
| Информация |
 |
|
| Мини-профиль |
 Среда
 16.07.2025
 16:49:08  |
|
|
