Wikipedia:Graphics in two modes

From Wikipedia, the free encyclopedia

It's easy to make complex illustrations with Macromedia FreeHand and Adobe Photoshop. These applications aren't free; they aren't even cheap; but if you have these applications and learn how to use them, you will astound yourself (not to mention friends, family, and fellow Wikipedians) with the range of original illustrations you can create. Nor do you need to be a trained or talented draftsman. You can produce perfectly good illustrations even if you cannot draw a face.

Contents 1 Implementation 1.1 One user's system 1.2 Free tools 2 Prerequisites 3 Vector versus bitmap 4 Hazards 4.1 Legal issues 4.2 Technical limitations 5 Setup 6 Workflows 6.1 Tutorial example 7 See also

[edit] Implementation

Obviously, not everyone has the same platform. You can get good results on a number of platforms, but naturally some are better than others. You certainly do not need the latest and greatest. Newer tools are often more powerful, but sometimes they only add cute features.

[edit] One user's system

We'll try to keep this discussion away from platform-dependent tricks, but just as a reference, here's one system. You could probably assemble this system, starting from nothing, for less than $500.

• Apple Macintosh "beige" G3 300 MHz. Models older than these first G3s may not have the power or the flexibility. Avoid 233 and 266 MHz models and look for slave IDE capability. Advantages of this model for our purposes:

• • Has both IDE and SCSI busses
  • Has serial ports (which are compatible with RS-232
  • Has an ADB port
  • Has 3 open PCI slots

These features mean that cheap, used peripherals are easy to find.

• 256 megabytes of main memory -- Some would say this is not enough.

• Four assorted hard drives with several GB of storage

More is better, but if you're not doing Digital video, you can get a lot of projects done in a small space.

• A USB card

You might also consider a USB & FireWire combo card.

• A 17 inch (432 mm) monitor

Larger monitors make graphics editing work much easier, but prefer a good small monitor to a large one with defects.

• Scanner -- This one cost $5 in the thrift store.

• Printer

Since we're discussing graphics to be used online, this is just a utility printer and can be almost anything.

• CD burner

Thou shalt make a backup. Archive everything.

• Zip drive

Popular in the graphic arts community, occasionally useful for file exchange. Don't rely on it for storage.

• Digital camera -- need not be fancy, but highly recommended

• All-in-one card reader

Avoid single-card readers; you don't know what format you'll want next.

• Graphics tablet -- not just for fine artists

• Mac OS 9.2.2

Many graphics professionals still use OS 9. We have a lot invested in our systems and don't really see the need to upgrade to the bulky and performance-hungry OS X.

• Macromedia FreeHand 8.0.1

• Adobe Photoshop 4.0.1

Older versions of popular applications can often be picked up, legally , used, for a song; if later you want to upgrade, it's often much much cheaper than buying the latest version outright.

• Large quantities of other software which may or may not help you personally, none of which are essential to this tutorial. However, no matter what system you have, I strongly suggest building up a stable suite of utilities, system enhancements, and helper applications. You will have to learn by trial and error what works for you; also, be sure they all "play nice" with each other.

[edit] Free tools

• The GIMP is a free raster and vector graphics editor, similar to Photoshop. It works on Linux, Windows, MacOS, OSX, and other operating systems.

• Inkscape is an open source vector editor, very convenient and quite powerful (maybe not yet as powerful as the latest versions of Illustrator or Freehand, but quite adequate for a majority of illustrations). Its native format is SVG, an open standard (which means your files are not locked into any single tool, and can be even edited in a text editor if you know SVG). It works on Linux, Windows, and OSX. See Inkscape for the list of its features.

[edit] Prerequisites

This is not a user's manual or a tutorial on the basic operation of your machine, FreeHand, or Photoshop. To be able to follow the discussion, you should be comfortable with:

• Operating system:
  • Copying and moving files and folders
  • Changing file formats
  • Managing memory and storage
  • Importing and exporting (very important)

• FreeHand:
  • Creating new files and templates
  • Using the several Toolbox tools
  • Groups and composite paths
  • Layers
  • Styles (fills and strokes, also Style palette)
  • Colors
  • Text operations
  • Bézier curves
  • Path operations (blend, join, punch, union, etc.)
  • Transformations (scale, rotate, mirror, etc.)

• Photoshop:
  • Creating new files and templates
  • Using the several Toolbox tools
  • Selections and masks
  • Layers and channels
  • Brushes (for use with many tools, not just the paintbrush)
  • Colors
  • Text operations
  • Levels, curves, etc.
  • Transformations (scale, rotate, mirror, etc.)
  • Image modes
  • Filters

• Additionally, of course, you need to be able to operate your peripherals. If you are building a system, count on a learning period to iron out small incompatibilities and alterations to your working methods.

If you do not meet most of these prerequisites, this tutorial may be confusing. There are abundant sources of instruction on both of these highly popular graphics editing applications: printed books, online tutorials, even face-to-face lectures.

You may learn faster just by diving in. Click every button, drag every tool, and choose every menu item. When something happens you did not expect, try to figure out why. If you're still puzzled, then go look for help. Expensive instruction may be wasted until you have enough experience with these complex tools to know how you are being helped.

The very best way to learn is by doing, ideally in the same room with an experienced user who has something else to do. Start a project and see how you do with it. Ask for help after you've tried to do it on your own.

[edit] Vector versus bitmap

FreeHand and Photoshop store and manipulate images in two completely different fashions; this is why the combination of both is so powerful. FreeHand uses vector graphics, while Photoshop works with bitmap images. The difference is significant.

Bitmaps are thought of as a grid of pixels in rows and columns. Each pixel is imagined to be a tiny square box, all one color. There is no particular relationship between one pixel and the next; they are not grouped in any way. In particular, a line, say, is simulated by a row of pixels. When enlarged, bitmap graphics start to look "jagged", because several pixels in the new image are generated from a single pixel in the original.

Vectors are coded instructions that describe lines, curves, and shapes. An imaginary pen is put down on paper; the pen is moved; and the pen is lifted from the paper when the path is complete. A path may be stroked with a color or even a pattern; a closed path may or may not be filled with a color or pattern. All vector graphics are built up out of extremely simple shapes: rectangles, ellipses, and Bézier curves. In fact, FreeHand represents all vector elements as Bézier curves. The type of control point and location of its control handles determine the shape of the curve.

The weakness of bitmaps is that transformations tend to degrade them; a straight line drawn in Photoshop will start to break up when the image is repeatedly rotated and scaled. The strength of bitmaps is that each pixel may be manipulated individually, often by way of a filter. This allows for subtle shading effects and works best with realistic photos.

The weakness of vectors is that there are only a few basic shapes and effects which can be applied to them. If a line is black, the entire line is black; it cannot be shaded or feathered. The strength of vectors is that they can be transformed almost endlessly without loss of information.

The most powerful tools within Photoshop are usually filters and the general image controls, such as Levels and Curves. These affect each pixel in an image. The most powerful tools within FreeHand allow one to duplicate and reuse increasingly more complex assemblies of basic shapes. This works best with logotypes, mechanical drawings, and maps.

Obviously, FreeHand and Photoshop complement one another. Effective use of these tools in combination rests on one's ability to judge which tool will do a better job for the task at hand. A skilled user can duplicate many images entirely in one tool or the other, but the combination together makes for easy and fast graphic development.

All graphics must eventually be converted to a bitmap format in order to be displayed on screen or on paper, with the exception of graphics plotted with a pen plotter or drawn on a vector graphics-capable screen (both rare). However, there is often an advantage to delaying this conversion, frequently until a point within the printer driver.

[edit] Hazards

[edit] Legal issues

A full exploration of legal issues related to art and copyright is beyond the scope of this tutorial. You should be aware of some basic facts:

• If you make something, you own the rights to it. If somebody else made something, he/she/it owns the rights. Unless these rights are explicitly given away, nobody else can legally obtain them -- with significant exceptions.

• On the other hand, don't think that because you rip off an unknown photographer, you're bound to get away with it. He or she doesn't even have to file suit in many cases; if you put his or her image on a server you don't control (such as Wikipedia's), some admin will almost surely remove it instanter at the slightest provocation, such as an angry email from the copyright owner.

• Copyright generally extends as well to derivative works, so if you copy a Disney-created picture of Mickey Mouse and paint it green, the owner can sucessfully sue. You might paint an original oil, say, of Darth Vader; George Lucas might successfully contend that he owns a copyright interest in your painting.

• You do, however, have one big exemption in your favor: fair use. The exact limits of fair use are constantly battled over, but broadly, there are several routes out:

• • Educational/non-profit use: This will not help us here on Wikipedia, since our contents are licensed for commercial use.

• • Satirical intent: MAD Magazine and National Lampoon made a living at satire, and even so, wound up in court every so often. This will rarely help us here, since our stuff is supposed to be taken seriously.

• • You may be able to use a corporate logo, say, merely for the purpose of identifying, say, an article written about that corporation. See:Template:Logo. But this is of pretty limited use. But logos are regulated by trademark law, which is different than copyright.

• • If what you take from a copyrighted work is small in relation to the overall piece, it may be fair use. For example, you go to Chicago and take a close up photo of one square foot, or one square metre of "The Picasso", and sell books with your photo as the cover: fair use. You take a photo of the whole sculpture, frame it and sell it: may not be fair use.

• • If what you take makes up only a small part of your finished work, it may be fair use. You fly over Chicago and take a photo of the Loop (including all of the "The Picasso") and sell it for cash money: fair use.

• • Derivative works: This is not an automatic out, but if you change the original piece substantially, you may be more likely to successfully claim fair use. Transformative use is not automatically fair use, but the greater the transformation, the more likely you are okay.

[edit] Technical limitations

Another hazard of intensive graphics is bumping up against the limitations of your machine (or platform). No matter how big or fast your machine is or how speedy your net connection, you can overstress it. You probably won't burn up any hardware, but you can certainly crash or stall your machine's software. Here are some tips:

• Know your machine. Most users have very little idea how their computers actually work. You don't need to be an engineer to poke around a little under the hood. The net is the greatest possible resource for computer-related information. Don't just stop at the web; explore Usenet. There is probably a newsgroup especially for your platform, your operating system, and the particular applications you use (a different one for each). Find a newsgroup that talks about your stuff and lurk there on a regular basis.

• Save your work. There is rarely ever any reason to hold off on pushing the "Save" key. The rule is: Never leave unsaved more work than you can afford to do over.

• On the other hand, it's good to have old versions of a workfile that you can return to at a later time, if you find you've gone wrong. Don't always save a file; "save as" to a new filename, and keep an archive of old versions. Do this especially when discarding information from your workfile.

• Thou shalt make a backup. Gone are the days when it took several boxes of floppy disks to backup a project. You can buy blank 700 Mbyte CD-Rs for much less than a dollar each; I suggest the cheaper kind, since I don't trust the most expensive to never fail. Always burn two copies at one time, so when one disk fails, you've got the other. You can now also buy DVD-Rs, which hold much more per disk.

• I admit I don't burn as many disks as I should, but then I have an entire hard drive (not a partition, but a separate physical drive) that stores a nightly backup of my entire system. I use Dantz Retrospect to automatically copy my other three drives to the backup drive while I sleep peacefully. I recommend this approach; but I still burn disks.

• You will go nuts if you burn dozens of disks and store them in jewel cases. Buy an album that holds disks in pages and stuff them in there; they'll take up less room. Use a cataloging utility to catalog, index, and label your backup and archive disks.

• Partition your drives. This will improve reliability and performance; and when one partition goes down, the others will probably still be okay. New machines typically come with one big drive in one big partition; this is the worst possible configuration.

• Partitioning will not help if you have actual hardware failure. If you here a loud whining sound from a hard drive, the bearings are worn and the drive will probably soon fail. Copy everything off it now and replace it.

• Install several drives -- at least two. If you have an operating system on each drive, then when one fails you can boot from the other. IDE hard drives are cheap; as long as you have room inside the case, you can install another. When you run out of room inside, there are always external drives. Multiple drives also give you the ability to boot from one and completely reformat and repartition the other.

• Install more memory. Note that you can add more main memory and often more cache memory. Both will help to improve performance much more than a faster CPU. If you're strapped for memory, consider virtual memory, at a performance tradeoff. Devote a partition exclusively to VM.

• Photoshop uses its own VM scheme. Create a partition for it. You can choose the location of the VM backing store from within Photoshop's Preferences dialog.

• Distribute the load. Put VM on one drive, your applications on another, and your documents on a third. If possible, split up the load among several buses. Wise distribution of storage will greatly improve performance.

• Pay attention. When something goes wrong, or performance stalls or crawls, ask yourself, What am I trying to do right now? What did I just do? Try not to do it again. See if there isn't another way to get the same work done.

• Have other stuff to do. Some tasks just take a long time. Run processes while you sleep.

• Learn what operations demand what resources. Some operations consume storage; others memory; others (coffee) time; still others demand server bandwidth or storage. Figure out what costs what.

• A bitmap image that is twice as wide will consume twice as much memory (and often twice as much storage); so will one that is twice as tall. So, one that is twice as "big" -- twice as tall and twice as wide -- will consume four times the resources. Avoid very large bitmaps; if you must use them, see if you cannot work small at first and enlarge later. However, this will generally not work well in Photoshop alone. A greatly enlarged bitmap will look nasty.

• Each Photoshop layer consumes the same amount of memory, so multi-layered images can bloat quickly. Consider merging layers when their individual usefulness is exhausted; "save as" to a new workfile first.

• A vector graphic consumes the same amount of memory and storage, regardless of how "big" it is. A plain circle, for instance, is represented by a certain snippet of code inside your document; that code is the same size, no matter whether it represents a circle an inch across or ten feet.

• On the other hand, each circle (in FreeHand) consumes its own little bit of your system's resources. In Photoshop, you can draw circles all day (on the same layer) and never use any more memory. The circles lose their individuality as soon as they're drawn, though. If you draw ten thousand circles in FreeHand, you can still go back and pick out the 1,805th circle and drag it around or change its color. Meanwhile, you "pay" for each circle.

• Grouping (or joining) elements does not help with this last problem; the elements are still in your file (or in memory) and you can still manipulate them. In fact, groups can cause problems down the road. A good rule is to ungroup everything in your document before exporting or printing, although you should not have to do this. Again, there is no fix for an excessively complex document in FreeHand alone.

The two magick tricks you need to learn to deal with these issues of resource consumption are simple:

• Export from FreeHand and Open (rasterize) in Photoshop

• Save As TIFF from Photoshop and Place in FreeHand, then Trace

The first trick takes a complex set of many vector elements and compresses them into a single bitmap. This is usually not necessary, though, unless you have literally thousands of elements in your FreeHand file.

The second trick is a bit less straightforward. You can resize an imported bitmap in FreeHand, but you won't get much satisfaction from it. What you can do is Trace the bitmap, thus converting it into a vector graphic, which you can resize freely and otherwise manipulate.

Photoshop does a very nice job of rasterizing EPS (exported) graphics from FreeHand; all you need to learn is a few cautions and it will clunk nicely along (maybe coffee time). But it is much harder in FreeHand to get a good trace from an imported bitmap -- depending on what your definition of "good" is.

In any case, the main thrust of this tutorial is to show you how to use these two tricks to your advantage, although we'll explore others as well. Buckle your seatbelt!

[edit] Setup

Anytime you plan to do repetitive work, you should consider templates. This idea goes far beyond the scope of this tutorial. When you cook, you don't need to invent a new dish for every meal; you use a recipe, either written or from your head. When you do decide to try something new, you start from an existing recipe. This is one kind of template.

I find it extremely useful to work from a template when creating a new document in FreeHand. You're looking at a shot of a new file opened from my most-often-used template. You'll see I have guides set up near the edges of the page; these keep me inside the limits of my printer -- indeed, most printers. I've positioned the page within the window so that I can see it all -- this setting, too, is saved with the document. I have my preferred unit of measure selected already, and the grid origin is set at the center of the page. I have my default font and size set for text.

Another shot of the same template, with guides turned off, displays a (non-printing) background layer that guarantees my printer's hard clip limits. Anything within the gray zone is guaranteed not to print. Notice the thin gray box just inside; those are the maximum "safe" dimensions for a centered image.

I might never print designs I design for web display -- but who knows? Anyway, using a consistent template makes it easier for me to make initial judgement calls about overall size relative to line width, or number of repetitions of a pattern. I know from experience that if I completely fill the printable area of my template, that will be just about enough "stuff" to fill out a full-screen (1024x768px) web-type image; if I'm shooting for something smaller, I either work on a smaller scale, or know I'll have to reduce later.

Here are shots of three key palettes: Colors, Layers, and Styles. The contents of these palettes are saved with your document (or template) and can save you a lot of work, as well as lending a consistent look to a set of related graphics. Since this is my most basic and general template, I've just defined a process version of black and white (to guarantee compatibility in blends with process colors), a general-purpose utility gray (usually used for handles and temporary backgrounds); no additional layers (besides the printer hard clip boundaries); and a few basic styles. Solid is unstroked black (more accurate than an object with a stroke applied; Wht Tape is unstroked white (useful for patching over things that can't be deleted);Bounds has neither stroke nor fill, and is used for drawing a rectangle around the total boundaries of a graphic prior to export.

On the other hand, I've never found much use for Photoshop templates. The structure that you need to create a consistent look across documents is not stored in a document file, but within Photoshop preferences, such as the Colors and the Brushes palettes, and in separate files, such as Levels and Curves profiles. (Colors and Brushes can also be saved to their own files.) Some settings, such as whether rulers are visible, persist from launch to launch.

I rarely begin a new project from scratch in Photoshop; I'm more likely to import a digital camera photo to start with, or start a project in FreeHand and export it to Photoshop. Another possibility is that I actually start the project with a sketch on paper and scan it in, or use a scan of a found object or existing artwork. I may instead begin with a screenshot. All these strategies yield a starting bitmap not based on any template or pre-existing Photoshop file.

If I do begin from scratch, all I'll generally specify is the document size, and I'll probably change that later. The one guideline I have for the first Photoshop file in a project is that I may want it to be the same size as I plan the final piece. Remember that enlarging bitmaps generally yields poor results; reducing them in size is better, though often also a problem. Starting file dimensions (in pixels) should be from 100% to 200% of final size, though one can work over the range from about 50% to 400% without too much trouble.

In either application, I usually don't try to create the project template first. I start with my generic FreeHand template, or with an empty window in Photoshop, and work on one illustration from the set; when it's fairly well complete, I save a copy as a template for others in the same project. It's important to work from the same colors and styles as you go along; this gives all your illustrations a professional look and solidifies the entire set as belonging to one project.

[edit] Workflows

[edit] Tutorial example

Look again at the example (earlier in this tutorial) demonstrating a bitmap image. The original photo begins as a bitmap taken by a digital camera.

I duplicate the original onto a new layer and scale it 800%. Photoshop would normally try to do this "nicely", so first I switch to "Nearest Neighbor" resampling, to deliberately show you big boxy pixels. Of course, the entire blown-up image is 8 times as large, but the Photoshop canvas does not increase in size. However, Photoshop retains the entire oversized layer and I drag it around on the canvas until the small bit of it I want to show is positioned correctly.

I Save As TIFF and import both original and blown-up bitmaps into FreeHand, so I can see where I want to put the "magnifying glass". I want to choose a particular kind of area to show as blown up, and I park the blowup near the girl's nose, where it does not detract too much from her appearance. Then I create the "magnifying glass" overlay: two circles, a curved line with an arrowhead, and a thicker copy of both cirles and the line in white, to make the whole stand out better from the bitmapped background.

Note that FreeHand generates arrowhead sizes based on line sizes, but the thicker white arrowhead doesn't do a good job of shadowing the visible black arrowhead, so I merely select "no arrowhead" for the white, shadow line and draw a white arrowhead with the Pen tool behind the black one. Working with white objects presents a special problem; I create a solid black box of arbitrary size on a background layer (where it shows grayed-out); this does not, of course, export (or print).

To locate the vector graphic relative to the bitmap, I draw a "bounds" rectangle (square) and set it to my Bounds style -- no fill, no line, therefore invisible; but it is exported with all the other elements and gives the graphic its proper dimensions:
144px (square) at 72dpi = 2 inches (square).

Now, I export the graphic as an EPS and rasterize it in Photoshop with the Open command. Note that I only rasterize the overlay; no point in exporting the bitmaps too, since they're already in Photoshop.

• We call the bitmaps in the FreeHand file "FPO": For position only. For some projects, I would not have used the working bitmaps at all in FreeHand, but specially degraded FPO bitmaps, to keep the FreeHand workfile size down.
• Note that the imported overlay is transparent and of the correct size, positioned correctly in its window. But when I copy-and-paste it into my Photoshop workfile, I lose that accurate position. That's fine, I "nudge" the pasted-in overlay with the cursor keys; in the end, I'm more concerned with an exact, 2px margin between the import and the edge of the finished graphic -- a stylistic judgement I can better make in Photoshop anyway.

The penultimate step is to remove all of the blowup layer except for the portion within the "magnifying glass". (Note that I do this to a copy of the blowup.) I make an elliptical selection and Invert it (the selection, of course, not the content) and hit the Delete key.

That's it; the workfile is complete. Now I just Save a Copy As a PNG. Done.

[edit] See also