Thursday, September 5, 2013

Logos (and Typography)

While working on ideas for a logo design today it crossed my mind to introduce this as a topic for this site. Though this can get quite involved, it seems it would make sense to first speak of the many different image variations and file types that would be needed for the completed logo (dependent on the different ways that the logo would be used; see Logos and Image File Types).
     Second to this, by way of introduction, would be to speak of how often logo designs are more a matter of typography rather than of those iconic looking illustrative images that may first comes to mind. While taking a break from my work I then noticed, in today's news, articles about YAHOO! launching a new logo. Wow, what better way to make this point by taking a look at what was involved with their logo. It is all about typography! (And for the web version of their logo, the animated explanation point is a nice touch.)

     For those of us with much less globally-recognized names, much more than just one word may be needed as part of a logo's design. In addition to this, consideration may be needed for how the logo will be used with other accompanied text (such as when part of a letterhead, business card, webpage, branding on social sites, advertisements, signage, posters, etc.). It can become a whole package deal consisting of many typesetting and layout considerations. First and foremost though, a logo's main purpose is for helping establish a memorable "identity" for a company or organization. A familiar face; to be recognized in a crowd.

Wednesday, September 4, 2013


Anti-aliasing of images is a bit tricky to describe, though for compensating for low resolution images, it is a helpful trick to be aware of. As described in an earlier post relating to limitations with resolution for web images, sometimes things can look more clear by being more blurry. Anti-aliasing works in a similar way.
     Aliasing refers to the unwanted "jagged" look that can be seen with pixels in high contrast areas of an image. The closeups below show a comparison between an image (top) with aliasing, and one (below) with anti-aliasing. Though the resolution (pixels per inch) is the same for both of these, the one with anti-aliasing appears more clear.

The terminology and methods used for enabling anti-aliasing may differ depending on the program being used. This may be found as an option within paint programs, layout programs, PDF generating settings, settings for merging layers, as filters, as effects, etc. Regardless of how it is found within the programs, the main point of this article is to point out its positive effect when used for certain types of images.
    The examples below is from a scanned document which consists primarily of only high contrast text and graphics. By name, "anti-aliasing" was not used through any of the tools or options available to me in the paint program I was using. What was done instead was to adjust the tones of the image in such a way as to manually have less aliasing in the image.

The sample above (top) is with tones adjust to soften the edges between the areas of black and white. Basically some of the gray is allowed to remain as a thin layer of division between the two contrasting colors. If this is removed (second example above), and the tones are adjusted for more contrast between the black and the background white, the image becomes much more "jagged" and rough looking. (And in addition, as seen in the illustrative areas of the image, some detail is lost.)  

Above is an even closer view that more clearly shows the tones being used between the areas of high contrast. As noted earlier, even though the resolution (pixels per inch) remains the same for each, the illusion of added clarity seems greater for one over the other. It is odd to think that the blurry looking one ends up appearing more clear and detailed. 
Note, earlier post on sharpening filters also relates to perceiving added clarity through seemly odd ways. The two of these kind of go hand-in-hand, and are of interest for both web publishing (where resolution of images is limited) and for print production (for optimizing image quality).    


Compression of images is something that is done in different ways (depending on the file type) to reduce the size of image files. Without compression, image files tend to be very large which can be a problem. This is especially true of images for web publishing where keeping the file sizes small improves how well, and how quickly, the pages load for the reader's web browser. Compression of images is also a consideration for customizing PDF files for posting on websites. Sizes of image and PDF files also becomes a consideration for sending as email attachments, and for posting to sites that may have limitations on file sizes for uploading online.
     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.
     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.
     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.