Pill-Like Buttons
Tutorial in Advanced, Drawing, Web
This tutorial will help you create a navigation menu with buttons that will look like pills. In order to create them, we will apply several ((Layer Styles)). The result will be great.
Open a new document (300×400px and white background).
Create a ((new layer)).
Choose back as front color.
Select ((Rounded Rectangle Tool)), ((Radius)): 12px to draw the button.
Ctrl + Click the button layer to activate the selection.
With ((Recangular Marquee Tool)) + Alt pressed, reduce the selction to 80%.
The new selection should look like this.
Fill it in with red.
Press Ctrl + J with the selection active, to copy it into a new layer.
Ctrl + Click the new layer to activate the selection.
Double click the new layer to open ((Blending Options)).
((Bevel and Emboss)).
((Stroke)).
It should look like this.
Ctrl + Click the first layer to activate the selection of the button.
Press ((Rectangular Marquee Tool)) + Alt and reduce the selection until it looks like the image below. Then fill it in with red.
Duplicate the selection (Ctrl + J) in order to place it ina new layer.
Double click the duplicated layer in order to open the ((Blending Options)) window.
((Drop Shadow)).
((Inner Shadow)).
((Inner Glow)).
((Bevel and Emboss)).
((Contour)).
((Color Overlay)).
((Satin)).
((Stroke)).
Save the changes. The button will look like this.
Change the color using ((Hue/Saturation)) (Ctrl + U).
