Create Free Website

Grandrat.com Website Solutions

Glossy Website Button Tutorial

Posted by Seventeen on October 6, 2012 at 3:45 AM

This tutorial will teach you a step by step "how to create a glossy website button".



Open your Adobe Photoshop

 

--------------------------------------------------------------------

 

1. Click “File” and click “New…”

--------------------------------------------------------------------

 

2. After you click “New…” A box will appear like the image shown below. Change the following:

 

Width: 170 | pixels

Height: 50 | pixels

Resolution: 72 | pixels/inch

Color Mode: RGB Color | 8 bit

Background Contents: Transparent

After you made the settings, click “OK”.

 

--------------------------------------------------------------------

 

3. Then, at the right side of your photoshop, look for the “Layer 1” then right click it, and click the “Duplicate Layer…”

--------------------------------------------------------------------

 

4. Now a box will appear, click “OK”

--------------------------------------------------------------------

 

5. Then repeat, right click “Layer 1 copy” then duplicate layer again. You should have 3 layers now, namely “Layer 1” “Layer 1 Copy” and “Layer 1 copy 2

--------------------------------------------------------------------

 

6. Now single click “Layer 1”

--------------------------------------------------------------------

 

7. And at the left side of your photoshop, right click the “Rectangular Tool” and look for the “Ellipse Tool” then click it. Just see the image shown below to know exactly where the “Ellipse tool” is located.

--------------------------------------------------------------------

 

8. After you click the “Ellipse tool”. Draw an oval shape. See image below.

--------------------------------------------------------------------

 

9. Now that you have an oval shape, go to the right side of your photoshop again, then right click “Layer 1” then click “Blending Options…”

--------------------------------------------------------------------

 

10. After clicking the “Blending Options…” Click “Gradient Overlay”.

--------------------------------------------------------------------

 

11. Now click “gradient”… See image below to know where exactly to click.

--------------------------------------------------------------------

 

12. A “Gradient Editor” box will appear. Now follow the image below where the arrow is pointing to. Single click it.

--------------------------------------------------------------------

 

13. Click on the color. See image below.

--------------------------------------------------------------------

 

14. A box will now appear. Change the # color to 027fb9 see the image below to know where exactly to put your #color. Then click “OK”

--------------------------------------------------------------------

 

15. Then follow the image shown below where the arrow is pointing to. Single click it.

--------------------------------------------------------------------

 

16. Click on the color. See image below.

--------------------------------------------------------------------

 

17. A box will appear again. Change the # color to 0162cb see the image below to know where exactly to put your #color. Then click “OK”

--------------------------------------------------------------------

 

18. The gradient editor will appear. Click “OK” again.

--------------------------------------------------------------------

 

19. Then the layer style will show. Just click “OK” again.

--------------------------------------------------------------------

 

20. Now, single click “Layer 1 copy”

--------------------------------------------------------------------

 

21. Then click on your “Ellipse Tool” again.

--------------------------------------------------------------------

 

22. Draw an oval. See image below to know where to draw your new oval shape.

--------------------------------------------------------------------

 

23. And at the left side of your photoshop, click on the “Rectangular Marquee Tool”.

--------------------------------------------------------------------

 

24. See image below to know what to select using your “Rectangular Marquee”

 

--------------------------------------------------------------------

 

25. On your keyboard, look for the “delete” button, then press it. If you do not have a “delete” button on your keyboard, simply use the eraser in your photoshop then erase it. See image below to know where exactly to delete/erase.

 

--------------------------------------------------------------------

 

26. And at the right side of your photoshop, look for your “Layer 1 copy” right click it then click on the “Blending Options…”

 

--------------------------------------------------------------------

 

27. Click “Gradient Overlay”

 

--------------------------------------------------------------------

 

28. Click “Gradient”… See image below to know where exactly to click.

 

--------------------------------------------------------------------

 

29. Follow the image shown below where the arrow is pointing to. Single click it.

 

--------------------------------------------------------------------

 

30. Click on the color. See image below.

 

--------------------------------------------------------------------

 

31. Change the # color to 0271c2 see the image below to know where exactly to put your #color. Then click “OK”

 

--------------------------------------------------------------------

 

32. Now change the “Location” to 30 see the image below to know where exactly to put the location number.

 

--------------------------------------------------------------------

 

33. Then click “OK”.

 

--------------------------------------------------------------------

 

34. Layer style will appear. Just click “OK”.

 

--------------------------------------------------------------------

 

35. You now have an image like this.

--------------------------------------------------------------------

 

36. Now single click “Layer 1 copy 2”

--------------------------------------------------------------------

 

37. Click on your “Ellipse Tool” once again.

 

--------------------------------------------------------------------

 

38. Draw an oval again. Just follow the image shown below to know where to draw your oval shape.

 

--------------------------------------------------------------------

 

39. Click on your “Rectangular Marquee Tool” again.

 

--------------------------------------------------------------------

 

40. See image below to know what to select using your “Rectangular Marquee”

--------------------------------------------------------------------

 

41. On your keyboard, look for the “delete” button, then press it. If you do not have a “delete” button on your keyboard, simply use the eraser in your photoshop then erase it. See image below to know where exactly to delete/erase.

--------------------------------------------------------------------

 

42. And at the right side of your photoshop, look for your “Layer 1 copy 2” right click it then click on the “Blending Options…”

 

--------------------------------------------------------------------

 

43. Click “Gradient Overlay”

 

--------------------------------------------------------------------

 

44. Click “Gradient”… See image below to know where exactly to click.

 

--------------------------------------------------------------------

 

45. Follow the image shown below where the arrow is pointing to. Single click it.

--------------------------------------------------------------------

 

46. Click on the color. See image below.

--------------------------------------------------------------------

 

47. Change the # color to 219dd7 see the image below to know where exactly to put your #color. Then click “OK”

 

--------------------------------------------------------------------

 

48. Now change the “Location” to 6 see the image below to know where exactly to put the location number.

--------------------------------------------------------------------

 

49. Follow the image shown below where the arrow is pointing to. Single click it.

--------------------------------------------------------------------

 

50. Click on the color. See image below.

 

--------------------------------------------------------------------

 

51. Change the # color to 116fd5 see the image below to know where exactly to put your #color. Then click “OK”

 

--------------------------------------------------------------------

 

52. The gradient editor will appear. Click “OK”.

 

--------------------------------------------------------------------

 

53. Layer style will appear. Just click “OK”.

--------------------------------------------------------------------

 

54. Now you should obtain an image like this.

--------------------------------------------------------------------

 

55. To save it. Click “File”. Click “Save As…”

 

--------------------------------------------------------------------

 

56. Name your button and save it as .png or .gif

 

--------------------------------------------------------------------

 

This should be yourbutton.png or yourbutton.gif

 

--------------------------------------------------------------------

 

This tutorial will apply to other glossy buttons like these:


Just experiment with this tutorial. Change the style, color, size, etc.

Categories: Tutorials

Post a Comment

Oops!

Oops, you forgot something.

Oops!

The words you entered did not match the given text. Please try again.

Already a member? Sign In

6 Comments

Reply Richard
1:03 AM on October 14, 2012 
This is the easiest tutorial ive ever seen. Bless you!
Reply Flyour
1:01 AM on October 14, 2012 
At last!!!!!!!!! I did it. Thank u thank u thank u! :)
Reply Karen Dianne
8:26 PM on October 10, 2012 
Great! Great tutorial! Love this!
Reply Martylle
8:57 AM on October 10, 2012 
Very good tutorial. Tnx!
Reply Jason
8:55 AM on October 10, 2012 
Thank you for sharing this tutorial
Reply Elize
8:52 AM on October 10, 2012 
Thank you for this tutorial!!!! Im looking for this tutorial very long time!

Oops! This site has expired.

If you are the site owner, please renew your premium subscription or contact support.