Blog Entry
Web 2.0 Buttons mit Imagemagick Posted on April 8, 2008
Ok. viele hassen bereits diese Buzzwords wie Web 2.0 und eigentlich wollte ich es immer vermeiden :)
Wie auch immer, hier ein Script das Buttons generiert wie man Sie auf vielen sogenannten Web 2.0 Seiten findet.
Einfach das Archive entpacken und in das neue Verzeichnis wechseln, Script ausführen.
cd web2.0
web2butt.sh
Anschließend findet man die generierten Buttons im Verzeichnis out.
So funktioniert es ...
In der Datei buttons.txt ist die Beschriftung der generieren Buttons zu finden. Jede Zeile entspricht einem Button! Es ist somit ganz einfach mehre Text Dateien für Buttons mit unterschiedlichen Sprachen anzulegen.
Buttons Styles
Damit man einfach und schnell experimentieren kann habe ich die wichtigsten Variablen für das verändern der Buttons in einer externen Datei gespeichert. Diese sind im Verzeichnis styles zu finden.
#!/bin/bash # Autor: Werner Hartnagel # Date: 2008/04/01 # Button Style Green-yellow # License: Attribution-Share Alike 2.0 # http://creativecommons.org/licenses/by-sa/2.0/ WIDTH=0 HEIGHT=30 COLOR1=green COLOR2=yellow TEXT_COLOR=black TEXT_SHADOW=#eeeeee TEXT_SIZE=14 TEXT_FONT='DejaVu-Sans-Bold-Oblique' BORDER_SIZE=1 BORDER_ROUND=12 BORDER_COLOR=$COLOR2 GRADIENT=${COLOR1}-${COLOR2}
Am besten einfach eine der Dateien öffnen und unter einen neuen Namen speichern, z.B. styles/mybuttons.sh
Nun das Script web2butt.sh mit einem Text Editor öffnen, die Zeile mit # === Load Button Style === suchen und den vorhanden Pfad ändern zu styles/mybuttons.sh.
Hier gibt es das Imagemagick Web 2.0 Button Script zum Download.
#!/bin/bash # Autor: Werner Hartnagel # Date: 2008/04/01 # License: Attribution-Share Alike 2.0 # http://creativecommons.org/licenses/by-sa/2.0/ # === Default Settings === DEBUG=0 TEMP_DIR=tmp OUT_DIR=out # === Load Button Style === #. style/greenyellow.sh . style/lightorange.sh #. style/orangered.sh # === Lets do the Magick :) === BORDER_MARGIN=0$(echo "scale=1; $BORDER_SIZE/2" | bc) i=1 while read LINE; do BUTT="$OUT_DIR/butt${i}.png" # Temp Image to get width of text convert -strokewidth 6 -background none -fill $TEXT_COLOR -font $TEXT_FONT -pointsize $TEXT_SIZE \ label:"$LINE" \ $TEMP_DIR/font-test.png if [ "$WIDTH" -eq "0" ]; then BUTTON_WIDTH=`convert $TEMP_DIR/font-test.png -format '%w' info:` BUTTON_WIDTH=$(expr $BUTTON_WIDTH + 20) else BUTTON_WIDTH=$WIDTH fi if [ "$HEIGHT" -eq "0" ]; then BUTTON_HEIGHT=`convert $TEMP_DIR/font-test.png -format '%h' info:` BUTTON_HEIGHT=$(expr $BUTTON_HEIGHT + 8) else BUTTON_HEIGHT=$HEIGHT fi echo "$BUTTON_WIDTH x $BUTTON_HEIGHT" # Create Gradient convert -size $(expr $BUTTON_WIDTH - 2)x$(expr $BUTTON_HEIGHT - 2) gradient:$GRADIENT $TEMP_DIR/gradient_$GRADIENT.miff # Create the round corners and store as Magick Vector Graphics convert $TEMP_DIR/gradient_$GRADIENT.miff -border 1 \ -format "roundrectangle $BORDER_MARGIN,$BORDER_MARGIN %[fx:w-$BORDER_MARGIN-1], %[fx:h-$BORDER_MARGIN-1] $BORDER_ROUND, $BORDER_ROUND" \ info: > $TEMP_DIR/rounded_border.mvg # Button Border convert $TEMP_DIR/gradient_$GRADIENT.miff -border 1 -matte -channel RGBA -threshold -1 \ -background none -fill none -stroke $BORDER_COLOR -strokewidth $BORDER_SIZE \ -draw "@$TEMP_DIR/rounded_border.mvg" $TEMP_DIR/button_overlay.miff # Add Text to Overlay convert $TEMP_DIR/button_overlay.miff -font $TEXT_FONT -pointsize $TEXT_SIZE \ -fill $TEXT_SHADOW -draw "gravity Center text 1,1 '$LINE'" \ -fill $TEXT_COLOR -draw "gravity Center text 0,0 '$LINE'" \ $TEMP_DIR/button_overlay2.miff # Mask for the Button convert $TEMP_DIR/gradient_$GRADIENT.miff -border 1 -matte -channel RGBA -threshold -1 \ -background none -fill white -stroke none -strokewidth 0 \ -draw "@$TEMP_DIR/rounded_border.mvg" $TEMP_DIR/button_mask.miff # Join the images convert $TEMP_DIR/gradient_$GRADIENT.miff -matte -bordercolor none -border 1 \ $TEMP_DIR/button_mask.miff -compose DstIn -composite \ $TEMP_DIR/button_overlay2.miff -compose Over -composite \ -quality 95 PNG32:$BUTT (( i ++ )) done < buttons.txt if [ "$DEBUG" -ne "1" ]; then rm $TEMP_DIR/rounded_border.mvg rm $TEMP_DIR/gradient_$GRADIENT.miff rm $TEMP_DIR/button_overlay.miff rm $TEMP_DIR/button_overlay2.miff rm $TEMP_DIR/button_mask.miff rm $TEMP_DIR/font-test.png fi exit 0
