ICH! + mein Banner

ICH!, kein wahres gestalterisches Talent, daher erstrahlt meine Seite auch möglichst schlicht, da kann man ned so viel falsch machen. In dem Artikel möchte ich etwas näher eingehen auf die Erstellung meines Banners.

Letztlich habe ich mir ein Skript geschrieben, Text auf einen zufällig verrauschten Hintergrund packt. Ebenso wird der Text in kleine Cluster zusammengeführt und zufällig aus einer Farbrange gefärbt.

Font einlesen

Zunächst steht die Auswahl der richtigen Schriftart aus. Meine Entscheidung ist dann mit Mithilfe von kreativen Köpfen aus dem Umfeld auf Medieval gefallen. Letztlich wollte ich keine ganz so langweilige Schriftart wählen. Sie darf gern ein wenig verspielt sein, aber muss trotzdem in meinen schlichten Aufbau der Seite passen.

Für die Erstellung von dem Text als Bild habe ich auf das Modul Pillow zurückgegriffen. Dies bietet mit der Funktion ImageDraw eine Funktion um Text zu zeichnen.

def createTextImage(msg, fontUri, fontsize, imageSize):
    img = Image.new('RGB', imageSize, (255, 255, 255))
    draw = ImageDraw.Draw(img)
    font = ImageFont.truetype(getFont(fontUri), 200)
    w,h = font.getsize(msg)
    draw.text(((imageSize[0]-w)/2,(imageSize[1]-h)/2), msg, font=font, fill="black")
    return np.array(img)

Farblisten erzeugen

Um letztlich das Banner zu erzeugen werden Listen mit genutzten Farben benötigt. Beim Hintergrund habe ich es mir einfach gemacht und 3 Grautöne gewählt. Es sollte ja nicht zu dunkel sein, aber dunkel genug, um sich von der Seite hervorzuheben. Den Vordergrund habe ich mir mit einer kleinen Funktion generieren lassen. Der generiert eine Liste an Farben mit den Parametern Startfarbe, Endfarbe und die Anzahl der Farben, die generiert werden soll. Dabei werden einfach die Zwischenfarben erzeugt.

def createColorList(startColor, endColor, steps):
    rDiff = endColor[0] - startColor[0]
    gDiff = endColor[1] - startColor[1]
    bDiff = endColor[2] - startColor[2]
    colorList = []
    for i in range(steps):
        factor = i/steps
        colorList.append(  [startColor[0] + factor*rDiff, 
                            startColor[1] + factor*gDiff, 
                            startColor[2] + factor*bDiff]
                        )
    return colorList

Banner erzeugen

So nachdem nun alle Voraussetzungen geschaffen sind, kann nun das Bild erzeugt werden. Hierzu wird die random-Funktion genugtzt um das Rauschen zu erschaffen. Damit die Schrift nicht zu sehr unübersichtlich wird werden hier Cluster erzeugt.

def createNoisyImage(img, fgList, bgList, steps):
    img[img<255] = 0
    white = np.array([255,255,255])
    black = np.array([0,0,0])
    for x, xVal in enumerate(img):
        for y, yVal in enumerate(xVal):
            if (yVal == white).all():
                img[x,y] = bgList[random.randint(0,2)]
            elif(yVal == black).all():
                img[x-4:x+4, y-4:y+4] = fgList[random.randint(0, steps-1)]
    return img

Quellcode

Den gesamten Quellcode könnt ihr in meinem GitHub-Repo finden.
https://github.com/gaweng/noisybanner