-Приложения

  • Перейти к приложению Photoshop online Photoshop onlineДля того чтоб отредактировать картинку совсем не обязательно иметь фотошоп на комьпьютере. Это можно сделать с помощью приложения online photoshop =)
  • Перейти к приложению Улучшение фотографий Улучшение фотографийНе очень удачные фотки? Хочешь улучшить, но не знаешь Фотошоп? Не парься - просто дай задание, и мы сделаем всё за тебя!

 -Фотоальбом

Фотоальбом закрыт для неавторизованных и пользователей из черного списка. Зарегистрироваться!

 -Метки

actions brushes cr2 flowers layer mask photohop tutorials photoshop photoshop elements photoshop tools psd styles tristete_bella tutorial web wedding xmp аватар аватарка аватары автары альфа-каналы видео видеотека вопрос вопросы все для фотошопа градиент граффити губы действия иногда проще сделать инструмент перо каёмка кисти кисть клипарт в формате "png" клипарты книги коллоризация колор колоризация костюмы макияж меню обработка фото обработка фотографий оранжевый осенние рамки осенний набор осенний скрап панель инструментов photoshop плагины плакат поворот помощь просмотрщик размытие рамка рамки ретро ретушь рисование сайт самоучитель свадебные световые эффекты слои смешение слоев спецэффекты сталь стили супер текст текстура текстуры урок уроки уроки для начинающих уроки по фотошопу уроки фотошоп уроки фотошопа уроки фотошопа cs5 фильтр фильтры фоны фото фотографии фотомастерская фотомонтаж фотошоп фотошоп для начинающих хэллоуин цветок чем объяснить))) шаблоны шрифт шрифты шумы эффект эффекты

 -Поиск по дневнику

Поиск сообщений в УРОКИ_ФОТОШОПА

 -Подписка по e-mail

 

Как создать скин с помощью фотошопа

Четверг, 03 Января 2008 г. 19:10 + в цитатник
Винг все записи автора

Настало время раскрыть тайну создания modern-скинов на WinAMP.

У многих новичков возникает следующий вопрос: в какой программе создаются скины для WinAMP? (имеются ввиду modern-скины).

Чтобы развеять все сомнения и т.п. скажу сразу, что специальной программы для создания модерн скинов на WinAMP нет! Все они делаются вручную.

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

А вручную вы сможете сделать любой по сложности скин, он будет мало весить и глюков в нём не будет...

А благодаря урокам вы научитесь сами создавать modern-скины на WinAMP, да и, заодно, подучите XML... Или просто сможете похвастаться друзьям вашими достижениями :)

Точнее дельть мы будем их не совсем вручную... То есть рисуется вся графика в любом графическом редакторе, лучше, конечно, в фотошопе. А затем скин «собирается» в любом текстовом редакторе. Открываете блокнот (например) и пишите код на языке XML. Затем пишутся скрипты и всё такое (не обязательно) и скин готов...

Но речь в данном уроке пойдёт не об этом, не о сборке modern-скинов для WinAMP (о ней я вам всё подробно расскажу в следующих уроках из этой серии), а о том, как нарисовать все элементы для скина, точнее только для главного окна (остальное потом).

Как нарисовать modern-скин (FreeForm) для WinAMP (в фотошопе)

1. Как всегда :) , создаём новое изображение:

программа для создания freeform скинов на WinAMP

2. Выбираем инструмент Rounded Rectangle Tool, радиус скругления углов ставим равным 15 пикселей (Radius: 15px) и любым цветом рисуем прямоугольник размером 285x191 px:

программа для создания скинов для WinAMP

3. Заходим в Layer Style этого слоя (кликайте правой клавишей на слое (на панеле слоёв — Layers) и из появившегося меню выбирайте пункт Blending Options. В появившемся окне перейдите на вкладку Drop Shadow (отбрасывание тени) и там выставьте следующие параметры:

программа для создания freeform modern скинов для WinAMP

4. Затем перейдите на вкладку Inner Shadow (самозатенение) и там сделайте так, как показано ниже:

программа для создания modern скинов на WinAMP

5. Добавим градиент. Для этого перейдите на вкладку Gradient Overlay и там сделайте так:

программа для создания modern-скинов на WinAMP

Ниже показаны подробные настройки градиента (чтобы открыть их, кликните по полосе с градиентом, которая справа от надписи Gradient: ) — красным цветом я указал шестнадцатеричные коды цветов:

программа для создания freeform modern-скинов для WinAMP

6. Ну а на вкладке Stroke добавим небольшой бордюр:

как сделать скин для WinAMP

Везде жмём Ok и смотрим что же у нас получилось:

как делаются скины для WinAMP

7. Делаем копию слоя (перетащите слой (на панеле слоёв) на иконку для создания нового слоя или кликните на нём правой клавишей и выберите пункт Duplicate Layer...).

Затем сбросьте все настройки слоя (кликните правой клавишей на слое и выберите Clear Layer Style) и заходите в Layer Style, там параметр Fill Opacity выставьте в 0%:

как делаются modern-скины для WinAMP

8. Сейчас перейдите на вкладку Pattern Overlay и выставьте следующие параметры (если у вас нету такого грудиента, то его можно сделать самим — как это делается ва сможете прочесть в уроке о создании логотипа (пункт №6) или UserBar'а (в пункте №5) ):

урок по созданию скинов для WinAMP

9. Жмём Ok и получаем такой фон:

урок по созданию скинов на WinAMP

10. Создайте новый слой. С помощью инструмента Rounded Rectangle Tool нарисуйте прямоугольник с радиусом скругления 15 пикселей и размерами 246x172 px (цвет — любой):

урок по созданию modern-скинов для WinAMP

11. Заходите в Layer Style слоя, там перейдите на вкладку Inner Shadow (самозатенение) и выставьте нижеследующие параметры:

урок по созданию modern-скинов на WinAMP

12. После этого на вкладке Outer Glow (внешнее свечение) такие параметры:

урок по созданию modern freeform скинов для WinAMP

13. А на вкладке Gradient Overlay такие:

урок по созданию modern скинов на WinAMP

Вот так выглядят подробные настройки градиента:

как сделать modern-скин на WinAMP

14. Вкладка Stroke должна выглядеть следующим образом:

как сделать modern скин на WinAMP

Жмём Ok и видим результат проделанных действий (я тут ещё добавил название будущего скина — DesignArts.ru AMP):

как сделать modern-скин для WinAMP

15. Фон нарисован, начнём рисовать другие элементы. Сразу нарисуем кнопки управления воспроизведением.

Выбираем инструмент Rectangle Tool и нарисуем такую-вот фигуру (размеры — 29x25 px, цвет — любой):

как сделать modern скин для WinAMP

16. Заходим в Layer Style и выставим там такие параметры:

modern-скины для WinAMP

17. Затем на вкладке Drop Shadow (отбрасывание тени) такие:

modern скины для WinAMP

18. На вкладке Inner Glow следующие:

modern-скины для WinAMP. как создаются?

19. Вкладка Gradient Overlay должна выглядеть следующим образом:

modern скины для WinAMP. как создаются?

Вот подробные параметры градиента:

modern freeform скины на WinAMP. как создаются?

20. А это вкладка Stroke (бордюр):

modern-скины на WinAMP. как создаются?

А это подробные параметры градиентного бордюра:

modern-скины для WinAMP. в какой программе создаются?

Жмём везде Ok и получаем такую кнопку:

modern-скины на WinAMP. в какой программе создаются?

21. Сделайте 5 копий слоя с кнопкой и разместите их следующим образом (один под другим) — это будут наши кнопки управления воспроизведением:

modern скины для WinAMP. в какой программе создаются?

22. Теперь нужно придумать как мы будем различать названиение кнопок. Понятно, что нарисуем на них что-нибудь, а что? Сейчас придумаем...

Сразу нарисуем кнопку «Play» — это, как обычно, будет треугольник. Рисуется он с помощью Polygon Tool:

modern скины на WinAMP. в какой программе создаются?

23. Применим к кнопке несколько эффектов. Для этого, конечно же, заходим в Layer Style:

в чём делают скины для WinAMP?

24. На вкладке Color Overlay сделайте как показано ниже (это для окрашивания кнопки в серый цвет, это можно было выбрать сразу, при рисовании фигуры, но я вам показываю чтобы вы просто знали что есть такой способ окрашивания слоя):

в чём делают modern скины для WinAMP?

25. Ну и небольшой бордюрчик (Stroke):

в чём делают modern-скины для WinAMP?

Жмём Ok и получаем вполне приемлимую кнопку:

программа для создания modern скинов для WinAMP

26. Аналогично делаются остальные кнопки. Кнопку перемешивания и повтора плейлиста я рисовал с помощью Custom Shape Tool

Чтобы, применяя ко всем кнопкам одинаковые эффекты, не делать лишней работы, можно просто скопировать стиль со слоем нарисованной кнопки и применить его к слоям с новыми кнопками. Чтобы скопировать стиль слоя, нажмите правой клавишей на слое и выберите пункт Copy Layer Style, чтобы вставить (применить) скопированный стиль, нажмите правой клавишей мыши и выберите Paste Layer Style).

У меня получились такие-вот кнопки:

программа для создания modern-скинов для WinAMP

27. Сейчас создайте ещё одну копию слоя в большим верхним прямоугольником и очистите его стиль (правой клавишей на слоя, там выберите Clear Layer Style) — смотрите ниже, если вдруг не поняли:

урок по созданию модерн скинов для WinAMP

28. Выберите инструмент Rectangular Marque Tool и сделайте такое выделение:

урок по созданию модерн скинов на WinAMP

29. Нажмите клавишу Delete для удаления выделенной части слоя:

в какой программе создают модерн-скины для WinAMP

30. Полученные полосы мы будем использовать для вывода информации о треке (верхняя — для отображения имени исполнителя и названия трека, нижняя полоса — для отображения громкости, битрейта и частоты).

Применим к ним некоторые эффекты. Заходим в Layer Style и уменьшим прозрачность Fill до 0%:

в какой программе создают модерн скины для WinAMP

31. Добавим внутреннюю тень (Inner Shadow):

в какой программе создают модерн-скины для винамп

32. Ну и ещё бордюрчик в придачу (Stroke):

в какой программе создают модерн скины для винамп

33. А получиться после выполнения всего вышесказанного должно что-то вроде этого:

программа для создания скинов на винамп

34. На данном этапе я бы посоветовал украсить фон окошка. Для этого создадим новый слой, параметр Blend Mode слоя изменим с Normal на Overlay, а непрозрачность Opacity уменьшим до 20% (где это делается показано ниже):

программа для создания модерн скинов на винамп

35. Сейчас на только что созданном слое что-нибудь нарисуем, используя кисточки. Вот что нарисовал я (эту кисточку можно скачать в конце урока):

программа для создания модерн-скинов на винамп

36. Теперь было бы неплохо добавить кнопки для открытия/закрытия различных окошек (плейлист, эквалйзер, библиотека, открытие файла).

Для этого напишите названия кнопок каким-нибудь пиксельным шрифтом (хорошо читаемым при малых размерах; шрифт, который использовал я, можно взять в конце урока), серым цветом (#a2a1a1):

программа для создания модерн-скинов на WinAMP

37. Под какой-нибудь слоем с надписью нарисуйте такой-вот прямоугольник (инструмент — Rounded Rectangle Tool, радиус скругления углов — 1 px):

программа для создания модерн скинов на WinAMP

38. И примените к нему такие-вот эффекты (в окошке Layer Style). Начнём с прозрачности слоя:

скины для WinAMP в modern freeform стиле

39. Затем добавим отбрасывание тени:

скины для WinAMP в стиле modern

40. И бордюр:

как сделать скин для WinAMP в стиле modern

После нажатия Ok кнопка должна выглядеть как у меня:

как сделать скин на WinAMP в стиле modern

41. Повторите данные операции для остальных надписей:

сделать скин на WinAMP в стиле modern

42. Осталось совсем немного. Осталось нарисовать полосы для прокрутки трека и для регулирования громкости. Сделаем их вертикальными.

 

Создайте новый слой. Нарисуйте на нём такой прямоугольник:

урок по созданию скинов для WinAMP в стиле модерн

43. Зайдите в Layer Style и примените к нему некоторые эффекты. Начнём с прозрачности:

как в фотошопе рисуются скины для WinAMP

44. Затем добавим отбрасывание тени:

как в фотошопе рисуются modern-скины для WinAMP

45. Добавим самозатенение:

как в фотошопе рисуются modern скины для WinAMP

46. И добавим бордюр:

как в PhotoShop рисуются modern-скины для WinAMP

С вот-такими параметрами:

как в PhotoShop рисуются modern скины для WinAMP

Жмём Ok и видим только что нарисованную полосу прокрутки трека:

урок по рисованию скинов для WinAMP

47. Сделайте копию этого слоя (правый клик по слою, там выбираем пункт Duplicate Layer...). Разместите копию слоя справа:

урок по рисованию modern-скинов для WinAMP

48. И добавьте к нему ещё несколько эффектов. Перейдите в Layer Style, там на вкладку Gradient Overlay и сделайте следующий градиент:

урок по рисованию modern скинов для WinAMP

С такими-вот подробными настройками:

урок по рисованию modern freeform скинов на WinAMP

49. Жмём Ok и получаем почти готовое главное окошко плеера WinAMP:

урок по рисованию modern-скинов на WinAMP

50. Последний штрих всё-же нужен. Давайте нарисуем ещё кнопку Mute (отключение звука):

modern-skins for WinAMP tutorial

Ну вот и всё — мы нарисовали главного окно нашего будущего modern-скина для WinAMP. Не забудьте его раскрасьть по вкусу, а может и окошко серого цвета вам понравится...

Чтобы вас немного взбодрить после такого немного скучноватого и большого урока, забегу немного вперёд и покажу как это окошко будет смотреться в самом плеере:

modern skins for WinAMP tutorial

Ну и ждите следующего урока — в нём я вам расскажу о сборке modern скинов для WinAMP, а именно о главном окне...

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



Процитировано 2 раз



probably_maybe   обратиться по имени Четверг, 03 Января 2008 г. 19:21 (ссылка)
ссылку на оригинла и под кат бОльшую часть, пожалуйста
Ответить С цитатой В цитатник
Loriana   обратиться по имени Четверг, 03 Января 2008 г. 20:13 (ссылка)
а под кат не дано?
Ответить С цитатой В цитатник
ybei-molly   обратиться по имени Четверг, 03 Января 2008 г. 20:45 (ссылка)
КАТ.
Ответить С цитатой В цитатник
-Driada-   обратиться по имени Четверг, 03 Января 2008 г. 22:18 (ссылка)
результат не плох,но уж как-то урок слишком неразноообразный...стили...стили...бяк..скушна...
Ответить С цитатой В цитатник
Tokareva   обратиться по имени Пятница, 04 Января 2008 г. 03:48 (ссылка)
супер :) Надо попробовать на досуге :)
Ответить С цитатой В цитатник
LordSingler   обратиться по имени Комментарий к Как создать скин с помощью фотошопа Пятница, 04 Января 2008 г. 13:49 (ссылка)
неплохо.
Loreleya
Ответить С цитатой В цитатник
_Spotless_mind_   обратиться по имени Пятница, 04 Января 2008 г. 15:36 (ссылка)
Да,неплохо.Ждем продолжения =)
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку