So, the HDV or hard drive HD camera are good but did you know that hide a high-end secret? Here’s the scoop. When you record to your HDV tape or SD card, the camera has to compress the video heavily to fit it onto this formats. For example, HDV is about 3.5 MB/sec. That make seem like a lot but it pales in comparison to the massive amount of data the camera sensor is grabbing.

If you have a camera with a HDMI out, you may have access to this data. It turns out the video signal is compressed to tape or drive after it was routed to the HDMI output. For you, this means you’re getting uncompressed 4:2:2 data out of the back of your little handycam. That’s 128 MB/sec instead of 3.5MB/sec…about 30 times as much data. This means it’s easier to correct and easier to remove greenscreen backgrounds.

In the end, this means you really can get very close to broadcast quality for less than $1000. Pretty nifty.

pixelcorps.tv

HDC-SD1
Panasonic

Vectors versus Pixels

In my day-to-day job, I work at a design company using Macs and Adobe software. Our client base is quite varied both in the types of business they conduct and in their understanding of what we do as graphic designers. It’s not a bad thing—it’s not their job to know our job, if anything it’s the other way around.

One of the situations that comes up a lot in my business where it would behoove them to know i bit about graphics technology is when they want to include their existing logo in a job they’ve hired us to do. This is when they invariably grab the GIF file off the header of their website for use on their outdoor signage.

What’s wrong with that? Let me explain:

There are basically 2 types of image formats that we work with: vector based images and pixel based images. In the example above of needing a logo for outdoor signage, we would have ideally liked to have received a vector based logo rather than the GIF file which is pixel based.

Pixel based images

Pixel based images (also called raster images), as the name would suggest, are based on pixels—duh! The word “pixel,” I am told, means “Picture Element.” Escentially, a pixel is one unit of information that helps build an image—it’s kind of like Lego. In fact, it’s a lot like Lego.

Do you know how each standard Lego piece is made up of a number of those little bumps distributed grid-like across the top of the block? Think of each one of those bumps as representing a pixel. Usually when you build with Lego, you build “up”…you build a house or a car or a something with very little regard to the color of the blocks. For the purposes of this analogy, I’m just going to stick to one layer and it’s going to be all about the color.

I’ve taken that large, green, flat Lego base and I’ve used white, red and yellow bricks to make the image of a star.

There’s a reason people don’t usually make pictures with Lego—they look ugly unless you can make them really big so that you can stand far enough away from them that you don’t see the “jaggies.” Do you know what I mean by jaggies? They are the stair step like edges between colors and they are one of the indications that will tell you that a printed image is pixel based. The problem with making my star bigger is that 1) I don’t have nearly enough Lego to do it and 2) even if I did, making it bigger would require me to either represent each Lego bump in the small star with 4 or 9 or 16 (square numbers) Lego bumps on the new big picture.

Even then, once I was finished, the jaggies would still be there because I simply made them bigger. I’d need to fill in the steps of each jaggie to smooth them out. In graphics programs this is similar to something called “anti-aliasing.” It certainly helps make the edges of the star look smoother, but it’s not a simple solution because it requires me to redraw the star. In fact, it requires me to “know” the star. My star is pretty simple and easy to know, but imagine I had made a picture of a person with my Lego and that person had a yellow spot made out of a single Lego bump on his blue coat. If I try to make a larger version of that picture, I’d need to know what that yellow spot was supposed to be. Was it a button? Maybe a flower? A mustard stain? Unless I know that, it’s just going to be a huge yellow square on the large version.

What I’m getting at is that the detail in Pixel Based images is fixed to the image at hand. If you scale them up, you don’t get to see more detail (no matter what they show you in the movies and on TV), you just make the imprefections of the image bigger. If you scale them down, you lose image information as multiple pixels get averaged into single pixels: a detailed eye becomes a blue blur.

Common pixel based applications

The pixel based application that most people are aware of is, of course, Photoshop. There are others like GIMP, Pixelmator, or any other “paint” program.

Image file formats that are pixel based

So how do you recognize a pixel based image just by its file format?

Identifying the nature of an image just by the file format can be tricky, but there are a few assumptions that can be made reasonably safely. So if you see an image in one of the following formats, you can be fairly sure they are pixel based:

GIF - (Graphic Interchange Format) This format is mainly used for web graphics. It has a limited number of colors that it can display and so it usually has a low file size and loads quickly. GIFs are always pixel based.

JPEG - (Joint Photographic Experts Group) Also common the the web, but used for high-end images also. It uses lossy compression and so images may have a low file size, but they may also suffer from image degredation due to the compression. JPEGs are always pixel based but can be saved with simple vector information in them also.

TIFF - (Tagged Image File Format) This is the format most universally accepted in the printing industry for images. It is kind of a catch-all image format and actually has several different varieties featuring various computing platform compatibilities and compression formats. TIFFs can also hold some vector data but function as pixel based images.

PSD - (Photoshop document) As Photoshop is a pixel based application, so it stands to reason that its native document would be a pixel based format. Traditionally, PSDs could only be opened or used by Photoshop, but it is fast becoming a more versitile format.

PNG - (Portable Network Graphics) the free, open source successor to the GIF format, PNGs are usually web graphics and always pixel based.

BMP - (Windows bitmap) An uncompressed image format that is used for the Windows OS but not prefered for high end graphics work.

RAW - (RAW is raw) RAW images are always pixel based since they tend to be the product of digital cameras.

Uses of pixel graphics

Pixel based graphics are best suited for photographs, digital paintings and other organic looking types of imagery. In spite of the lack of subtle color shown in my Lego example, they are capable of millions of colors (depending on the file format …stay away from GIFs) and are quite versitile.

You can use them on stationery, web sites, brochures, digital transfer t-shirts… all as long as pay appropriate attention to the level of resoltion. In printing, you usually want to supply twice as much resolution as the resolution of the printer or press producing the image. So, for a magazine ad that is printed at 150 lines per inch (printing jargon) should have images that print at 300 pixels per inch or better.

They are not as useful for logos since they do not scale well. This means if your only copy of your logo is on your website, that is the biggest and nicest you will ever see it unless you redraw it in a larger size.

Vector based images

Vector based images are, amazingly, based on mathematical equasions. A vector image is made out of several anchor points that, like fence posts, define the boundries of shapes. Each line segment between each point is actually defined by math. If pixels are like Lego, vectors are more like Spirograph.

Does anyone remember Spirograph anymore? Spirograph was a toy that came out in the 60s and was a collection of serrated gears, permenant ink ballpoint pens and tiny, sharp little pins that, inexplicably did not cause the human race to extinguish itself in a puddle of blood. You would put one gear on a piece of paper and secure it to your Grandma’s best dining room table with a handfull of those pins (excidentally dropping a few into the deep pile carpet to be swallowed by the dog or stepped on). You then took another gear pieces and one of the supplied pens (no other pens commercially available during the time of the Spirograph ever worked) and rolled the free wheeling gear around or within the secured gear with the point of the pen in one of the free gears numbered holes. Doing this would produce beautiful line art masterpieces.

Like Spirograph, a vector based image is based on lines and math. Both hide their mathematic roots; Illustrator in its bezier curves and Spirograph in its gears. If your hands were steady and your pressure on the gears consistent, the lines of the Spirograph masterpiece would be smooth and fluid. If you came back days later and took the same gears and did the same exact proceedure you would reproduce the very same drawing. What’s more, if it were possible to create a Spirograph set 10 times bigger than the one Santa brought you, you could make drawings that were exactly 10 times bigger but just as smooth and as fluid as the smaller versions. The math is in the gears, so if you make the gears bigger, the images scale without any degradation.

The problem with traditional vector based images and Spirograph is that your colors are limited to one color per shape. Yes, there are ink pens that will change color as your write and modern vector drawing applications do support gradients, transparency and blending modes, but we’re speaking in basics here.

Your basic vector based image is made up of a collection of shapes filled with solid colors—they are not particularly photographic looking, but they are crisp beautiful and practically infinitely scaleable. My star drawn with the small Spirograph looks lovely as does the start drawn with my large Spirograph. So, too, will any basic vector graphic: it will look just as awesome big as it does small.

Common vector based applications

The most common vector based applications in the graphics industry are Adobe Illustrator, Adobe Freehand (rest in peace), and CorelDraw!. Flash and CAD programs are also vector based and can export vector graphics.

Image file formats that are vector based

Identifying vector based images by their file format alone isn’t technically possible. You really need to open them up and check…and for that you will need the right software.

Like pixel based images, there are a few assumptions that can be made reasonably safely so that we can tell if an image is vector or not. Firstly, check its file format against the list of pixel based formats; if it’s one of those, you probably don’t have a vector file. If it’s not one of the typical pixel file formats, so if it might be one of these:

SVG (Scalable Vector Graphics) - No, it’s not a Law & Order spin-off. This format is vector based, but not prefered by graphics professionals.

EPS (Encapsulated Postscript) - Can be a vector file, but not necessarily. Photoshop saves files in EPS format too.

AI (Adobe Illustrator) - Adobe Illsutrator is Adobe’s premiere vector drawing application and the AI file is its native format. It is akin to a vector based PDF (Portable Document Format) and can often be opened in Adobe’s free Acrobat Reader application.

Uses of vector graphics

Vector graphics are perfect for logo design and for the manufacturing of vinyl signs, silkscreened t-shirts, stationery, brochures and most other “ink on paper” types of applications. They are not supported on the internet much outside of a Flash file, however, and should not be used for the graphics on your website.

I hope this has given you a better idea of what pixel and vector based graphics are as well as the differences are between them and why and where you would use one instead of another. If you have any further questions, please ask. (http://www.labwithleo.com/techquestions)