UserBars.ru

[FREEZE]

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

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



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

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)
5)
6)
у меня чо то трансформ не пашет походу
_________________

[admin]

[FREEZE]

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

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

[Ice Dragon]

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

[Lana]

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

[admin]

[FREEZE]

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

[FlexZERO]

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

Молодец.

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

[sockol]

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

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

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

_________________

[admin]

[FREEZE]

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

[ScAvEnGeR]

FREEZE зачоД, 5+

FrozeNArt xD


_________________

[FREEZE]

ScAvEnGeR

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

[admin]

[ScAvEnGeR]

[sockol]

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


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

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

_________________