| ThePsyFamily | Дата: Пятница, 19.03.2010, 17:21 | Сообщение # 1 |
 Лейтенант
Группа: Администраторы
Сообщений: 72
Репутация: 0
Статус: Offline
|
Перевод урока с сайта www.tutorial9.net под названием "How To Create a Sleek Audio Player Interface in Photoshop" или "Как создать аудио интерфейс плеера в Фотошопе". Урок длинный, в 28 шагов, поэтому слаборвных прошу удалиться ) Что нужно? Фотошоп и немного (ну как получиться) времени. Шаг 1
Создать новый документ 600 ? 400 пикс. Шаг 2
Накладываем радиальный градиен от # 5e6c78 к #20282e Шаг 3
Копируем слой, нажмаем фильт -> шум -> добавить шум, ставим на 5% и делаем прозрачность слоя на 30%
Шаг 4
Берём инструмен "Прямоугольник со скругленными углами" (U) с радиусом в 5px
Выставляем параметры как на скринах
Шаг 5
Далее создаём новый слой, заливаем его серым цветом, применяем фильтр шум с количеством в 80%, распределением по гаусу и ставим
чекбокс на монохронный. Далее фильтор -> размытие -> радиальное размытие, ставим степень на 100 и повторяем два раза.
Получаем
Шаг 6
Поднимаем слой немного выше, ставим перекрытие на мягкий свет и прозрачность 80%, линее удоляем.
(Чтобы удалить лишнее небходимо растрировать слой по каторому будем обрезать, нажать Ctrl+A, немного переместить слой каторый
растрировали, чтобы пунктир на него осел, выбрать инструмент "Прямоугольная область" (М), нажать праваой кнопкой на рисунке ,
выбрать инверсию и нажать DEL)
Шаг 7
Создаём новый слой, рисуем карандашом с радиусом в 1px две линии, сверху и с низу, затираем концы большим, мягким ластиком (Чтобы линии
были ровный зажимаем SHIFT).
Нижнию линии ставим на 80% прозрачности Шаг 8
Создаём небольшой прямоугольник цвета #3a3a3a, линее обрезаем, смещаем на один пиксель к центру, копируем слой, отрожаем по
горизонтали и делаем также с другой стороны.
Шаг 9
Сново берём карандаш и ресуем две дилии в 1px как показано ниже, и затираем края ластиком.
Рисуем овальной областью овал, заливаем чёрным цветом, размываем по гаусу и обрезаем лишнее
Шаг 10
Для удобства создаём папку и закидываем в неё всё , так как дальше пойдёт кнопки и интерфейс Шаг 11
Рисуем прямоугольником со скругленными краями в 2px небольшую кнопку и применяем стили как на скрине ниже с цыетом обводки
#384251 и цветом графиента #8799ab -- #485664 -- #8799ab
Шаг 12
Создайте новый слой, назовем его "X". Чтобы получить X, можно использовать либо как шрифт или использовать ее с карандашом инструмент,
как я и сделал. Я использовал Gradient Overlay (темно-серый серо-легкие) и 1px тени для получения этого эффекта.
Шаг 13
Пихаем слои от кнопки в отдельную папку, копируем и заменяем X на нарисованные карандашом элементы. Шаг 14
Нарисуйте прямоугольник, как на картинке, и заполните его градиентом от # 303a44 к #4a5968. Шаг 15
Создайте новый слой. Рисуем новый прямоугольник, заполняем его белым градиентом и ставим прозрачность до 10% и перекрытие Шаг 16
Берём карандаш рисуем ве линии сверху и снизу, прозрачность первой на 26%, второй на 9% у второй ещё затираем края Шаг 17
Давайте заполнить экран некоторым содержанием. Я постараюсь сохранить эту часть краткой и понятной.
Во-первых, с помощью мягкой резинки и элипса, подчёркиваем то место где будет таймер. Затем, используя цифровой
вид шрифтов (я использовал шрифт называется Digital-7) пишем 03:59 или любой другой
номер. Затем введите название трека (я использовал шрифт Walkway жирным шрифтом). , Используя Arial, тип повтора и
Shuffle. Режим Shuffle включена, так что это немного легче, чем повторить. Потом я добавил небольшие детали, используя
методы, описанные ранее - 1px линия Карандаш и элипс с мягкой резинкой для световых эффектов. Шаг 18
Создаём прогресс бар. Рисуем прямоугольником с загруглёнными углами и с радиусом в 5px, полоску.
В стилях ставим градиен с цветами от #303a44 до #1c2329 и обводку в 1px цветом #afbbc6 и прозрачностью в 16%.
Теперь рисуем небольшой прямоугольник, это будет прогресс ползунок, заливаем его чёрным цветом, ставим ободку в 1px цветом #5c6977
и градиен #5c6977 #212a30 #5c6977 Шаг 19
Рисуем базу под кнопки. . Чтобы получить форму я использовал 5px Радиус Rounded Rectangle Tool, а затем обратил стороны.
Если вы хотите, вы можете сделать его просто как округлую форму прямоугольника. Затем ставим градиент
# 4d5c6a-1c2329-# 303a43, чёрную обводку. Шаг 20
Сейчас мы добавим много мелких деталей, используя только 1px Карандаш и ластик. Просто посмотрите на
картинку, чтобы понять как должно быть. Помните, что вам придется играть с прозрачностью, чтобы получить хорошие результаты. Шаг 21
Для того, чтобы сделать Play, Pause, Stop я просто обратил прямоугольники и треугольники и объединил их.
Добавить Gradient #b7d9ed- #458fb2- #b7d9ed Шаг 22
Теперь довайте доделаем окончательные 4 кнопки. Они будут одинаковые лишь небольшой прямоугольник с закругленными
углами в 2-3px с такими настройками стиля: наложение градиента #3d4a59 - #1c2329 ; внутрению тень ставим
параметры как на скрине.
Затем скопируйте эти кнопки, и разместить их как на картинке. Шаг 23
Теперь добавьте текст. Я использовал шрифт Arial (BOLD), и стиль градиент: #4c5a69-8495a7. Шаг 24
Вновь добавить некоторые мелкие детали с инструментом карандаш. Шаг 25 Теперь последнее, что мы добавим к интерфейсу является регулятором громкости. Во-первых, рисуем значок инструментом
карандаш. Добаляем тот же градиент что у кнопок Play, Pause т.д. Шаг 26
Использование Rounded Rectangle Tool, радиус 5px, нарисуйте прямоугольник и добавьте gradien такой же, как прогресс-бар. Шаг 27
10 маленьких кругов. Активные из них будут иметь градиент, как иконки Play, Pause т.д., а остальное из них будет иметь
от светло-серого до темно-серого градиент. Шаг 28
Обьединяем все слои кроме фона, размываем по гаусу, отрожаем по вертикале, затираем низ мягким ластиком.
От АДМИНА ThePsyFamily
|
| |
| |
