Business Constructions b y Russell Thurston at www.artville.comMacintosh Graphics Tools

by Gary David Bouton

  • GIF_Prep - Freeware to remove the resource fork
  • Image Source Helper - to help you place graphics in HTML
  • Gamma Toggle - Let´s you see what Windows sees
  • Clip to GIF - Converts graphics to web graphics formats
  • GIFBuilder - Builds animated GIF files
  • CelPaint - Use it with GIFBuider to create animated GIFs
  • 3D Words - Extrude your text like Play-do™
  • Graphics Converter - Convert to and from many formats
  • ShareDraw - Inexpensive "vector" graphics

The collection of programs and utilities for Macintosh Web graphics that I recommend you look at tends to fall into two categories: small, single-function applications or full-featured commercial software that costs $$$. Nevertheless, there are some neat programs that can help you out on your way to becoming a Web designer.

GIF_Prep

This program is freeware and can be downloaded at ftp://mirrors.aol.com/pub/info-mac/gst/grf/pshp/. GIF_Prep removes the resource fork from GIF and JPG images. For those who are not familiar with a resource fork, each Macintosh file has two parts to it: the hidden resource fork that contains information on what program was used to create the file and the data fork, which you see in folder windows. The data fork contains the actual information about the file. This is why Macintosh files need to be BinHex compressed when posted on the Web for download or sent as e-mail attachments. Without the special encoding, the Web will corrupt the file's resource fork, which makes it hard to view on another Mac.

GIFPrepIronically , you need to strip the resource fork from a GIF or JPG file before you add it to a page on the Web because the resource fork is not needed. Macintosh, Windows, and UNIX browsers don't use the resource fork, but they do download it if it is present. This means the graphic will take longer to download into your visitor's browser and make your site unnecessarily slow. This illustrations shows how you work with GIF_Prep; all you do is drag a file on top of GIF_Prep's icon.

GIF Prep Get InfoHere you can see the File>Get Info box. The size of the file, after it's been passed through GIF_Prep is the true size of the file when posted on a Web site.

If you're trying to make your site download to a visitor's browser as quickly as possible, GIF_Prep is an indispensable tool, and you can't top the price!

Image Source Helper

ImageSource HelperThis program is freeware (the creator calls it "Thank You-ware ") and can be download ed at www.acts .org/rola nd/thank s/. Image Source Helper is for the designer who does not have a full-featured HTML editing program and needs to generate image placement and image sizes as HTML to be inserted into a document. Here you can see the splash screen and also the Macintosh clipboard contents after you drop an image file on the application icon. As you can see, Image Source Helper has written the correct HTML code for the image I dropped onto the icon. This clipboard text can then be copied to an HTML document, and the image will appear, as expected, when you post the pages and graphics to your Web site.

Gamma Toggle

Gamma Toggle is freeware and can be downloaded from www.acts.org/roland/thanks/, but there's something many Macintosh users need to know about this utility before I tell you what it does. Gamma Toggle is an f-key program that can be used to toggle your monitor's display from a Macintosh gamma setting to a setting that resembles the gamma used by Windows systems. F-key programs are launched and closed by pressing a predefined keyboard shortcut. The Gamma Toggle f-key is stored in a font suitcase and is installed by dropping it into your Fonts folder.

Why should I care about gamma?

Gamma ToggleWhat is gamma, and why is it important for you to see an image as a Windows user would see it? First things first: "Gamma" describes the difference between voltage sent to the video circuitry of your computer and the brightness you see in an image. No two monitors are exactly alike, no video subsystems are identical, and Windows has a different gamma than Macintosh. The effect of a specific gamma value usually can be seen in the midtones in an image; the higher the gamma value, the brighter the image appears. The Macintosh has a gamma of approximately 2.0, while Windows typically uses a gamma of 1.8 (it's a tad darker than the Macintosh). So by using Gamma Toggle when editing an image, you'll be able to see whether it displays too dark when a Windows visitor hits your site. The above image shows what an image looks like using Macintosh gamma versus the gamma of a Windows computer.

Use Gamma Toggle when you're adjusting the exposure of images you want to post on the Web, try to strike a happy medium between perfect Macintosh exposure and Windows exposure.

Clip to GIF

Clip to GIF is a batch conversion utility that will accept files in the PICT, TIFF, GIF, and JPG formats and convert the files to GIF, JPG, or a few other formats. You have the option for processing images using color reduction (usually called "dithering"), interlacing, conversion to gray scale, and JPG compression amounts. The most compelling reason to add this program to your Web toolkit is that Clip to GIF can be controlled by an AppleScript. Let's say you want to download all of the images that co-workers across the world have submitted to your ftp site overnight. And then you want the images converted to GIF or JPG format, and you want them posted on the gallery section of your site. With Clip to GIF and an appropriate AppleScript, you can automate this tedious process. This freeware application, written by Yves Piguet, can be downloaded at iawww.epfl.ch/staff/yves.piguet/clip2gif-home/.

GIF Builder

GIF BuilderAlso written by Yves Piguet, this applicatio n is freeware iawww.e pfl.ch/sta ff/yves.pi guet/clip 2gif-hom e/ and is about the simplest GIF animation utility I've ever seen. It's totally drag and drop—you add images to the list in the application, as shown below.

GIF Builder can produce a GIF animation with transparency. You can also specify the amount of time each frame in the animation is on screen and change the order of still frames by drag and dropping in the list in the interface'. It's a very complete program for creating animations for the Web.

CelPaint_1.0d2

CelPaintCelPaint is a "must have" item if you want to create animated GIFs, designing the still frames that comprise the animatio n by hand. You can download CelPaint from ftp://mirrors.aol.com/pub/mac/graphics/graphicsutil/. This program mirrors the traditional method of creating animation stills; you have an "onion skin" feature that shows the previous frame when you paint on the current layer. CelPaint, by the looks of it, is not designed to give you a finished product, but instead to provide you with basic paint tools and export features so you can embellish the still frames in a paint program such as Painter or Photoshop. You can see the interface here.

CelPaint Animated GIFI designed a simple outline of a character, one of many stills I exported to PICT format. Then I used GIF Builder to create a GIF animation.

The image at left shows what you can do with CelPaint used in combination with a GIF animation program.

CelPaint is the cheapest way I can think of to build the still files you need to create animated GIFs. By all appearances, after reading the documentation, the program is free.

3D Words

3D WordsIf you own Illustrato r 6 or later, 3D Words is a plug-in that will create extruded text at any angle or distance. It has its own interface within Illustrator, and when you're done setting up the 3D text, you close the interface and the extruded, shaded text appears in your Illustrator document. To make your 3D Word creation Web worthy, use Illustrator's conversion feature to turn the text into a bitmap; then export the file (and use a utility to convert the bitmap to GIF or JPG format). You can download a trial copy from www.vertigo3d.com/products/vertigo_3d_products.html

The plug-in sells for about $99, but if you need true, three-dimensional text, this is the least expensive program I've found.

Graphics Converter

This program is a staple of your graphics toolkit, period. Pay the $35, and you won't be sorry.

Graphics ConverterGraphics Converter is an image editing program that has an incredible list of import and export filters. You can import an image, even a PICT draw (vector) image and save it out to GIF or JPG format. Graphics Converter doesn't have the sophisticated painting tools of, say, Image Ready or Photoshop, but the selection tools are wonderful, and the color reduction tools are superb (so your JPG and GIF images look their best). You can set up batch processing for converting files in the folder of your selection, and you can import and run an animated GIF from within the program (so you don't need to load a Web browser).

Notice that Graphics Converter has a palette that tells the size, resolution, and color depth of the current foreground image. Unlike a few shareware and commercial programs, Graphics Converter has a multiple document interface—you can have several images open at the same time.

Graphics Converter can be downloaded in trial version at www.lemkesoft.de/us_gcdownload.html

ShareDraw 2

As I mentioned earlier, some folks who are just getting into graphics and graphics programs might feel more comfortable using a draw-type program instead of a painting program to make graphics for the Web. Drawing applications create vector files that must be converted to bitmaps before you can use them on a Web site. ShareDraw is an inexpensive vector drawing program that is great for people just starting out and who don't want to spend the big bucks for Illustrator or Freehand. It's also great to have on hand if you only occasionally use drawing programs.

ShareDrawShareDra w has about 50% (or more) of the functionali ty of Illustrator , and you can export your work in either PICT or EPS formats. The only problem with ShareDra w's PICT export is that the image will have aliased edges. In geekspeak, aliasing refers to those tiny, irritating stairsteps along the edge of a design. Anti-aliasing, such as Photoshop and Painter have, keeps edges in a bitmap image smooth. The way around the aliased edge problem is to export your image from ShareDraw as an EPS file and then import the EPS into a product such as Image Ready or Graphics Converter (with the EPStoPICT 1.2 extension, available at members.aol.com/artage ). Here you can see the interface of ShareDraw and a simple example of what you can create in the program.

One of the nice things about designing in a vector drawing application is that you can stretch and distort and rotate an element, and the element never loses focus or design detail. Bitmap images lose focus when you distort them because there's a finite number of picture elements (pixels) in a bitmap. When you distort a bitmap, the application has to reassign pixel colors, and loss of focus is the result.

ShareDraw is $28 and can be downloaded in trial version at www.peircesw.com/FTP.html

ShareDraw is an awful lot of vector power for the price!

 

Web Graphics Toolkit:

  • An introduction to Web media and a discussion of the difference between bitmap and vector files.
  • File formats: Which should you use?
  • Windows graphics tools
  • Mac graphics tools
  • Cross-platform graphics tools
  • Recommendations for graphics programs under  $250
  • Conclusion

 

[Home] [Start Here] [Plan] [Design] [Build] [Grow] [FuseLetter] [New]

SITE MAP - Contact us - Legal Info
www.efuse.com ©2000, NetObjects

Sign up for our free FuseLetter!

BuiltByNOF

bulletTry NetObjects Fusion for free
bulletBuy  NetObjects Fusion4 for $49
bulletBuy FusionMX for $99

Learn about NetObjects Training Classes

fuseman