UserBars.ru

FREEZE

Эквалайзер №1 Звукова дорожка

В этом туторе я буду рассказывать как сделать эффект звуковой дорожки (эквалайзера) как на этом юбе Smile

Сразу хочу успокоить тут ниче сверхестественного нет все делается в несколько шагов : )

1)Открываем изображение размером 350 х 350 делаем черный фон для удобства.

2)Hовый слой и чертим вертикальную белую , линию толщиной в 1 пиксель , мы можем сделать это Line Tool-ом (U) , или же для тех кто предпочитает пользоватся Pen-Tool-ом (Р) , как я , делает это при помощи него.

Вот так дожно выглядеть на данный момент :

3)Дублируем слой с белой линией и скрываем . Он нaм еще пригодится не раз

4)Затем применяем эффект , Filter >> Stylize >> Wind . параметры : Wind , From the right , жмем ок!)

Получается половинка от нашего эквалайзера .

5)Дублируем слой с примененным эффектом , нажимаеи ctrl+T ( Free Тransform ) , поворачиваем по горизонтали ( Flip Horisontal ) и подтягивам ее так чтобы сдублированная часть была точным отражением оригинала как показанно на скрине и склеиваем оба слоя между собой

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

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

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

Придаем цветов по вкусу

Анимация : Включаем одну волну на один кадр - и ставим задержку на кадрах 0,05 секунд сохраняем и довольствуемся собой )

____________________________________________________
____________________________________________________

Эквалайзер №2 Волна

Вот что мы будем делать

1) Открываем новый документ 350 х 350 ( обязательно )
2) Зальём фон черным для удобства
3) чертим белую полоску в 2 пикселя , по центру документа , горизонтально , при помощи карандаша или удобных вам инструментов

Вот так все выглядет на данном этапе :

4) Копируем нашу полоску и применяем Filter >> Distort >> ZigZag , со следующими параметрами

5) Берем полоску без примененного фильтра снова дублируем её и применяем тот-же эффект , но увеличивая параметр
"Amount" на единицу т.е. ставим 4
6) Проделываем операцию №5 до тех пор пока параметр "Amount" не достигнет значения 11
7) Пронумеруем и разложим по порядку наши слои чтоб было наглядней для глаза при постройке анимации
8 ) Слой с полоской без фильтра удаляем
9) Применяем ко всем полоскам Filer >> Blur Gaussian Blur cо значением 0,4
10) Делаем новый документ 350 х 19 и переносим все слои с полосками на наш юзербар и распологаем таким образом :

11) Теперь дело вкуса , дело за покраской. Применяем броский градиент фону
Я выбрал такой :

12 ) Красим полоски : ставим режим смешивния на Overlay , и идем в Blendin options >> Outer Glow , применяем этот

эффект ко всем слоям с полосками.

13)Добавляем обьёма : Выделяем верхнюю половину юзербара и заливаем градиентом от белого к прозрачному и ставим

непрозрачность на 35 % процентов ( чем цвет фона темней тем меньше надо применять непрозрачности к обьёму
14) Рамка : Выделяем весь юзербар (ctrl+A) Edit >> Stroke 1 px цвет по вкусу , я выбрал 375bf9
15) Добавляем текса
16) Итак теперь сладенькое = ) наша анимация её величество
слои переключать надо только поочередно т.е. через слой не прыгаем ,в противном случае у нас получится прерывистая анимация , если хотим сделать просто проходяшюю волну то включаем все слои по очередно по одному до конца , потом обратно чтоб зациклить анимацию.
Но я решил что это скучно и захотел сделать эффект дрожания так-что наши слои мы будем включать не до конца то вверх до вниз опять-же не перепрыгивая через слои ,слой последнего кадра анимации должен находится обязательно рядом со слоем первого кадра анимации т.е. или перед ним , или до него , но не в ком случае он не должен совпадать с ним или быть дальше чем 1 кадр.

Ставим задержку кадра 0,004 для тех у кого гиф тормозит анимацию

наш эквалайзер-волна готов!

)

Save for web and Devises >> *Gif >> жмем ок

Вот моя первая работа сделанная по этому способу

_____________________________________________
_____________________________________________

Эквалайзер №3 Sub-Buffer

Такой эффект мы будем делать

Эквалайзер которому я дал название саб-буфер , только для кого что-бы конкретизировать его а не просто называть №3 , будем делать на примере БигБара (350 х 40 пх) , т.к. на нем это выглядет гораздо эффектней.

Пока что нам не нужен сам БигБар , пока мы будем заниматся изготовлением наших как мы их будем называть Саб-волн.

1) Открываем новый док 500 х 500 пх , зальем фон черным для удобства и основным цветом выберим белый на цветовой палитре.
2) На новом слое нарисуем горизонтальную прямую шириной в 2 пикселя. И дублируем

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

3) Применяем Filter>> Distort>> Wave. С Параметрами как на скрине

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

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

5) Открываем наш ББ пареносим все получившиеся саб-волны на него , выцентровываем их.
6) По старой схеме , 1 саб-волна на 1 кадр. Так-же советую "не включать" все саб-волны по порядку , а рандомизировать их местоположения на кадрах , т.е. как обьясняется во втором уроке. Ставим задержку 0,01 на все кадры.
7) сохраняем в гиф открываем через оперу или любой другой браузер что-бы увидеть настоящюю скорость.
8 ) Похвастатся результатом

_________________

admin

Dark_Ajvengo

ничиго нового не узнал. А так зачет

Blackberry

Для новичков сойдет...
_________________

Lana

не получаетсо/(непонимаю как)

сделоть шаги:
3) Very Happy

5)

6)

у меня чо то трансформ не пашет походу

_________________

admin

FREEZE

дублировка слоя ctrl+J

трансформация не будет работать есть слои не выделенны
_________________

Ice Dragon

Какбе было понятно как делать... Но для новичков и правда сойдет.

_________________

Lana

а белю линию там же делать и дублировать?

тоесть как дублировать слой с линией и скрыт ькакая кнопка?)
и заранее... как повернуть все волны на 0 градусов всмысле надо выделять их "Rectangural Marquee Tool"'(M)" или чем то другим???
_________________

admin

FREEZE

почитай пока книг для начинающих лучше Wink

_________________

FlexZERO

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

Молодец.

P.S. это не эквалайзер.... лучше поменяй это слово на более подходящее.
_________________

sockol

Фриз - молодец, крут, завтра выложу че вышло

Добавлено спустя 40 минут 28 секунд:

емае, чет у меня не оч. получается (

_________________

admin

FREEZE

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

_________________

ScAvEnGeR

FREEZE зачоД, 5+

FrozeNArt xD

_________________

FREEZE

ScAvEnGeR

1 кадр одна волна , у тебя их нсколько на кадр. .
_________________

admin

ScAvEnGeR

sockol

вот - переделал, вышло

Добавлено спустя 2 часа 24 минуты 7 секунд:

добрые люди указали на ошибки - вот

_________________