web notes - a blog

I had a series of five 100x75 images, concatenated into a single image, and I wanted to display them as individual images with rounded corners.

To round the corners, I used the following ImageMagick command:

convert -size 100x75 xc:white -fill "#ffe" -draw "roundrectangle 0,0,100,75 10,10" -transparent "#ffe" mask.gif

It creates an image, dimensions of 100x75 pixels, with a white canvas. A rounded rectangle is drawn on it, filled with #ffe (any color will do). Next, the rectangle dimensions are given, as well as the rounding settings. Finally, the transparent option is used to indicate that the fill color is actually transparent. Be sure to use an image format (.gif or .png) that supports transparency.

A class was used to assign the mask, and an id was used to position the background image.

.dvPhone  
{
        float:left;
        width:100px;
        height:75px;
        margin:7px;
}
.dvPhoneNumber
{
        height:75px;
        width:100px;
}
#dvOffice
{
        background:transparent url(bg.jpg) no-repeat 0 0;
}
.round
{
        background:transparent url(mask.gif) no-repeat;
        width:100px;
        height:75px;
}

<div class="dvPhone">
<div id="dvOffice" class="dvPhoneNumber">
<div class="round">
<label>Office</label>
<input type="text" name="sOfficePhone" id="sOfficePhone" value="0000000000" />
</div>
</div>
</div>

Tested with IE7, FF3.

Related: http://web-notes.wirehopper.com/2009/06/07/smoother-imagemagick-rounded-rectangles

I use an icon set that has beautiful, full color icons (http://everaldo.com/crystal_project). However, sometimes a grayscale version of an icon can be used as a subtle control, or to allow other icons and page elements to appear more prominently.

ImageMagick can be used to convert full color icons into beautiful greyscale icons, very quickly.

convert ok.png -colorspace Gray grey-ok.png

Original image:

Greyscale image: