Рисуем джойстик для PlayStation

В этом уроке, мы расскажем, как в Photoshop шаг за шагом нарисовать джойстик для Play Station, используя при этом базовые инструменты, такие как формы слоев, кисти, штрихи и стили слоя. Приступим!

Ресурсы урока: Текстура кожи

Шаг 1: Эскиз

Начните с создания эскиза будущего контроллера. Векторными инструментами нарисуйте базовую форму и разделите все элементы на секции.

1

Шаг 2

Чтобы Вам было понятнее, я сгруппировал элементы контроллера по цвету.

2
3
4
5
6

Шаг 3: Корпус

Создайте копию слоя ручек (Ctrl + J) и поместите их в группу (Ctrl + G). Измените цвет ручек на #1d1d1f.

7

Шаг 4

Вставьте текстуру кожи в наш документ и расположите её над слоями ручек.

8

Шаг 5

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

9

Шаг 6

Над кожей создайте новый слой с обтравочной маской (Ctrl + Alt + G). Нарисуйте тени и свет на ручках, чтобы они выглядели объёмными. Понизьте непрозрачность слоя, чтобы всё было не так сильно заметно.

10

Шаг 7

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

11

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

12
13
14

Шаг 8

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

15

Шаг 9

Выделите прямоугольник и создайте новый слой. Залейте выделение чёрным цветом и примените фильтр шума (Filter → Noise → Add Noise).

16

Шаг 10

Установите режим наложения слоя с шумом на Screen. Благодаря шуму поверхность контроллера будет не такой гладкой и более реалистичной.

17

Шаг 11: Стрелки и кнопки

Создайте два круга цветом #43444a.

18

Шаг 12

Добавьте шум на круги.

19

Шаг 13

Установите режим наложения шума на Screen и понизьте непрозрачность до 30%.

20

Шаг 14

Нарисуйте тень в нижней части кругов.

21

Шаг 15

Сейчас мы добавим тень на край круга. Тени и свет помогают сделать фигуры объёмными. Создайте новый слой с обтравочной маской. Выделите круг (удерживая Ctrl, кликните на миниатюре слоя) и перейдите в меню Edit → Stroke. Введите следующие значения:

22

Шаг 16

Чтобы смягчить тень, примените фильтр Gaussian Blur (Filter → Blur → Gaussian Blur) со значением 3 пикселя. Понизьте непрозрачность до 23%.

23

Шаг 17

На новом слое нарисуйте световые отражения в верхней части кругов.

24

Шаг 18

Повторите 16 шаг, но на этот раз используйте белый цвет для обводки.

25

Шаг 19

Примените к свечению на краю фильтр Gaussian Blur со значением 2,5 пикселя.

26

Шаг 20

Выберите инструмент Move Tool (V) и сдвиньте круговое свечение на 2 пикселя внизу и влево.

27

Шаг 21

Понизьте непрозрачность и сотрите часть свечения мягким ластиком.

28

Шаг 22

Создайте такие же свечения на правой стороне.

29

Шаг 23

Ещё одно свечение.

30

Шаг 24

Под двумя кругами создайте ещё два круга такого же размера, но тёмные. Сдвиньте их на пару пикселей в сторону. Они нужны для того, чтобы зоны с кнопками выглядели объёмно.

31

Вот так выглядят тёмные нижние круги:

32

Шаг 25

Нарисуйте слабое свечение на краях.

33

Шаг 26

Ниже Вы можете сравнить зоны кнопок до и после добавления нижних кругов:

34

Шаг 27

Выберите мягкую кисть с малой непрозрачностью и нарисуйте тени около кругов. Падающие тени тоже помогают создать объёмность фигур.

35

Шаг 28

Выберите инструмент Rounded Rectangle Tool (U) и в настройках установите радиус 5 пикселей. Создайте фигуру цветом #15181d.

36

Шаг 29

Создайте копию прямоугольника и инструментом Free Transform (Ctrl + T) поверните её на 90 градусов.

37

Шаг 30

Инструментом Pen Tool (P) нарисуйте треугольник с изогнутой стороной.

38
39

Сделайте это для каждого угла.

40

Шаг 31

Создайте свечение вокруг крестика, используя технику 16 шага. Примените к нему фильтр Gaussian Blur со значением 5 пикселей.

41

Шаг 32

Понизьте непрозрачность слоя контурного свечения.

42

Шаг 33

Нарисуйте ещё несколько коротких световых линий при помощи 1-пиксельной кисти.

43

Шаг 34

Создайте ещё одно световое отражение на крестах. Выделите крест и отсеките верхнюю часть выделения при помощи инструмента Elliptical Marquee Tool (M). Оставшуюся область залейте светлым цветом.

44

Шаг 35

На правом кресте нарисуйте 4 круга цветом #45484f.

45

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

46
47
48
49
50

Шаг 36

Создайте контурное свечение при помощи обводки.

51

Шаг 37

Смягчите свечение при помощи фильтра размытия.

52

Шаг 38

Как видите свечение по края едва заметно. Именно такие незначительные изменения делают объекты реалистичнее.

53

Шаг 39

Добавьте более заметную белую обводку и сотрите её нижнюю часть.

54

Шаг 40

Нарисуйте символы, на кнопках, и объедините их в группу.

К группе символов примените стиль Outer Glow. В CS6 есть возможность применять стили к целой группе. Если у Вас более ранняя версия, то стиль нужно будет применить к каждому слою.

56
57

Шаг 41

Добавьте ещё раз 1-пиксельную белую обводку на кнопки.

58

Шаг 42

Мягким ластиком сотрите часть обводки.

59

Шаг 43

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

60

Шаг 44

Примените к чёрным кругам фильтр Gaussian Blur:

61

Шаг 45

Затем примените фильтр Motion Blur (Filter → Blur → Motion BLur).

62

Шаг 46

Понизьте непрозрачность размытых кругов до 50%.

63

Шаг 47

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

64

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

65

Шаг 48

Создайте новый слой и выделите чёрные круги (щели), которые мы создали в прошлом шаге. Обведите их 1-пиксельной белой линией.

66

Шаг 49

Сотрите часть обводки.

67

Шаг 50

Инструментом Pen Tool (P) нарисуйте кнопки цветом #0d0809 на левой стороне контроллера.

68

Шаг 51

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

69
70

Шаг 52

Нарисуйте кнопки такой же формы, но меньшего размера и более светлые.

71

Шаг 53

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

72
73
74
75
76

Шаг 54

На новом слое обведите вторые кнопки чёрной 2-пиксельной линией.

77

Шаг 55

Примените фильтр Gaussian Blur со значением 2 пикселя.

78

Шаг 56

Сдвиньте размытую обводку на 3 пикселя вниз и влево.

79

Шаг 57

Сотрите часть обводки.

80

Шаг 58

Выделите кнопки и на новом слое залейте их чёрным цветом. Добавьте шум при помощи фильтра.

81

Шаг 59

Установите режим наложения на Screen и понизьте непрозрачность.

82

Шаг 60

Добавьте белую обводку по краям кнопок.

83

Шаг 61

Нарисуйте 4 треугольника, как показано ниже. Примените к ним стиль Bevel & Emboss и понизьте Fill (заливку) слоёв до 0%.

84

Шаг 62

Выделите треугольники и на новом слое обведите их 1-пиксельной белой линией. Сотрите часть обводки.

86

Шаг 63

Сейчас создадим тень под кнопками. Выделите кнопки, создайте новый слой под ними и залейте чёрным цветом.

87

Примените фильтр размытия.

88

Шаг 64

Нарисуйте свечение на краях кнопок.

89

Шаг 65: Боковые кнопки

Нарисуйте основу кнопок цветом #3c3f44 на правой и левой стороне.

90

Шаг 66

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

91
92
93

Шаг 67

Нарисуйте боковые стороны основы кнопок цветом #888888, как показано на скриншоте.

94

Шаг 68

На краю нарисуйте небольшое свечение.

95

Шаг 69

Выделите основу кнопок и на новом слое залейте её чёрным цветом. Примените фильтр шума. Установите режим наложения на Screen и понизьте непрозрачность до 20%.

96

Шаг 70

Нарисуйте ещё одно свечение на левом крае.

97

Шаг 71

Ещё одно свечение — на нижем крае.

98

Оно должно быть очень тонкое и почти незаметное.

99

Шаг 72

Напишите L и R. Понизьте заливку текстовых слоёв до 0% и примените к ним стили, показанные ниже.

100
101
102

Шаг 73

Нарисуйте кнопки цветом #585862 и примените к ним стили, показанные ниже.

103
104
105

Шаг 74

Мягкой кистью нарисуйте свечения на кнопках.

106

До и после:

107

Шаг 75

Нарисуйте свечение на верхней части кнопок.

108

Шаг 76

Нарисуйте прямоугольник в нижней части контроллера. Примените к нему стиль Gradient Overlay.

109
110

Шаг 77

Добавьте маску к прямоугольнику и протяните чёрно-белый градиент с верха фигуры вниз, чтобы смягчить верхний край.

111

Шаг 78

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

112

Шаг 79

Создайте прямоугольник цветом #7a797b под чёрной линей.

113

Шаг 80

Нарисуйте две линии толщиной в 1 пиксель: чёрную и белую.

114

Шаг 81

Нарисуйте маленькие LED индикаторы.

115

Шаг 82: Джойстики

Нарисуйте два круга цветом #494a4f и примените к ним стили, показанные ниже.

116
117
118
119

Шаг 83

Добавьте маску к кругам и сотрите края, перекрывающие зоны кнопок.

120

Шаг 84

Создайте новый слой с обтравочной маской и нарисуйте тени и свет на джойстиках.

121
122

Шаг 85

Нарисуйте основание для джойстиков и примените стиль Gradient Overlay.

123

Шаг 86

Нарисуйте тени и свет на корпусе под джойстиками.

125

Шаг 87

Нарисуйте тени на ручках.

126

Шаг 88

Сейчас нарисуйте отверстие, в котором установлены джойстики. Нарисуйте два тёмных круга и один светлый внутри них. Затем создайте новый слой с обтравочной маской и белой кистью нарисуйте свечения внизу.

127

Шаг 89

Нарисуйте два светлых круга и примените стили, показанные ниже.

128
129
130
131

Шаг 90

Выделите круги, залейте их чёрным цветом на новом слое и примените фильтр шума.

132

Шаг 91

Создайте новый слой с обтравочной маской и нарисуйте больше света.

133

Шаг 92

Создайте чёрный прямоугольник толщиной 1 пиксель и понизьте его непрозрачность.

134

Шаг 93

Создайте копию и поверните её на 5 градусов (Ctrl + Alt + T).

135

Шаг 94

Продолжайте дублировать и поворачивать палочку, пока не завершите круг. Используйте сочетание клавиш Ctrl + Shift + Alt + T, чтобы повторить последнюю трансформацию.

136
137

Шаг 95

Создайте копию полученной звёздочки и измените цвет на белый. Опустите её на 1 пиксель и поэкспериментируйте с непрозрачностью каждой палочки.

138

Шаг 96

Добавьте маску и сотрите внутреннюю часть линий на джойстике.

139

Шаг 97: Кнопки Start, Select и логотип

Нарисуйте две фигуры.

140

Шаг 98

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

141
142
143
144

Мы получили отверстия для кнопок:

145

Шаг 99

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

146
147
148

Шаг 100

Нарисуйте свечения в виде белой 1-пиксельной линии.

149

Шаг 101

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

150

Шаг 102

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

151
152
153

Шаг 103

Нарисуйте свечения при помощи 1-пиксельной кисти.

154

Шаг 104

Нарисуйте круг меньшего размера.

155

Шаг 105

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

156
157
158

Шаг 106

Добавьте логотип и световые отражения.

159

Шаг 107

Кистью нарисуйте свечения на краях внутреннего круга.

160

Шаг 108: Текст

Подпишите кнопки.

161

Шаг 109: Тень

Создайте новый слой под контроллером и нарисуйте чёрный овал.

162

Шаг 110

Примените к нему фильтр размытия.

163
164

Шаг 111

Понизьте непрозрачность тени до 40%.

165

Шаг 112

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

166

Шаг 113: Больше свечений

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

167
168
169

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

final
Автор — Mohammad Jeprie
Перевод — Planet Design

Add a comment

*