Parts Tutorial: The Diode Part 2
Chapter two: The Images
Looking inside any of the parts folders you will see five .png files.
Note: There are two extra .gif files because this version of Fritzing does not yet support .png's for the icons. At this time we recommend that you create both file types for forward compatibility.
There are two icon files and three part files. The icons are used in the palette menu and the part files are used on the canvas at various levels of zoom.
The most important thing in creating your images, besides making them look GREAT, is to get the sizes right so that they are proportional to the other graphical elements in Fritzing.
A quick note on units of measurement:
Two forms of measurement you may not be familiar with are 'tenths' and 'himetric'. 'Himetric' is a resolution independent unit based in the metric system, one millimeter is 100 himetric units, or 1mm*100 = himetric. 'Tenths' is a legacy electronics unit based on the 'inch', it is one-tenth of an inch or 0.1 inches, this is the distance between the holes on a breadboard, and legs on an IC. Those of you in the territories of Burma, Liberia, or the USA will already be familiar this unit of measurement based on the size of the various body parts of ancient kings. One tenth is 2.54mm.
The most effective way to make our images is to start with the part.png, part200.png, and part400.png files and make the icons from there. Start by measuring the part you are creating.
The Diode we're making is 5mm long and 2.6mm in diameter. We can go ahead and convert these dimensions into himetric by multiplying each number by 100, or by shifting the decimal point two places to the right: '500 x 260', you can go ahead and enter these numbers into the XML file, within the 'bounds' tag.
<!-- 5 mm by 2.6mm-->
Let's start drawing! Open up your favorite vector drawing program (like, Illustrator or Inkscape) and create a new document. Make sure to set the default units to mm.
Luckily the diode has a very simple shape, so we can just select the rectangle tool and manually enter the dimensions 5 and 2.6 and fill this with a matching color.
Then we add a rectangle of a lighter gray color to identify the negative (-) terminal, this should match our names and id's in the XML file, so it is on the right side.
Then to pretty it up a bit, let's add some highlights and shadows.
anyway, nice, sort of!
Now that this looks usable we can export it as a .png file. Simply choose Export from the file menu of whatever program you are using, make sure to set the exporting dpi to '100' and save this image as 'Part.png'.
Make sure the background is set to transparent! Now we need to make the other image files, this is easy. What we are going to do is double the ppi (aka: dpi) for each of the two remaining files. Choose Export again, but this time change the ppi to '200' and save as 'Part200.png. Export one more time, doubling the ppi again to '400', and saving as 'Part400.png' Our part images are complete!
Let's make our icons!
The icons don't require any crazy units or math, they are measured in pixels. 32x32 and 16x16 respectively for 'iconLargeTransp.png' and 'iconSmallTransp.png'.
For our icons we want to make the part easily recognizable from the palette, so its good to think about the distinguishing features of our part. The stripe on the diode is its only distinguishing feature.
Let's open up 'Part.png' in a bitmap program (like Photoshop or The Gimp). With parts like this, where the pin will show up in the icon, we need to draw the pin into the image. The pin color is #B3B3B3.
So, do that. When you are done cut out a 32x32 square, like this:
You can also simply export a new image from illustrator if you prefer, as long as the end result is two files:
One called 'iconLargeTransp.png'. Then for our 'soon to be obsolete' gif icon, make the background #595959 and export another icon called 'iconLarge.gif'
Note: Future versions of Fritzing will support .png files for the icons, at this time we recommend that you start with a .png and make an extra .gif for the time being.
Please follow the same steps for the 16x16 icon, with the obvious exception of cutting out a 16x16 square, like this:
The file names being: 'iconSmallTransp.png' and 'iconSmall.gif'
