When working with logos, one of the main challenges (other than the design itself) is with creating and managing the many different file types and variations that would be needed for the logo image. There is no one file type that is going cover all the bases. A logo may need a collection of many different files on hand, with each being unique to the different ways that the logo is to be used. With this post we hope to briefly describe three categories of logo usage: 1) web/low resolution; 2) print/medium quality; and 3) press quality.
~~~
Web publishing is limiting for the types of files that can be used for images. JPGs are probably most common, though GIF, PNG, and other types may also be found. Also, resolution for images is greatly diminished due to display screen limits (see web limitations). JPGs are great for photos on a web page, though for logos, they can be lacking in quality due to the compression being used. Even at the highest setting for JPG quality, pixels are degraded for quality (see JPG compression). Since logos often consist of typography and areas of high contrast, this degrading of pixel quality may be a concern. At times the logo may be improved if saved as a GIF file. The tricky thing with GIF files is that the color pallet is altered in such a way as to customize the colors used in the file to what best suits the colors used in the image. GIF files use the adjusting of the color pallet, rather than the altering of the pixels, for maintaining optimal small file sizes. GIF files also offer the ability to add animation and movement for a logo. Though it would be easy to think that these details would only be of concern for "web-designers," it is good to also note that images posted to other sites (such as social media, networking, as ads, etc.) would present similar challenges for providing optimal levels of image quality.
~~~
"Print quality" (as it relates to printing to office/desktop type printers) represents in improvement over the low resolution of web images. Most inkjet and laser printers output in the range of 300-600 DPI (dots per inch) which is considerably higher than screen resolutions of web published images. Aside from resolution, another consideration is with how the logo is to be used within different programs for creating documents. Most programs allow for the placement of images though this is limited to specific types of image files. Generally (for reasons of quality and for compatibility with programs) logos as TIF files will work fine. There are some instances though where a totally different type of file may be better (for sake of image quality). TIF files (as with JPG, GIF, and many others) are bitmap images. The alternative to this would be vector images. EPS image files, for example, allow for vector defined images (see vectors and bitmaps). Though EPS files are very common for logos (and are very versatile as a file type), there may be some challenges. One potential problem may be compatibility with the programs used for creating documents, and maybe too, the printers used for printing documents.
~~~
"Press quality" represents an even higher level of quality for logo images. In this instance logo files are being sent to individual printing companies with requirements specific to their equipment and production processes. Though the term "press" may imply to just printing with ink onto paper, it is not limited to just that. Other examples, to name a few, would be companies whose specialty is with digital printing (toner on paper), sign printing (cut vinyl signs, vehicle signage, billboards, etc.), and specialty/screen printing (tee shirts, mugs, etc.).
Sometimes a TIF file (at an appropriate level of resolution) may be all that is needed. Other times a vector image (such as EPS) is what is required. For example, for large printings where dimensions are measured in feet rather than inches (signs, posters, etc.), resolution dependent images may be inadequate. Vector defined images can be enlarged to whatever size is needed without loss of quality.
For some printing processes (such as screen printing, vinyl cut signs, etc.) the logo's design may actually need to be simplified. A less detailed version of the logo's design may be needed. For example, if gradients are used in the logo image this may need to be replaced with areas of only solid colors. (Logos with photographic components or ones that include very fine detail can be especially challenging.) Though it may seem extreme to change a logo's design to this extent, depending on how it is to print, this is what may be needed. A simplified version of a logo's design does not necessarily imply an image of lesser quality. On the other hand, it could be said that quality is increased by the tailoring of the logo image (simplifying) to better match the process being used for printing.
Another consideration is with color. For a logo consisting of multiple colors the colors may be defined in several different ways. Where RGB (red, green, blue) defined colors (such as within a TIF file) may be good for the home/office printer, it is not adequate for sending to a print shop for printing in "process" four colors (CMYK) with inks or toners of the colors cyan, magenta, yellow, and black (see elements of color). Aside from using process CMYK colors, at times printing is done with Pantone colors which is with inks that are formulated to specific colors (per Pantone matching swatches). In all instances, the logo image file would need to "color separate" into the specific colors needed for the printing process being used.
When creating and deciding on a logo's design, it is good to keep in mind all the various ways that the logo may need to print. An overly detailed or colorful logo, may also, at times, need to be expressed in much simpler terms.
~~~
Having an appropriate collection of logo files on hand ultimately is the goal. Depending on who would be using these files, it is often helpful to also prepare a document with guidelines relating to the logo's usage and the merits of the different files available. Hopefully this post can serve as an introduction to some of what is involved with creating an effective collection of logo files specific to the different ways that the logo may be used.
~~~
Showing posts with label file types. Show all posts
Showing posts with label file types. Show all posts
Friday, October 11, 2013
Wednesday, September 4, 2013
Compression
Relating to images, the method used for compression depends on the file type being used for saving the image. For various reasons compression with JPG files is probably the most common type found. Images from digital cameras and images for web publishing are typically as JPG files. JPG compression also has the feature of providing a means to control and tailor how aggressively compression is used. The higher the setting for compression, the lower the quality for the saved image.
The above sample is with limited JPG compression (medium/high setting for quality). Even at the highest quality setting, you will see pixels being affected through the process of compression. Some of the dark pixels found in what should be a clear blue sky, and some of the "splotchy" looking pixels in the masonry areas of the photo, are due to compression.
This second sample is with an extreme level of compression being used (very low setting for quality). In addition to seeing dark colored pixels showing in the sky, you are now seeing a very pronounced grid of odd colorization due to the compression drastically changing the color pallet available to specific areas of the image. Though using compression to this extreme is very rarely needed, it does proved an exaggerated sense for what compression does to the quality of an images.
~~~
A note about file sizes:
Terminology used by digital cameras may vary, though for a 1,600 x 1,200 pixel image (width x height) this is often called a 2 megapixel image. For a total, this means that 1,600 times 1,200 equals a total of 1,920,000 pixels for the image (almost 2 million pixels). Each of these pixels has an assigned color which is defined as values for red, green, and blue. With 8 bits (1 byte) being used for assigning a number for each of these values, and by multiplying this by three for each color, this would mean that at least 5,760,000 bytes of memory is needed just for recording the color values of all of the pixels. Seeing that most digital cameras, and many smart phones and other devices, capture much larger images, it becomes clear that compression can become a matter of necessity. This is not just a consideration for web publishing of images. Files sizes of these images are also an issue for the camera and its own internal memory, for transferring files from one device to another, for emailing, for posting to social sites, for storing and backing up of files to your computer or cloud, etc.
~~~
Summary:
A note of caution with all of this - and the main point of this blog post - is the realization that though there is a need for compression there is also the need to use it carefully, and to be aware that it comes at a cost relating to its affect on image quality. Using aggressive settings for JPG compression should be reserved only for those instances where it is truly needed and for when the sacrifice of image quality can be justified.
~~~
Postscript:
There are some instances where JPG files should not be used at all. This is especially true for curtain types of images used for print production. Generally for print, TIF files are recommended for saving of images - which has a different and less quality sacrificing method for offering file compression.
~~~
Web Images and Resolution Limitations
Web publishing of images can serve as an example for the many challenges of working with images with limited resolution. One of the most extreme instances is with favicon images. These are the small "Favorite Icons" that can be customized for your site, and that web browser programs use in different ways for displaying your content.
This small icon (the small "K" seen above) is only 16 x 16 pixels in size. From a distance it seems clear enough, though once zoomed in for a closer look it is interesting to see how something that is readable from a distance can be so odd and almost unrecognizable up close.
For web publishing, the standard for image resolution typically has been described as 72 pixels per inch (PPI). At this scale and size, these pixels are rather large though our eyes tend to blend them together in ways that seems to add clarity. By comparison, for print production, most print shops require a minimum resolution of 300 PPI for grayscale and color images (photographic type images), and for line art images (such as high contrast one color images without gradients of tones; without grays), much higher resolutions are needed. So in comparison, it would be accurate to describe web images as low resolution, and as such, as images of lesser quality for detail.
The reason for this can be explained by considering the devices being used for displaying web content. Computer monitors are limited by the mechanics of the actual screens, and the number of screen pixels that can be packed together as individual spots of red, green, and blue lights. (Image pixels being the square shaped spots in the digital image, as seen with the "K" above, and screen pixels being the physical pixels within the device's screen.) Computer monitors typically limit image resolutions to about 72-96 pixels per inch. (The photo below was taken of the surface of my LCD monitor.)
With the advent of smart phones and tablets, and more specifically their screens, the density of screen pixels has greatly increased. Screen pixels are now available at densities of 200 to 300 plus per inch. (The photo below was taken of my tablet's display, which I believe has a count of 216 PPI.) Even though this advancement with screen capability kind of makes the "per inch" distinction rather obsolete, it is still fair to say that web content and images is limited for resolution. Though the density of the screen pixels has increase, keep in mind that the overall size of these displays are considerably smaller than that of a monitor. Even with a large tablet, the total number of pixels that is available (left to right; top to bottom) is limited and all content needs to be able to fit within the overall screen dimension.
Though this post as been primarily about using images to describe resolution limitations with web content, it is worth noting that this also relates to typography and fonts used for web content. As seen in the examples above, when viewed up close letters and words are really rather nondescript and rather lacking in detail. In web publishing the general recommendation is that sanserif and simple looking fonts be used for main text, and that ornate fonts be reserved for instances where their size can be greatly increased, such as for titles, headings, etc. (There are of course many other considerations for web typography; for now just focusing on how this relates to pointing out the limitations of devices for showing detail.)
~~~
For web images, it is good to remember to treat them all as low resolution versions of their originals (be it from scans, cameras, etc.) and to maintain a separate collection of the originals with their full resolutions. These too would be the ones to use in the event that images are needed for print production where much higher resolutions are needed.
~~~
This small icon (the small "K" seen above) is only 16 x 16 pixels in size. From a distance it seems clear enough, though once zoomed in for a closer look it is interesting to see how something that is readable from a distance can be so odd and almost unrecognizable up close.
For web publishing, the standard for image resolution typically has been described as 72 pixels per inch (PPI). At this scale and size, these pixels are rather large though our eyes tend to blend them together in ways that seems to add clarity. By comparison, for print production, most print shops require a minimum resolution of 300 PPI for grayscale and color images (photographic type images), and for line art images (such as high contrast one color images without gradients of tones; without grays), much higher resolutions are needed. So in comparison, it would be accurate to describe web images as low resolution, and as such, as images of lesser quality for detail.
The reason for this can be explained by considering the devices being used for displaying web content. Computer monitors are limited by the mechanics of the actual screens, and the number of screen pixels that can be packed together as individual spots of red, green, and blue lights. (Image pixels being the square shaped spots in the digital image, as seen with the "K" above, and screen pixels being the physical pixels within the device's screen.) Computer monitors typically limit image resolutions to about 72-96 pixels per inch. (The photo below was taken of the surface of my LCD monitor.)
With the advent of smart phones and tablets, and more specifically their screens, the density of screen pixels has greatly increased. Screen pixels are now available at densities of 200 to 300 plus per inch. (The photo below was taken of my tablet's display, which I believe has a count of 216 PPI.) Even though this advancement with screen capability kind of makes the "per inch" distinction rather obsolete, it is still fair to say that web content and images is limited for resolution. Though the density of the screen pixels has increase, keep in mind that the overall size of these displays are considerably smaller than that of a monitor. Even with a large tablet, the total number of pixels that is available (left to right; top to bottom) is limited and all content needs to be able to fit within the overall screen dimension.
Though this post as been primarily about using images to describe resolution limitations with web content, it is worth noting that this also relates to typography and fonts used for web content. As seen in the examples above, when viewed up close letters and words are really rather nondescript and rather lacking in detail. In web publishing the general recommendation is that sanserif and simple looking fonts be used for main text, and that ornate fonts be reserved for instances where their size can be greatly increased, such as for titles, headings, etc. (There are of course many other considerations for web typography; for now just focusing on how this relates to pointing out the limitations of devices for showing detail.)
~~~
For web images, it is good to remember to treat them all as low resolution versions of their originals (be it from scans, cameras, etc.) and to maintain a separate collection of the originals with their full resolutions. These too would be the ones to use in the event that images are needed for print production where much higher resolutions are needed.
~~~
Thursday, June 20, 2013
Image Types: Vectors & Bitmaps
Prior to getting too involved with describing the many different types of files used for images, it may be good to first identify two major types of images. One being vector type images, and the other being "bitmap" type images. These are considerably different from each other.
Bitmap images consists of an arrangement of pixels "mapped" onto a grid. The digital photo above, to the left, consists of 63,960 individual pixels arranged on a grid (246 pixels wide by 260 pixels high). Each pixel is defined with its own color value. The image to the right is of a small detail from the photo (the very small sign to the right midway down the road) greatly enlarged to show the arrangement of pixels. These types of images can be saved as many different files of types, and can be refined using "photo editing" and "paint" programs.
Vector images on the other hand are very different in how they are defined. Rather than being pixels on a mapped grid, these are defined as an arrangements of points (of theoretically no size) connected by lines and curves (of theoretically no widths) on a two dimensional plain (as in x and y coordinates) or in three dimensions (with the added z coordinate). The good thing is that math needed for defining these images is something that is done behind the scenes for you (by the program you may be using). The first example (above left), shows just the points and curves that make up a drawn object, all of which would be invisible until line characteristics (such as width and color) are added, as seen in the second example. The third example shown (on the right) is with a fill color also being assigned (filling in the voids with green).
Another example of vector images can be found with font characters. Each letter of the alphabet is actually a small vector image. The letter "A" is shown, in the center example, with all of the line and fill characteristics removed. All that remains are the individual dots with connecting lines and curves. The example to the right is with colors re-assigned (using red for the lines with fill of green).
In addition to programs that are specific to vector images (often called "illustrator" programs), there are many other programs that will provide some tools for also working with these types of images.
One of the main advantages of vector images over bitmap images is that they are not size dependent. They are scalable. These images can be enlarged to whatever size is needed (without loss of quality). Another advantage is that the colors can be very specific to select areas of the image. This makes it more adaptable to those types of printing where colors are limited, and for types of printing where gradients and shades of color are not an option. For this and other reasons, logo designs, and files used for printing logos, very often need to be in a vector format.
~~~
In time, we wish to expand on much of what has been introduced here. For now though, hopefully this will provide a branching off point on the subject of images, with an understanding of two common - but totally different - ways that images are defined.
~~~
Bitmap images consists of an arrangement of pixels "mapped" onto a grid. The digital photo above, to the left, consists of 63,960 individual pixels arranged on a grid (246 pixels wide by 260 pixels high). Each pixel is defined with its own color value. The image to the right is of a small detail from the photo (the very small sign to the right midway down the road) greatly enlarged to show the arrangement of pixels. These types of images can be saved as many different files of types, and can be refined using "photo editing" and "paint" programs.
Vector images on the other hand are very different in how they are defined. Rather than being pixels on a mapped grid, these are defined as an arrangements of points (of theoretically no size) connected by lines and curves (of theoretically no widths) on a two dimensional plain (as in x and y coordinates) or in three dimensions (with the added z coordinate). The good thing is that math needed for defining these images is something that is done behind the scenes for you (by the program you may be using). The first example (above left), shows just the points and curves that make up a drawn object, all of which would be invisible until line characteristics (such as width and color) are added, as seen in the second example. The third example shown (on the right) is with a fill color also being assigned (filling in the voids with green).
Another example of vector images can be found with font characters. Each letter of the alphabet is actually a small vector image. The letter "A" is shown, in the center example, with all of the line and fill characteristics removed. All that remains are the individual dots with connecting lines and curves. The example to the right is with colors re-assigned (using red for the lines with fill of green).
In addition to programs that are specific to vector images (often called "illustrator" programs), there are many other programs that will provide some tools for also working with these types of images.
One of the main advantages of vector images over bitmap images is that they are not size dependent. They are scalable. These images can be enlarged to whatever size is needed (without loss of quality). Another advantage is that the colors can be very specific to select areas of the image. This makes it more adaptable to those types of printing where colors are limited, and for types of printing where gradients and shades of color are not an option. For this and other reasons, logo designs, and files used for printing logos, very often need to be in a vector format.
~~~
In time, we wish to expand on much of what has been introduced here. For now though, hopefully this will provide a branching off point on the subject of images, with an understanding of two common - but totally different - ways that images are defined.
~~~