Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:



Интерфейс аудио плеера

Интерфейс аудио плеера


Ресурсы урока:


Динамик

Текстура


Шаг 1


Создайте новый документ в Фотошопе (Ctrl + N) размером 1080х1920 пикселей с разрешением 72 пиксель/дюйм.

Интерфейс аудио плеера


Шаг 2


Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) и выделите верхнюю 1/3 часть холста. Создайте новый слой и залейте выделение чёрным цветом. Затем примените фильтр шума (Add Noise Filter).

Интерфейс аудио плеера


Шаг 3


Примените фильтр Размытие по Гауссу (Gaussian Blur Filter).

Интерфейс аудио плеера


Шаг 4


Примените фильтр Контурная резкость (Unsharp Mask Filter). Он поможет смягчить текстуру. Если после применения фильтра Вам покажется, что текстуру всё ещё слишком резкая, повторите фильтр (Ctrl + F).

Интерфейс аудио плеера


Шаг 5


Уменьшите непрозрачность слоя, чтобы текстура стала менее заметна. Я решил уменьшить её до 4%.

Интерфейс аудио плеера


Шаг 6


Создайте пару копий текстуры и соедините их.

Интерфейс аудио плеера


Шаг 7


Расположите текстуры так, чтобы сверху был небольшой пробел.

Интерфейс аудио плеера


Шаг 8


Создайте новый слой (Ctrl + Shift + N). Инструментом Прямоугольная область (Rectangular Marquee Tool) выделите нижнюю часть. Выберите инструмент Кисть (Brush Tool), в настройках уменьшите Нажим (Flow) до 1% и Жёсткость (Hardness) до 0%. Закрасьте верхний край выделенной области.

Интерфейс аудио плеера


Шаг 9. Создание свечений на краях


Запомните этот этап, так как мы будем проделывать это много раз в течении урока.
Выделение должно быть по-прежнему активно. Инструментом Масштаб (Zoom Tool) увеличьте масштаб до 400% на той области, где есть пробел между текстурами. Создайте новый слой «Edge Highlight». Выберите инструмент Прямоугольная область (Rectangular Marquee Tool), кликните правой кнопкой мыши на холсте и выберите пункт Выполнить обводку (Stroke). Настройки обводки показаны на скриншоте.

Интерфейс аудио плеера


Результат:

Интерфейс аудио плеера


Шаг 10


К слою «Edge Highlight» добавьте маску (Layer Mask) и инвертируйте её (Ctrl + I).

Интерфейс аудио плеера


Шаг 11


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

Интерфейс аудио плеера


Шаг 12


Теперь Вы знаете, как создать свечение на краях. Они будут везде, где Вы захотите создать зазоры.
Выберите инструмент Перо (Pen Tool) и нарисуйте чёрную трапецию, как показано ниже.

Интерфейс аудио плеера


Создайте на нижнем крае свечение, как мы это делали на шагах 9-11. Для выделения трапеции используйте Ctrl + Click.

Интерфейс аудио плеера


Шаг 13


Сейчас мы напишем название приложения. Я использовал шрифт «Sofia Pro Bold» размером 80pt, но в качестве альтернативы можно выбрать шрифт «Futura», «Century Gothic» или даже «Helvetica». Расположите название в центре трапеции и измените его цвет на #dd5316.

Интерфейс аудио плеера


Уменьшите заливку текстового слоя до 0% и примените стиль Обводка (Layer Style – Stroke): Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет, Цвет - #2b0e01.

Интерфейс аудио плеера


Шаг 14


Создайте копию текстового слоя (Ctrl + J), увеличьте её заливку до 100% и отключите обводку.

Интерфейс аудио плеера


Шаг 15


Создайте копию верхнего текстового слоя (Ctrl + J). Выберите инструмент Перемещение (Move Tool) и сдвиньте слой на 1 пиксель вниз и на 2 пикселя вправо. Откройте стили и настройте так:

Наложение градиента: Режим – Умножение, Стиль – Линейный.

Интерфейс аудио плеера


Отбрасывание тени: Режим – Умножение, Цвет - #491c08.

Интерфейс аудио плеера


После применения стилей уменьшите заливку до 0%. Благодаря стилям нижняя часть текста немного затемнена, а сдвиг поспособствовал созданию чёткому свечению на краях сверху слева.

Интерфейс аудио плеера


Шаг 16


Создайте копию последнего текстового слоя (Ctrl + J) и измените стили:

Внутрення тень: Режим – Перекрытие, Цвет - #ffe9de.

Интерфейс аудио плеера

Интерфейс аудио плеера


Шаг 17. Создание блика


Выберите инструмент Перо (Pen Tool) и нарисуйте белую фигуру, показанную на скриншоте. На панели Свойства (Properties) установите Растушевку (Feather) – 2 пикселя.

Интерфейс аудио плеера


Шаг 18


К слою с белой фигурой добавьте маску. Выберите мягкую кисть с 5% нажимом и сотрите часть фигуры слева, как показано ниже.

Интерфейс аудио плеера


Шаг 19


Выделите трапецию (Ctrl + Click). Сожмите выделение на 25 пикселей (Modify – Contract).

Интерфейс аудио плеера


Создайте новый слой, выберите кисть с 100% непрозрачностью и нажимом. Жёсткость установите на 50-60%. Пройдитесь по нижнему краю любым цветом.

Интерфейс аудио плеера


Уберите выделение (Ctrl + D) и уменьшите непрозрачность слоя до 6%.

Интерфейс аудио плеера


Шаг 20


Теперь займёмся кнопками. Выберите инструмент Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) и на верхней панели задайте Радиус (Radius) – 20 пикселей. Создайте чёрную фигуру под трапецией.

Интерфейс аудио плеера


Шаг 21


Создайте копию фигуры, которую мы только что создали, активируйте режим Свободное трансформирование (Free Transform) и уменьшите её. Поправить пропорции и форму уменьшенной фигуры можно при помощи инструмента Стрелка (Direct Selection Tool)

Интерфейс аудио плеера


Создайте копию маленькой фигуры и измените её цвет на #401c02. Создайте обтравочную маску (Ctrl + Alt + G). Добавьте пиксельную маску (Layer Mask) и инвертируйте её (Ctrl + I). Чёрная фигура будет скрыта.

Интерфейс аудио плеера


Выберите мягкую кисть с 2% нажимом и белым цветом верните коричневый цвет сверху и снизу.

Интерфейс аудио плеера


Результат должен быть таким, как показано на следующем скриншоте. О наличии обтравочной маски будет говорить стрелка, направленная вниз рядом с миниатюрой слоя.

Интерфейс аудио плеера


Шаг 22


Выделите слой «button center» (Ctrl + Click). Выберите любой инструмент выделения, кликните правой кнопкой мыши на холсте и выберите пункт Выполнить обводку (Stroke).

Интерфейс аудио плеера


Добавьте чёрную маску к этому слою.

Интерфейс аудио плеера


Белой кистью верните серую обводку в отмеченных местах:

Интерфейс аудио плеера


Шаг 23


На кнопке напишите «Music chart» и примените к тексту следующие стили:

Внутреннее свечение: Режим – Линейный осветлитель, Цвет - #f7763d.
Наложение цвета: Режим – Нормальный, Цвет - #912d16.
Внешнее свечение: Режим – Осветление, Цвет - #701000.

Интерфейс аудио плеера


Шаг 24


Найдите слой с бликом, который мы создавали на 17 и 18 шагах. Создайте копию (Ctrl + J) и перенесите его в группу со слоями кнопки на самый верх. Измените размер и создайте обтравочну маску.

Интерфейс аудио плеера

Интерфейс аудио плеера


Шаг 25


Создайте сияния на краях, используя технику шагов 9-11. Если Вы захотите создать другие кнопки, Вам нужно будет создать копию группы и изменит надпись.

Интерфейс аудио плеера


Шаг 26


Откройте изображение динамика, отделите его от фона инструментом Волшебная палочка (Magic Wand Tool) и перенесите в наш документ.

Интерфейс аудио плеера


Примените коррекцию Цветовой тон/Насыщенность (Hue/Saturation):

Интерфейс аудио плеера


Шаг 27


Инструментом Овальная область (Elliptical Marquee Tool) создайте круглое выделение, удерживая клавишу Shift.

Интерфейс аудио плеера


Удерживая Alt, вырежьте центральную часть динамика. Удерживая Alt + Пробел, Вы сможете передвигать выделение.

Интерфейс аудио плеера


Измените цвет мембраны при помощи корректирующего слоя Цветовой тон/Насыщенность (Layer - Hue/Saturation) и создайте обтравочную маску (Ctrl + Alt + G).

Интерфейс аудио плеера


Шаг 28


Выделите маску корректирующего слоя (Ctrl + Click).

Интерфейс аудио плеера


Шаг 29


Создайте корректирующий слой Цветовой баланс (Layer – Color Balance) с обтравочной маской (Ctrl + Alt + G).

Интерфейс аудио плеера


Шаг 30


Создайте новый слой с обтравочной маской (Ctrl + Alt + G) в режиме Мягкий свет (Blending Mode - Soft Light) и выберите цвет #ffed9a. Мягкой кистью с 5% нажимом нарисуйте свет на мембране.

Интерфейс аудио плеера


Шаг 31


Создайте новый слой в режиме Перекрытие (Blending Mode – Overlay) и добавьте больше света белой кистью.

Интерфейс аудио плеера


Шаг 32


Объедините все слои динамика (Ctrl + E). Создайте три копии и расположите их, как показано ниже.

Интерфейс аудио плеера


Шаг 33


Инструментом Прямоугольник (Rectangle Tool) создайте прямоугольник цветом #2d2d2d. Уменьшите его непрозрачность до 80%.

Интерфейс аудио плеера


Создайте новую группу «fabric». Выделите серый прямоугольник (Ctrl + Click) и добавьте маску к группе. На маске автоматически будет залито то, что находится за пределами выделения.

Интерфейс аудио плеера


Шаг 34


Далее мы будем работать над текстурой и все слои должны быть помещены в эту группу.
Вставьте текстуру в наш документ в группу «fabric». Установите режим наложения Осветление (Blending Mode – Screen) и уменьшите непрозрачность до 80%.
Создайте копию текстуры (Ctrl + J), чтобы покрыть всю нижнюю часть.

Интерфейс аудио плеера


Для текстуры создайте корректирующий слой Цветовой тон/Насыщенность (Layer – Hue/Saturation).

Интерфейс аудио плеера


Шаг 35


Внутри группы создайте корректирующий слой Уровни (Layer – Levels).

Интерфейс аудио плеера


Шаг 36


Создайте слой-заливку Цвет (Fill Layer – Solid Color): #0a0908. Уменьшит непрозрачность до 80%.

Интерфейс аудио плеера


Шаг 37


Создайте копию слоя текстуры (Ctrl + J) и поднимите её на самый верх в группу. Обесцветьте текстуру (Ctrl + Shift + U) и примените коррекцию Уровни (Levels).

Интерфейс аудио плеера


Шаг 38


Установите режим наложения копии на Осветление (Blending Mode – Screen). На текстуре появятся светлые детали. Мне показалось, что их слишком много, и стёр нижнюю часть.

Интерфейс аудио плеера


Шаг 39


Создайте новый слой в режиме Мягкий свет (Blending Mode – Soft Light). Выберите мягкую кисть с 5% нажимом и белым цветом закрасьте верхний край текстуры.

Интерфейс аудио плеера


Шаг 40


Выберите инструмент Линия (Line Tool) и создайте две горизонтальные полоски толщиной 6 пикселей.

Интерфейс аудио плеера


Скопируйте базовую форму верхних кнопок:

Интерфейс аудио плеера


Создайте копию формы и уменьшите её. Измените цвет на светло-серый и измените Растушевку (Feather).

Интерфейс аудио плеера


Примените стиль Внутреннее свечение: Режим – Умножение, Метод – Мягкий.

Интерфейс аудио плеера


Шаг 41


Создание свечения на краях. Выделять нужно две горизонтальные полоски и закруглённую форму.

Интерфейс аудио плеера


Шаг 42. Винты


Инструментом Эллипс (Ellipse Tool) создайте два круга: чёрный и поверх него серый.

Интерфейс аудио плеера


Создайте новый слой с обтравочной маской над чёрным кругом. Выберите мягкую кисть с 3% нажимом. Белым цветом закрасьте края. Нижняя часть должна быть темнее верхней.

Интерфейс аудио плеера


Шаг 43


Измените цвет верхнего круга на #272727. Выделите его (Ctrl + Click), создайте новый слой с обтравочной маской (Ctrl + Alt + G) и обведите выделение.

Интерфейс аудио плеера


Опустите обводку на 1-2 пикселя вниз.

Интерфейс аудио плеера


Шаг 44


Инструментом Перо (Pen Tool) нарисуйте такую фигуру:

Интерфейс аудио плеера


Шаг 45


Сделайте крест цветом #a2a2a2. Создайте новый слой с обтравочной маской под обводкой винта. Чёрным цветом закрасьте края.

Интерфейс аудио плеера


Шаг 46


Создайте копию креста, уменьшите её и сделайте чёрной.

Интерфейс аудио плеера


Шаг 47


Добавьте маску к серому кресту и мягкой кистью подотрите края.

Интерфейс аудио плеера


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

Интерфейс аудио плеера


Будьте аккуратны при работе с маской. Если Вы сотрёте слишком много, результат может получиться некрасивым. Используйте кисть с нажимом 2-3%.

Интерфейс аудио плеера


Шаг 48


Все слои шляпки винта объедините в один (Ctrl + E). Создайте новый слой для винта в режиме Перекрытие (Blending Mode – Overlay). Белой кистью добавьте свет на верхнюю часть.

Интерфейс аудио плеера


Шаг 49


Создайте для винта ещё один слой, но в режиме Умножение (Blending Mode – Multiply). Мягкой кистью добавьте тень в нижней части/

Интерфейс аудио плеера


Шаг 50


Создайте новый слой под винтом в режиме Умножение (Blending Mode – Multiply). Чёрной кистью нарисуйте тень от винта.

Интерфейс аудио плеера


Шаг 51


Создайте несколько копий винта и расположите их симметрично. Чтобы создать отверстия вокруг шляпок винтов, используйте технику шага 12.

Интерфейс аудио плеера


Шаг 52


Первая экран приложения готов. Двигаемся дальше. На самом верху создайте прямоугольник, как показано на скриншоте. Сделайте его цветом #0a0a0a.

Интерфейс аудио плеера


Шаг 53


Создайте копию одной из верхних кнопок и расположите её посередине под двумя кнопками. Удалите блик и назовите «Song list».

Интерфейс аудио плеера


Шаг 54


Выберите самый нижний слой группы кнопки, создайте его копию и поднимите на самый верх. Измените цвет на белый.

Интерфейс аудио плеера


Шаг 55


Сделайте белую фигуру на 3 пикселя меньше.

Интерфейс аудио плеера


Шаг 56


Выделите белую фигуру (Ctrl + Click).

Интерфейс аудио плеера


Сожмите выделение на 6 пикселей (Modify – Contract).

Интерфейс аудио плеера


Добавьте маску к слою с белой фигурой.

Интерфейс аудио плеера


Шаг 57


Примените следующие стили:

Внутреннее свечение: Режим – Линейный осветлитель, Цвет - #da9d46.
Глянец: Режим – Перекрытие.
Наложение цвета: Режим – Нормальный, цвет - #ba4619.
Внешнее свечение: Режим – Осветление, Цвет - #701000, Метод – Мягкий.

Интерфейс аудио плеера


Шаг 58


Кликните правой кнопкой на слое «glow» и выберите пункт Скопировать стиль слоя (Copy Layer Style).
Под кнопкой «Song list» создайте чёрную полоску.

Интерфейс аудио плеера


Внутри чёрной полоски создайте две белые толщиной 6 пикселей.

Интерфейс аудио плеера


Шаг 59


Обеим белым полоскам добавьте скопированные стили.

Интерфейс аудио плеера


Создайте копии всех трёх полосок (1 чёрная и 2 светящиеся) и опустите их в нижнюю часть холста.

Интерфейс аудио плеера


Шаг 60


Теперь добавим управляющие элементы плееры и список песен. Основываясь на шагах 20-22? создайте такую кнопку:

Интерфейс аудио плеера


Шаг 61


Нарисуйте чёрную разделительную полоску толщиной 2-3 пикселя.

Интерфейс аудио плеера


Шаг 62


Добавьте серую 1-пиксельную линию под чёрной полоской.

Интерфейс аудио плеера


Шаг 63


Добавьте маску и сотрите концы серой линии.

Интерфейс аудио плеера


Шаг 64


Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) создайте вертикальную фигуру. Создайте 7 копий, расположите их в ряд, а затем объедините все (Ctrl + E).

Интерфейс аудио плеера


Создайте копию делений, измените цвет на белый и создайте обтравочную маску. Инструментом Стрелка (Direct Selection Tool) опустите каждое деление.

Интерфейс аудио плеера


Шаг 65


Напишите название песни, имя исполнителя и вставьте стили свечения.

Интерфейс аудио плеера


Шаг 66


Теперь создадим воспроизведения, остановки и паузы. Создайте белый круг и растушуйте края.

Интерфейс аудио плеера


Создайте копию круга, уберите растушевку и измените цвет на чёрный.

Интерфейс аудио плеера


Создайте 2 копии чёрного круга и немного уменьшите их. Измените цвет верхнего круга на #2d0600.

Интерфейс аудио плеера


Создайте обтравочную маску для слоя с красным кругом. Добавьте пиксельную маску и мягкой кистью скройте верхнюю часть, чтобы красное свечение было только внизу. Инструментом Перо (Pen Tool) нарисуйте иконку PLAY.

Интерфейс аудио плеера


Добавьте иконке стили свечения.

Интерфейс аудио плеера


Создайте копию блика с других кнопок и вставьте на кнопку воспроизведения. При помощи обтравочной маски ограничьте блик.

Интерфейс аудио плеера


Выделите форму кнопки и сделайте 1-пиксельную обводку.

Интерфейс аудио плеера


Уменьшите непрозрачность обводки и сотрите нижнюю часть.

Интерфейс аудио плеера


Сотрите часть свечения вокруг кнопки.

Интерфейс аудио плеера


Шаг 67


Создайте две копии кнопки воспроизведения и расположите их справа и слева. Измените символ на кнопках и уберите свечение.

Интерфейс аудио плеера


Шаг 68


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

Интерфейс аудио плеера


Конечный результат:



Интерфейс аудио плеера

Интерфейс аудио плеера



Ссылка на источник урока

написал : Deadmanswith

Превосходно. Сколько новых навыков в одном уроке. Книгу читать после этого гораздо интереснее.

---------------


Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: