Настало время раскрыть тайну создания modern-скинов на WinAMP.
У многих новичков возникает следующий вопрос: в какой программе создаются скины для WinAMP? (имеются ввиду modern-скины).
Чтобы развеять все сомнения и т.п. скажу сразу, что специальной программы для создания модерн скинов на WinAMP нет! Все они делаются вручную.
Но! Недавно всё-таки появилась подобная программа (это сколько же лет прошло), но полный контроль при создании скина в ней получить вы не можете, недостатков в ней много, баго много, работает не у всех, да и скины получаются не такие маленькие и оптимизированные, как хотелось бы...
А вручную вы сможете сделать любой по сложности скин, он будет мало весить и глюков в нём не будет...
А благодаря урокам вы научитесь сами создавать modern-скины на WinAMP, да и, заодно, подучите XML... Или просто сможете похвастаться друзьям вашими достижениями :)
Точнее дельть мы будем их не совсем вручную... То есть рисуется вся графика в любом графическом редакторе, лучше, конечно, в фотошопе. А затем скин «собирается» в любом текстовом редакторе. Открываете блокнот (например) и пишите код на языке XML. Затем пишутся скрипты и всё такое (не обязательно) и скин готов...
Но речь в данном уроке пойдёт не об этом, не о сборке modern-скинов для WinAMP (о ней я вам всё подробно расскажу в следующих уроках из этой серии), а о том, как нарисовать все элементы для скина, точнее только для главного окна (остальное потом).
Как нарисовать modern-скин (FreeForm) для WinAMP (в фотошопе)
1. Как всегда :) , создаём новое изображение:
2. Выбираем инструмент Rounded Rectangle Tool, радиус скругления углов ставим равным 15 пикселей (Radius: 15px) и любым цветом рисуем прямоугольник размером 285x191 px:
3. Заходим в Layer Style этого слоя (кликайте правой клавишей на слое (на панеле слоёв — Layers) и из появившегося меню выбирайте пункт Blending Options. В появившемся окне перейдите на вкладку Drop Shadow (отбрасывание тени) и там выставьте следующие параметры:
4. Затем перейдите на вкладку Inner Shadow (самозатенение) и там сделайте так, как показано ниже:
5. Добавим градиент. Для этого перейдите на вкладку Gradient Overlay и там сделайте так:
Ниже показаны подробные настройки градиента (чтобы открыть их, кликните по полосе с градиентом, которая справа от надписи Gradient: ) — красным цветом я указал шестнадцатеричные коды цветов:
6. Ну а на вкладке Stroke добавим небольшой бордюр:
Везде жмём Ok и смотрим что же у нас получилось:
7. Делаем копию слоя (перетащите слой (на панеле слоёв) на иконку для создания нового слоя или кликните на нём правой клавишей и выберите пункт Duplicate Layer...).
Затем сбросьте все настройки слоя (кликните правой клавишей на слое и выберите Clear Layer Style) и заходите в Layer Style, там параметр Fill Opacity выставьте в 0%:
8. Сейчас перейдите на вкладку Pattern Overlay и выставьте следующие параметры (если у вас нету такого грудиента, то его можно сделать самим — как это делается ва сможете прочесть в уроке о создании логотипа (пункт №6) или UserBar'а (в пункте №5) ):
9. Жмём Ok и получаем такой фон:
10. Создайте новый слой. С помощью инструмента Rounded Rectangle Tool нарисуйте прямоугольник с радиусом скругления 15 пикселей и размерами 246x172 px (цвет — любой):
11. Заходите в Layer Style слоя, там перейдите на вкладку Inner Shadow (самозатенение) и выставьте нижеследующие параметры:
12. После этого на вкладке Outer Glow (внешнее свечение) такие параметры:
13. А на вкладке Gradient Overlay такие:
Вот так выглядят подробные настройки градиента:
14. Вкладка Stroke должна выглядеть следующим образом:
Жмём Ok и видим результат проделанных действий (я тут ещё добавил название будущего скина — DesignArts.ru AMP):
15. Фон нарисован, начнём рисовать другие элементы. Сразу нарисуем кнопки управления воспроизведением.
Выбираем инструмент Rectangle Tool и нарисуем такую-вот фигуру (размеры — 29x25 px, цвет — любой):
16. Заходим в Layer Style и выставим там такие параметры:
17. Затем на вкладке Drop Shadow (отбрасывание тени) такие:
18. На вкладке Inner Glow следующие:
19. Вкладка Gradient Overlay должна выглядеть следующим образом:
Вот подробные параметры градиента:
20. А это вкладка Stroke (бордюр):
А это подробные параметры градиентного бордюра:
Жмём везде Ok и получаем такую кнопку:
21. Сделайте 5 копий слоя с кнопкой и разместите их следующим образом (один под другим) — это будут наши кнопки управления воспроизведением:
22. Теперь нужно придумать как мы будем различать названиение кнопок. Понятно, что нарисуем на них что-нибудь, а что? Сейчас придумаем...
Сразу нарисуем кнопку «Play» — это, как обычно, будет треугольник. Рисуется он с помощью Polygon Tool:
23. Применим к кнопке несколько эффектов. Для этого, конечно же, заходим в Layer Style:
24. На вкладке Color Overlay сделайте как показано ниже (это для окрашивания кнопки в серый цвет, это можно было выбрать сразу, при рисовании фигуры, но я вам показываю чтобы вы просто знали что есть такой способ окрашивания слоя):
25. Ну и небольшой бордюрчик (Stroke):
Жмём Ok и получаем вполне приемлимую кнопку:
26. Аналогично делаются остальные кнопки. Кнопку перемешивания и повтора плейлиста я рисовал с помощью Custom Shape Tool
Чтобы, применяя ко всем кнопкам одинаковые эффекты, не делать лишней работы, можно просто скопировать стиль со слоем нарисованной кнопки и применить его к слоям с новыми кнопками. Чтобы скопировать стиль слоя, нажмите правой клавишей на слое и выберите пункт Copy Layer Style, чтобы вставить (применить) скопированный стиль, нажмите правой клавишей мыши и выберите Paste Layer Style).
У меня получились такие-вот кнопки:
27. Сейчас создайте ещё одну копию слоя в большим верхним прямоугольником и очистите его стиль (правой клавишей на слоя, там выберите Clear Layer Style) — смотрите ниже, если вдруг не поняли:
28. Выберите инструмент Rectangular Marque Tool и сделайте такое выделение:
29. Нажмите клавишу Delete для удаления выделенной части слоя:
30. Полученные полосы мы будем использовать для вывода информации о треке (верхняя — для отображения имени исполнителя и названия трека, нижняя полоса — для отображения громкости, битрейта и частоты).
Применим к ним некоторые эффекты. Заходим в Layer Style и уменьшим прозрачность Fill до 0%:
31. Добавим внутреннюю тень (Inner Shadow):
32. Ну и ещё бордюрчик в придачу (Stroke):
33. А получиться после выполнения всего вышесказанного должно что-то вроде этого:
34. На данном этапе я бы посоветовал украсить фон окошка. Для этого создадим новый слой, параметр Blend Mode слоя изменим с Normal на Overlay, а непрозрачность Opacity уменьшим до 20% (где это делается показано ниже):
35. Сейчас на только что созданном слое что-нибудь нарисуем, используя кисточки. Вот что нарисовал я (эту кисточку можно скачать в конце урока):
36. Теперь было бы неплохо добавить кнопки для открытия/закрытия различных окошек (плейлист, эквалйзер, библиотека, открытие файла).
Для этого напишите названия кнопок каким-нибудь пиксельным шрифтом (хорошо читаемым при малых размерах; шрифт, который использовал я, можно взять в конце урока), серым цветом (#a2a1a1):
37. Под какой-нибудь слоем с надписью нарисуйте такой-вот прямоугольник (инструмент — Rounded Rectangle Tool, радиус скругления углов — 1 px):
38. И примените к нему такие-вот эффекты (в окошке Layer Style). Начнём с прозрачности слоя:
39. Затем добавим отбрасывание тени:
40. И бордюр:
После нажатия Ok кнопка должна выглядеть как у меня:
41. Повторите данные операции для остальных надписей:
42. Осталось совсем немного. Осталось нарисовать полосы для прокрутки трека и для регулирования громкости. Сделаем их вертикальными.
Создайте новый слой. Нарисуйте на нём такой прямоугольник:
43. Зайдите в Layer Style и примените к нему некоторые эффекты. Начнём с прозрачности:
44. Затем добавим отбрасывание тени:
45. Добавим самозатенение:
46. И добавим бордюр:
С вот-такими параметрами:
Жмём Ok и видим только что нарисованную полосу прокрутки трека:
47. Сделайте копию этого слоя (правый клик по слою, там выбираем пункт Duplicate Layer...). Разместите копию слоя справа:
48. И добавьте к нему ещё несколько эффектов. Перейдите в Layer Style, там на вкладку Gradient Overlay и сделайте следующий градиент:
С такими-вот подробными настройками:
49. Жмём Ok и получаем почти готовое главное окошко плеера WinAMP:
50. Последний штрих всё-же нужен. Давайте нарисуем ещё кнопку Mute (отключение звука):
Ну вот и всё — мы нарисовали главного окно нашего будущего modern-скина для WinAMP. Не забудьте его раскрасьть по вкусу, а может и окошко серого цвета вам понравится...
Чтобы вас немного взбодрить после такого немного скучноватого и большого урока, забегу немного вперёд и покажу как это окошко будет смотреться в самом плеере:
Ну и ждите следующего урока — в нём я вам расскажу о сборке modern скинов для WinAMP, а именно о главном окне...
Спасибо за внимание!