What's a dingbat? a dingbat is a picture font that's either represented by a letter (lower case and/or upper case), by a number, or any other symbol on your keyboard (not all dingbats use or have a picture for every letter and/or symbol) recieving a plain frame type symbol usually means there is NO picture for that particular letter and/or symbol so just try another letter and/or symbol when you get this
... as with all my tutorials I suggest you at least have some basic knowledge of Image Magick and how it works before trying to accomplish the following and I ALWAYS tell you what to change ONLY and leave the rest alone ~it's much easier that way~ This is pretty basic stuff here but still requires a little more knowledge than what a newbie might know. With a little patience and practice this can be fun and rewarding! .. I will also include some time saving tips along the way in case you may want to create more than just something for a WebTV/MSNtv email.
we are going to create this simple flower image but there are endless possibilities.. there are literally thousands of different kinds of dingbats available free to use on the net
I've picked this particular dingbat because of simplicity and short working time :-)
first.. you will need a dingbat ttf file... if your dingbat does NOT have the ttf extension on the end then you CANNOT use it at Image Magick... I chose Captain Raider's Printorn Dingbats (all his dingbats and fonts are unzipped and ready for use)... click HERE to view then scroll all the way down to the bottom of the page... look at the second to last image... to make that picture I only have to use a lower case letter y and this file... now scroll all the way back up to the top of the page and CC&P the ttf file and take it with you to Image Magick... you don't have to start with an image unless you do NOT see two fields at Image Magick.. one will say Filename & one will say URL .. if you do not see two fields, please feel free to use mine to start with... for those that can see two fields please change the following and NOTHING else...
Filename: gray10 (if you use this dark color it will look better around the edges of your finished image)
Format: xc
Size: 300x250 (larger images are easier to see, work with plus small details can be taken care of--- resizing can always be done later)
Click "view"
here is your result (or you can borrow this one)
.. if you are starting with this image place the 300x250 base url in the URL field and click "view"
now we need to make it transparent --just below the base you will see Optional Paint Attributes
change the following only
Paint Type: Matte
delete the contents of Fill Color & Border Color
Click on the image (a yellow arrow will come up and the point will have small lines surrounding it)
the entire image should be transparent (invisible) but when your cursor touches it you clearly see the yellow square outline
at the top of the page click "annotate"
change the following fields only
Text: y (lower case letter y)
Gravity: NorthWest
Location: +20 +220
Fill Color: none (make sure and put the word none do NOT leave it blank)
Stroke Color: gray1 (this is nearly black)
Pointsize: 230
Font: just BELOW the font options jumpbox is a field to add a url in.. place the ttf file inside it
scroll back up and click "annotate"
here is your result
(you may want to save the outline for future use)--saving just the outline comes in handy to either add a background to it BEFORE you paint the inside areas or to composite it on top of another flower that has been filled with a background to add an outline and give a finished look--
now look at the image carefully and pay special attention to the areas which look hard to reach... small, narrow places like the stem of the flower.. that is what you want to paint FIRST because you can replace the transparent part with any color and those small hard to reach areas will get full coverage this way... (ALL your painting will be done in the SAME place you made the image transparent at; which is the "view" option at the top of the page--- you are already there so don't go anywhere)
under Optional Paint Attributes change the following only
Paint Type: Color
Method: Replace
Fill Color: seagreen
Click on ANY transparent area making sure you do NOT touch any of the outline area of the flower
here is your result
now you need to Matte off any areas that you don't want seagreen... let's do the background first
under Optional Paint Attributes change the following only
Paint Type: Matte
Method: Floodfill (this makes it Matte out the area to your line only)
delete contents of Fill Color & Border Color
click onto any area OUTSIDE the flower outline
here is your result
now you are going to Matte out the INSIDE areas of the flower pedals ONLY leaving the leaf and stem seagreen and intact...
(you shouldn't have to change the Optional Paint Attributes but just in case they go back to default or Image Magick messes up somehow refill the fields with the SAME info you just added to Matte off the background except this time click on the first INSIDE pedal area making sure you do NOT touch the outline of the flower anywhere...
your result should look like this
now do the next two INSIDE pedal areas the same way
making the next step look like this
then like this
now we want to refill the inside pedal areas with some color (here is where you may want to save it too if you are planning to make different colors of the same image)
change the Optional Paint Attributes to the following only
Paint Type: Color
Method: Floodfill (this fills it with color to your line area only)
Fill Color: darkred
Border Color: none (the word none do not leave it blank)
now click on the INSIDE area of the first flower pedal
here is your result
see what you are doing now? now let's fill the next two.. the same as before... you shouldn't have to fill in the fields again with the same info to continue to color but may have to...
Click onto the next INSIDE pedal area and you will get this
then this
now wasn't that easy? I could've saved a lot of time by replacing the color for the pedals instead of coloring them all individually then Matting the outside area off again but I wanted to show you this way so you will know how to color each area for other more detailed dingbats...
now let's resize that beautiful flower we just created (you can leave it as is if you like large clipart type images)
I'm going to resize it
resizing it at Image Magick causes a thin white line around the image so I'm taking it some place else
go to Gifworks and click on the FIRST jumpbox under "file" to open it and scroll down to "open image" and click
a field to enter your url will come up
place your image url in it and click "fetch image"
click on the SECOND jumpbox under "edit" to open it and scroll down to "resize" and click
in the boxes change the FIRST number ONLY and the other will adjust to it automatically... I chose half the size which is 150 and it gave the size 150x125
here is your finished image
Want to learn how to paint dingbats with backgrounds? George has a wonderful tutorial Stained Glass Accents that's easy to follow.. just peek and see :-)
if you want to learn how to unzip a dingbat font file go to Grab, Unzip and Use That Dingbat!
if you want to go straight to your Christmas gif making go HERE
if you want a good variety of dingbats already unzipped and ready to use I suggest you go to Captain Raider's Font Repository this place not only gives you the dingbats but it also provides a printable page that shows the dingbat pictures the file offers (thank you Jon!)
if you are having a hard time finding the dingbats here you will find The Font of the Month Archive @ Captain Raider's Font Repository-- choose a month, then scroll all the way down to the bottom of the page and click on the Dingbat button :-)
House of Lime has some awesome dingbats but you have to unzip the files to use them and they are only free to use for non-commercial sites!