My idea of creating graphics for my blogs and web pages is to use Paint.net. As I have discovered, this program does not have the full functionality that I need to create sharp and interesting graphics. Besides the fact that Paint.net does not have a lot of bells and whistles, it is also a bitmap graphic program. A better graphics program to use might be a vector based graphics program. For the Graphic Design Group Writing Project, I decided to explore what the difference is between bitmap and vector graphics.
Bitmap Graphics
Bitmap graphics are the most commonly used form of graphics on the internet. The images are made up of pixels in a grid. The picture is basically represented by dots. Once you commit the line or shape, you must undo it to make any changes and bitmap images are difficult to resize. They have a fixed width and height and have a limited resolution. When you zoom in on a bitmap image, the image becomes blocky. MSPaint and PhotoShop are both examples of bitmap graphics programs.
This photo represents the originally image:
When I resize the image to make it larger, the image becomes blurry.
Bitmap Images:
- Reduced quality when resized
- Fixed number of pixels per image
- Easy to convert between different bitmap formats (jpeg, gif, bmp, png, pict, pcx, tiff, psd)
- Scanned images and pictures from digital cameras are bitmap images
- Only a few formats (such as gif and png) support transparency
- Good for photographic images
Vector Graphics
Vector graphics are not composed of pixels but are instead composed of points, lines and curves. These images are defined by mathematical formulas and thus can be resized without loosing quality. When you save a vector image you are saving how the image should be drawn, not how the image looks. While vector programs do not work as nicely with photographs as bitmap programs do, they are great for images that need many different sizes such as logos, web graphics and icons. Resizing a vector image will not effect the image quality. Popular programs include Corel Draw, Adobe Illustrator and Xara Xtreme.
Here is an example of a vector image my daughter made in just two minutes using Xara Xtreme:
Vector Images:
- great scalability
- transparency functionality
- can be converted to bitmap images
- not great for realistic photos
- 3-D images can be made
Price
Bitmap programs are usually priced much lower than vector programs. Paint.net is a free program, but PhotoShop can run upwards of $400. Adobe Illustrator, a vector-based program lists for $499!
Xara Xtreme
If you want to try a vector based program but are unwilling to shell out $499 for Illustrator, Xara Xtreme might be the program for you. Xara Xtreme is a truly amazing program for a VERY reasonable price. Xara Xtreme lists for $79 and the more enhanced version list for $249. You can also download a free version for Linux (which I did since I have a Linux box). I have done some research on this program and it is very advanced and very easy to use. A search on YouTube will return a number of tutorials written for the program.
Thanks for the post, great for a beginner. Good luck!
Another thing to mention is the higher the resolution for bitmap images the better. Of course, the internet can only put out 72 DPI (dots per inch) but if you save at a higher resolution you can make the files larger and then shrink it as needed for the web.
Say for Photoshop, I would save the image with a resolution of 300 and then save it “for the web” and it would shrink it down so that it would be web friendly. (Which means 72 DPI) That way you will have two copies of the image, one with a higher resolution so that you can resize it if needed easier, and the other is the web version, meant for display only.
Great post, keep it up.
Great post explaining th dif between vector and bitmap. I’m pointing this to some high schoolers I know that could use the simple explanations.
BTW: you could always save your money and get GIMP and now the GIMP Mobile Editor.
Thanks Kevin! Great point that I didn’t mention.
BadEvan – glad the post was useful. I will check out GIMP!
Inkscape is also a good choice.
My feeling is that Paint.Net fills most of the requirement for website graphic development as well as picture manipulation…
I agree with you. I have fully designed my blog with Paint.Net, it is the best quality/price ratio piece of S/W for graphics… Photoshop has more features but it is too expensive for the basic designer I think…
Xara is the best vector design software i have ever used. it works faster than corel or illustrator and has many more feautures to be named the best vector software!
Blu-ray is a current format for storage of optical cd media and is widely gaining popularity as compared to the geriatric DVD format that has less storage capacity. Blu-ray disc, which is and familiar as BD or blu-ray, is a format for storing optical disc media.
With the Gimp for raster graphics, Inkscape for vector graphics (both free open-source software for win/lin/mac) you’re good to go