Downloadable
Lesson Files:
A series of sprites that can be used for gaming.
Zip
file or Sit
file
A series of buttons created in Flash.The .fla and .swf files
are included.
Zip
file or Sit File
Looking for some "prerolled" and "precoded" Director
buttons?
Zip
file or Sit
File
The Glass Wall is an 89-page .pdf document that
follows the redesign of the BBC's home page.
Zip
file or Sit
File
The process starts with assessing the image - both the original and the on-screen image - and deciding what must be done to achieve optimal results. The following steps will guide you through the process:
1. Identify the “key type” of the image
2. Adjust the highlights and shadows
3. Adjust the midtones and fine-tune the contrast
4. Correct the colour balance
5. Apply Unsharp Masking
6. Convert to CMYK and fine-tune the corrections.
Follow steps 1 through 6 (as appropriate) for each image in the folder. ONLY WITH PRACTICE AND REPETITION WILL YOU DEVELOP MARKETABLE FIREWORKS MX SKILLS.
The quickest way to determine the key type - tonal distribution - is to look at how the image’s pixels are distributed throughout the image. This is done through the use of a HISTOGRAM.
A Histogram is a graphic representation of the tonal range (Shadows, Midtones, Highlights) of an image. The Histogram is not a tool - it is a graphical readout showing you the tonal distribution within the image in a bar graph. The best you can do with a histogram is to click/drag the mouse across the curve to examine pixel distribution.
1. Open an image
2. Select Effects,Colour Balance, Levels.
A high key image shows pixels grouped in the highlights .
A low key image shows pixels grouped in the shadows.
A mid key image shows pixels grouped in the mid tones.
Your first step is to identify the highlights and shadows and give them values that improve the overall tonal range. This is called Setting the White and Black Points.
By assigning values to these points you are essentially redistributing the pixel values in order to ensure maximum detail throughout the image. This is also far more precise than simply adjusting the brightness and the contrast. When you set the White Point, you are selecting a pixel (or group of pixels) which should be completely white. It is important that you identify the whitest pixel(s) in the document when you do this, for you are telling Fireworks MX that this pixel IS the whitest pixel in the document.
Any pixels which are whiter than the selected white point will be CLIPPED. This means that the clipped pixels SHOULD get brighter, but they won't because it is impossible to store a value that is higher than the maximum allowable value. Think about it - if you select a pixel which is, say 50% black (grey), as your white point, then it will become 0% black (white) as a result of setting the white point. This would make your entire image considerably brighter as your 50% grey becomes white, your 51% becomes 1%, your 52% becomes 2% and so on. But what happens to pixels that are already brighter than 50% before you select the white point? They should be even WHITER than 0%, but that's impossible. So they ALL become 0%. What if there was some detail in the image in the highlights? All that detail will be destroyed by your actions, having been clipped during the white point selection. So spend some time searching for a truly white pixel before setting the white point.
This may appear to be relatively simple but what you are trying to do is to select a neutral white as your white point.
Be careful lest you select a white pixel that contains a bit of colour information - an imbalance in the red, green and blue channels. If you do this, Fireworks MX will force a change in the colour balance of the image. Look at it this way: if you were to select a completely RED pixel as your white point, the R channel would remain unchanged (R:255 is already the maximum red value.) The BLUE and GREEN channels, however, would have to completely changed, so that whatever level of green and blue would attain THEIR maximum values. That is an extreme example, but you must beware pixels that are not NEUTRAL in colour when selecting your white and black points, unless a colour shift is desired to improve the overall quality of the image.
1. Open an image.
2. Double Click the EYEDROPPER on the Tool Palette.
3. Change the SAMPLE SIZE to 3 by 3 Average.
The eyedropper tool is used to SAMPLE colours from your image. By clicking on any area of your digital document, the eyedropper tool checks the colour of the pixel(s) underneath its hotspot. That colour is then transferred to the Foreground colour swatch. Setting the sample size tells the eyedropper tool whether it will be picking a colour from a single pixel, or choosing a mixture of the colours of a group of neighbouring pixels. At higher resolutions, chances are, you'll want to average out the colours more (as you won't be looking at individual pixels, anyway) - this means setting the sample size to larger values at higher resolutions.
4. Close the palette.
5. Effects, Adjust Color, Levels
6. Select the White Point Eyedropper.
7. Click on the white pixel identified earlier.
8. Select the Black Point Eyedropper.
9. Click on the black pixel.
Note how the sliders move and the histogram updates itself immediately.
Setting white and black points using the eyedroppers in the Levels Dialog box.
Having set the tonal range, you may need to increase or decrease the image’s contrast.
1. In the Levels dialog box, drag the white triangle in the Input levels to the left.
Let’s assume you have set the white point value to 234. What you have done is to give all of the pixels - regardless of colour - having a greyscale level between 255 and 235 the new value. The effect of dragging the slider is to darken those pixels and give the remaining whites a bit more tone. You can also brighten the shadows by dragging the black output slider to the right.
1. Drag the black triangle in the Input levels to the right.
Let’s assume you have set the black point value to 10. What you have done is to give all of the pixels regardless of colour- having a value between 0 and 9 the new value. This technique tends to redistribute the pixels, producing a darker image with more contrast. You can also brighten the shadows by dragging the white output slider to the right.
The White Triangle and the Black Triangle set the Brightness and Contrast.
This step adjusts the gamma. Gamma measures the contrast of the pixels in the mid-tones. The gamma slider is the grey slider in the middle, under the input levels histogram and moving it will tend to brighten or darken the mid-tones without affecting your previous adjustments. Note: Moving the shadow or highlight sliders will also result in a corresponding move of the gamma slider.
1. Open the Levels controls on the Property Inspector.
2. Click/Hold the middle- Gamma- slider and move it to the right or to the left.
The Gamma slider adjusts midtone values and contrast.
All images tend to have a colour cast. This is a colour that dominates an image, or a colour toward which all other colours in the image have been modified. The next step, is to remove a colour cast.
1. Examine the image to identify the cast. (We’ll assume it is green.)
2. Select the eyedropper tool.
3. Place the tool in the mid tone area containing the cast.
4. Click to select the colour.
5. Click the chip on the tool bar and open the RGB values for the colour.
The objective, regardless of technique, is to give all three colours an equal value that creates a neutral grey. If there is a cast one number will predominate. Eg: Red = 125, Green= 125, Blue= 156. In this case, the blue channel (#3) is stronger. As long as this imbalance is not related to the specific pixel being sampled, but rather is a phenomenon common to pretty much all the pixels in the image (they're all a little too blue) then you can adjust only the Blue channel using the Levels dialog box, to attempt to compensate for this colour cast.
A cast is identified by sampling a midtone colour and finding which one is predominant.
6. Open the Levels.
7. Open the Channel with the colour cast from the Channels Pop Down Menu (CMD/CTRL-3).
8. Move the gamma towards the highlights - this darkens (reduces) the green in the mid-tonal regions.
9. Click OK.
Select a colour channnel and move the midtone slider to remove a colour cast.
The term GAMMA comes from video, and refers to a neutral, 50% black.
Adjusting the Gamma slider in the Levels dialog box tells Fireworks MX which level will become the 50% density level. Adjusting the slider to the left will LIGHTEN the midtones.
Moving the gamma slider to, say, the 75% mark will tell Fireworks MX that all pixels whose density measured in at 75% should now become 50% density pixels. That's 25% brighter. Tones brighter and darker than the chosen density level will also be affected similarly. The change in density drops off approaching the shadow and the highlight regions.
Unsharp masking (USM) tends to bring a photo into focus. Unsharp masking (usually applied globally) locates the areas in your image where strong colour changes occur and “sharpens” them by increasing the contrast between the affected pixels. This is a dangerous step in that the amateur will see USM as a means to bring an out of focus picture back into focus. Nothing could be further from the truth.
1. Effects: SHARPEN: UNSHARP MASK
2. Use the slider or enter a number in the Amount Box (1-500)
The AMOUNT BOX values are percentages and the higher the number the more drastic the change.
3. Enter a radius value or use the slider.
RADIUS determines how far out from the edge of the changes ( 1 pixel to 250 pixels) the filter will go.
4. Enter a Threshold value or use the slider.
THRESHOLD defines when the change in contrast will occur. Low values have a very pronounced effect.
High values are very subtle.If you have a low resolution image - 72 to 300 dpi- an amount of 150 with a radius of 1 pixel and a Threshold of between 2 and 20 works well. Higher resolution files can tolerate an amount of up to 200 providing the radius remains at 1 pixel.
The Unsharp Masking Filter (USM) is applied to the image.
The image after the colour correction steps are applied.
Not all images require extensive colour adjustment. Sometimes, there exists a colour cast within the image which modifies all of the colours within the photograph. Other times, specific areas of the image are unbalanced; these areas can be manually selected (with the lasso tool, for instance) and locally adjusted.
Colour balance pits the additive primaries against their subtractive counterparts. It should be no surprise to you by this time, to find Red opposite Cyan, Green oppostie Magenta, and Blue oppostie Yellow; these complementary colour pairs form the perfect limits for three scales which can be used to adjust the colour balance within an image.
The key to successfully colour correcting an image is developing the eye for it.
When we select a colour channel in Fireworks MX and move the sliders in the levels dialog box we are either adding or subtracting a colour (or colour component) from the entire selected area. In fact, we are actually doing both - whenever you take one colour component away, or reduce the amount of that component, you are also "adding" its complementary opposite. Subtracting red from an area comes to the same as adding cyan. The closer a colour is to red, the further it is from cyan, so the effect - in fact, the actual mathematic process - is the same. However, the decision-making process can take advantage of this duality to aid you in forming a conclusion about what must be done to an image.
While the mathematical process is identical, sometimes we perceive the need to add a colour to an image rather than take a colour away. Other times, the reverse is true, and we perceive too much of one colour - a colour which must be subtracted from the image. As you work through the following images, take the time to ask yourself whether you see the need to add or subtract a colour.
The LEVELS dialog box is a fascinating and extremely powerful adjustment tool in Fireworks MX, but it is
also one of the most complicated to use. Learning how to use levels to correct an image is a lot like learning how to snowboard - hard to learn, easy to master. If you memorize a few simple rules, the rest should just fall into place.
Levels correction is used primarily to increase image contrast and tonal detail in certain tonal regions, leaving other tonal regions virtually untouched. But levels can also be used to correct colour casts and reestablish a colour balance to the image. It all depends on whether you are adjusting the levels on a composite scale or on individual R, G or B channels.
Let's review what you know about histograms. It's the fundamental basis for understanding how the levels dialog box functions. A histogram is basically a bar graph, representing pixel distribution according to tonal density in an image. When the histogram is made, Fireworks MX evaluates every pixel in the image and records its density value. It then plots this pixel somewhere on the graph - the bar in the histogram at that density level gets a little bit taller. Say pixel #1 has a density value of 128 (or 50%); Fireworks MX notes that (so far) there is 1 pixel in the image at that level of density. Pixel #2 also reads in at 50%, so Fireworks MX notes that there are 2 pixels in the image at 50%. Pixel #3 comes in at 75%, so now Fireworks MX notes that there is 1 pixel at 75%, 2 pixels at 50% and so on. By the end of this process, each pixel has been accounted for, and Fireworks MX now knows just how many pixels read in at each of the 256 levels available. At this point, it builds a bar graph. The height of the bars represent the number of pixels, and the location of the bars on the graph (horizontally) indicate the density level each bar represents. The higher a bar, the more pixels in the image there are at that level. The highest bar in the graph shows the density level at which the most pixels were read in. A level with no bar (a gap) show you that there are NO pixels anywhere in the document at that level - this is a mighty good indication of Big Trouble in Imageland.
Though the histogram tells you a whole lot about TONAL DISTRIBUTION within the image, it doesn't tell you anything about WHERE the pixels are located in the document - there is no spatial relationship between the bars on the graph and the location and arrangement of those pixels in the image.
However, you can use a histogram to determine if the image is acceptable for print, whether it needs to be corrected, and what tonal regions are deficient or too concentrated.
All the images should be evaluated, adjusted and then re-evaluated. You will learn not only from the levels adjustment process, but by looking at a new histogram of the adjusted image. The histogram you see in the levels dialog box does not change (unless you use AUTO LEVELS - Not Recommended - DANGER! DANGER!), until after you click OK. BE CAREFUL, however - once you re-invoke the dialog box you won't be able to UNDO your last correction. Follow these steps (you can skip the AUTO portion after trying it once) for all the images in this assignment. Repeat a few times and compare your results. Again, only practice will develop the eye.
When you do this assignment, look for patterns in the shape of the histogram and the adjustments you have made to correct the image. Eventually, you will discover that for 80% of the images you will encounter, the histogram itself gives you the clues as to how to adjust the image, without the need to actually refer to the document on-screen. This is one of the main advantages to using a histogram- you can correct an image properly even if your monitor is uncalibrated or just plain wrong.
This is the recommended method
1. Open Frisco.tif
2. Open Levels
3. Click/Drag the Black Slider in Input Levels to the start of the black side of the histogram. Hereyou are trying to position the Black Point slider (NOT the Black Point eyedropper, mind you),to where you see the first spike or bar in the shadow regions. In a good quality image, the first bar should start at or around the first density level in the graph (255 - 250 or 100% - 97%). In an image which needs correction, you will find there is a large gap between the lowest density level and the start of the first bar. This would indicate missing tonal regions in the darkest shadows. Moving the Black Point slider compensates for this, by forcing the pixels that previously rang in at a higher density level to be REMAPPED to begin at 100% and go from there.
4. Repeat with the white slider.
5. Note the change and reset the image by clicking the CANCEL button.
Adjustments can be made by simply using the sliders in the levels Dialog Box.
THOUGH THE BUTTON IS THERE, ITS USE IS NOT RECOMMENDED. THIS EXERCISE LETS YOU GET IT OUT OF YOUR SYSTEM BEFORE WE MOVE ON.
1. Click Auto.
2. Note the change. (Notice any colour shifts that might occur as well!)
3. Enough said.
4. Reset.
1. Cancel Levels
2. Double click the eyedropper in the Toolbox
3. Set the sample to a 3X3 Average
4. Open Levels
5. Click the Black eyedropper
6. Click on a black area
7. Click the white eyedropper.
8. Click on a white area.
9. Note the changes
10. Reset
11. Double Click the Black eyedropper
12. Set the Brightness value to between 4 and 20
13. Click a black area
14. Double Click the White eyedropper
15. Set the Brightness value to between 80 and 96
16. Click a white area.
17. Note the changes.
18. Move the gamma slider to adjust the midtones.This is the middle slider in-between the White and Black point sliders along the bottom of the histogram. This slider determines which level will be remapped to 50% density. If you move the slider to the left (toward the shadows), you will be remapping darker levels up to 50%, brightening the image. Conversely, if you move the slider to the right, you will be remapping lighter pixels down to 50%, and darkening the image. Note that this slider moves when you adjust White Point/Black Point as well, to remain centered between the two extremes.
19. Save and rename the image.
20. Open the original and compare them side-by-side.
Caveats
First, you will find it is both faster and more accurate to manually adjust the sliders rather than choose either of the two automatic methods shown above. Auto levels will attempt to clip your image to maximize contrast - but this method does not necessarily maximize image rendering. In fact, you will find if you print an image that has been auto levelled, you will run into a whole world of hurt, in terms of an "over-contrasty" printed piece.
The White Point/Black point eyedroppers are good tools, but they do two things which might be undesirable:
1. They increase the chance of LEVEL CLIPPING, explained in a moment.
2. They adjust the R, G and B channels (or the CMYK channels) individually, not as a composite.
This means that you will get a shift in the colour balance of the image as a result of using these tools, unless you spend a lot of time hunting down a pixel with a neutral colour value. It's precisely this sort of thing that proves the First Law of Fireworks MX Physics : "For every action, there is an equally opposite and ugly implication." ...but that's why we love Fireworks MX, isn't it?
Level Clipping falls under the category of "nasty things that Fireworks MX does to us that we hate." (Category 244, Fireworks MX Physics). It is one of the necessary evils of working in a digital environment - because we're not in the real world, everything has a numerical value, and those numericalvalues must be stored inside the computer's memory. But there's this funny thing about memory - it takes a fixed amount of memory to store a certain amount of information. In other words, the software must decide beforehand the maximum and minimum limits of the data that can be stored in any given memory location. This is what we are getting at when we talk about things like BIT DEPTH.
Bit depth tells us how much memory is allocated to each pixel. The more memory each pixel gets, the more variation (colours) you can have in your images.
If we had a bit depth of ONE, then we would only be able to cram one piece of information into that pixel. Actually, it's really one of TWO pieces of information: YES or NO (ON or OFF, 1 or 0). An image that is composed of pixels that can only be on or off is called a BITMAP - these are very hard-edged, jaggy-looking monstrosities that need to be sampled at extremely high resolutions to look good in print.
If we increase our bit depth to TWO, then all of a sudden, there are four pieces of information we can store in that pixel - any number between 0 and 3 (that's four numbers, if you count 0). What good is a number between 0 and 3 going to do us? Don't forget that the value inside a pixel doesn't have to look like anything, it must represent something. In this case, those numbers could represent four different colours. When Fireworks MX encounters a pixel with a value of 0, it might paint that pixel black, 1 - green, 2 - orange, 3 - teal. Now, understand that we're not talking about mixing amounts of black, green, orange and teal here à la CMYK - we're talking about individual DISTINCT colours.
You're basically painting with four different colours and that's it. You will almost never encounter 2- bit documents, unless you're developing for the Web or really really low-end multimedia where the necessity for small file sizes outweighs the aesthetic restrictions of working with only 4 colours.
Things start to get interesting when the bit depth hits 8-bit. All of a sudden there are 256 different values that we can work with. In some documents (called INDEXED COLOUR) this translates into 256 different colours at our disposal. That's a far cry from the four colours we saw in the two-bit document,but it's still not really enough for high-quality print reproduction. It is, however, acceptable for many multimedia and internet projects. In fact, a lot of you may still have monitors (and video cards) which are only capable of displaying 256 colours, and so you'll never know the difference. (HINT: for good Fireworks MX work, get your video card - or VRAM on the Mac - upgraded at once).
There's another thing you can do with an 8-bit document: instead of using each of the 256 values to represent a different colour, we can make the values a SCALE of a single colour. This is the case with greyscale and monotone documents, greyscale being the type that you are familiar with at this point.
Now you have 256 different SHADES of black (from 100% - Black, to 0% - White) to work with.
At this stage, CLIPPING can creep in. The maximum value for a pixel is 255, the minimum value is 0. Any time we try to get a pixel to record a value that is higher than the max or lower than the min value, the value will be CLIPPED to the max or min value. This will occur with colour and levels corrections, but let's use increasing image Brightness as a simpler example.
Say you jack the brightness of an image up 50 points. You're telling Fireworks MX to go through each pixel in the document and increase its brightness level by 50. A pixels that reads in at 100 will become 150, a pixel that was 0 will now be 50 and so on. But what about those pixels that are already higher than 205? If a pixel reads in at, say, 210, increasing its value by 50 points should bring it to 260, but the highest allowable value is 255. The pixel gets CLIPPED to 255, just like the
sound from your stereo when you set your recording levels too high.
So far it doesn't sound like much of a problem - but it is, it is. Say you had two pixels, one at 210 and the other at 225. That's 15 points of contrast between those pixels - enough contrast to hold an important piece of detail. It's contrast between neighbouring pixels that forms image detail anyway, isn't it? Now if we increase the brightness and clip off both pixels to 255, there is no longer any contrast between them. They both clock in at 255 - white, and they look exactly the same. Where before we had two pixels at different values, forming some image detail, we now have two identical pixels blown out to white, sitting around on their digital butts (so to speak).
Level clipping = loss of detail and image quality degradation. How do you avoid this? A good rule is: always use the MINIMUM ADJUSTMENT NECESSARY TO CORRECT YOUR IMAGE. Clipping is almost inevitably bound to occur, but you can try to control it by working as minimally as possible.
This is the fastest way to destroy document information. The Black point represents the level which will be remapped to 100% density. If the black point is not touched, then no remapping will occur, because you're basically telling Fireworks MX "100% = 100%." Fireworks MX's not complaining - less work for it.
If you slide your black point slider to the right (it won't go to the left of 100%), you will be remapping lighter and lighter tones to 100%. If you set the slider to 99%, then 99% pixels will become 100%, 98% pixels will become 99% and so on. The entire image will darken slightly. The further you move that black point slider, the higher your chances of clipping. Say you slide it up to 80%. You're remapping pixels that used to be 80% down to 100%; 79% becomes 99%, 78% becomes 98% and so forth, in a sort of convoluted logarithmic curve (for those of you that are mathematically inclined).
But what happens to pixels that were previously 81%? if 80% = 100%, 81% should become 101%, but that's impossible for the computer to store... so all dots darker than 80% will be CLIPPED to 100%, causing a huge loss of shadow detail.ONLY MOVE THE BLACK POINT SLIDER WHEN THE HISTOGRAM SHOWS YOU THAT THERE IS NO INFORMATION AT DARKER TONAL LEVELS THAN THE ONE TO WHICH YOU'RE REPOSITIONING THE SLIDER. Look at your bars - you can slide that black point slider as far as the first bar from the left without any level clipping. After that, you take your image quality into your own hands.