was successfully added to your cart.

Tutorial: Modern Web Buttons in Photoshop

By January 14, 2014Graphic Design, Tutorials
create modern buttons in photoshop

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: Beginner

Apps 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.

 

create modern web buttons in photoshop step 1

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.

 

modern web button in photoshop step 2

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.

modern web buttons step 3 

b) Press (Ctrl + A) and center your text by pressing Align vertical/horizontal centers.

modern web buttons in photoshop step 3b

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.

modern web buttons in photoshop step 4a

 

b) Add Stroke with 9px size, 100% opacity and #6fa12c color.

modern buttons in photoshop step 4b

 

c) Add Color Overlay with 100% opacity, #fcfcfc color and press OK.

modern plastic buttons step 4c

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.

modern web buttons step 5a

 

b) Rotate your shape.

modern web buttons in photoshop step 5b

 

c) Spherize your arrow shape

modern web buttons in photoshop tutorial step 5c

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:

 

modern web buttons step 6a

 

Add Drop Shadow with Blend Mode: Linear Burn and black color. 20% Opacity, 90 Angle, 3px Distance, 0 Spread, 0 Size and press OK.

modern web button step 6b

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%.

 

modern web buttons step 7a

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.

modern web buttons step 8a

 

b) Move down the small highlight and lower the opacity to 45%.

modern web icons photoshop tutorial step 8b

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%.

 

modern web buttons in photoshop step 9a

 

Add 55 pixels distance and press OK.

modern web buttons in photoshop step 9b

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.

step-10

 

 

b) Add Motion Blur with 100 pixels distance.

modern web button step 11b

 

c) Add Gaussian Blur with 3,3 pixels Radius and press OK.

modern web buttons in photoshop step 11c

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.

modern web buttons step 10a

 

b) Pick a White foreground to transparent gradient.

modern download web button photoshop tutorial steo 10b

 

c) Paint over the selection from bottom to the top.

modern web buttons in photoshop step 10c

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.

 

create modern web buttons in photoshop

Graphic Designer Bundle

Download collection of icons, backgrounds, vectors & other design elements

Download Now

Author: Dreamstale

We provide free and premium web resources for everyone. Download our graphic design elements, icons, backgrounds, vectors and everything else. Stay tuned for more freebies, Photoshop tutorials and inspirational articles.

Never Miss Freebies & Deals

We promise not to spam you, just the good stuff!
SUBSCRIBE