Кнопки для интерфейса - Кнопки и иконки - Уроки фотошоп/ Photoshop lessons - ..:: Музыка Фильмы Игры Дизайн ::.. - ..::Скачать бесплатно фильмы, игры, софт, скрипты::..
Блестящие стеклянные кнопки для веб-интерфейсов и скинов к приложениями
долгое время были популярными решениями. В этом уроке мы научимся
технике создания стеклянной сферической кнопки.
Приблизительное время выполнения: 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%. Затем я
удалил оригинальный слой Seven.
9. Вот и всё! Я добавил логотип Spoono наверху для забавы.
