Website Development Prices

Search Blog

Sunday, October 11, 2015

Glass Button Photoshop

0. Create new document.

1. From tools select foreground color to dark grey (444343).

2. Click on Paint Bucket Tool (G), from tools and apply color by clicking on white background.

3. From tools select Rounded rectangle (U), from top bar set radius to 30 px or less if you want.

4. Again change foreground color to dark blue (0a3451) and background color to light blue (0598fe).

5. Draw button (click, drag and release).

6. Click on Gradient Tool (G), from tools. From top bar pick Foreground to Background. Also choose Linear Gradient.

7. On the right side, from Layer Panel, double click on button layer (Rounded Rectangle 1) and rename to Glass button.

8. On the right side, from Layer Panel, right click on Glass Button and from drop down menu pick Rasterize Layer. With the layer still selected, press CTRL and click on dark blue button (image) to make selection around button.

Rasterized layer

9. Press Shift key and from top to bottom draw line. 

Note: pressing shift key while drawing line = straight line.

10. With selection active, create new layer, from bottom of Layer Panel. Rename it to "highlight". 

11. With selection active, from Menu Bar, click Select, than hover over Modify and click Contract, type 2 px.

12. On the left side, from tools, click Default Foreground and Background color or D. Than click arrows to switch foreground and background color.

13. From top bar pick Foreground to Transparent.

14. Press Shift key and click just little above top line and draw line up to the middle. While still selected, press Shift key and press down arrow 3 times and press Delete. Press CTRL and D to deselect. 

Drawing gradient

Moving selection

Deleting part of gradient


15. On the left side, from tools, click Horizontal Type Tool (T), choose font and size you like and type the word you want. On the left side, from tools, click Move Tool (V) and position your word.

16. Select Glass button layer, than click fx button and pick Bevel Emboss. 

17. Select text layer (SUZUKI), than click fx button and pick Drop Shadow.

18. The end 

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.