Creating buttons that look a lot like the ones used by that new GUI from the makers of Mac, sorta.

(Note the careful avoidance of using water-themed trademarked names in that title!)

Exploded Layers

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%
Step 1

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%
Step 2

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%
Step 3

Text Layer
-Zapf Humanist Bold, ~D*0.64 pts, anti-aliased
-center text horizontally and vertically against lozenge
-select-by-colour text
-copy selection
Step 4

Text Shadow Layer
-paste selection from Text layer
-move down by D*0.1
-gaussian blur by D*0.1
-set opacity to 40%
Step 5

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
Step 6

Finale
-order layers as:
	Top Highlight
	Text
	Text Shadow
	Lower Highlight
	Tube
	Tube Shadow
	Background Texture

Gradient fill colours (RGB & HSL values):

Tube ColourBaseHighlight
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.


Copyright © 2002 Ian E. Morgan

IM initials
Be sure to visit Light Speed Enterprises | Go back to my homepage.