GIF vs JPEG and how I do my diagrams

GIf and Jpeg are methods of saving images. They are used to reduce file size compared to bitmap files. GIF and JPEG work by different means, and both have their uses. GIF works by finding pixels that are all the same colour. Example say the top inch of a line diagram is white, then GIF would say this is 5 lines of white. JPEG works by smoothing the colours from adjactent pixels. Say you have a blue sky, one blue pixel is likely to be very similar to the next blue pixel in colour, thus if you say the colour of the pixel in the middle is the average of the colours all around, you will not see much difference.

The rule of thumb is

You will notice that all my line diagrams are GIF images. Should you save them to your hard drive, you will notice that they have very low file sizes, a low file size means that page loads faster, and the user uses less bandwidth. If you look at the images closesly, you will see that they are pixel perfect. By that I means that when you zoom in there are no blurry lines. In short GIF an excellent format for saving line diagrams.

For photos I uses Jpeg, GIF does not work too well. Some things I hate, are people that do line diagrams of boats and then save the images as jpeg, yuck. If you use GIF they will come out crystal clear.

How I do my diagrams

In this website you will see a lot of diagrams, in my humble opinion they look reasonably good, so how do I so it. Lets say for starters I am taking the lines off a skiff and am going to use that as a starting point for my own skiff image.

I use microsoft paint to do the great majority of my images.

I will save the image off the internet, and then open it up in paint. I will then save it as a GIF file. What tends to happen is that lines become blurry. Before I make the lines neat I will ensure that the image is the right size and is square. Now many monitors have a resolution of 1024 pixels, so if my diagrams is say 800 pixels wide, that should fit into the screen quite well. So I might select the image and zoom is up by a factor so that it is around 800 to 900 pixels wide.

Next I will save the image, often in a slighlty different filename so that I can go back to an earlier file should I choose to. I draw a horizontal line across the page by holding down the shift key, and using the straight line tool. If the image is not square I will close paint, and then open up the image in Open Office draw (free software), here I can rotate the image a few degrees so that it is truly square, I save the image again, and then open it up in Paint.

Next I look at the lenght of the boat, and see if I can work out a simple scale. Say for example the boat is 18ft long, and it takes 900 pixels, then that is 50 pixels per foot, a nice simple scale. If say the image was 880 pixels, I might scale it up by say 102 percent in vertical and horizontal, so that it is almost exactly 900 pixels, it makes the maths much easier to use a simple scale!

Now the dreary part, I start to clean up the image, all areas that are to have no lines, I use the filled in rectangle tool, and make large areas of white. I can use the eraser tool to get closer and closer to the lines I want to keep. I try and work out what lines I want to keep, and what I want to delete. Once I have some proportions and some absolute values that I can work with, then I can add details later.

A little pointer here, say I have wide blurry lines, and I want a narrow crisp line, what to do. The start is to save the image as a monochrome bitmap image (black and white). Next I will open this bitmap image in mS Paint, and save it as a GIF image. Now I will make everything that is black another colour, such as red. I end up with a blurry wide red lines. Next I overlay crisp black lines, one pixel wide. Next I infill all the empty spaces to the red colour, and then with the colour fill tool, make this red area white. When this is finsihed, I have crisp black lines on a white background. From this point I can now change lines, move things forward and back. One advantage of this method is that measurements can be easily worked out, freeboard, beam, loa, draught, crossbeam width etc etc.

Sometimes I draw sketches in the boat software called hullform. How do I get this image. Simple, I press print screen, go to paint, and press paste. Note that if you change the settings in hullform software to black lines first (from the defacto red and green lines), it saves time.

Some featues of MS Paint

  • Hold down the shift key when doing straight lines to get them vertical
  • Use the pixels as a scale, to get everything in proportion
  • To ensure that topview, sideview and endview all align, make them up on one page first, once dimensions are correct then break down into smaller images
  • Flipping images 90 degrees and 180 degrees is a useful tool
  • To draw a circle, I draw a 45 degree line first, and then drag the circle tool along that line
  • MS Paint is a good tool, not the best, but it is common and you can do a lot with it
  • Before settling on a final image, make store lots of images as you go, example view_1a, view_1b, view_1c etc
  • If saving a GIF image, sometimes it is best to white out all the colour first, then resave, and then add colour again, example say you are resizing an image
  • Be aware that many screens are 1024 pixels wide, so an image that is say 800 to 900 pixles wide will have a lot of detail, and yet still fit on the screen well
  • If you have an accurate image, you can use pixels on the screen to work out a table of offsets

How long does this process take, around 15 to 20 minutes. Believe it or not I find it relaxing. I end up with nice crisp images which I can then alter easily if I want to. Say I want to draw crossbeams, I know that they they whould be 90mm x 90mm. I also know that from my present boat, I want the outrigger centerline to be 7ft from the main hull centerline. As I know the scale, I work out where 7ft is, I know the outriggers should be 13ft long, and 15 inches wide, I can draw a rectangle of this shape and then infill it with a curve that looks nice. Note that if you have a nice curve, and want the opposite side to look the same (boats are often symetrical) I copy the image to the centerline, press paste, flip it over, and then superimpose it next to the other side. This way, port and starboard look exactly the same.

A little pointer, there are 2 types of paste is microsoft paint. One will give a white background, the other will superimpose the pasted image on what is already there. This is useful to know.

What method suits you, perhaps you prefer pencil and paper. I might suggest first drawing your craft on graph paper, and then scanning it in.

Hope these pointers help a little, written by someone that has spent too many hours playing around with microsoft paint on their computer

Issues with Windows 7 and above
Generally I have done most of my images with Windows XP. The Paint program for Windows 7 is not as good. You can get around this by running the Win XP Paint program on windows 7 (this is what I did - just download it). The issue with Windows 7 paint is that it does not store the colourfill for GIF images with clarity, they become pixelated. You can get around this by saving your images as PNG files (which is a pretty good file type). Last but not least, if you want to use the transparent colour feature that GIF images offer, you need to use the Win 98 version of Paint. Yes its annoying but if this is what you want to do, the option is out there.