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.
~~~
Friday, October 11, 2013
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.
~~~
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
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
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.
~~~
Wednesday, July 10, 2013
Elements of Color
When defining the elements of color for images one of the trickiest things to get used to is the thinking of colors as "adding" of light to blackness (the absence of light).
This is a complete reversal of what we are used to. From earliest of times, as a child with a box of crayons, we have grown to see color as something that we "add" to white (such as to a blank piece of paper). This is actually called "subtractive color" due to the fact of rather than adding color (with a crayon for example), we are decreasing the amount of light that is reflecting back to us from the paper's surface. We are subtracting light. If we were to subtract light evenly for all colors we would be yielding darkening shades of gray working our way towards black. If we were to subtract light for only certain frequencies of the visual spectrum, we would yield different opposing colors reflecting back to us from the paper's surface.
The negative view of this image (above) is another way of looking at this. Areas that are the darkest in this reversed image (such as the clouds) is where light is the strongest. The reversed image also shows the image using opposing colors (such as orange being the opposite of the blue, as found in the sky).
It is tricky to think of colors in reverse. It is tricky to see something that is white (such as the clouds) as being full of color (100% red + 100% green + 100% blue). It is difficult to think of the blue sky as the absence of red and green.
~~~
When adjusting colors for images, prior to preparing for print production, it is good to keep your images as RGB color values. At some point though this will need to be converted to a different "subtractive color" palette. The image file will need to be converted from RGB colors to CMYK colors. Printing equipment, printing with inks or toners onto paper, will need color values defined for the colors of inks or toners being used. "Four color printing" is with cyan, magenta, yellow and black colors ("process colors"). The images (below) show the different CMYK colors and once these are printed and layered one on the other, they will yield a printed photo with the colors blended.
The process for making this conversion may be as simple as making a specific selection within the photo/paint program being used for the image. Usually TIF files are used for images in print production, though there are also other image file types that can recognize colors defined as CMYK values.
For making adjustments to images, since this should be done prior to the conversion to CMYK, there are many different programs that could be used for making refinements (while it is in its original RGB state). For making the final conversion though, some programs are limited and may not provide the option of then switching to CMYK.
~~~
There are other considerations for refining images for production, and color images in particular, can be extra challenging. Other posts to this blog site have related to adjusting grayscale images though in time, would like to offer more information relating to working with color.
~~~
Photo source: One taken while cycling the roads of Cumberland County, PA, just northwest of Carlisle.
~~~
This is a complete reversal of what we are used to. From earliest of times, as a child with a box of crayons, we have grown to see color as something that we "add" to white (such as to a blank piece of paper). This is actually called "subtractive color" due to the fact of rather than adding color (with a crayon for example), we are decreasing the amount of light that is reflecting back to us from the paper's surface. We are subtracting light. If we were to subtract light evenly for all colors we would be yielding darkening shades of gray working our way towards black. If we were to subtract light for only certain frequencies of the visual spectrum, we would yield different opposing colors reflecting back to us from the paper's surface.
For cameras (film and digital), for scanners, for computers, etc. the colors we are capturing, defining, and reviewing are colors of light. These images are defined by using different shades of three primary "additive colors" - RGB (Red, Green, Blue). Through varying the values of these three colors of light, we can build a broad range of combinations yielding a seemingly endless selection of colors.
The negative view of this image (above) is another way of looking at this. Areas that are the darkest in this reversed image (such as the clouds) is where light is the strongest. The reversed image also shows the image using opposing colors (such as orange being the opposite of the blue, as found in the sky).
It is tricky to think of colors in reverse. It is tricky to see something that is white (such as the clouds) as being full of color (100% red + 100% green + 100% blue). It is difficult to think of the blue sky as the absence of red and green.
~~~
When adjusting colors for images, prior to preparing for print production, it is good to keep your images as RGB color values. At some point though this will need to be converted to a different "subtractive color" palette. The image file will need to be converted from RGB colors to CMYK colors. Printing equipment, printing with inks or toners onto paper, will need color values defined for the colors of inks or toners being used. "Four color printing" is with cyan, magenta, yellow and black colors ("process colors"). The images (below) show the different CMYK colors and once these are printed and layered one on the other, they will yield a printed photo with the colors blended.
The process for making this conversion may be as simple as making a specific selection within the photo/paint program being used for the image. Usually TIF files are used for images in print production, though there are also other image file types that can recognize colors defined as CMYK values.
For making adjustments to images, since this should be done prior to the conversion to CMYK, there are many different programs that could be used for making refinements (while it is in its original RGB state). For making the final conversion though, some programs are limited and may not provide the option of then switching to CMYK.
~~~
There are other considerations for refining images for production, and color images in particular, can be extra challenging. Other posts to this blog site have related to adjusting grayscale images though in time, would like to offer more information relating to working with color.
~~~
Photo source: One taken while cycling the roads of Cumberland County, PA, just northwest of Carlisle.
~~~
Wednesday, July 3, 2013
Moire Patterns & Scanning
Regarding problems relating to moire patterns, lets consider the challenges related to scanning previously printed items which consists of halftone dots. As is seen (above) in the foreground road and lawn areas there is a problem with this scanned image of a color printed postcard. Below is another example from a different scan of the same item.
When scanning printed items there are two different patterns that mostly likely will conflict with each other. One pattern is the rows of halftone dots on the item being scanned. The extreme closeup (below, left) of the postcard reveals the halftone dots that are being used in the printing process. The second pattern is with the rows of pixels that the scanner creates (below, right) as it scans the item and assigns colors to each pixel. Chances are great that the two patterns will conflict with each other creating an unwanted moire pattern. (For further description, see earlier post on Moire Patterns.)
When scanning, these small halftone dots are actually the subject matter to be most concerned about (not the building, the sky, the lawn, etc.). The goal is to try and scan the dots accurately. To do this, higher settings are needed for resolution due to the smallness of the dots. The example shown (above, left) was scanned at 600 pixels per inch.
Aside from scanning at higher resolutions, another trick is to try scanning the item by laying it on the scanner at different angles. Since the unwanted moire is coming from a conflicts with two different patterns of rows (of dots, and of pixels), sometimes the difference between the angles will make matters worse, other times it will make things better. This generally will work (trying different angles) more successfully with items that were printed originally in only one color. Multi colored items will consist of different halftone angles for each of the different colors being printed making it a bit more challenging to find an angle for scanning that does not conflict with any of the different colors.
For judging quality of the scans, here is another example (above). The scan (left) captured the halftone dots reasonably well. It was scanned at a higher resolution and at an angle. The scan (on the right) captured none of the halftone dots, and consists of a pronounced and unwanted moire.
~~~
A note of caution: When judging scanned images for quality, this really needs to be done only by zooming in close enough for seeing the actual halftone dots. This is to avoid yet another instance where moires can occur. The computer being used for scanning and viewing your images, has a pattern all of its own built into the display. Even with a good scan of an item, with good capturing of the printed dots, when viewed at different zoom sizes, you will see different odd looking moire patterns appear on your screen. The odd (and cool looking) pattern seen in the above example is only due to the size I was viewing it on screen. It was due to a conflict of patterns with my monitor. If I were to zoom in close though, the quality of the halftone dots would be evident.
~~~
Now that quality dots have been scanned, the next step will relate to what we now do with them to avoid a problem that can occur during print production. Subsequent posts will related to how to refine these types of images for production.
~~~
In spite of the problems and challenges that come from these patterns, I do find them to be fascinating and fun when found in the "real world." This comes to mind almost every time I travel the PA Turnpike and drive under one of the many bridges with large screened fences on both sides of the road above. Between the motion of my travel, and the conflicting patterns of the two screens above, I get to watch a constantly changing and moving moire.
~~~
Photo information: The color postcard is of Lamberton High School, Carlisle PA. The second photo is the interior of the "A Street Church" (home of Carlisle Brethren in Christ Church from 1920-1952) scanned from a dedication booklet published by the Planning and Development Committee in 1972.
~~~
Tuesday, July 2, 2013
Halftone Grays & Dot Gain
A bit more about halftone patterns and their dots....
Many of the adjustments that are made for image tones relate directly to how they will print as halftone dots. As seen below, for lighter tones we are speaking of increasingly smaller black dots, and for darker tones increasingly smaller white dots. In print production there are certain limitations and tolerances that will effect how these dots will appear.
Many of the adjustments that are made for image tones relate directly to how they will print as halftone dots. As seen below, for lighter tones we are speaking of increasingly smaller black dots, and for darker tones increasingly smaller white dots. In print production there are certain limitations and tolerances that will effect how these dots will appear.
For conventional printing, the ink that is being used (such as black) will absorb into the paper which can result in having the image swell in size. The printed black dots become larger ("dot gain"), and the printed areas behind the "white dots" become wider. This too can happen with digital printing where toner (rather than ink) lays on, and is baked onto, the paper's surface. This layer of toner has a thickness to it which too can effect the sizes of the dots.
There are many considerations for anticipating how much "gain" to expect in production. Much of this goes beyond what is needed at this point for this discussion. One consideration though that should be mentioned is noting the stock selection. The paper being used can have a huge effect on what will happen once ink or toner is applied. Generally speaking, coated stocks are better for holding printed detail than uncoated papers.
For refining tones with taking dot gain into consideration, would like to first consider the darkest areas of the image. In the example above, at some point the white dots will close up and no longer be visible. Much of what is to the right will print as 100% black (without the small white dots). In addition to this, many of the other darker tones, and the mid tones, may print darker than anticipated.
For the lighter tones of an image, the opposite can happen. At some point the dots become too small to print. Rather than things printing darker (as mentioned previously for the mid and dark tones), some of the very light areas may print lighter. If tonal detail is found in these lightest areas of an image, this may be lost or diminished once printed.
~~~
What to do?
Though the description of the problem may seem confusing, the solution really is not that bad. One way of looking at it is that rather than having a color palette (in this instance of grays) that run from pure white (0%) to full black (100%), you would have a slightly adjusted palette (with different values).
For example, if printing on coated paper, it could be that your adjusted palette of grays goes from 4% to 96%. When adjusting tones for your image for highlights, all tonal detail should be at least 4% or higher (anything less may not print and appear as pure white). For darkest tones, these can be adjusted so that they are at most 96% (anything greater will print as full black; the small "white" dots not being visible). Keeping all the tonal detail within 4-96% should do the trick. If printing on uncoated stock, different values may be needed - such as 7-92%. (The print shop may have some suggestions for what values would be best for the equipment and stock being used for the job.)
Anther consideration is with all those tones between the extreme ones. If an image is mostly dark tones, rather than running everything up close to the edge (on the borderline of being black), maybe they can be lightened with the darkest areas of the image being set much lower, such as in the lower 80%s. For all images, it may be good to anticipate that all mid to dark toned areas will appear a bit darker once printed.
~~~
Once you get past all of the technical details, when it comes to adjusting tones, it really is not that bad. It becomes less of a value-specific process and becomes more intuitive. You soon develop "an eye" for seeing tones in a different way - expecting to see mid to dark toned areas as lighter shades gray; highlights as darker shades of gray; white as a very light gray (of a certain value); and black as a dark gray (of a certain value). This is not to say that some details cannot go beyond these limits. Much of this is a judgment call. In some instances highlights may be small and in the middle of the shot, and full white may be fine. At other times, some of the darkest points may be details that are linear in nature and full percentage of black may be fine. Decisions on all of this can become natural and will become less about the numbers and more about the aesthetics of what you are seeing - with adjusted eyes.
~~~
Monday, June 24, 2013
Tones: Highlights
For examples relating to adjusting tones for highlights, the following photo comes to mind for two reasons. One being the snow, which can add many challenges for tones. The other is for pointing out the effects of highlights when they are found along the edges of the composition - and with realizing that unless there are some printed tones, then the highlight color in the image will be the same as that of the paper. Unless an outlining border is added to the photo, it may create an odd silhouetted shape with its background.
As noted on the Tonal Adjustments & Shadows post, clipping (loss of tonal detail) can occur when scanning photos. In this instance though, maybe the scan captured all that was in the original photo, and the loss was from when the photo was taken with the camera being too flooded with light from the snow. Either way, most of the image is with highlights consisting of white (0% black) pixels.
The main adjustment, above, was with the darkening of all highlights. The lightest tone for any of the pixels is now at about 6% black. This should (depending on press tolerances and stock selection) print as a very light gray (almost white) - yielding a silhouetted rectangle shape (of the complete photograph) onto its paper background. Though it may seem odd to make gray something (snow) that was pure white, the result is that the snow still appears as being white and we now have a bit of contrast with all of the photo to its background.
Adjustments were also made to decrease the shadow tones found in certain areas (such as lower left of the shot), and to darken the mid/light tones in others (namely for the snow areas, and select areas of the children). Care was taken to not over compensate so as not to lose the character of the original photo.
~~~
Friday, June 21, 2013
Tonal Adjustments & Shadows
Family photo, Kutztown, PA., early 1900s. |
This old photo is typical of many which have very high contrast. When scanning, there are limits to how much detail can be captured in the darkest and lightest areas areas of an image (due to limitations of the scanner).
The view of levels shows a high population of very dark pixels to the far left of the chart (above). This "peak" found just along the edge of the chart is where clipping has occurred with loss of tonal detail.
Another way of showing this loss of tonal detail is to show just the pixels that are 100% black (above). This photo though, can still be adjust for optimum quality for print production.
The above images was with gray levels adjusted to make the darkest areas of the image to be at about 90% gray (rather than 100%). For the lightest areas of the photo, the levels were adjusted to make them a bit lighter (to compensate for the overly dark highlights in the original). To bring out some of the tonal details in other areas, dodge and burn tools were used, in selected areas, to add contrast and to darken some of the shadows and midtones. In particular, this was to make more noticeable the tonal detail found in the buildings on the right side of the street, some of the roof tops, steeple, hills in the distance, etc. Final touch was to add a bit of sharpening to add some clarity.
~~~Different programs can be used for making these type of adjustments to images. Hopefully what is described here will allow you to make similar refinements using the paint or photo editing program of your choosing.
~~~
Thursday, June 20, 2013
Sharpen Filter
The labeling of this photo editing trick is a bit odd. The term "unsharpen mask" is a term from days when film was shot and darkrooms were used for processing and printing photographs. The name is misleading though I am sure there was a reason for it at the time. Rather than for making something look more "unsharp" (more blurry and out of focus), it is actually for adding more clarity - to make more "sharp" - with details more pronounced rather than less.
Another fascinating aspect of this trick is that it was evident at a much earlier time as seen in the artwork of Spanish Renaissance painter El Greco (a favorite of mine). Rather than having one area of color align cleanly with another area of a different color, the division between the two can appear more distinct (when seen from a distance) through the use of thin bands of different tones and opposing colors. The result being the illusion and perceiving of added clarity - lines of division between areas becoming more pronounced rather than less.
There is obviously a limit to how much clarity can be artificially added. Those TV programs showing photo editing tricks being used for reading license plates from blurry photos take from miles away, are just a bit too good to be true! This being said, this type of "sharpening" is a handy tool and trick to have for improving clarity with images.
~~~
(Image: family photo, corner store in Sinnemahoning, PA.)
~~~
Another fascinating aspect of this trick is that it was evident at a much earlier time as seen in the artwork of Spanish Renaissance painter El Greco (a favorite of mine). Rather than having one area of color align cleanly with another area of a different color, the division between the two can appear more distinct (when seen from a distance) through the use of thin bands of different tones and opposing colors. The result being the illusion and perceiving of added clarity - lines of division between areas becoming more pronounced rather than less.
Original scanned photo lacking focus and clarity.
With a limited amount of sharpening added. Though subtle,
there is some added clarity.
With an extreme amount added. Though drastic in its effect, this example does show how different bands of varying tones are added to bordering areas of shades (such as on porch roof, end of stairs, wall areas around windows, etc.).
Another before and after example, enlarged.
There is obviously a limit to how much clarity can be artificially added. Those TV programs showing photo editing tricks being used for reading license plates from blurry photos take from miles away, are just a bit too good to be true! This being said, this type of "sharpening" is a handy tool and trick to have for improving clarity with images.
~~~
(Image: family photo, corner store in Sinnemahoning, PA.)
~~~
Moire Patterns
Challenges working with patterns and problems with moire (moiré) patterns
The image above shows halftone dots (black, red and blue) overlapping at skewed angles. Depending on the angles, certain visual patterns appear that are often unpredictable and can cause problems. These are called moire patterns, as is evident in the overlapping areas of blue and red dots. The splotchy and uneven blending of blue and red is caused by the how at times blue dots are beside the the red, and at other times they are on top of each other allowing the white to be seen in the voids.
Prior to going too far with a discussion on moire problems, maybe an explanation is needed for the term halftone which is the process of turning continuous tone images into rows of dots. The original photo in this example (below) consists of gradations of grays (continuous tones). Where cameras may recognize shades of gray and colors when capturing images, printing is limited to using only the full strength (100%) of the color of the ink or toner being used. If black ink is used, the illusion of grays come from using a variety of sizes of small spots of black - as a pattern of halftone dots. For print production, this type of conversion is necessary. Desktop printers, such as some laser printers, also show images as halftone dots. (Other laser printers may use very thin horizontal bands of color rather than dots. Inkjet printers, I guess it could be said, also prints with "spots" though this is very different as they are spread in a much more random and seemingly unorganized way.)
Aside from overlapping of halftone patterns, there are many other instances where moire patterns may appear, and at times, may cause problems. The photo (below) shows an unwanted pattern appearing in the areas of brick with "whitish" looking areas that appear to curve upward like multiple little "smiley faces." This too is a moire pattern and is caused by two conflicting patterns. One is with the pattern of rows of red bricks with layers of white mortar between them. The second is with the rows of pixels being used for this digital image. (See Image Types for more on bitmap images.) The overlapping of these two patterns means that in some areas the pixels are being used to mostly show the mortar (appearing more white) and at other times mostly showing the brick (being darker and more red).
In print production, one of the most common instances of moire problems comes from trying to print images that have already been converted to halftone dots. Examples would be with scans of printed pieces (such as photos from newspapers, magazines, printouts from laser printers, etc.). Subsequent posts will be more specific to how to avoid this from happening. One tool though that may be needed, when photo editing, relates to sharpening of images (see Sharpen Filter).
~~~
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.
~~~
Welcome...
In time, we hope to provide some useful information on various graphics related topics. Having been involved with working on many print and web publishing projects for various authors and organizations, many interesting challenges occur which often get clouded by the technical nature of what is involved.
Initially I would like to quickly consider the word "publish" - and to loosely define this as act of "making something available." Limits are not being placed on what this could mean. The content - that which is being "made" - could be anything such as a song, a sentence, a picture, a video, etc. And the means that this is "make available" to others - may vary.
Often though, for us, projects end up being physical books with various characteristics. For this reason, many of the first topics that we hope to cover will relate to print production and some of the challenges involved with preparing something for publishing. Topics may related to: printing methods (such as offset printing with inks verses digital printing with toners); image characteristics and refinements (too many to list briefly here); prep of text (typesetting as it relates to writing, editing, and proofreading); etc.
~~~