Всем привет! Сейчас я расскажу о том как создать красивый анимированый юзербар без фона с эквалайзером и двигающимся текстом.
Сначала качаем apng edit-1.4-fx и устанавливаем его. ССЯылка в конце.
Отркываем фотошоп, создаём изображение 350*19(CTRL+N) заливаем фон чёрным цветом.

По середине шрифтом visitor TT2(размер я брал 13) BRK пишем нужное нам слово, я написал music listener. Применим к нему в опциях смешивания "штрихование" 1 пкс. Цвет по выбору. я брал #01313a.

Создаём группу и кидаем в неё слой с текстом, дублируем его 1 раз и растрируем продублированый слой. А потом тот слой, что мы растрировали дублируем столько раз, сколько букв в слове.
Скрываем все слои с текстом кроме одного(тот что не растрировали не трогаем вообще). Выделяем в слое первую букву и поднимаем на половину высоты вверх(нажимаем V и поднимаем).
Создаём направляющую, для того, чтобы все буквы поднимать на одинаковую высоту и проделываем это со всеми слоями: новый слой-новая буква.

Текст готов, переходим к созданию другой анимации.
Создаём новый слой(уже не в группе) и рисуем слева от текста на нём карандашом 1 пкс. 20-30(на ваш вкус, я 20 сделаю) вертикальных полосок,но не сплошних, а состоящих из точек, расстояние между которыми 1 пкс., а расстояние между полосками 1 пкс.

Создаём ещё 1 группу и переносим туда созданный слой.
Дублируем слой столько раз, сколько хотим, 6-8 думаю хватит.
Скрываем все слои кроме одного и начинаем стирать полоски(их части) как хотим, и так делаем на всех слоях.

Дублируем группу. Выделяем все слои в дублированой группе идём в ПРАВКА---Отразить горизонтально. И не убирая выделения двигаем слои вправо, симметричто исходным
Теперь собираем анимацию.
Сначала делаем анимацию текста, а потом эквалайзера.
На 1 кадре весь текст ровный,и первый слой эквалайзера, на втором эквалайзер пока не трогаем, но включаем слой, ге первая буква поднята, первый скрываем и так далее.
Теперь эквалайзер: на 2 кадре ставим второй слой эквалайзера на третем третий и так далее, так как количество слоёв с текстом не равно кол-ву слоёв с эквалайзерам поувторяем столько раз сколько надо.

Далее переходим в Имэйдж риди а там в Файл---Экспорт---Animation Frames as Files, там ставим PNG 24, сохраняем в нужную папку.
Открываем Mozilla Firefox, там идём в Инструменты и выбираем APNG Editor, собираем анимацию повторно, разобраться как не сложно(кто не понял, объяснить могу)
Вот, после всего получится красивый Юзербар без фона в формате APNG
Вот мои варианты: