Elegance Button#

Elegance Button#

Original

Created

elo

elc

The elegance button's gradient looks quite challenging. The frame looks simple, but it actually changes colour. One approach would be to create a single gradient and darken the lower half, or we could make two gradients. Any antialiasing effects are not showing strongly.

The button appears to have a 2D gradient, in that the rows and columns change. Checking with 09find_line_color.py, the rows change on average from (230,231,230) to (200,200,200) upto the mid point, whilst the upper half column changed from (227,227,227) to (207,207,207) and back to (226,226,226). In the lower half the rows were pretty static, changing from (184,184,184) to (180,180,179), whilst the columns changed from (199,199,198) to (168,168,168) and back to (196,196,196).

The gradient can be based on 08radial_gradient.py where points are coloured according to the distance of the point from the centre. An alternative 2D gradient can be created by using the ellipse.

Show/Hide Code 09elegance_button.py

from PIL import Image, ImageDraw

# based on elegance_button-default.gif
# creating radial interpolation, then darken lower half

# 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))

we = 59
he = 33
img = Image.new('RGB', (we,he), '#FFFFFF')
idraw = ImageDraw.Draw(img)

w = we-6 #53
h = he-6 #27
centreX = (w-1)/2
centreY = (h-1)/2
hypotSq = (w-1)*(w-1) + (h-1)*(h-1)

to_colour = (239, 240, 239)
from_colour = (184, 183, 183)

idraw.line([0,0,we-1,0],fill=(164,164,164))
idraw.line([0,0,0,he-1],fill=(164,164,164))
idraw.line([1,he-1,we-1,he-1],fill=(231,231,231))
idraw.line([we-1,0,we-1,he-1],fill=(231,231,231))
idraw.rectangle([1,1,we-2,he-2],fill=(67,67,67))
idraw.line([2,2,we-3,2],fill=(245,245,245))
idraw.line([2,2,2,he-3],fill=(245,245,245))
idraw.line([3,he-3,we-3,he-3],fill=(176,175,175))
idraw.line([we-3,2,we-3,he-3],fill=(176,175,175))

for y in range(3,h+3):
    rise = centreY - y
    rise *= rise

    for x in range(3,w+3):
        run = centreX - x
        run *= run

        distSq = run + rise
        dist = 4 * distSq / hypotSq

        idraw.point([x,y],fill=LerpColour(from_colour,to_colour,dist))

# darken image in lower half
pixdata = img.load()
for y in range(int(centreY+4),h+4):
    for x in range(3,w+4):
        r,g,b = pixdata[x,y]
        pixdata[x,y] = r-20,g-20,b-20


img.show()
#img.save('../figures/09eleg_button.png')

This Page