Создаём modern-скин (FreeForm) для WinAMP (как делаются modern скины для WinAMP 3, 5...) — серия уроков. Урок первый — как нарисовать в фотошопе графику для скина на WinAMP...

Настало время раскрыть тайну создания 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, а именно о главном окне...

Спасибо за внимание!