Нарисуй себе свой собственный аудиоплеер

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

Но это только на первый взгляд, ведь мой пост будет не только про “сухую/черствую” в смысле “полёта фантазии” работу над дизайном компьютерной программы, но и про людей, которые помогают и дают возможность проявить свое творчество, свой креатив любому человеку, даже в таких, казалось бы, жёстко установленных сферах как интерфейс программного обеспечения.

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

“Шкурки” или же “скины”, которые меняют внешний вид - интерфейс, каждый может найти и установить на свой собственный вкус и удобство пользования плеером. Однако креативный человек, использующий даже самые красивые, самые удобные для него “скины”, однажды задумается над тем, чтобы попробовать нарисовать свой собственный “скин”, абсолютно идеальный для него персонально. Некоторые художники-дизайнеры так и поступают - рисуют потрясающие интерфейсы, иногда совершенно ничем не напоминающие о том, что это в первую очередь строгая программа, а скорее похожие на настоящие произведения искусства… 

К большому сожалению многие из таких художников не являются программистами, чтобы воплотить в жизнь свое творчество. Максимум, что зачастую они могут сделать - “разобрать” какой-нибудь готовый или открытый для изменений “скин” на “винтики” и попробовать заменить графические составляющие обложки на свои. Или передать свою работу для проекта условному программисту. Подобная история приключилась и со мной…

Я - человек-”оформитель”. Плохой/хороший - не в этом суть сейчас, главное, что у меня всегда “чесались руки” что-то оформить, скроить/перекроить, я всегда, помимо воли, “с головой” уходил в анализ дизайна чего бы то ни было - анализировал, как то или иное сделано, как это можно визуально улучшить и т.д..

А еще я - большой фанат музыки. Всегда, работая с 2D-графикой, я включаю на фон свою любимую музыку и такая программа на моем ПК, как аудиоплеер - просто незаменима. А плеер с удобным лично мне интерфейсом, который идеально встраивается в мое рабочее пространство (которое я также под себя обязательно оформляю) - просто счастье несбыточное. “Несбыточное” потому, что даже самые лучшие и проработанные “скины” всегда чем-то мне не нравились или были не совсем удобны.

...Первое время, где-то с 2008 по 2016, я использовал знаменитый WINAMP, как основной свой аудиоплеер, поскольку всё это время именно он поддерживал нужное мне качество звука и достаточно большую базу “скинов”, которые я менял “как перчатки”, пытаясь найти по настоящему СВОЙ и практически всегда возвращался к Bento Classified:

В 2017-м году случилось сразу две вещи:

1. Я обнаружил, что аудиоплеер AIMP также уже довольно давно поддерживает нужные мне дополнения и соответственно - нужный мне уровень звука;

2. Я случайно нашёл “скин” для WINAMP, который был по эргономике не хуже, а в чём-то даже лучше моего постоянного Bento Classified. А визуально выглядел просто невероятно - почти так, как я всегда мечтал. Это был “скин” Quinto Black CT v1.6:

Эта обложка лишь совсем немного меня не устраивала отдельными мелкими элементами и я впервые задумался - а не попробовать-ли мне как-то изменить обложку под себя? 

“Скины” WINAMP не очень сложные и построенные/закодированные на достаточно понятном языке разметки XML. И всё-таки - это кодирование и программирование; заменить отдельные мини-картинки-элементы в обложке проблем не вызвало, а вот существенно изменить отдельные части под себя уже оказалось проблематично - имея только базовые теоретические знания по программированию, но не обладая даже базовыми навыками, я постоянно и беспросветно ломал “скин”... 

Именно в этот момент я начал активно интересоваться, как сделаны “скины” для плеера AIMP. 

Как я уже сказал, он был у меня всегда вторым, “запасным” плеером, а недавно я обнаружил, что все нужные мне плагины и дополнения для воспроизведения музыки на нём работают отлично. Кроме того, база “скинов” для этой программы просто поражала своим объемом и разнообразием - однозначно пришла пора разобраться, как всё это разнообразие создаётся.

Что касается основы самих “скинов” AIMP-а, то чуда не произошло: эти обложки также кодировались, только уже самыми настоящими языками программирования, на котором написана сама программа аудиоплеера. Однако настоящее чудо заключалось в том, что создатель плеера, Артём Измайлов, не поленился, а создал отдельную утилиту - программу-редактор, которая в привычном всем визуально-графическом формате, с помощью “инструментов”, “слоев” и т.п. позволяла работать с кодом обложки, грубо говоря, банально перемещая изображения по рабочему столу и задавая им определенные цифровые значения для достижения тех или иных эффектов. Определенные, сложные и нестандартные элементы “скина” в этом редакторе обложек всё ещё необходимо было непосредственно кодировать, прописывая программный код, но в целом, даже “методом тыка” программа позволяла очень быстро и эффективно править готовые и создавать с нуля новые “скины” для более или менее усидчивого человека. Усидчивости мне было не занимать и я с головой погрузился в новую для себя и крайне интересную работу - дизайн интерфейса программного обеспечения!

Одной из наиболее удобных для меня и часто используемых обложек на AIMP была Experience (ver. no EQ, with visual):

Этот “скин” также меня полностью не удовлетворял, но он оказался наиболее удачным по эргономике среди всех, ранее мною опробованных, и, кроме того, исходник (своеобразный “референс”) или “база скина” была открыта его создателем, что позволяло без ограничений изучать, разбирать и менять “скин” под себя, как только душе будет угодно. 

Разобравшись достаточно быстро с основами работы программы-редактора обложек я тут же начал соображать, как мне получить функционал Experience (ver. no EQ, with visual), но с внешним видом, элементами и эстетикой Quinto Black CT v1.6?

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

А когда я уже перепробовал с десяток различных, даже неплохих макетов “скинов”, я всё больше начал украшать плеер сложными и красивыми анимациями… в определённый момент я, соответственно, начинал натыкаться на необходимость программировать и собственноручно писать код для сложных участков в “скине”, а не просто складывать как мозаику отдельные элементы обложки. Что-то из самого простого я мог написать и сам, но за действительно крутыми штуками я решил обратиться к ребятам-”скиноделам” на профильный форум.

В компании опытных “скиноделов” потенциал в творчестве сразу раскрылся в несколько раз; много разных специфических программ-скриптов мне показали-рассказали, что-то безвозмездно написали специально под мой проект, что-то помогли изменить. Здесь стоит сделать акцент на том, что я делал всё-таки не банальный, а достаточно сложную работу и мне было интересно выжать максимум того, что я ещё мог понять и применить.

По ходу работы проект моего “скина” усложнялся. Новые друзья заверили меня, что неплохо было бы добавить в мою обложку стандартные для аудиоплеера окна и сделать полноценный, официальный скин для AIMP. Таким образом моя работа разделилась на два течения: я продолжал понемногу дорабатывать свой личный “скин” и активно начал создавать похожий “скин” для всех желающих.

Просто доработать свой собственный, начатый “скин” не представлялось возможным и вот по каким причинам.

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

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

В-третьих, свой домашний “скин” изначально  я делал на основе текстур и отдельных графических элементов обложки Quinto Black CT v1.6, поэтому, начиная работу, результатом которой будут бесплатно пользоваться все желающие, я нашел способ связаться с автором моего референса и спросил его, могу-ли я в своей работе указать его как автора оригинала. Моя работа на то время выглядела приблизительно следующим образом:

Автор “скина”-исходника ответил, что “скиноделит” только для WINAMP и не хотел бы, чтобы его имя связывалось с другими программными продуктами. Сам он предоставил бесплатный доступ к своей обложке, но так как не знал меня, то засомневался, поступлю-ли я соответствующим образом со своей стороны. Поэтому в отношении моего личного использования он не имел ничего против того, чтобы я делал с его работой что мне только вздумается, а вот для широкой общественности - попросил максимально убрать или изменить те детали его “скина”, которые я собирался применить. 

Мне ничего другого не оставалось, как тотально взяться за креатив. В конечном итоге вся эта ситуация пошла только во благо, потому, что официальный “скин” “Turbo Drive Activity Sound System” превратился в почти настоящую “Hi-Fi-обложку”, что изначально даже и близко не задумывалось, поскольку рисовать такие скины очень сложно.

Кстати, свое название - “Turbo Drive Activity Sound System” - обложка получила именно на этом этапе. И в самом деле - не называть же официальный “скин” рабочим на то время и одновременно личным именем “Turbo Disco Adept Sound System”!

Впрочем официальная версия “Turbo Drive Activity Sound System” - это отдельная история. А моя домашняя версия на протяжении года постепенно менялась по своей концепции и усовершенствовалась.

Сначала я вообще хотел сделать так, чтобы все нужные мне элементы управления музыкой были в одном окне - и кнопки управления, и “плейлисты”, чтобы ничего не нужно было переключать дополнительно:

Но постепенно в интерфейс добавлялись разные мелочи, дополнительные информационные мини-дисплеи, а для удобного окна “плейлиста” оставалось всё меньше места:

Когда же я понял, что в “главное окно” плеера смогу интегрировать целый экран с информацией о проигрываемом треке, а также экран с лирикой и смогу их между собой переключать, то я решил сделать ещё одно дополнительное окно и оформить его как “окно плейлистов”, потому, что на “главном окне” для него уже банально не хватало места.

Я нашёл способ сделать стандартными методами программы-редактора обложек так, чтобы “главное окно плеера” и “окно плейлистов” переключались-сменялись между собой в рамках одного большого окна с помощью большой кнопки вверху. 

“Окно плейлистов”:

Не в последнюю очередь убрать “окно плейлистов” с “главного окна плеера” было продиктовано тем, что сам автор плеера и дружный коллектив “скиноделов” постоянно развивают свои работы и пробуют найти новые сферы для креатива. 

Так, например, прямо во время начала моей работы над своей обложкой, они сумели программно внедрить возможность анимировать нарисованные акустические динамики так, чтобы их можно было запрограммировать на различные звуковые частоты (низкие, средние, высокие), чтобы они “колебались” в соответствии с проигрываемой музыкой.

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

И “светомузыку” и три пары активных аудио-динамиков я тут же нарисовал и собрал в свой домашний “скин”. На данный момент “Главное окно плеера” выглядит следующим образом:

Конечно, обложка еще не готова на 100%, та же “светомузыка” нуждается банально в визуальной доработке, нужно дорисовать еще несколько индикаторов, однако, смею вас заверить, нет ничего лучше, когда вы работаете и слушаете любимую музыку, управляя ею так, как именно вам хочется, как вам удобно до последней мелочи!

Какой вывод можно сделать из всей этой моей истории?

Ну, наверное, в первую очередь тот, что креатив, творчество иногда поджидает нас совершенно в неожиданных для нас местах, сферах жизни. Всегда стоит искать, находить и удивляться новому, учиться, развиваться и делиться опытом - кто знает, возможно следующая такая “внезапная находка” станет для вас тем самым Откровением в творчестве или хотя бы послужит источником вдохновения и полезного опыта.