Maggie's Farm

 
(continue reading)
 

Overview

In these next four lessons we're going to tackle the exciting world of multimedia. We'll cover images, audio and video, then we'll have a lesson on streaming media from a blog or web site.

The bad news is that to get into any of these fields usually costs a buck or two. While there are lots of freebie programs running around for various computer endeavors, dealing effectively with multimedia usually involves a commercial program or two.

On the other hand, it depends on what you want to do with the file. If you want to lighten just one little area of a pic, then you're going to need a quality program. If all you want to do is crop part of it out, the 'Paint' program included with Windows will do just fine.

While I admit to not having used it in a decade, Paint Shop Pro has long been considered the best alternative to the expensive Photoshop.

Update: A couple of people in the comments have mentioned GIMP as being a free alternative to the commercial programs, so it's probably worth a peek.  I'll give it a spin later and if it lives up to its advance press, I'll do a "Tips" post on it.

And keep in mind that many trial demos are fully-working and usually good for 30 days, so if you've just got to do something to a picture, but it's probably the only time you'll ever actually need to do so, start looking for trial demos.

 
The Players

Over the years I've worked with the image formats BMP, EPS, IFF, JPE, JPG, PCX, PIC, PNG, PSD, PXR, RAW, TGA and TIFF — and a bunch I've forgotten. It was getting pretty crazy there for a while until JPG came along and pretty much settled the issue.

Although I'm going to mention the Mac format TIFF and the Windows format BMP here and there, we'll primarily be dealing with JPG. GIF and PNG have their one little use (transparency) which I'll mention near the end.

By the way, it's pronounced "jif", like the peanut butter.  So sayeth CompuServe, and they invented it, and the rules are that whoever invents it gets to call it whatever they want.

Historical note:  I was actually there the day, hour and minute CompuServe released this hot new first-of-its-kind multi-platform image format to the public.  I grabbed the first few and immediately slapped them on my Amiga BBS.  In it's historical context, it was actually somewhat surreal, in that for the first time someone calling my Amiga BBS from a PC or Mac could download pictures and watch them on their own platform.  It's hard to understand here in the days of the web, but at the time there was a huge gulf between the various platforms (don't forget Atari, Tandy, NeXt, etc) and GIF was the first to bridge it.

 
Their Respective Categories

Image formats can be sorted a number of ways:

• 
  
  By platform: Both major computer brands have their own in-house picture format. Windows has BMP, Mac has TIFF. Other formats, such as GIF and JPG, were developed independently and designed to display on any computer.
   
  
  


• 
  
  By compression: Some pictures are 'compressed', which means the quality (sharpness) of the picture has been reduced in order to make the file size smaller, both for ease of storage and for quicker display times on the web. That's what made JPG so popular.  Another excellent compression format is PNG.
   
  As noted, though, compressing a picture also degrades the quality, so people in such fields as desktop publishing (where their work will eventually be printed) use uncompressed formats such as BMP and TIFF.
   
  
  


• 
  
  By number of colors: Each format has a maximum number of colors it can display, which, in turn, directly affects the quality of the picture. A GIF image can only contain 256 colors, which is fine for icons and the like, but obviously not for photographs.
  
  The JPG and BMP formats use Red, Green and Blue scales, each scale composed of 256 gradations, so they can achieve 256 x 256 x 256 = roughly 16.7 million colors.
  
  As many colors as that seems, it's still not quite good enough for high-quality printing, so the desktop publishing crowd tends to use TIFF, which has four scales (done by percent) and can theoretically produce any color. If you've ever heard that Macs are popular in the printing business, that's why.
  
  

 
Aspect Ratio

Just to make sure you understand what this means, let's take a minute and cover it.

If you have a standard monitor, you'll notice it's wider than it is tall. It has a 4:3 aspect ratio. Width always comes first.  If the width was divided into four sections, it would take three of them to make the height. If the monitor was square, it would have a 1:1 aspect ratio. A wide-screen monitor (or a wide-screen movie playing on a regular monitor) has an aspect ratio of 16:9, meaning it's much wider than it is tall, almost by twice. When you see a picture or video and people look unnaturally thin or fat, that means the boob who worked on it didn't keep the aspect ratio together.  We'll get back to this in a sec.
 

Slicing & Dicing

Let's run through the standard pic operations:
 

Resizing — Raising or lowering the width and height of the image. The 'trick' is that you have to maintain the aspect ratio when you do it. Most good programs will automatically raise or lower one when you adjust the other, but not the cheapie programs like 'Paint'.

Do you remember all that wasted math you took in high school and/or college? Well, surprise of surprises, there's actually one tiny little piece from that algebra class that you can put to work, Lo!, these many years later. Here's the original:

 A      C
--- = ---
 B      x

To get x, you invert and multiply:

B x C divided by A = x

Let's say your original picture is 560 x 420.  You need to make it smaller for whatever reason.  The new width will be 300 and the height will be whatever the aspect ratio decrees.

Haul out Notepad and type this in:

560   300

420    x

with '300' being the width you want the resized pic to be.

Now haul out the Calculator and using the formula:

420 x 300 divided by 560 = the new height of the pic

Put the new width & height in the program and there ya go.
 

If you're putting a pic in any kind of project, be it PowerPoint or blog site, you always want to resize the pic in an image studio (even 'Paint'), rather than letting the program do it for you. The resizing algorithm in an image studio is much better than a mere viewing program, like a browser.

For example, if you had a 600 x 600 pic and imported it into the site, then used the blog editing software to size it down to 300 x 300, the browser's algorithm is going to be the one to reduce it and it'll look worse than if you'd resized it to begin with.

On the subject, it's an axiom of the graphics biz that you always lose a little quality when you make a pic larger, so be careful.
 

Cropping — This means snipping a piece out of the main picture. With a commercial program you usually just highlight the section with the mouse and use a 'Crop' feature on the menu. With 'Paint', it's a two-step process. First, you highlight the section you want and then use 'Copy To' from the Edit Menu. Save it as a default BMP, then use 'Open' from the File Menu to open the just-saved BMP pic. Now you can use 'Save As' like normal and save it as a JPG by flipping the little drop-down menu in the save requester to "JPEG".

Related: Info on cropping a screen-grab is here.
 

Lightening & Darkening — It's not uncommon for a pic to look a little on the dark or light side. The only thing you have to be cautious of is lightening a picture with solid black in it, as it'll make the black a dark-dark gray and won't look natural.

A quality image editor will allow you to highlight part of the picture and lighten or darken just that area. A common use for that would be darkening some sun glare in a window that's distracting from the rest of the pic. You wouldn't darken it enough to make it look unnatural; just enough to take the edge off.
 

Contrast

If you're going so far as to lighten or darken a pic, you'll also want to nudge the contrast up or down and see how it looks.  Most pics look better with a little extra contrast.
 

Recoloring — Unless you put 'touch-ups' in this category, you probably won't outright recolor many things unless you're dealing with simple things like icons.

Like lightening and darkening a single area, the better programs will let you highlight a specific spot and recolor just that area.
 
 
And in the better programs:

Smudge — No question, the best tool on the rack. On the rare occasion the background is a solid color, you can just use the regular crop tool to snip something out. But in most cases the background is anything but a solid color, and that's where the smudge tool comes to the fore. Got some ugly power lines in the background? Smudge 'em out. Big ungainly telephone pole screwing up your perfect vista shot? Smudge it out. Your mischievous younger cousin stuck some 'rabbit ears' behind your head during the official Christmas family photograph? Smudge 'em out, then smudge out your cousin.

The smudge tool is also what gives overlaid objects that realistic look.  There's usually a noticeable outline around an object you place on the main pic, so the smudge tool allows you to blend it in.  If you hear some picture was "photoshopped" — meaning "faked" — you can bet the smudge tool played a part.

Lasso Tool — This is like the regular square highlighting tool except it allows you to crop out irregular areas. If you wanted to crop some large ugly thing out of a pic, the usual method would be to grab the same background right next to it, paste it over then blend the edges in with the smudge tool.

If you used the regular square tool to grab the section right next to the object, then pasted that on top of it, the outline would probably be fairly obvious and you'd have to use the smudge tool along the whole edge to smooth things out. If you use the lasso tool next to the object, the image you paste will have an irregular outline and might just need a touch of smudging to blend in.
 

The Way Color Works

Here's a common color selection box:
 

There are three things going on at any one moment; hue, saturation and brightness. See the little rainbow slider? That's the hue. Move the slider and while the color changes, the amount of color saturation and how light or dark it is doesn't.

Grab the little circle in the color box, move it left or right and you're playing with the saturation, or how much of that particular color (on the rainbow slider) is being used.

Move the slider up or down and you're lightening or darkening it.

In order to convert the color to usable numbers we use the Red-Green-Blue (RGB) scale, as seen by the R-G-B numbers in the example pic of 101-196-211. Each of the three scales uses 256 colors, from 0 to 255. An RGB of 0-0-0 would be black, white is 255-255-255, and everything else is somewhere in between.

Note the # box below the R-G-B boxes with the 6-digit hex code in it. If you want that one perfect, custom color on your site, you'll probably end up punching it into the program in hex code. If your image studio doesn't have a hex code box, use FS Color Picker. Find your color, click on the 'Web' button and it'll copy the hex code to memory, ready for pasting into your program.


Text

The one rule of the text world is that you never resize the picture after you've laid the text down. Text does not survive resizing well.  Adding text is generally considered the last step of the process.

Also, if your program has "antialiasing" as one of the options in the text editor box, make sure to try it on and off, or varying degrees if it has them. Again, make sure the page is in its final size before you judge anything.


Layers

Probably the best feature (at least after the smudge tool) a quality editor offers is allowing the pic to stay in 'layers'.  If you put down some text, that's a layer.  If you import another smaller picture, that's another layer.  If you copy a piece of the main picture back onto the main picture in a different place, that's another layer.  You can save the pic in this format for future use.  For actual use in a program, it has to be reduced down to one layer.

What's great about layers is that you can later go in and change one small thing in the text, or nudge the small picture over a tad, then save both the new master layered pic and the new (single layer) pic for the project or site.
 

Transparency

Both GIF and (the much better) PNG formats have the ability to convert one of their color channels into what's interpreted by the browser as a 'transparent' color so pictures aren't forced to always be in a square format.  It's not something you'd use very often unless you're into graphic design.  Here's a snippet of a site that shows off PNG's ability to do partial transparency:
 

 
Nice, eh?  PNG was really the perfect answer to combining the transparency aspect of GIF and the high quality of JPG, but it arrived too late on the scene and JPG had already become entrenched.

I note, however, that it's widely used in the WordPress world of 'themes' (the above pic came from a WordPress site), and might be used with other blogging software, so it's still alive and kicking.
 

GIF Animations

Although they're hardly used any more, it should be noted that GIF's other specialty is its ability to display multiple frames like a video.  Although a snazzy feature, the problem, again, is the 256-color limitation.
 

Special Effects

There are lots of special effects 'plugins' for popular image studios like Photoshop and Paint Shop Pro.  There's always a hot new effect out there.  I'd just get on Google and do a search for something like "special effects (program name) review" and see what the reviewers have to say.  If you're into design, you'll definitely need some help from outside sources.  The effects that come stock with the programs are usually somewhat pathetic.
 

Last Thought

As with many areas of the computer, keep your masters safe, and keep them in BMP format if quality is an issue.  If you then want to import them into a word processing program or spreadsheet or desktop publishing program, you'll import the BMPs and retain the high quality.  If they're off to the web, you'll convert them to JPG and take the small hit in quality.

See y'all next week!