Blue Theme - Scrollbar, Button#

Blue Scrollbar#

Blue Scrollbar Thumb#
Original	Created

Within the blue theme there are several widgets with a gradient. Some images appear to be alike, so the scrollbar thumb and scrollbar left and right arrows have similar rectangular frames. Since the arrows are drawn across with an even number of pixels the arrow point is 2 pixels across. The slanted lines are made at 45 degrees without any antialiasing. It's surprising what you can get away with.

The blue scrollbar thumb can be used as a template. It consists of a simple frame, with all four corners made transparent, and a simple vertical gradient. There is no antialiasing. Let's go ahead and make this.

When counting the number of times that a line is drawn to make the gradient, allow for the borders, if the first line has a y-value of 1 and the last line of 12 we actually have 12 steps (count inclusively). Since range(steps) starts from 0 and ends at the maximum value less 1, it requires no adjustment.

from PIL import Image, ImageDraw

w=14
h=14
steps = 12

back = 'white' #(102,153,204)
inner = (45,45,102)
from_colour = (111,159,207)
to_colour = (228,236,245)

# lerpcolour gives the colour found between 2 colours
# at fraction of whole c1 and c2 are rgb, 0 <= t <= 1
def LerpColour(c1,c2,t):
    return (int(c1[0]+(c2[0]-c1[0])*t),int(c1[1]+(c2[1]-c1[1])*t),
            int(c1[2]+(c2[2]-c1[2])*t))

img = Image.new('RGBA', (w,h), back) 
idraw = ImageDraw.Draw(img)

# gradient
for j in range(steps):
    cr,cg,cb = LerpColour(from_colour,to_colour,j/(steps-1))
    idraw.line([1,j+1,w-1,j+1],fill=(cr,cg,cb))
    
idraw.rectangle([0,0,w-1,h-1],outline=inner)    

idraw.point([0,0],fill=(0,0,0,0))
idraw.point([w-1,0],fill=(0,0,0,0))
idraw.point([0,h-1],fill=(0,0,0,0))
idraw.point([w-1,h-1],fill=(0,0,0,0))

img.save('../figures/09bluesb.png')

Blue Button#

Blue Button#
Original	Created

The button frame looks more interesting than the scrollbar thumb. Use the medium blue colour as the background, draw a rectangle using the dark blue. Run a simple gradient then create the corners using points.

Since there is no size change with filter there is no stray colours as in the original, on the other hand the colour stays true.

from PIL import Image, ImageDraw

w=32
h=32
steps = 26

back = (102,153,204)
inner = (45,45,102)
from_colour = (112,159,207)
to_colour = (239,244,249)

# lerpcolour gives the colour found between 2 colours
# at fraction of whole c1 and c2 are rgb, 0 <= t <= 1
def LerpColour(c1,c2,t):
    return (int(c1[0]+(c2[0]-c1[0])*t),int(c1[1]+(c2[1]-c1[1])*t),
            int(c1[2]+(c2[2]-c1[2])*t))

img = Image.new('RGB', (w,h), back) 
idraw = ImageDraw.Draw(img)

# gradient
for j in range(steps):
    cr,cg,cb = LerpColour(from_colour,to_colour,j/(steps-1))
    idraw.line([3,j+3,w-3-1,j+3],fill=(cr,cg,cb))
    
idraw.rectangle([2,2,w-3,h-3],outline=inner)    

idraw.point([2,2],fill=back)
idraw.point([w-3,2],fill=back)
idraw.point([2,h-3],fill=back)
idraw.point([w-3,h-3],fill=back)

idraw.point([3,3],fill=inner)
idraw.point([w-4,3],fill=inner)
idraw.point([3,h-4],fill=inner)
idraw.point([w-4,h-4],fill=inner)
img.save('../figures/09bluebutton2.png')

Blue Theme - Scrollbar, Button#

Blue Scrollbar#

Blue Button#

This Page