Its a kind of Magic ... Imagemagick

Spring is here, which means its time to dust off the old website.

First you should update your Firefox browser with some small cool web design utilities: Firefox webdeveloper addons And then, you need to install imagemagick. This is the coolest image tool I have seen so far!

# sudo aptitude install imagemagick

And then you should have close look at all the cool scripts that Fred has already done on your behalf. Use Fred's Imagemagick scripts.

I have a bunch of social network sites that I'd like my main web site to link to. The construction is already at my site. But, I have no neat icons :(

I looked at the some different ones, fund the ones I (for some reason liked) and decided to do a simple glow effect to the icon. Fred's got a script just for this called glow.

Download the glow script and place it in your ~/bin folder if you don't already have a personalised bin folder for all your crazy stuff create one.

# mkdir ~/bin

Update your .bashrc to set the path, add the line: PATH=~/bin:$PATH using your favourite editor or:

# perl -p -i -e "s|^(PATH).*$|$1=~/bin:$PATH|g" ~/.bashrc

you're ready to go, test by issuing a

# glow

This should give you the glow scripts usage text. Once that is setup you can use this simple script or create your own.

add_glow (source)
#!/bin/sh

USAGE="$0 [source_dir] [dest_dir] all images from source will be substituded to <imagename>.glow.<imageextention>"
IMG_SRC_DIR=$1
IMG_DEST_DIR=$2

if [ -n "$IMG_SRC_DIR" -a -d "$IMG_SRC_DIR" ]; then
    if [ -n "$IMG_SRC_DIR" -a -d "$IMG_DEST_DIR" ]; then
    for IMG in $(ls $IMG_SRC_DIR); do
        DEST_IMG=$(basename $IMG)
        echo "prosessing $IMG"
        glow -a 1.7 -s 16 $IMG $IMG_DEST_DIR/${DEST_IMG%%.png}.glow.png
    done
    exit 0

    else
    echo "No dest directory"
    fi
else
    echo "No source directory"
fi
echo "$USAGE"
exit 1

place that script in the ~/bin folder as well not you can create a folder for the source images and one for the destination images, and tun the add_glow script

# mkdir ~/glow_pngs

Assuming your source images are in ~/normal_pngs

# add_glow ~/normal_pngs ~/glow_pngs

Voila, now you have glow effect on all your source images.

Next off you'll have to use them on your web page. Here's a quick img tag modification that can change image when the mouse is over the image, and back when the mouse leaves the image.

<img src="icontexto-inside-xfit.png" onmouseover="this.src='icontexto-inside-xfit.glow.png'" onmouseout="this.src='icontexto-inside-xfit.png'" alt="Xfit" width="32" height="32"/>

You can check out the result @www.dideriksen.org