A Work in Progress: glass button



This guide was made for entry:
glass button
In Contest:
browser buttons


step 1 of 6

open new 550px by 250px and fill it with black

Creation of glass button: Step 1

step 2 of 6

create a round edged rectangle (custom tool) (white colour)

Creation of glass button: Step 2

step 3 of 6

fill it with yellow colour and make a duplicate of that layer

Creation of glass button: Step 3

step 4 of 6

select the middle layer and click stroke

Creation of glass button: Step 4

step 5 of 6

size: 8
position: out side
blend mode: normal
opacity: 100
fill type: gradient
gradient: grey to lighte grey to grey to lighte grey to grey
style: liner. the check box should be checked
angle: -145
scale:100%

Creation of glass button: Step 5

step 6 of 6

not to make the pattern:
1st hide all the layers except background(by clicking the eye icon)
now select the background layer and create a new layer and fill it with white

Creation of glass button: Step 6

Final result

Creation of glass button: Final Result

LOGIN or REGISTER FOR FREE
to rate this guide and create your own guides.


Comments

author says:

hei i cn upload only 6 steps :S

(5 years and 3451 days ago)
author says:

hei i cn upload only 6 steps :S

(5 years and 3451 days ago)
author says:

step 7: create an arrow of black colour (custom tool) and adjust it so that its right at the center and then go to Edit>Define Pattern... and click ok

(5 years and 3451 days ago)
author says:

step 8: delete both the layers you created in step 6 and in step 7

(5 years and 3451 days ago)
author says:

step 9:make the rectangles visible and select the upper layer and click stroke

size:2, position:out side, Blend mode:screen, opacity:80% fill type:colour and colour should be white

now click pattern overlay

(5 years and 3451 days ago)
author says:

10: pattern overlay
blend mode:multiply, opacity:100%, pattern should be the one u created in step 7, scale 100%, link with layer check box should be checked

now click gradient overlay

(5 years and 3451 days ago)
author says:

**the pattern in step 7 can be moved while in the pattern overlay(without pressing ok)**

11: gradient overlay
blend mode:multiply, opacity:100%, gradient: from gray (use a lighter gray) to white, style:liner, align with layer check box should be checked, angle:90, scale:100%

now click bevel and emboss

(5 years and 3451 days ago)
author says:

12: bevel and emboss
style:inner bevel, technique:smooth, depth:60%, direction:up, size:20, soften:10

dnt mess with anything als

now click inner shadow

(5 years and 3451 days ago)
author says:

13: inner shadow
blend mode:screen and colour should be white, opacity:50%, uncheck the use global light check box, angle:90, distance:90, choke:2%, size:0

and click ok....

thats it folks now make other buttons the only thing u have to change is the pattern overlay and after that combine all the buttons in one image...thankyou

(5 years and 3451 days ago)