Интерфейс приложения пианино

29 апреля 2014 · Глеб Х. · «Мир Фотошопа»

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

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

Шаг 1

Создайте новый документ в Фотошопе (Ctrl + N) и залейте фоновый слой цветом #111111.

Шаг 2

Создайте новый слой (Ctrl + Shift + Alt + N) и инструментом Rectangle Tool (U) создайте прямоугольник цветом #ebebeb в нижнем углу.

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

Шаг 3

Создайте много копий (Ctrl + J) и заполните ими нижнюю половину холста.

Шаг 4

Объедините все эти прямоугольники в группу (Ctrl + G) и назовите её «White Keys». Это белые клавиши пианино. Создайте новый слой и нарисуйте прямоугольник цветом #111111.

Шаг 5

Создайте новый слой и выберите инструмент Pen Tool (P). Нарисуйте фигуру цветом #111111, как показано ниже.

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

Шаг 6

На новом слое нарисуйте ещё одну фигуру цветом #111111.

Примените стиль Inner Shadow:

Шаг 7

Объедините слои чёрно клавиши в группу. Создайте девять копий группы и расположите их, как показано на скриншоте. Все чёрные клавиши объедините в группу «Black Keys».

Шаг 8

На новом слое нарисуйте прямоугольник цветом #111111 в верхней половине холста.

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

Шаг 9

Создайте полоску цветом #362f2d и примените к ней стили, показанные ниже.

Шаг 10

Создайте копию полоски (Ctrl + J) и поднимите её.

Шаг 11

Создайте новый прямоугольник цветом #362f2d между двумя полосками. Опустите этот слой под два слоя с полосками.

Примените стиль Gradient Overlay.

Шаг 12

Установите набор фигур, который Вы скачали в начале урока. Выберите инструмент Custom Shape Tool (U) и выберите фигуру «Shape 23». Создайте фигуру цветом #ecd573 и примените стили показанные ниже. После этого создайте копию слоя с ней и поверните в другую сторону (Edit → Transform → Flip Horizontal).

Шаг 13

Между двумя узорами создайте прямоугольник инструментом Rounded Rectangle Tool (U) с радиусом 10 пикселей. Цвет фигуры — #362f2d.

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

Шаг 14

Создайте копию групп «White Keys» и «Black Keys». Объедините копии в один слой (Ctrl + E). Уменьшите клавиши и расположите их на прямоугольнике предыдущего шага. Создайте пару копий, чтобы полностью заполнить его.

Шаг 16

Создайте чёрный прямоугольник, как показано на скриншоте ниже. Уменьшите его заливку до 60% и примените стиль Inner Glow.

Шаг 16

Создайте закруглённый прямоугольник с радиусом 10 пикселей слева от узора. Цвет — #362f2d.

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

Шаг 17

Инструментом Custom Shape Tool (U) создайте стрелку «Arrow 2» цветом #ecd573.

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

Шаг 18

Создайте пару копий стрелки, чтобы получить такую:

Шаг 19

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

Шаг 20

Обе кнопки поместите в группу «Arrows». Создайте копию группы и поверните её в другую сторону. Расположите эти кнопки на правой стороне.

Шаг 21

Над клавишами создайте прямоугольник цветом #362f2d.

Стили для прямоугольника:

Шаг 22

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

Шаг 23

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

Шаг 24

На новом слое нарисуйте маленький вертикальный прямоугольник цветом #ecd573. Залейте его тем же градиентом, что и на 22-ом шаге.

Шаг 25

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

Шаг 26

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

Шаг 27

Содайте тонкую горизонтальную полоску цветом #d6c5b2. Установите режим наложения слоя на Overlay и примените стиль градиента.

Шаг 28

Создайте несколько копий тонкой полоски и расположите их, как показано на скриншоте.

Шаг 29

На новом слое создайте узор «Shape 63». Уменьшите заливку слоя до 0% и примените стили, показанные ниже.

Шаг 30

Создайте копию узора и поместите её в другой угол.

Шаг 31

Инструментом Horizontal Type Tool (T) добавьте текст. Шрифт «Verdana» размером 7pt.

Шаг 32

Добавьте текст на правую часть панели.

Шаг 33

На новом слое нарисуйте стрелку «Arrow 2» цветом #ecd573.

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

Шаг 34

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

Шаг 35

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

Шаг 36

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

Шаг 37

Создайте копии тонких полосок и измените их цвет на #ecd573.Верните 100% заливку и измените длину каждой полоски. Примените стиль Gradient Overlay.

Шаг 38

Нарисуйте маленький прямоугольник (ползунок) и примените к нему стили, показанные ниже.

Шаг 39

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

Шаг 40

Скопируйте стили 38-го шага и создайте копию закруглённого прямоугольника 35-го шага. Вставьте на неё стили и измените цвет на #ecd573. Добавьте маску и скройте лишние участки при помощи маски.

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

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

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

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

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

Переведено с сайта naldzgraphics.net, автор перевода указан в начале урока.