These
Articles are written by industry experts to help us understand many subjects better.
Graphics for the web - a special Internet art | ||
|
If you want create your own web graphics,
which software is best for you, and why? | ||
|
This is a topic that will stir a lot of opinions, as everybody has an opinion on the subject. I think that if you are new to Computer Graphics, but fairly good with a PC, the equation is going to be: | ||
|
Features Vs
Price Vs Learning Curve: after 20 years in the business,
here is my report, and my recommendations. | ||
| #1 | PhotoImpact
10 | Without a doubt, this is the company that is working hard to be the world leader in computer graphics for the web. This software is so packed with features it is hard to list them all. The new version has the best tool for clipping an image out of one picture, and putting it in another, that I have ever seen. You can work in layers and save your work that way just like PhotoShop There are literally hundreds of great tools for word wrap, Text textures such as metallic 3D text, automated "Photo Fix" features and so on. I don't really think there is any competition when it comes to features for your dollar. I have been using it alongside others since version 4. We are at version 11 now, and I rarely open another graphics program. They offer a 30 day free trial of the software as well. |
| #2 | Flash
Professional 8 | There is no competition for this software when it comes to low byte size animation. There is so much support for it, so many resources and tutorials that you are never left in the dark. You can do almost anything with flash that you can with any computer code, such as forms, passwords, video, etc. It is quite possibly the coolest software ever written. Many websites are built completely in flash. This is a great idea if you don't care about the search engines (which can't read the text in flash). For myself, I create graphics for the web. |
| #3 | What I will say about this is simple. When it comes to 3D for the average computer graphics worker, this is it. There are several programs with more power and versatility, but with very heavy learning curves and pricetags. Take a look at this example, which I did in about 20 minutes. Oh yeah, cool 3D exports as Flash if you like, streaming video, and several other formats. | |
| #4 | Adobe PhotoShop | Everyone in the business has had to learn to use Photoshop, by Adobe. The newest version is pretty cool, and this computer graphics program has been used for years to create great website images and layouts. The ability to work in layers and save things so that you can edit them made it the only choice years ago. If you get a computer graphics job working on a Mac, or take graphic arts in school, you will be required to learn it. It was designed for print media, not the web. However, it clearly flunks several important criteria in my opinion. Adobe Photoshop has a very heavy learning curve. It is best to take a course to fully learn it's features, and it's help files could be written better. It has a huge footprint, meaning you had better have a pretty powerful computer to use it, and it is expensive. You are paying for a name, like Volvo, before they were taken over by Ford. |
| #5 | Captivate | A person could buy this software and create an entire career producing tutorials and learning applications for online use. I had never heard of it a few months ago, but I am starting to see it's results all over the web. I captures your voice and every mouse click as you cruise through the Internet or a piece of software, and exports a flash file with a control like a VCR, stop start or pause. Take a look at an example of how I have used it, and you will get it. You can use it to create interactive tests, require input from users, etc. It is so fast to use that instead of talking computer clients through a problem on the phone, most of the time I just create a little movie for them to watch. |
| #6 | VideoStudio
9 - video editing software |
Ulead offers several products that I use for the same reason. Full featured, easy learning curve and good price. I haven't found anything in Adobe Premier that I can't do with Ulead Media Studio, or even in Video Studio 9 for that matter, as it incorporates easy to use Chromakey features for use with green screen and blue screen video production. It exports to streaming video in several formats, and does a good job of it. View examples I have created with it here. These products also let you create your own DVDs and CDs with Menus and full chapter features. |
| Choosing the right web graphic format, and using them correctly. | ||
| This is an area where many mistakes are made. The formats that can be used online are: 1.Jpeg. This format can be compressed to small file sizes, but should only be used for photographs and very detailed images. You can set the compression ratio with .jpeg graphics to any level you like, but when set to a low byte level, it is also a low quality level. I always set the quality to 85 or 90 these days, as most people have fast Internet access. Here
is a Jpeg saved at 50% | ||
| 2. Gif. This format saves in only 256 colors or less, as opposed to the 16,000,000 of a Jpeg, but has some definite uses, because it is not "Lossy". They can also be saved with a transparent background, which .jpeg files cannot. I will explain: if you have an image with a large area of a solid color, a compressed .jpeg will distort that color, while a .Gif won't. Here is an example: 3. PNG The .png format has some of the attributes of each of the above. Called a "portable network graphic" it can be saved in either Optimized 256 color mode, or "True Color" at 16 million colors. Like the .gif it is also not "Lossey" It will not get those blurry jpeg "color artifacts" that you see in the image above. A good use of a .png file is if you need no distorted colors, but would like the text to have a shadow, which .gif files don't do very well. PNG files can be saved with transparency, like .gif files. Try saving an image in each of the three formats and comparing quality versus file size. You will soon develop the skill of knowing which is best that way. Creating graphics for the Web:Compression basics: You've almost certainly used compression before, probably with a product like Winzip to pack down a graphic to fit on a floppy before sending it off in an email. The two main Internet graphics formats, GIF and JPEG, have such compression built in, but there are major differences between the two, as we shall see. Side note: although GIF and JPEG are dominant there are other Web graphics formats, such as PNG but for now, we'll assume that GIF and JPEG are universal. GIF GIF, which stands for Graphics Interchange Format, is a lossless method of compression. All that means is that when the program that creates a GIF squashes the original image down it takes care not to lose any data. It uses a simple substitution method of compression. If the algorithm comes across several parts of the image that are the same, say a sequence of digits like this, 1 2 3 4 5, 1 2 3 4 5, 1 2 3 4 5, it makes the number 1 stand for the sequence 1 2 3 4 5 so that you could render the same sequence 1 1 1, obviously saving a lot of space. It stores the key to this (1 = 1 2 3 4 5) in a hash table, which is attached to the image so that the decoding program can unscramble it. The maximum compression available with a GIF therefore depends on the amount of repetition there is in an image. A flat colour will compress well - sometimes even down to one tenth of the original file size - while a complex, non-repetitive image will fare worse, perhaps only saving 20% or so. There are problems with GIFs. One is that they are limited to a palette of 256 colours or less. Compuserve, which created the GIF, did at one point say it would attempt to produce a 24-bit version of the GIF, but then along came problem number two: Unisys. Unisys discovered that it owned some patents to key parts of the GIF compression technology, and has started demanding fees from every company whose software uses the (freely available) GIF code. This has somewhat stifled development. There is a 24-bit, license-free GIFalike called the PNG format, which uses 16 million colors. It is very handy in creating web site graphics that need transpareny or shadows. JPEG JPEG, on the other hand, is a lossy compression method. In other words, to save space it just throws away parts of an image. Obviously you can't just go around discarding any old piece of information so what the JPEG algorithm does is first divide the image into squares (you can see these squares on badly-compressed JPEGs). Then it uses a piece of mathematics called Discrete Cosine Transformation to turn the square of data into a set of curves, some small, some big, that go together to make up the image. This is where the lossy bit comes in: depending on how much you want to compress the image the algorithm throws away the less significant part of the data (the smaller curves) which adds less to the overall "shape" of the image. This means that, unlike GIF, you get a say in how much you want to compress an image by. However the lossy compression method can generate artifacts - unwanted effects such as false colour and blockiness - if not used carefully. Web Graphics software handles the images in pretty much the same way as far as compression goes, some such as the Ulead products have an easier to use interface. | ||
We are located in Clearwater, Florida and serve clients around the country. HOME | UTILITIES| LINKS | V-HOSTS | COMPUTER PROBLEMS | TUTORIALS | ARTICLES | BOOKS | PROFESSIONAL WEB SITE DESIGN | ||
and one saved at 90%