Using a Graphics Editor at Gizmos, Inc: Toolkit: PC Workshop

If you don't have the time or the inclination to make images on your own from scratch, where do you get them?

Are they decorative or informative? Are you as aware of copyright violations as you are of plagiarism? Web browsers read only two file formats:

They're pronounced jay-peg and gif with a hard g as in gift. Both are compressed from the standard bitmapped file, which may have a .bmp, .tif, or similar extension. Make images as small (fast-loading) as you can. Use them a lot.

Skills

Basic skills

import, acquire, scan, crop, resize, and color clip art and exposures from digital cameras

You probably have an couple of image editors on your PC. Open an image in them and try as "Save As .." then "Save As Type" to see whether it will save images in .gif or .jpg format. For example, the Paint program (Start | Programs | Accessories) will save images in those formats. Unfortunately, Paint isn't a very powerful editing tool.

graphics terminology

Most of what you need to do with images, you can do with the Paint program that came with your PC (Start | Programs | Accessories). You may well have a more robust Microsoft image editor already on your PC, such as PhotoDraw. If you have been using a digital camera, an image editor may have come bundled with the download software. These programs go to great lengths to keep you at a distance from the more geeky aspects. Since often the less-geeky program takes more clicks than the more geeky program, I vote for fewer clicks.

Note | FrontPage comes with some crude editing tools that you should use only for brainstorming or prototyping and in emergencies.

When it comes to the sophisticated image editors that professionals need, Adobe's PhotoShop is the industry standard. It is also very expensive and loaded with print-oriented features and bloated with arcane filters and plug-ins. It has an unnecessarily steep learning curve, as does all Adobe software.

Recommendation

I use Jasc's Paint Shop Pro, which started out as freeware, to make, combine, and manipulate images. Now that it's up to version 8 and costs around a hundred dollars, you can still get free copies of earlier versions. However, until I can get it bundled with your laptops, I recommend the 30-day free evaluation of the real thing. For purposes of webmaking, it does everything PhotoShop does.

Paint Shop Pro also converts images from other formats such as .bmp and .tiff. In general, Paint Shop Pro does everything PhotoShop does for much less money. If you're preparing material for four-color offset printing by a commercial printer, PhotoShop is the software to use. If you're preparing material for digital use, Paint Shop Pro will do the same job as PhotoShop.

While PhotoShop is the industrial standard, it comes from a print (ink on dead trees) background. Adobe made it more Web-oriented only when it was forced to. Paint Shop Pro, on the other hand, started out Web-oriented and has added print features such as CMYK separations to accommodate the print folks. Both have terrific digital-camera support.

The big difference is price. Paint Shop Pro costs less than a hundred dollars and PhotoShop lists for around $650. Also, the previous versions of Paint Shop Pro are available for free from Shareware.com.

Who makes this software? In Paint Shop Pro 7.0, create a new file with a width of 1022, a height of 817, and a transparent background. Open the "Image" menu, select "Picture Frame," then select "Antique Marble." Click the "Next" button. Be sure to place the "Frame Inside of Image" before finishing. Select the eraser tool, press your right mouse button and start erasing. This kind of little trick / secret buried inside a piece of software is called an easter egg.

Getting started

Review and explanation of common Web graphics formats (GIF, JPEG). How to use HTML to include inline images, image mapss, animated GIFs, plus use of cut-and-paste JavaScripts. Sources for graphics.

Good web sites require a seamless integration of text and graphics. Here's the least you need to know about web graphics.

If you are a beginner to creating Web pages, the whole notion of using graphics on your Web page may be a mystery. But take heart! Even many experienced Web authors still are confused about basic concepts of graphics use. While there is much to learn about graphic design, page layout, and designing a quality experience for visitors to your Web page, there are also some basic technical concepts to be kept in mind.

Free image editing

A freely distributed piece of software suitable for such tasks as photo retouching, image composition and image authoring.

You could use Word's WordArt to create FrontPage graphics (buttons, bars, and text effects), but I don't recommend it. Use a graphics or image editor instead. However, if you do, save the Word document as an HTML file (File | Save As Web Page). The folder that has the same name as the page will contain all the buttons and text effects saved as .gif files. You can insert them directly into FrontPage.

A free easy-to-use tool for creating 3D text. The wealth of options and direct manipulation interface allow you to create attractive logos quickly and easily.

SVG is a new graphics format that will allow Web designers to add high-quality interactive vector graphics and animation to Web pages using only plain text commands. ... with standard graphic design tools and text-based source editing.

We invite you to download a free preview version of WebDraw and begin exploring the many benefits of this exciting new program and technology today!

Get smaller fast! Optimize your JPEGs and GIFs to shrink file size, make your web site faster, save disk space, and generally relieve an overcrowded world.

National Center for Education Statistics' Create A Graph - then a screen shot will make it yours to display.

A popular freeware utility for creating accurate thumbnail images and scaled-down/up copies from a wide range of popular picture formats. An elegant interface makes it a snap to find your images and select them for processing individually, in groups, or in whole folders, using a simple file selector and built-in image viewer. You can use slider controls to rotate images and adjust their contrast, brightness, sharpness and quality, and check out the results with a convenient built-in viewer.

Paint Shop Pro

For something a little more technical, go to the Web Reference Graphics page. Try their home page, too.

Many sites have PaintShopPro tutorials and tips & tricks. You'll find a lot of overlap among these sites. If you follow some of the techniques, you'll learn to use Paint Shop Pro even if you don't find a use for that particular technique. The skills there transfer easily to PhotoShop. If you're going to keep your images in digital form, the biggest difference between Paint Shop Pro and PhotoShop is the price.

To get started with installing, customizing, and learning your way around the workspace, Mardi Wetmore's Paint Shop Pro 7 Tutorials are terrific. If you like her approach, you can continue to use her as a reference for the tools, menus, and especially the color palette.

Dizzinz Paint Shop Pro tutorials such as the ones for skinz, tubes, icons, wallpapers and brushes.

layers

For the past ten years or so, you've been seeing graphics like the one on the right that blend or merge several images, almost like a double-exposed film. With ink-on-paper, this effect is hard to create. With 16.7 million colors of light and tiny pixels, it's not hard at all.

In addition to x and y coordinates, digital environments can also support a z coordinate for depth. Each image is a separate layer on the z-axis and has its own degree of transparency.

The image here was created by MBA student Nick Fitzpatrick for KaabaInteractive.com.

Create text on a curve

step 1: Create the curve as a vector object. Use the Freehand line, select the Create As Vector Shape option and draw a line on the page.

step 2: With the line object selected, click the Text tool and hold your mouse over the line until the cursor transforms into a letter A with a curve under it.

step 3: Click once, and then type your text in the dialog. Enable the Floating option if you want to remove the underlying shape later on and leave the text behind. Click OK when you're done.

step 4: In the Layers Palette, right-click the Floating Selection and choose Promote To Layer. You can now remove the line object from the Vector layer, leaving your text behind.

Example of a simple animation

step 1: Open PaintShop Pro's Animation Shop.

step 2: Add the two images to a new animation by choosing Animation, Insert Frames.

step 3: Choose Effects, Insert Image Transition.

step 4: Still at Image Transition, choose Morph from the Effects drop-down list.

step 5: Still at Image Transition, adjust the length of the animation and the frames per second using the slider.

step 6: Still at Image Transition, choose Customize to fine-tune the effect.

Images with interesting borders

step 1: In PaintShop Pro, open an image and choose the Selection tool and the Rounded Rectangle type from the Tool Options.

step 2: Set a feather to around 20 pixels and select an area inside the image edge.

step 3: Choose Selection, Invert to invert your selection.

step 4: Choose and apply an Effect to the selected area to create your framed edge. Artistic
effects like Brush Strokes or even the Reflection Effects menu's Kaleidoscope option can give neat results.

Cut text out of a photographic image

step 1: In PaintShop Pro, open an image, and choose the Text tool, and click on the image.

step 2: In the Text Entry dialog box, click the Standard Text button then choose the Selection option.

step 3: Select your font from the pull-down menu and type your word. Click Ok to create the text selection.

step 4: Holding down the right mouse button, use the Mover tool to move the selection into position over the image.

step 5: Choose Image and Crop to Selection to remove the remainder of the image. That should leave the text filled with the photograph. You can then save it as a transparent gif, for example.

other graphics

Load up Javica and see the contents of your Mavica floppy disk instantly. Javica uses Mavica's secret 411 files to display your pictures 100x faster. Instantly convert all .411 thumbnail files into GIFs for use on your Web pages. It lets you rename your pictures quickly and easily. Don't waste time with files named MVC-013.JPG; rename them to "Me Wearing My Hat At The Mets Game.jpg" -- or rename all the files to the date they were taken. Delete the pictures you don't want without worry. When you use Javica, you'll know exactly which files you're deleting, visually. Create whole web pages with a single click! With the click of a mouse, Javica lets you create gallery web pages that show off your pictures. Four kinds of Instant Gallery to choose from! Install Javica NOW and publish your pictures today.

a fast, easy way to create a quick web gallery of pictures. After you select a folder on your machine that contains images (.jpg files), this script generates a series of web pages to display them. By editing a few lines in the script, you can even customize the font, page colors, and add a link to your home page. When the pages are finished you can transfer the folder contents to your server and share your pictures with the world!

Gradient Thief not only lets you create multi color gradients easily, it also lets you "steal" colors from existing images.

Ever see an image of a sunset and wish you had a way to get rid of the clouds or mask out the buildings? Gradient Thief lets you select colors from that image and then create a gradient swatch of those colors.

Siggraph

http://www.curiouslabs.com
http://www.digi-element.com
http://www.digimation.com

Flash

Dozens of free sample files for you to see, download and learn from whether you are a beginner, intermediate, or advanced user.





Showroom information design	Playroom interactivity design	Research Lab usability design
Workbench web design applications	Kiln digital development process	Toolkit digital technology guide


search \| sitemap \| help
Ricci Green \| Digital Wares \| Gizmos, Inc. CyberSea Inn \| Port 80

modified: December 4, 2003 by Douglas Anderson http://RicciStreet.net/gizmos/toolkit/businessmedia/graphics.htm

Graphics Editor

The PC Workshop

What is it?