![]()
|
Блестящие стеклянные кнопки для веб-интерфейсов и скинов к
приложениями долгое время были популярными решениями. В этом уроке мы
научимся технике создания стеклянной сферической кнопки.
Приблизительное время выполнения:
7 минут
1. Откройте новый документ (
250×250
в этом примере) и выберите
Circular Marquee Tool
. Сначала нам нужно создать металлический фон для кнопки, так что зажмите
Shift
и нарисуйте круг. Создайте новый слой, назвав его One и залейте круг темно-серым (таким, как
#333333
). Оставьте выделение и создайте новый слой под названием Two над ним. Зайдите в
Select>Modify>Contract
,
2 пикселя
, затем в
Select>Modify>Feather 5 пикселей
.
Выберите умеренно серый (такой, как
#666666
) в качестве цвета вашего фона. Залейте выделенную область, нажав
Alt+Backspace
(
Mac: Option+Delete
). Создайте третий слой под названием Three, не снимая выделение. Выберите белый в качестве цвета переднего плана и выберите
Linear Gradient Tool
. Убедитесь, что выбрана опция
Foreground to Transparent
. Кликните и протяните от верха к низу выделения (зажав
Shift
), чтобы залить выделенную область градиентом. Затем, чтобы сделать выделение немного светлее, продублируйте слой
Three
, выполнив
Layer>Duplicate Layer
, затем нажмите
Ctrl+E
(
Command+E
), чтобы выполнить слияние слоев. Теперь у нас есть немного металла, продолжим.
2. Создайте новый слой над остальными, назвав его
Four
. Используйте
Circular Marquee Tool
, чтобы создать меньший круг (зажав
Shift
). Залейте круг синим (например,
#6699dd
).
3. Зажав
Ctrl
(
Command
), кликните кнопку нового слоя, чтобы создать новый слой под
Four
. Назовите его и. Зайдите в
Select>Modify>Expand - 2 пикселя
. Теперь выберите
Gradient Fill
. Используйте градиент от черного к белому с этими настройками. Снизьте opacity слоя
SubFour до 80%
.
4. Затем вернитесь в слой
Four
, кликните на нем правой кнопкой и примените
Blending Options - Inner Glow
с такими настройками. Затем примените
Inner Shadow
с этими настройками. Далее идет экспериментальная часть. Создайте новый слой на
Four
под названием
Dodge
, поставьте
Blending Mode
на
Linear Dodge
. Выберите
Brush Tool
с кистью
100 пикселей
и
Hardness 10%
, а
Flow 40%
. Зажмите
Ctrl
(
Command
) и кликните на
Four
, чтобы загрузить его в выделение. Выберите черепаховый цвет (например
#2d8e97
)
и залейте этот слой для получения приятного эффекта. Чтобы сделать это,
вам, вероятно, понадобится использовать цвета светлее, так же, как и
для нижней области. Если нужно, снизьте
opacity
слоя до
80%
. После того, как останетесь довольны, кликните
Ctrl+E
, чтобы сцепить этот слой с
Four
.
5. Создайте наверху новый слой под названием
Five
. Зажмите
Ctrl
(
Command
) и кликните на
Four
, чтобы загрузить его в качестве выделения. Залейте эту область белым. Кликните
Ctrl+D
(
Command+D
), чтобы снять выделение. Поставьте
Blending Mode
слоя на
Overlay
. Нажмите
Ctrl+T
, чтобы вызвать диалоговое окно
Free Transform
. Зажмите
Shift
и сожмите выделение из нижнего угла, чтобы он выглядел, как пример справа. Зайдите в
Filter>Blur>Gaussian Blur
, поставьте радиус
2.8
. Снизьте
opacity слоя до 40%
или как потребуется.
6. Далее, создайте новый слой наверху под названием
Six
. Зажмите
Ctrl
(
Command
) и кликните
Four
, чтобы загрузить его, как выделение. Залейте его светло-голубым (например
#80f2e1
). Нажмите
Ctrl+D
(
Command+D
). Нажмите
Ctrl+T
(
Command+T
), чтобы выбрать
Free Transform
и сжать фигуру, чтобы она выглядела, как на картинке. Зайдите в Filter>Blur>Boxed Blur, выберите радиус
5 пикселей
(если у вас более старая версия Photoshop, Gaussian blur в шаге выше тоже подойдет). Поставьте
Blending Mode
слоя на
Soft Light
и
opacity на 75%
.
7. Создайте новый слой под названием
Seven
. Используйте
Rectangular Marquee Tool
, чтобы создать прямоугольное выделение. Залейте его белым, выбрав белый в качестве цвета переднего плана и нажав
Alt+Backspace
(
Option+Delete
). Затем, используйте
Rectangular Marquee
, чтобы выбрать узкий прямоугольник посередине и нажмите
Delete
,
чтобы очистить область. Сделайте то же самое с тонким горизонтальным
прямоугольником, пока у вас не выйдет 4 прямоугольника, как у меня на
картинке.
8. Чтобы округлить белые прямоугольники, откройте
Liquify
, нажав
Shift+Ctrl+X
(
Shift+Command+X
). Убедитесь, что выбрана опция
Backdrop
внизу справа. Это сложно объяснить, поэтому экспериментируйте с
Liquify
, пока у вас не выйдет так, как нужно. Я начал с выбора кисти
радиусом 400
, и использовал
Pucker
, кликнув вверху и прямо посередине прямоугольников и потянув немного вниз. Затем я выбрал кисть
радиусом 172
и кликнул посередине прямоугольников с выбранным
Bloat
,
чтобы немного их надуть. Затем я рисовал кистью, чтобы закрыть всю
синюю область, и кликнул на все, чтобы подвинуть их вверх и наклонить.
Когда я закончил, я создал слой над
Seven
, загрузил выделение из
Seven
и залил его градиентом
Foreground to Transparent
, используя белый в качестве цвета переднего плана. Я поставил
opacity
слоя на
90%
. Затем я удалил оригинальный слой S
even
.
9. Вот и всё! Я добавил логотип
Spoono
наверху для забавы.
|
