Learn how to create modern glossy web buttons in Photoshop
In this Photoshop tutorial i will show you how to create cool and modern web buttons. The large button is great for single pages or products where you want to emphasize something important. To transform the flat button, all you need is to learn only the basics about lights and shadows. Follow me in this tutorial and keep practicing.Tutorial Details and Resources
Difficulty: BeginnerApps Used: Adobe Photoshop (CS5 or later)
Estimated Completion Time: 10-15′ Minutes
Resources: -
Step 1 > Create a New Document
Create a new Photoshop document for your button. For this tutorial create a 800px width and 480px height document with transparent background.
Step 2 > Background
You can go straight to the button but i changed the foreground color to #f4f4f4 and filled the empty background. You can hide it anytime and save your button with transparent background.
Step 3 > Button Shape
To create the main shape, first change the foreground color to #8dc63f and pick the Rounded Rectangle Tool (U) in your toolbox. Left click on your canvas and change Width to 590px, Height to 190px, Radius to 55px and press OK. To align the shape in center press (Ctrl + A) to select all your canvas and in top panel use Align center buttons to center your shape.a) Change foreground color to #8dc63f and pick the Rounded Rectangle Tool.
b) Press (Ctrl + A) and center your text by pressing Align vertical/horizontal centers.
Step 4 > Smaller Shape
To create the smaller shape inside the button follow the same technique. First press (D) to change the foreground and background colors to default. Use again the Rounded Rectangle Tool (U) and create a small shape with 115px Width, 115px Height, 55px Radius and press OK. Next, go to Layer > Layer Style > Blending Options and add the follow settings:a) First create the smaller shape.
b) Add Stroke with 9px size, 100% opacity and #6fa12c color.
c) Add Color Overlay with 100% opacity, #fcfcfc color and press OK.
Step 5 > Arrow Shape
Pick the Custom Shape Tool (U) in your toolbox and right-click on your canvas. Pick the default “Arrow 2″ and draw a small arrow with #92c946 color. Go to Edit > Transform > Rotate 90 CW to make the arrow look down. Next, rename your shape layer to “Arrow” and go to Filter > Distort > Spherize and change Mode to “Vertical Only”, Amount to -100% and press OK.a) Pick the arrow shape.
b) Rotate your shape.
c) Spherize your arrow shape
Step 6 > Add Text
You can add any text you want but for this tutorial write “Download” with “Arial Rounded MT Bold” font or similar. Use white color and 72pt text size. Next, go to Layer > Layer Style > Blending Options and add the follow settings:
Add Drop Shadow with Blend Mode: Linear Burn and black color. 20% Opacity, 90 Angle, 3px Distance, 0 Spread, 0 Size and press OK.
Step 7 > Add Light
Create a new layer and name it “Main Highlight” Press (Ctrl + Left Click) on the “Base” layer icon to select the pixels. Next, pick the Brush Tool (B) with white color, 0 Hardness and 900px size. Paint over the selection like the example. Change the blending mode to Soft Light and opacity to 85%.
Step 8 > Upper Highlight
With the “Base” selection still active create another layer and name it “Upper Highlight”. Use Paint Bucket Tool (G) to fill the selection with white (#ffffff) color. Switch to Rectangular Marquee Tool (M) and press twice (2) the down arrow button on your keyboard. Hit Delete on your keyboard and press (Ctrl + D) to deselect. Next, with the “Upper Highlight” layer active pick the Move Tool (V) and press again twice (2) the down arrow button on your keyboard to move the small highlight down. Set the layer opacity to 45 – 50%.a) After you fill the selection with white color move it down with down arrow button and press Delete.
b) Move down the small highlight and lower the opacity to 45%.
Step 9 > Lower Highlight
Create another layer and name it “Lower Highlight”. Pick the Rectangular Marquee Tool (M) in your toolbox and draw a small thin selection and fill it with white color (#ffffff) using Paint Bucket Tool (G). Press (Ctrl + D) to deselect and go to Filter > Blur > Motion Blur. Add 55 Distance with 0 Angle and press OK. Next, Change blending mode to Soft light and Opacity to 80%.
Add 55 pixels distance and press OK.
Step 10 > Shadow
Create a new layer and place it under the “Base” layer and over the background. Pick Elliptical Marquee Tool (M) and create a small rounded line under the button. Use Paint Bucket Tool (G) to fill it with Black color (#000000). Press (Ctrl + D) to deselect your selection. Next, go to Filter > Blur > Motion Blur, add 100 pixels Distance with 0 Angle and press OK. Go to Filter > Blur > Gaussian Blur and add 3,3 pixels Radius. Set the blending mode to Linear Burn with 75% opacity.a) Create a small rounded selection with Elliptical Marquee Tool and fill it with black color.
b) Add Motion Blur with 100 pixels distance.
c) Add Gaussian Blur with 3,3 pixels Radius and press OK.
Step 11 > Another Highlight
To add one more highlight, create a new layer and name it “Highlight”. Pick the Elliptical Marquee Tool (M) and draw a large selection between the two diagonal corners (image a). Go to Select > Inverse to inverse the selection. Pick the Gradient Tool (G) with a white Foreground to Transparent gradient fill the selection from bottom to the top like my example (image c). Next, press (Ctrl + Left Click) on the “Base” layer icon and go to Select > Inverse. Hit the Delete Button on your keyboard to refine the highlight. Go to Select > Deselect (Ctrl + D) to deselect the selection. Finally, set blending mode to Soft Light and lower the opacity to 60 – 65%.a) Create a large selection with Elliptical Marquee Tool.
b) Pick a White foreground to transparent gradient.
c) Paint over the selection from bottom to the top.
Conclusion
You can change the color of your button or add other icons and text. The button size on this tutorial is huge but you can create any size you want with the same technique. The last step (11) is optional and you can save the button without the rounded highlight.
Final Work
