2. Далее создаем новый слой , располагаем по центру две направляющие лини линейки: горизонтальную и вертикальную . Теперь, там, где линии пересеклись, инструментом выбора, при помощи нажатия клавиш shift+alt, рисуем круг размером 25 px в ширину и высоту . Затем активируем Gradient tool и заливаем полученный выбор линейным градиентом (linear gradient)от цвета #5B6660 к #BCCCCC . Растягиваем градиент сверху вниз. На картинке ниже показан результат, который должен получиться на данном этапе.

3. Теперь мы применим стили слоя к нашему кругу.
Сперва "Inner Shadow" с такими значениями:
Blending: Overlay
Color: White
Opacity: 75%
Angle: 90
Distance: 6
Choke: 0
Size: 9
Noise: 0

4. Затем "Outer Glow" cо значениями:
Blending: Normal
Opacity: 60%
Noise: 0
Color: Black (solid)
Technique: Softer
Spread: 0
Size: 5
Range: 50
Jitter: 0

5. Наконец "Inner Glow":
Blending: Normal
Opacity: 31
Noise: 0
Technique: Softer
Source: edge
Choke: 0
Jitter: 0
Range: 50

6. Теперь создаем новый слой и располагаем его под первым слоем с кругом. Инструментом выбора рисуем еще один круг 60px в высоту и ширину. Заливаем выбор линейным градиентом (linear gradient), сверху вниз с переходом цветов от #A2ABAA к #5D6663 . Теперь устанавливаем на слое "Inner Shadow" с такими значениями :
Blending: Lighten
Color: White
Opacity: 35%
Angle: -90
Distance: 2
Choke: 0
Size: 1
Noise: 0

7. На рисунке ниже видно, что должно у нас получиться :

8. Далее создаем новый слой и располагаем его под всеми слоями, рисуем круглый выбор 85px в высоту и ширину , заливаем его цветом #414B4A. Добавляем стили к слою :
Inner Shadow
Blending: normal
Color: White
Opacity: 23%
Angle: 90
Distance: 5
Size: 5
Noise: 0

9.Добавляем Gradient Overlay
Blending: : Normal
Opacity: 29%
Style: Radial
Align with layer: checked
Angle: 90
Scale: 100

10. Теперь Stroke:
Size:2
Position: Outside
Blend: Normal
Opacity: 100%
Color: #343F41

11. Опять создаем новый слой ниже всех первых . Удерживая shift+alt, рисуем в центре правильный круг размером 112px в высоту и ширину. Полученный выбор заливаем линейным градиентом (linear gradient) с переходом цветов от #898989 к #ECF0EF . Теперь применяем фильтр Filter > Blur > Gaussian blur в 0.5%. Все! Динамик готов! Результат должен выглядеть так, как на картинке ниже.

12. Добавим еще детали на свой вкус. Например, можно нарисовать еще один круг и залить его серым цветом #B0B0B0, как было сделано на картинке ниже .

Экспериментируйте! Добавьте любой интерфейс, например вот такой:

Ниже показан один из вариантов выполнения этого урока :

Автор: Infinite-Fire
Перевод: Svetilkin