For now, all that's here is my point-form notes for creating the buttons with The Gimp. Above is an exploded example of the layers from one of these buttons.
Tube Layer -create horizontal line path #1 of desired length -stroke path with round brush (size=D=R*2), creating base lozenge shape -select-by-colour lozenge -save selection as path #2 -feather lozenge by ~2-3 pixels (just enough for anti-aliasing) -gradient fill selection from top to bottom with #193a7e/#bdecff -set opacity to 70%Tube Shadow Layer -duplicate Tube layer -desaturate -invert colours -gaussian blur by ~D*0.15 -move layer down by ~D*0.4 -set opacity to 25%
Lower Highlight Layer -stroke path #1 with round brush (size~=D*0.77) -select-by-colour stroked line -clear selection (i.e. Edit->Clear) -trim off top 1/5 of selection -feather selection by ~R*0.15 pixels -gradient fill selection from top to bottom with #1f3356/#a7cad9 -set mode to Screen -set opacity to 70%
Text Layer -Zapf Humanist Bold, ~D*0.64 pts, anti-aliased -center text horizontally and vertically against lozenge -select-by-colour text -copy selection
Text Shadow Layer -paste selection from Text layer -move down by D*0.1 -gaussian blur by D*0.1 -set opacity to 40%
Top Highlight Layer -stroke path #1 with round brush (size~=D*.3) -select-by-colour stroked line -clear selection -trim off bottom 1/3 of selection -feather selection by ~2-3 pixels -fill selection with #ffffff -move layer up, leaving ~D*0.23 of base lozenge top edge showing -add layer mask -gradient fill layer mask from top to bottom of highlight area with #ffffff/#2e2e2e
Finale -order layers as: Top Highlight Text Text Shadow Lower Highlight Tube Tube Shadow Background Texture
| Tube Colour | Base | Highlight |
|---|---|---|
| Blue | #193a7e (240/80/50) #bdecff (240/25/100) |
#1f3356 (240/64/32) #a7cad9 (240/25/85) |
TODO: Discuss colourizing the shadow layer to give the effect of transmitted light through the lozenge.
Be sure to visit Light Speed Enterprises
|
Go back to my homepage.