Photoshop CS6 на много более ориентирован на работу с векторой графикой, чем все его предшественники. В этом уроке мы покажем вам, как использовать все его новые возможности для создания интерфейса музыкального плеера для iPhone.


Что должно получиться Что вы будете создавать

Результат для урока: Как при помощи Photoshop CS6 разработать дизайн интерфейса музыкального плеера для iPhone

Шаг 1

Откройте Photoshop CS6 b создайте новый файл. Установите для него ширину 320 px и высоту 480 px.

0836_Music_musicplayer-001


Шаг 2

В этом шаге мы создадим фон для нашего приложения. В Photoshop CS6 появился новый способ создания векторных фигур. Мы будем использовать этот метод в течении всего урока. Для этого нам необходимо создать новую группу и назвать ее «Background». Теперь выберите Rectangle Tool (R) и перейдите к панели параметров этого инструмента. Смените исходный параметр на режим «форма». После этого вам нужно выбрать градиент для формы и определить его параметры. Установите все значения идентично тем, что подсвечены на картинке, приведенной ниже, а для градиента выберете цвета # 3F4042 и # 303133.

0836_Music_musicplayer-001-1

После этого кликните в свободную область холста. У вас должно появиться окно создания прямоугольника. Убедитесь в том, что его размеры  700x700px. Если все верно, то нажмите кнопку ОК и назовите созданный слой «Background».

0836_Music_musicplayer-001-2

0836_Music_musicplayer-002

Нажмите Cmd / Ctrl + A. Эта комбинация клавиш выделяет весь холст и выберите Move Tool (V). После этого перейдите в панель параметров инструмента и кликните на совмещении центров по горизонтали, а затем на выравнивание по нижнему краю.иконку, которая обозначает совмещение центров по горизонтали, а затем на ту, что выравнивает их нижние границы

0836_Music_musicplayer-003

Затем сделайте двойной клик по слою «Background» и убедитесь, что флажок «Dither» активен. Это нужно для получения гладкого градиента без полос.

0836_Music_musicplayer-004


Шаг 3

Откройте файл statusbar.psd в Photoshop и импортируйте изображение строки состояния в ваш рабочий PSD файл. После этого используйте метод, который мы описывали в предыдущем шаге, для выравнивания группы «Status Bar». Только теперь мы будем совмещать центры групп по горизонтали и выравнивать их верхние границы.

0836_Music_musicplayer-005


Шаг 4

Теперь нам необходимо создать новую группу ниже группы «Status Bar» и назвать ее “Navigation Bar”. Выберите Rounded Rectangle Tool (U) и установите свойства, как показано на следующем рисунке. Для градиента следует выбирать цвета # 5F8F1D и # 99B83D. После того, как эти процедуры выполнены, клкните на любом месте холста и нажмите кнопку ОК на появившемся окне. Задайте этому слою имя “Nav Bg”.

0836_Music_musicplayer-006

Совместите полученные слои по горизонтальному центру и опустите его чуть ниже строки состояния, как изображено на рисунке.

1

Выберите Rectangle Tool (U) и нарисуйте прямоугольник, который будет похож на тот, что приведен на следующем рисунке. На этом этапе очень важно убедиться, что эта форма перекрывает лишь нижнюю часть слоя  похожую на ту, что будет показано ниже, но убедитесь, что эта форма закрывает только нижнюю часть группы «BG Nav». Для созданного слоя мы используем параметр заливки без цвета.

1

После этого мы используем инструмент Path Selection (A) и выбираем созданную форму. Нажмите Cmd / Ctrl + C для того, что бы скопировать форму в буфер обмена. Выберите слой  «Nav BG» в списке слоев и нажмите Cmd / Ctrl + V. Это действие на вставит форму на слой «BG Nav».

1

Инструмент Path Selection (A) все еще активен. На панели параметров нажмите на путь операции и кликните по вычитанию передней формы.

1

Используя инструмент Direct Selection Tool (A) выберите две нижние точки формы и переместите их до высоты 43px.1.

Примените следующие стили к слою «Nav Bg».

1

 


Шаг 5

Используя Rounded Rectangle Tool (U) нарисуйте форму со свойствами, которые показаны ниже. Используйте сплошную заливку для этого слоя. После этого назовите новый слой “Settings Bg”.

0836_Music_musicplayer-013

2

После выполнения данных процедур, примените к слоям следующие стили.

0836_Music_musicplayer-014

Сделайте выравнивание слоя «Setings Bg» по вертикальному слою «Nav Bg» и расположите его на расстоянии 6 Px от правого края холста.

1

Откройте файл icons.psd и перенесите иконку “Settings” на ваш PSD макет. Позиционируйте новую иконку по центру слоя “Settings Bg”.

1

Примените к ней следующие стили.

1

 


Шаг 6

Используя Rounded Rectangle Tool (U) нарисуйте форму со свойствами, которые показаны ниже. Для заливки используйте сплошной цвет. После этого назовите новый слой «Back Bg».

1

1

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

1

При помощи Convert Point Tool выделите точку, которую только что создали.

1

Теперь используйте Direct Selection Tool (A) и сдвиньте эту точку на 10 пикселей влево.

1

1

При помощи все того же Direct Selection Tool (A) выделите 2 опорные точки, как показано на следующем рисунке, и сдвиньте их влево на 1 пиксель. После этого воспользуйтесь Convert Point Tool и кликните по каждой из этих точек.

0836_Music_musicplayer-022

Совместите форму по вертикальному центру  «Nav Bg» и сдвиньте по горизонтали на 6px от левого края холста.

 


Шаг 7

Теперь, когда мы закончили отрисовку этой формы, мы можем применить к нему стиль. Щелкните правой кнопкой мыши на слое “Settings Bg” и выберите пункт Copy Layer Style (копировать стиль слоя). После этого вернитесь к слою «Back BG» и щелкните на нем правой мышью и выберите пункт Paste Layer Style (вставить стиль слоя).

1

Добавьте текст на кнопку, используя параметры, которые показаны на изображении ниже. Для названия я выбрал шрифт Helvetica Neue. Выровняйте текст по центру формы и скопируйте стиль слоя с “Settings”.

1

1

Теперь пришло время добавить текст заголовка, используя следующие параметры. не забудьте выровнять текст по центру «Navigation Bar».

0836_Music_musicplayer-027

1

 


Шаг 8

Теперь нам требуется создать новую группу ниже “Navigation Bar”. Эту группу мы назовем “Position”. Выбирайте Rectangle Tool (U) и установите для этого слоя свойства, которые видите на картинке ниже. После выполнения этих действий, кликните на любой точке холста. Для градиента следует использовать цвета с номерами #2E2F30 и #494A4C. Назовите этот слой “Position Bg”.

1

Расположите эту форму под Navigation Bar, но обязательно убедитесь, что между ними есть пространство в 1 px. Выровняйте эту форму горизонтально по центру холста.

1

Для этого слоя задайте следующие свойства:

1

1

 


Шаг 9

Выберете Rounded Rectangle Tool (U) и установите свойства, как на изображении ниже. После этого кликните на любой точке холста. теперь нам требуется увеличить радиус на любое значение, которое понравится вам. В своем примере я использовал значение 50px.

1

Назовите этот слой “Position Empty” и выровняйте его по горизонтали и вертикали, относительно центра слоя “Position Bg”.

1

Примените для этого слоя следующие свойства:

1

Используйте Rounded Rectangle Tool (U) и примените свойства, показанные на рисунке ниже. После этого кликните на любой точке холста. Для градиента используйте цвета с номерами #85AD2A, #A0D028 и #B6D028. Задайте более высокое значение для радиуса. После выполнения этих процедур переименуйте слой в “Position Full”.

1

Выровняйте новую форму так, как показывается на картинке ниже, но убедитесь, что она отступает от слоя “Position Empty” на 2px со всех сторон.

1

0836_Music_musicplayer-038

Теперь примените к форме следующий стиль:

1


Шаг 10

Выберете Ellipse Tool (U) и установите свойства слоя, как на рисунке ниже. После этого кликните на любой точке холста. Для градиента на этом слое следует использовать следующие цвета:  #444547 и #5C5E61. назовите этот слой “Handle».

1

Выровняйте этот слой по вертикальному центру слоя “Position Full” и расположите по правому его краю.

1

Для нового слоя установите следующие значения:

1

Снова выберете Ellipse Tool (U) и установите свойства, как на рисунке ниже. После этого кликните по любой точке на холсте. Для градиента этого элемента мы будем использовать значения  #636669 и #38393. теперь мы назовем новый слой “Handle Circle”.

1

Разместите слой по центру слоя “Handle”.

1

Теперь мы добавим текстовые значения времени. Для этого мы используем шрифт  Helvetica Neue, Bold. Установите значение размера шрифта 10px и определите цвет надписи #B2B2B2. После этого произведите выравнивание текста так, как показано на следующей картинке.

1

 


Шаг 11

На этом шаге мы приступаем за следующее функциональное поле нашего будущего плеера для iPhone. Создайте новую группу и назовите ее  “Playback Controls”. Используя инструмент Ellipse Tool (U), нарисуйте круг с параметрами 50x50px. Остальные параметры этого слоя можно оставить без внимания. Задайте имя этого элемента “Play Bg”.

1

1

Раскройте группу “Position” в списке слоев и кликните правой кнопкой мыши по слою “Handle”. После это нажмите на пункте Copy Shape Attributes (скопировать атрибуты формы) в появившемся меню.

1

Теперь нам нужно вернуться в группу “Playback Controls”, кликнуть правой мышкой по слою  “Play Bg” и выбрать пункт Paste Shape Attributes (вставить атрибуты формы). Запомните этот ход — это новая и очень полезная возможность Photoshop CS6. Это позволяет применить к слою совершенно все параметры, которые имелись у исходного элемента. Все свойства мы копировали у слоя “Handle” и теперь они полностью перенесены на наш новый слой.

1

Выровняйте слой горизонтально по центру холста и опустите его ниже “Position Bg” на 20 px.

1

Теперь примените к нему следующие свойства:

1

1

 


Шаг 12

Кликните правой мышкой на слое “Play Bg” и выберите пункт Duplicate Layer (создать дубликат слоя). Назовите появившийся слой “Fast Backward Bg”.

1

Используя Path Selection Tool (A) кликните по слою “Fast Backward Bg” и, перейдя в панель настроек, измените его размеры на 34x34px.

1

Выровняйте слой вертикально по центру “Play Bg” , а после сместите на 8px левее него.

1

Теперь нам нужно создать дубликат слоя “Fast Backward Bg” и назвать его “Fast Forward Bg”. После выполнения этой уже простой процедуры, мы должны выровнять новый слой так, как и “Fast Backward Bg”, только смещение в этом случае произвести в правую сторону.

1

 


Шаг 13

Создайте новую круглую форму с параметрами, которые мы показываю на рисунке ниже. Для градиента используйте #46484A и #2C2D2E цвета. Будьте внимательны, убедитесь, что новый слой находится под всеми слоями в группе “Playback Controls”.

1

Назовите созданный слой “Playback Bg” и выровняйте его по центру относительно горизонтальной и вертикальной оси слоя “Play Bg”.

1

После этого создайте дубликат этого слоя и уменьшите его размер до 48x48px. Для этого нам понадобится вспомнить метод, который мы использовали в 12-м шаге. Теперь выровняйте его по центру слоя “Fast Backward Bg.”

1

Теперь снова создайте дубль этого слоя и выровняйте новый слой по центру от “Fast Forward Bg”.

1

Теперь импортируйте слои “Fast Backward”, “Play” и “Fast Forward” из прилагаемого файла icons.psd и расположите иконки так, как показано на картинке ниже.

1

Выберите все три иконки, зажав на клавиатуре клавишу Cmd/Ctrl и установите для них прозрачность 85%.

1

Теперь импортируйте слои “Speaker” и “Repeat” из того же файла и расположите их так, как сделали это мы на нашей картинке.

1

Эти иконки имеют сплошную заливку, но мы хотим придать им стильный вид и залить их градиентом. Выберите Path Selection Tool (A) и кликните по слою “Speaker”. теперь примените для него параметры, указанные на картинке ниже. В данном случае для градиента мы используем цвета #6B6C70 и #797B80.

1

Скопируйте атрибуты с иконки динамика, используя Copy Shape Attributes (Копировать атрибуты формы) и примените их для иконки повтора.

1

Теперь примените следующие настройки для иконок динамика и повтора:

1

1

 


Шаг 14

На этом шаге мы поместим в наш плеер обложку альбома, которую подготовили заранее. После того, как слой будет импортирован, преобразуйте его в smart objects и уменьшите размер на 50%. Это нужно сделать для того, что бы увеличение нашего изображения в финальном шаге нашего туториала не испортило качество картинки при ее увеличении.

Откройте файл albumcover-02.jpg и импортируйте изображение в ваш PSD файл плеера.

1

Преобразуйте слой в smart object. Для этого нужно зайти в меню Layer (слой) > Smart Objects (смарт объект) > Convert to Smart Object (преобразовать в смарт объект). После нажмите клавишу Cmd/Ctrl + T на вашей клавиатуре для трансформации слоя и уменьшите его размеры на 50%. Назовите этот слой “Album Cover Center”.

1

1

Выполните выравнивание слоя по горизонтальному центру холста и опустите его вниз на 20px относительно слоя “Play Bg”.

1

Теперь воспользуйтесь Rounded Rectangle Tool (U) и нарисуйте форму с параметрами, которые показаны ниже. Установите размеры 180x180px. Для заливки слоя выберите тип «No Color»  и установите радиус 3px.

1

Выровняйте новую форму точно по верхней линии картинки обложки альбома.

1

Теперь примените форму на обложку альбома, перетащив ее мышкой с иконки «rounded rectangle layer» на иконку слоя “Album Cover Center”, при этом нужно зажать клавиши Cmd/Ctrl + Alt на клавиатуре. После этого удалите слой «rounded rectangle». Он нам больше не понадобится.

1

 


Шаг 15

Откройте файл albumcover-01.jpg и импортируйте картинку в ваш PSD, преобразуйте его в smart object и уменьшите размер на 50%. Выровняйте обложку вертикально к центру слоя “Album Cover Center” и горизонтально сместите его влево на 40px. Задайте имя этому слою “Album Cover Left”.

1

Используя Rounded Rectangle Tool (U) нарисуйте форму с параметрами. которые вы видите ниже. Установите размер фигуры 160x160px и выберите заливку «No Color» в соответствующем списке.В данном случае установите радиус 3px.

1

Скопируйте «rounded rectangle shape» на слой “Album Cover Left”, используя метод, который мы применяли для центральной обложки альбома. У нас все получилось! Теперь удалите ненужный слой, как и в предыдущем случае.

1

Откройте файл albumcover-03.jpg и импортируйте его в ваш макет and import it to your PSD. Повторите все действия, что мы проделали для левой обложки, только расположите ее справа, как показывается на картинке ниже.

1

 


Шаг 16

Примените к слою следующие свойства:

1

1

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

1

1

Поместите текст заголовка песни и сдвиньте строку вниз на несколько пикселей ниже центральной обложки альбома.

1

теперь создайте еще одну строку текста для автора песни и выровняйте эти надписи по центру холста.

1

 


Шаг 17

 


Шаг 18

Используя Rectangle Tool (U) нарисуйте форму с параметрами, которые вы видите ниже и примените цвета с кодами #292A2B и #38393B для градиента.

1

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

1

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

1

Выберите точки, которые подсвечены на рисунке и сдвиньте их на 6px вверх.

1

теперь воспользуйтесь Direct Selection Tool (A) и переместите направляющие точек в положение, которое показывается на рисунке ниже.

1

 


Шаг 19

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

Для этого нужно зайти в меню Edit (правка) > Transform Path (трансформация контура) > Flip Horizontal (отразить горизонтально).

1

Переместите новый слой точно в правый нижний угол холста. Убедитесь, что между этими элементами не осталось зазора.

1

теперь выделите слои, которые показаны на рисунке ниже и выполните их слияние (Merge Shapes).

1

теперь мы получили финальную форму для нашего фона. Но вы все еще видите вертикальную линию на стыке двух бывших форм. Это значит, что у нас теперь 2 формы на одном слое, которые слиты не до конца.

1

Используйте Path Selection Tool (A) и кликните на слое с формами. Выберите пункт Path Operations в меню опций и нажмите Merge Shape Components (слить компоненты формы). Теперь две формы окончательно слиты воедино. Назовите этот слой “Tab Bar Bg”.

1

1

Если мы выберем Direct Selection (A), то заметим несколько ненужных опорных точек, которые появились в процессе слияния форм. Старайтесь очищать контуры ваших элементов от ненужных точек. Для этого кликните по ним при помощи инструмента Delete Anchor Point Tool.

1

Теперь примените следующие свойства для слоя “Tab Bar Bg”:

1

 


Шаг 20

на этом шаге мы создадим направляющие, которые помогут нам выровнять иконки для панели вкладок.

Используйте Rectangular Marquee Tool (M) и создайте выделение шириной 60px. Левый его край должен совпадать с левой границей нашего холста.

1

теперь вытяните направляющую с вертикальной линейки и и расположите ее на правой границе выделения. Убедитесь что опция привязки направляющих включена. Вы сможете проверить это зайдя в меню View (просмотр) > Snap To (привязка) > Guides (направляющие).

1

Повторите этот шаг для остальных направляющих, которые следует расположить, как на рисунке ниже.

1

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

1


Шаг 21

Перетащите слой “Home” из файла icons.psd.

1

Используя Rectangular Marquee Tool (M) создайте выделение, которое расположится между направляющими, как на следующей картинке.

1

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

1

1

Напечатайте текст “Home” со следующими параметрами:

1

Выровняйте текст вертикально около направляющей и горизонтально по центру иконки.

1


Шаг 22

Повторите предыдущий шаг для иконок и надписей оставшихся элементов нашего меню.

1

 


Шаг 23

Используйте Rectangle Tool (U) и нарисуйте форму со следующими параметрами. Для градиента в этом случае используйте цвета с кодами #5F8F1D и #99B83D.

1

Выровняйте форму по вертикали так, что бы ее верх касался верхней направляющей, а горизонтально по центру холста. назовите этот слой “Now Playing Bg”.

1

Осталось совсем немного. Примените к этому слою следующие свойства:

1

1

Перетяните слой “Now Playing” из файла icons.psd и задайте ему цвет заливки с номером #000000.

1

Также примените следующие свойства:

1

Выровняйте иконку горизонтально по центру слоя “Now Playing Bg” и вертикально опустите на несколько пикселей ниже верхней границы этого слоя.

1

Напечатайте текст “Now Playing” со следующими параметрами:

1

Сделайте выравнивание текстового слоя вертикально по центру кнопки. После этого опустите его по вертикали на несколько пикселей ниже иконки. Скопируйте стиль слоя с «Now Playing icon».

1

 


Шаг 24

Мы закончили создание всех элементов дизайна нашего iPhone плеера. Но нам остался один финальный шаг, на котором мы займемся масштабированием нашего изображения.

Сделать это очень просто в несколько простых действий. Для этого нам нужно перейти в меню Image (изображение) > Image Size (размер изображения) и установить значения, приведенные ниже. подойдите к этому действию с особым вниманием и убедитесь, что все значения установлены верно.

1

Теперь вы должны получить нужный результат своих трудов.

ВНИМАНИЕ: Всегда пытайтесь рисовать элементы вашего дизайна в векторных формах, так, как мы делали это в нашей статье. Это облегчает работу с ними и исключает потерю качества при изменении их размера.

1

 


Заключение

В этом туториале мы показали вам, как создать интерфейс приложения для iPhone, используя графический редактор Photoshop CS6 и его возможности в обработке векторной графики.

Также мы показали вам, как можно создать приложения с адаптивным дизайном, подходящим для устройств с иными разрешениями экранов.

1


Теги:

Это стоит посмотреть