Красивые блестящие стеклянные кнопки для скинов к приложениям и для веб-интерфейсов всегда были популярны,в этом уроке я научу вас делать такие кнопки.
Итак,начнем.
1. Для начала создадим новый документ(размеры в этом примере 250×250,вы можете сделать любые).Нам надо сделать металлический фон для нашей будующей кнопки,значит берем инструмент,который рисует круг,и зажав кнопку Shift нарисуем небольшой круг.Далее создадим новый слой,дадим ему название One ,и зальем круг каким нибудь темно-серым цветом(например таким как #333333).Оставляем выделение,и следом создаем новый слой ,который назовем Two(слой создаем выше one). Заходим в 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%. Затем я удалил оригинальный слой Seven.
9. Вот и всё! Я добавил логотип Spoono наверху для забавы.
Итак,начнем.
1. Для начала создадим новый документ(размеры в этом примере 250×250,вы можете сделать любые).Нам надо сделать металлический фон для нашей будующей кнопки,значит берем инструмент,который рисует круг,и зажав кнопку Shift нарисуем небольшой круг.Далее создадим новый слой,дадим ему название One ,и зальем круг каким нибудь темно-серым цветом(например таким как #333333).Оставляем выделение,и следом создаем новый слой ,который назовем Two(слой создаем выше one). Заходим в 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%. Затем я удалил оригинальный слой Seven.
9. Вот и всё! Я добавил логотип Spoono наверху для забавы.