Интерфейс музыкального плеера в iPhone

5 июля 2013 · Глеб Х. · «Мир Фотошопа»

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

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

Шаг 1

Создайте новый документ в Фотошопе (Ctrl + N):

Шаг 2

Сейчас мы создадим фон. Создайте новую группу (Layer → New → Group) и назовите её «Background». Выберите инструмент Rectangle Tool (U) и настройте его, как показано на скриншоте.

Кликните где-нибудь на холсте, чтобы открыть окно с размерами фигуры. Введите ширину и высоту и нажмите ОК.

Назовите слой «Background».

Выделите весь холст (Ctrl + A), выберите инструмент Move Tool (V) и нажмите на кнопки выравнивания на верхней панели.

Кликните дважды на миниатюре слоя «Background» и включите Dither. Это создаст плавность градиента.

Шаг 3

Откройте файл «statusbar.psd» и перенесите группу «Status Bar» в основной документ. Используйте метод, описанный выше, чтобы правильно расположить верхнюю панель: кнопки Align Horizontal Centers и Align Top Edges.

Шаг 4

Создайте новую группу «Navigation Bar» под группой «Status Bar». Выберите инструмент Rounded Rectangle Tool (U) и настройте его, как показано на скриншоте. Создайте прямоугольник где-нибудь на холсте. Назовите слой «Nav Bg».

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

Выберите инструмент Rectnagle Tool (U), установите No Color для Fill Type на панели настроек. Создайте прямоугольник, покрывающий нижнюю часть зелёной полоски.

Выберите инструмент Path Selection Tool (A) и выделите созданный прямоугольник. Скопируйте его (Ctrl + C), выберите слой «Nav Bg» и нажмите Ctrl + V, чтобы вставить на него прямоугольник.

На верхней панели инструмента нажмите на кнопку Path operations и выберите пункт Subtract Front Shape.

После того, как нижняя часть прямоугольника будет отрезана, нажмите на ту же кнопку ещё раз и выберите пункт Merge Shape Components.

Инструментом Direct Selection Tool (A) выберите две нижние якорные точки и увеличьте ширину зелёного прямоугольника до 43 пикселей.

Кликните дважды на слое «Nav Bg», чтобы открыть окно стилей. Настройте так:

Шаг 5

Инструментом Rounded Rectangle Tool (U) создайте ещё один прямоугольник. Назовите слой «Setting Bg».

Расположите его под иконкой состояние аккумулятора.

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

Слой «Setting Bg» должен быть на середине зелёной полоске и отступать от правого края на 6 пикселей.

Откройте файл «icons.psd» и перенесите шестерёнку в наш документ. Расположите её ровно в центре маленького квадрата.

Примените к шестерёнке стиль Drop Shadow:

Шаг 6

Инструментом Rounded Rectangle Tool (U) создайте прямоугольник на левой стороне зелёной полоски. Назовите слой «Back Bg».

Выберите инструмент Add Anchor Point Tool и добавьте якорную точку на левую сторону прямоугольника на расстоянии 14 пикселей от верхнего края.

Выберите инструмент Convert Point Tool и выделите эту точку.

Инструментом Direct Selection Tool (A) потяните её влево на 10 пикселей.

Тем же инструментом сдвиньте две якорные точки, отмеченные на следующем скриншоте, влево на 1 пиксель.

Выровняйте фигуру по вертикальному центру и расположите на расстоянии 6 пикселей от левого края холста.

Шаг 7

Кликните правой кнопкой мыши на слое «Settings Bg» и выберите пункт Copy Layer Style. Затем кликните правой кнопкой мыши на слое «Back Bg» и выберите пункт Paste Layer Style.

Инструментом Horizontal Type Tool (T) напишите слово «Back» на левой кнопке. Выровняйте его по центру.

В середине зелёной полоске напишите имя исполнителя или группы.

Шаг 8

Создайте новую группу «Position» под группой «Navigation Bar». Выберите инструмент Rectangle Tool (U) и настройте его, как показано на скриншоте.

Создайте фигуру под зелёной полоской на расстоянии 1 пиксель. Назовите слой «Position Bg».

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

Шаг 9

Внутри тёмной полоски создайте закруглённый прямоугольник и расположите его посередине. Назовите слой «Position Empty».

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

Настройте тот же инструмент так:

Создайте прямоугольник внутри предыдущего и назовите слой «Position Full». Зелёный прямоугольник должен отступать от краёв внешнего тёмного на 2 пикселя.

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

Шаг 10

Выберите инструмент Ellipse Tool (U) и настройте его, как показано ниже.

Создайте круг на конце зелёного прямоугольника и назовите слой «Handle».

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

Внутри серого круга создайте ещё один и назовите слой «Hand Circle».

Текстовым инструментом напишите время на краях полоски. Я использовал шрифт «Helvetica Neue», Bold (жирный) размером 10pt цветом #B2B2B2.

Шаг 11

Создайте новую группу «Playback Controls». Инструментом Ellipse Tool (U) создайте круг под полосой прогресса. Назовите слой «Play Bg».

Разверните группу «Expand», кликните правой кнопкой мыши на слое «Handle» и выберите пункт Copy Shape Attributes.

Вернитесь к группе «Playback Control», кликните правой кнопкой мыши на слое «Play Bg» и выберите пункт Paste Shape Attributes. Это одно из нововведений версии CS6. Все параметры фигуры, такие как градиент, угол и другие, будут перенесены на новый слой.

Расположите круг посередине на расстоянии 20 пикселей от верхней секции полосы прогресса.

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

Шаг 12

Кликните правой кнопкой мыши на слое «Play Bg» и выберите пункт Duplicate Layer. Переименуйте копию в «Fast Backward Bg».

Выберите инструмент Path Selection Tool (A) и выберите слой «Fast Backward Bg». Измените диаметр второго круга до 34 пикселей.

Расположите маленький круг на расстоянии 8 пикселей от большого.

Создайте копию слоя «Fast Backward Bg» и назовите её «Fast Forward Bg». Сдвиньте копию на правую сторону.

Шаг 13

Настройте инструмент Ellipse Tool (U) так:

Создайте круг и расположите его позади средней кнопки. Назовите слой «Playback Bg».

Создайте копию слоя «Playback Bg», уменьшите её до 48х48 пикселей и расположите позади левой кнопки.

Создайте ещё одну копию и расположите её позади правой кнопки.

Из файла «icons.psd» вставьте иконки на кнопки: «Fast Backward», «Play», «Fast Forward».

Выберите все три слоя иконок и понизьте непрозрачность до 85%.

Вставьте иконки «Speaker» и «Repeat».

Выберите инструмент Path Selection Tool (A) и выберите слой «Speaker». Залейте его градиентом:

Скопируйте атрибуты на правую иконку.

К обеим боковым иконкам примените следующие стили:

Шаг 14

Сейчас нужно вставить какую-нибудь обложку диска. Мы преобразуем её в смарт-объект и уменьшим до 50%. Мы работаем со смарт-объектом, так как в конце урока мы изменим размер интерфейса для Retina-дисплея. В этом случае мы не потеряем качества обложки.

Чтобы преобразовать слой в смарт-объект, перейдите в меню Layer → Smart Object → Convert to Smart Object. Активируйте инструмент Free Transform (Ctrl + T) и уменьшите размер обложки до 50%. Назовите слой «Album Cover Center».

Расстояние картинки от верхней кнопки должно быть равно 20 пикселям.

Выберите инструмент Rounded Rectangle Tool (U) и настройте его так:

Создайте рамку для обложки:

Зажмите клавишу Alt и перенесите рамку на иконку смарт-объекта. После этого удалите слой с рамкой, так как она уже будет находиться внутри смарт-объекта.

Шаг 15

Вставьте ещё одну обложку и расположите на расстоянии 40 пикселей от центральной обложки. Назовите слой «Album Cover Left».

Настройте инструмент Rounded Rectangle Tool (U) так:

Создайте рамку для левой обложки.

Вставьте последнюю обложку на правую сторону и создайте для неё рамку.

Шаг 16

К центральной обложке примените следующие стили:

Скопируйте стили с центральной обложки на боковые. Понизьте Fill (заливку) боковых обложек до 50%.

Напишите исполнителя песни и её название.

Шаг 18

Выберите инструмент Rectangle Tool (U) и настройте его так:

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

Инструментом Add Anchor Point Tool добавьте две якорные точки, как показано ниже.

Поднимите две правые якорные точки на 6 пикселей.

Инструментом Direct Selection Tool (A) расположите рычаги так:

Шаг 19

Создайте копию слоя с кнопкой (Ctrl + J) и поверните её в другую сторону (Edit → Transform → Flip Horizontal).

Расположите копию на правую сторону. Обе кнопки должны быть прилеплены друг к другу вплотную.

Выберите оба слоя кнопки, кликните правой кнопкой мыши и выберите пункт Merge Shapes.

После объединения фигур появится вертикальная линия. Это значит, что обе фигуры не полностью объединены.

Выберите инструмент Path Selection Tool (A), выберите слой с нижней кнопкой и нажмите на кнопку Path Operations, выберите пункт Merge Shape Components. Назовите полученный слой «Tab Bar Bg».

Выберите инструмент Direct Selection Tool (A) и увидите, что на контуре есть лишние якорные точки. Они нам не мешают, то я предпочитаю убирать всё лишнее. Чтобы удалить якорные точки используйте инструмент Delete Anchor Point Tool.

К слою «Tab Bar Bg» примените следующие стили:

Шаг 20

Выберите инструмент Rectangular Marquee Tool (M) и создайте выделение шириной 60 пикселей.

Активируйте Линейки (Ctrl + R), включите привязку к направляющим (View → Snap To → Guides). Отведите направляющую, проходящую через правый край выделения.

Отведите больше направляющих:

Отведите две горизонтальные направляющие.

Шаг 21

Перенесите иконку домика.

Инструментом Rectangular Marquee Tool (M) выделите левую секцию.

Инструментом Move Tool (V) перенесите домик в выделенную область. Выровняйте его по центру.

Напишите «Home» под домиком.

Шаг 22

Добавьте остальные иконки и подпишите их.

Шаг 23

Выберите инструмент Rounded Rectangle Tool (U):

Создайте зелёную кнопку и назовите её «Now Playing Bg».

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

Перенесите слой «Now Playing» из «icons.psd» и заполните иконку чёрным цветом.

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

Расположите иконку посередине.

Подпишите её:

Шаг 24

Мы закончили с созданием интерфейса, теперь нужно адаптировать его для Retina-дисплея. Перейдите в меню Image → Image Size и введите следующие значения:

Результат:

Заключение:

На этом мы заканчиваем урок по созданию интерфейса. Вы познакомились с несколькими новыми возможностями векторных объектов и возможностями стилей слоя. Теперь Вы знаете, как можно создать интерфейс для iPhone как с обычным дисплеем, так и с Retina-дисплеем.

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

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

Переведено с сайта psd.tutsplus.com, автор перевода указан в начале урока.