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
|
|
| |