Привет всем в этом туторе я буду вам раскрывать секрет своего второго нестандартного вида эквалайзера опять-же на примере полюбившихся мне юзербаров = )
Вот что мы будем делать
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 >> жмем ок