Графический интерфейс для iPad

18 сентября 2011 · Глеб Х. · «Мир Фотошопа»

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

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

Шаг 1

Создайте новый документ (Ctrl + N) с параметрами, показанными ниже.

Шаг 2

Создайте новую группу (Layer → New → Group) и назовите её “Background”. Внутри группы создайте новый слой (Ctrl + Shift + N) и инструментом Paint Bucket Tool (G) залейте его цветом #707070.

Шаг 3

Создайте новый слой (Ctrl + Shift + N) над предыдущим и залейте его любым цветом при помощи того же инструмента Paint Bucket Tool (G). Я предпочитаю использовать белый цвет в таких ситуациях. Перейдите в меню Filter → Noise → Add Noise и введите значение параметра Amount 400%, Distribution — Uniform, Monochromatic — включено. Далее примените фильтр Emboss (Filter → Stylize → Emboss): Angle — 135, Height — 1, Amount — 146.

Установите Opacity слоя с фильтрами на 25% и Blending Mode на Soft Light.

Шаг 4

Выберите инструмент Rectangle Tool (U) и создайте белую фигуру в верхней части холста, как показано ниже. Установите Blending Mode этого слоя на Soft Light и Opacity на 12%.

Мы закончили с фоном.

Шаг 5

Переходим к созданию элементов. Создайте новую группу (Layer → New → Group) и назовите её “Main Knob”. Выберите инструмент Ellipse Tool (U) и создайте круг цветом #e1e1e1 (удерживайте клавишу Shift при создании). Кликните дважды на слое с кругом, чтобы открыть окно стилей. Примените стили, показанные на скриншоте.

Шаг 6

Выберите инструмент Brush Tool (B), выберите кисть среднего размера с жёсткостью 0%. Создайте новый слой (Ctrl + Shift + N) и нарисуйте чёрное пятно, как показано на скриншоте ниже. Установите Opacity слоя на 33%. Затем кликните правой кнопкой на слое и выберите пункт Create Clipping Mask.

Шаг 7

Выберите инструмент Custom Shape Tool (U) и в списке фигур выберите “Circle Thin Framе”. Создайте фигуру, как показано ниже на скриншоте. Инструментом Rectangular Marquee Tool (M) создайте два выделения, как показано на втором скриншоте ниже (удерживая клавишу Shift, можно создать несколько выделенных областей). Затем инвертируйте выделение (Ctrl + Shift + I) и добавьте маску слоя (Layer → Layer Mask → Reveal Selection) (или просто кликните на иконке маски в нижней части палитры слоёв). Кликните дважды на слое, чтобы открыть окно стилей. Стили, которые нужно применить, показаны на скриншоте ниже.

Шаг 8

Создайте новый слой (Ctrl + Shift + N) над предыдущим и чёрной кистью нарисуйте пятно, как показано ниже. Понизьте Opacity слоя до 22% и создайте обтравочную маску (Ctrl + Alt + G).

Шаг 9

Выберите инструмент Custom Shape Tool (U) и загрузите векторную фигуру, предоставленную в начале урока. Чтобы импортировать фигуру, на панели инструмента откройте список всех фигур. В правом верхнем углу списка Вы увидите маленький треугольник. Нажмите на него и выберите пункт Load Shapes. В окне проводника найдите нужный файл с фигурой.

Установите цвет заливки #707070 и создайте фигуру, как показано ниже. После этого примените стиль Gradient Overlay (Layer → Layer Style → Gradient Overlay).

Шаг 10

Выберите инструмент Pen Tool (P) и нарисуйте фигуру чёрного цвета, показанную ниже. После этого примените фильтр Motion Blur (Filter → Blur → Motion Blur): Angle — 40, Distance 15. Добавьте маску слоя (кликните на иконке маски в нижней части палитры слоёв). Выберите инструмент Gradient Tool (G): Style — Linear, Цвет — От основного к прозрачному (Foreground to Transparent). Сделайте заливку из правого нижнего угла к левому верхнему. Установите Opacity слоя на 80%.

Шаг 11

Инструментом Ellipse Tool (U) создайте круг цветом #b7b7b7. Примените к нему стили, указанные ниже.

Шаг 12

Создайте новый слой (Ctrl + Shift + N) и чёрной кистью нарисуйте пятно, как показано ниже. Установите Opacity слоя на 63% и создайте обтравочную маску (Ctrl + Alt + G).

Шаг 13

Создайте ещё один круг цветом #e1e1e1, используя инструмент Ellipse Tool (U). Потом примените стили, указанные ниже на скриншоте.

Шаг 14

Инструментом Rectangle Tool (U) создайте фигуру цветом #666666, как показано ниже. Создайте для неё обтравочную маску (Ctrl + Alt + G).

Шаг 15

Создайте ещё один круг цветом #d7d7d7 при помощи инструмента Ellipse Tool (U). Примените стили слоя, указанные ниже.

Шаг 16

Создайте новый слой (Ctrl + Shift + N) и белой кистью нарисуйте пятно, как показано ниже. Создайте обтравочную маску (Ctrl + Alt + G).

Шаг 17

Сейчас мы нарисуем иконку включения. Инструментом Pen Tool (G) нарисуйте фигуру цветом #7c7c7a. Инструментом Rounded Rectangle Tool (U) с радиусом 10 пикселей создайте ещё одну фигуру внутри полукруга. Примените стили, указанные на скриншоте ниже, к обоим слоями с фигурами.

Шаг 18

Мы закончили с созданием кнопки. Закройте группу слоёв, принадлежащую ей. Создайте новую группу (Layer → New → Group). Выберите инструмент Rounded Rectangle Tool (U) и установите значение параметра Radius на 2 пикселя. Создайте фигуру цветом #464646 на холсте, как показано ниже.

Выберите инструмент Elliptical Marquee Tool (M) и создайте выделение на 2-3 пикселя больше всей кнопки. Затем инвертируйте его (Ctrl + Shift + I) и добавьте маску слоя (кликните на иконке маски в нижней части палитры слоёв).

Шаг 19

К фигуре, находящейся справа от кнопки, примените следующие стили:

Шаг 20

Инструментом Ellipse Tool (U) создайте круг, как показано ниже. Создайте для него обтравочную маску (Ctrl + Alt + G) и круг будет находиться кнопки. После этого примените к нему стиль Bevel & Emboss (Layer → Layer Style → Bevel & Emboss).

Шаг 21

Выберите инструмент Horizontal Type Tool (T) и напишите текст на тёмно-серой кнопке, как показано ниже. Я использовал шрифт “Arial” размером 10pt. К текстовому слою примените стили, указанные ниже.

Шаг 22

Используя технику, описанную в предыдущих шагах, создайте ещё три кнопки вокруг центральной круглой.

Шаг 23

Сейчас мы создадим ещё 4 круглых регулятора. Сделайте копию группы с уже имеющейся круглой кнопкой (через контекстное меню группы). Создайте новую группу (Layer → New → Group) и назовите её “Small Knobs”. Внутри этой группы нужно расположить все копии круглой кнопки. Копию круглой кнопки нужно назвать “Small Knob”. При помощи инструмента Free Transform (Ctrl + T) уменьшите размер копии кнопки до 33% от оригинального размера (введите значения на панели параметров в верхней части программы). Удалите слои с символом включения внутри каждой группы “Small Knob”. Затем откройте окно стилей первого слоя с фигурой и измените параметры стиля Outer Glow.

Шаг 24

Выберите инструмент Horizontal Type Tool (T) и создайте две отметки (справа и слева), используя шрифт “Arial” размером 3.23 pt. Слева нужно написать “0 db”, а справа — “40 db”. К обоим текстовым слоям примените стиль Outer Glow (Layer → Layer Style → Outer Glow).

Шаг 25

Сделайте три копии группы “Small Knob” и для каждого регулятора измените положение слоя с прямоугольником, как показано ниже. Инструментом Pen Tool (P) нарисуйте фигуры, объединяющие пары регуляторов, цветом #464646. Потом примените к ним стили, показанные ниже.

После применения стилей выберите инструмент Horizontal Type Tool (T) и подпишите регуляторы, как показано ниже на скриншоте. Я использовал шрифт “Arial” размером 7.5pt. Слева напишите “INPUT”, справа — “OUTPUT”. После этого примените стили, показанные ниже.

Шаг 26

Создайте новую группу (Layer → New → Group) и назовите его “Switch”. Инструментом Rounded Rectangle Tool (U) с радиусом 2 пикселя создайте фигуру цветом #383839, как показано ниже. Примените к ней стили, показанные ниже.

Шаг 27

После создания базовой формы переключателя переходим к созданию тени. Инструментом Pen Tool (P) нарисуйте чёрную фигуру, как показано ниже. Затем примените фильтр Gaussian Blur (Filter → Blur → Gaussian Blur): Radius — 2 пикселя. Добавьте маску к слою с тенью, выберите инструмент Gradient Tool (G): Style — Linear, От основного к прозрачному (Foreground to Transparent). Цвет заливки — чёрный. Сделайте заливку снизу вверх, как показано на скриншоте ниже.

Шаг 28

Инструментом Rounded Rectangle Tool (U) с радиусом 2 пикселя создайте фигуру цветом #2c2c2c, как показано ниже. Потом примените стили, указанные на скриншоте ниже.

Шаг 29

Создайте новый слой и создайте обтравочную маску (Ctrl + Alt + G). Инструментом Rectangle Tool (U) создайте белую фигуру в центре последнего прямоугольника. Затем создайте ещё одну фигуру справа и для слоя с ней также создайте обтравочную маску (Ctrl + Alt + G). Цвет этой второй фигуры — #222222. Примените к ней стили, показанные ниже на скриншоте. После этого сделайте копию слоя (Ctrl + J) и расположите её на левой стороне.

Шаг 30

Инструментом Pen Tool (P) нарисуйте три белые фигуры над переключателем, как показано ниже. После этого инструментом Horizontal Type Tool (T) подпишите белые отметки. Шрифт — “Arial” размером 5pt. Напишите “ON”, “STAND”, “OFF”. Затем примените к текстовым слоям стиль Drop Shadow (Layer → Layer Style → Drop Shadow).

Сделайте ещё две копии группы “Switch” и расположите их друг под другом.

Шаг 31

Создайте новую группу (Layer → New → Group) и назовите её “EQ”. Внутри неё мы создадим эквалайзер. Для этого нам всего лишь нужно повторить технику предыдущих шагов. На скриншоте ниже отмечены шаги, которые нужно использовать для создания элементов эквалайзера.

Как закончите с созданием одной полоски, сделайте ещё 9 копий, чтобы получить полноценный эквалайзер.

Шаг 32

Создайте новую группу (Layer → New → Group) и назовите её “Grill”. Выберите инструмент Rounded Rectangle Tool (U) с радиусом 50 пикселей и создайте фигуру цветом #212121. После этого примените к ней стиль Inner Shadow (Layer → Layer Style → Inner Shadow). Сделайте 4 копии этой фигуры и превратите каждый слой с ней в смарт-объект. Для этого кликните правой кнопкой мыши на слое и выберите пункт Convert to Smart Object.

Шаг 33

После преобразования в смарт-объект примените стили, показанные ниже. Инструментом Pen Tool (P) создайте фигуру под прямоугольниками цветом #984545, как показано ниже. Примените к ней стиль Bevel & Emboss (Layer → Layer Style → Bevel & Emboss).

Сделайте копию слоя и измените цвет на зелёный.

Шаг 34

Инструментом Rectangle Tool (U) создайте квадраты цветом #871b19, как показано ниже. К левому квадрату примените стили, показанные ниже. Этот квадрат будет изображать нажатую кнопку.

Шаг 35

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

Шаг 36

Выберите инструмент Ellipse Tool (U) и создайте два круга над квадратами. Цвета: #ed1c24 и #72e22f. Примените к ним стили показанные ниже.

Шаг 37

Создайте новую группу “Display” (Layer → New → Group). Инструментом Rectangle Tool (U) создайте фигуру цветом #363636, как показано ниже. Выберите инструмент Elliptical Marquee Tool (M) и создайте два круглых выделения на боковых сторонах прямоугольника. Чтобы создать несколько выделений на холсте, удерживайте клавишу Shift. Инвертируйте выделение (Ctrl + Shift + I) и примените стиль Gradient Overlay (Layer → Layer Style → Gradient Overlay).

Шаг 38

Выберите инструмент Horizontal Type Tool (T) и выберите шрифт “LCD Mono”, предоставленный в начале урока. Установите размер шрифта на 29.64pt и напишите 11 восьмёрок. Понизьте Opacity слоя до 15%. На новом слое напишите “SONG TITLE” и сохраните Opacity слоя на 100%.

Ниже можете попробовать сделать ещё несколько надписей, которые обычно встречаются в плеере.

Шаг 39

Выберите инструмент Custom Shape Tool (U). Загрузите наборы Web фигур и музыкальных фигур. Выберите фигуры, отмеченные красными цифрами на скриншоте ниже, и расположите их в углах.

Шаг 40

Создайте новую группу (Layer → New → Group) и назовите её “Info Button”. Инструментом Ellipse Tool (U) создайте круг цветом #d7d7d7 слева внутри выреза. Примените к нему стили слоя, показанные ниже.

Шаг 41

Создайте ещё один круг тем же инструментом внутри первого цветом #d7d7d7 и также примените к нему стили слоя. Инструментом Custom Shape Tool (U) создайте символ “i” внутри кругов и примените к нему стили, показанные ниже.

Шаг 42

Создайте новую группу (Layer → New → Group) и назовите её “Music Button”. Инструментом Ellipse Tool (U) создайте круг цветом #d7d7d7 в правом вырезе. Потом внутри него создайте ещё один круг цветом #b6b6b6 и примените стили слоя ко второму.

Шаг 43

Инструментом Custom Shape Tool (U) создайте музыкальный символ “Sixteenth Note” цветом #1f1f1f внутри кругов. Создайте новый слой (Ctrl + Shift + N) и инструментом Brush Tool (B) белым цветом нарисуйте пятно, как показано ниже. Создайте обтравочную маску для этого слоя (Ctrl + Alt + G).

На этом урок закончен!

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

Укладка плинтуса; современная отделка квартир под ключ . Скрытая разводка труб. гарантия качества

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

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

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

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

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