Images and Graphics -- Their Creation, Editing, and Javascript & Java Applications |
Email JPEG images use a lossy image compression algorithm that trades off some loss of information against better storage and bandwidth. The resulting image quality is acceptable when it is later uncompressed and the viewer does not percieve that the image has lost information,. JPEG images can be made to be very compact and still have quite acceptable appearance to the human eye. JPEG was as it name suggests designed to support photographic images, i.e. images with many colors and soft gradual changes in shade, color, and light/dark. JPEG compression will degrade if it used on images with shape well defined lines, edges, and few colors. Repeated compression and decompression of JPEGs can lead to artifacts that may be undesirable. In the better paint and image processing programs have techniques to repair these artifacts should they appear . The reader should be aware that the GIF is really the file format of choice for low color, line drawings, and other computer graphics such as borders,.
Read the following tutorials and print it out for reference during the exercises.
Transparency:
The GIF 89 standard also supports transparency. The concept is quite simple one color from the 256 colors used in the image is defined as the background color (remember that a GIF image is reduced to at most 256 unique colors). This background color is chosen to be transparent, i.e. it acts as if a hole appears in the image an allows the viewer to see the HTML's background color or image to be seen through the hole. The background color should be chosen or set in such a manner as to not be found in the opaque part of the image. Otherwise part of the desired image will appear to be missing when rendered by the browser.
 |
| Property | GIF | JPEG | PNG |
| colors |
256
|
16.7M
|
16.7M
|
| versions | GIF 87 GIF 89-- Transparency, interlace, animation |
JPEG JPEG Progressive supports interlace |
supports 2-d interlace |
| Compression | lossless --works best with horizontal lines and low colors | lossy works best natural images, soft edges and color changes, etc. Uses a quality index 10 is high to 1 low. | lossless -- compression is up to 30 % better than GIF |
| Transparency | one color only | multiple colors | |
| Browser support | Almost all | Almost all | Only on newer versions, i.e. Netscape 4 or later and IE 5 |
CMYK is a color model for the printing of images using the four inks
(cyan,
magenta, yellow, and black). This normally involves creating four
overlays
of the image one for each ink. Each pixel on a layer, say Cyan, is a
value
from 0 to 255. Zero is the abscence of the color and 255 is full value.
CMYK is not for display of a web image and is not often encountered in working with images on the web. Ideally your web page's colors on the computer screen and the pages printed by a good should match. The printer ink's used in high quality gloosly magazines that contain high resolution photos as in fashion magazines is a mixture of science and art.
There are several popular software tools for creating and editing imagines. These tools are generally called paint or image processing programs. These two areas used to be very distinct and clearly defined. Graphics or paint packages were used by computer aided drafting and design and originally, paint programs were used to create diagrams and charts. Image processing was used in photographic, medical, and publishing fields with the goal of improving or visualizing complex data. The advent of cheap powerful computers and very low cost storage volumes has seen the tools introduced in applications that were not envisioned even ten years ago. This in turn has seen the high graphics programs take on many image processing functions to the point where is difficult for the lay person to understand theses entities as separate fields. With the rapid introduction of digital cameras, web cams, and scanners one can expect to see video and multi media capabilities migrating into these packages in the near future.We shall use a popular shareware package called Paint Shop Pro. The current version is Paint Shop Pro 8 (PSP 8) which comes with a software tool called AnimationShop 3. Animation Shop 3 is integrated into PSP 7 and makes creating animated images and banners relatively easy. If after this course you decide to continue to use the tool (about 30 days from now), it has a reasonable price. PSP 8 or its competitors gives the user many capabilities for creating images, animations, and banner texts.
Exercise developed by Elsie Wheeler, class 2000, used with permission |
| Task | Description | Method |
| Resize | Change the size of the image | |
| Flip | Roatate the image about the horizontal axis (reverse
top/bottom) or about the vertical axis (reverse left to right or right to left) |
|
| Rotate | Rotate about an arbitary axis | |
| Histogram | Histogram is the frequency of color or shade (gray scale) | |
| Cropping Process | Example |
| Simple: Rectangular Crop | |
| Create a Selection with the Select Tool Crop to Fit the Selection |
|
Colorization is the process of taking black & white photos and adding color to them. Before the advent of color film it was common practice to colorize photos by having people paint or tint the photo by hand.
so you want to a photograph!
Paint Shop Pro by Jasc Software is an easy tool to help you colorize any b/w photograph.
Follow these easy instructions and soon you will be able to impress your mom!
First you need a black and white photo. If you dont have one, or dont have time to scan one... just lift one off the net for this first experiment. I found this one at rorymcleod.com
Make/Find your own picture and save it on your disk. You can click here for a head start.
This is Dave Peabody.Then open your picture in Paint Shop Pro.
Change your Color Depth to 16 million colors.
From the menubar: Colors > Increase Color Depth > 16 Million Colors.Your color pallet should change--
Make your first selection. I usually pick the the most prominent feature to color first. In this case, I selected the face area. It doesnt matter if you get some dark areas in your selection, but make sure you subtract the whites of the eyes and teeth. (They dont look good when they are pink.)
from this... 
to this...
If you need tips on making a good selection click here for details.
Once you have a selection, promote the selection to its own layer. Selections > Promote to Layer.
Make sure you are on the promoted layer. If the annoying box is not visible, make it visible by typing the lowercase letter L on your keyboard.
You can open this pallet and lock it open by clicking the arrow on the title bar. (All of the tool pallets can be moved by 'drag and drop' using the title bar.)
Now for the tricky part. Paint Shop Pro has a memory. Not just multiple levels of 'undo' but each tool that you select from the tool bar on the left 'remembers' the style and texture and the colors that it last used. Every time you click a new tool the colors and other settings change, without you changing them. This was very frustrating to me until I caught on to it... but there is even a better way... I just this very moment noticed a little check box under the options that says 'Lock' next to it. A little experiment proved my inkling correct. If you check the box, ALL, yes ALL, the frustration ends. No flipping, no switching, no unexpected surprises. Your options and colors remain set until you change them!
Try it.... set both the styles to the solid color option and textures to the circle with slash through it, then check the 'Lock' box.
To get the fly-out option selector make sure your mouse is over the little right-pointing arrow on each of the option boxes. The option boxes for Textures aren't nearly so complex.... just two choices, texture or null. Set your's-- so Styles are solid and Textures are null. (btw-- if you did have Texture rather than null you could click in the center of the option box to activate the pop up pattern window-- same as with the Style patterns.
- The left most option is shaped like a brush. This is the solid color option.
- The next one to it is the gradient.
- The right most is a null option.
- What are the dots? It is a pattern fill...Once you have that option selected click on center of style box and another popup pattern window opens. You can then select the pattern you want to use. Just for kicks, we will use this technique on Dave's hat to see how it works.
Notice the Color Pallet has two color boxes above it.The left box is controlled by the left mouse button, and the right box is controlled by the right mouse button. The left box is called the foreground color and right box is the background color. (If you erase or delete an area the background color replaces that which you are removing.)
Select a color by placing your mouse over the color pallet (pointer changes to eyedropper) and select a dark dark skin tone. Remember to left click to change the foreground color box.
Then select the paint can (flood fill) from the tool bar on the left.
If any of your options or colors change, you forgot to check the 'Lock' box located below the color pallet and options.
Then fill the selection with a dark red or orange or pink color. (Remember, you are on the promoted layer.)
Now you use the slider on the Layer pallet. Use the slider associated with the Promoted Layer...Slide it back to at least 30, but adjust it as you see fit (often 20 or even a lower number looks natural and fine.).
Next I will color Dave's blue jean jacket. Because the promoted layer has only the face on it I cannot make the selection where I am. (Well I can-- but in order to promote the selection I have to be on the layer where the image actually exists-- so technically, I can make the selection, anywhere I can see the image and then switch to the background layer to promote the image to a layer-- but thats too complicated for me-- I'll just go back to the background layer now.)
To go to the background layer, In the Layer pallet, click on the background layer.
Make a new selection, promote it, fill it, slide back the slide bar (color saturation slider)...
As you may have noticed, some things don't need to be colorized. Dave Peabody's eyes and teeth and hair look great the way they are. There are only four more things to colorize in this photo. Hat, earring, door, background...just a moment...
Here is a finished colorized photo:
Remember, a pattern was used to fill Daves hat. The pattern is 'Crackled Emerald' and it looks pretty good. The edges aren't perfect, but that's ok...it's just an experiment.
If you have a special effects filter to apply, you need to flatten all the layers you have created.
Just for fun the 'Pastel' filter was applied from the filter package Virtual Painter by Jasc Software.
The picture is saved as a gif, but you can use jpg if you want to. Finish your picture and post it on your web site. Have fun, be adventurous, color everything!
By Elsie Wheeler used with permission
|
Paint Shop Pro, version 8.0
Well, you are in luck! Because I am going to tell you how to do it. Exercise Three covers:
Select the shape tool (from the tool pallet to the left of your window).
Choose a shape from the tool options pallet.
Draw a shape on the canvas. To draw a shape, click your mouse above and to the left of where you want your shape to appear. Hold the mouse button as you pull the cursor down and to the right. When the shape is the size that you want, release the mouse button.
Notice the center node with attached handle. Place the cursor over the center node and watch it change to a cross hair with four outward pointing arrows; you can then 'click and drag' to move the shape around the canvas to position where you want to. You can rotate your shape, by using the 'handle' attached to the center node. Rotate your shape. Place the cross hair on the node at the end of the handle. The shape of the cursor will change to show a pair of arrows shaped in a circle.
You can now click and drag the handle and spin it in either direction. Release the mouse button when your shape is rotated to the position that you want it.
Now select the text tool.
Set your text options on the tool options pallet
Make sure that the 'Create As' select box is set for 'Vector'. The font color is set with the materials options pallet (use the lower right box; See Exercise One).
Place your cursor along the edge of your shape (the actual shape, not the dashed lines of the bounds). Your cursor will change it's shape to a cross hair with the letter 'A' dangling off the lower right quadrant when it possible to attach text to the shape (aka object).
Click the shape when you have your cursor positioned where you want the text to begin on the shape (and you can see the cursor appears as above). A text entry box will appear and you will type your text into the box.
As
you type,
the text will begin to appear around your shape. Sometimes you
have
to add spaces inter-word or extra space between words so that the text
is readable around corners.
As you can see, simply by saving the file at this point, does not remove the shape object from the the 'shaped' text. And doing a simple copy on the selected text and pasting into a new window, does not work either. Evidence
(this was
'shaped' text that was copied to a new image; as you can see it
flattened
out):
The 'shaped' text must be converted to 'Curves', so that the shape of the text can be preserved, and the shape object can be deleted. Convert text to curves now. From the menu bar, use Objects > Convert Text to Curves > As Single Shape.
The easiest way to select the object is to deselect the current selection. Use <ctrl>D or select from the menu bar Selections > Select None. Now select the object selector from the toolbar.
The easiest way to select the object rather than the text is to go at it from the oposite side that the text is planted on. If the shape is on a closed path shape such as a circle go for the object from the inside of the shape. When the crosshair is touching the line of the shape click. The selected object will switch to the shape rather than the text. Usually you will notice a change in the size of the selection, which will confirm that you have correctly selected the shape object. Select the shape object. Delete the shape. You can use the 'Delete' key from the keyboard. If you have forgotten to convert the text to curves, your text will flatten out when the shape object has been deleted (if that happens just click the undo button, or <ctrl>Z and convert it, etc). Now crop
and save
your image as a gif (See Exercise One).
The next step in this exercise is to place text on an open vector path. Open a
new canvas.
Set:
Width = 300 pixels; Height = 300 pixels; Resolution = 72 pixels/inch;
Select the pen too from the tool bar to the left of the windowl.
From the tool options pallet,
make sure the 'Create as vector' and the 'Simple Mode' checkboxes are checked.
Select the 'freehand' segment type from the tool options pallet.
Place your cursor over the canvas and draw a line (Click the mouse button and continue holding while drawing the cursor across the canvas).
From this point on the directions to create text on the path isidentical to creating text on a shape. Select the text tool.
Set your text options on the tool options pallet
Make sure that the 'Create As' select box is set for 'Vector'. The font color is set with the materials options pallet (use the lower right box; See Exercise One).
Place your cursor along the edge of your path. Your cursor will change it's shape to a cross hair with the letter 'A' dangling off the lower right quadrant when it possible to attach text to the shape (aka object).
Click the path when you have your cursor positioned where you want the text to begin on the shape (and you can see the cursor appears as above). A text entry box will appear and you will type your text into the box.
As
you type,
the text will begin to appear along your path. Sometimes you have
to add spaces inter-word or extra space between words so that the text
is readable around curves When you are satisfied with your text click 'Apply'. Simply by saving the file at this point, does not remove the shape object from the the 'shaped' text. And doing a simple copy on the selected text and pasting into a new window, does not work either. Evidence
(this was
'shaped' text that was copied to a new image; as you can see it
flattened
out):
The 'shaped' text must be converted to 'Curves', so that the shape of the text can be preserved, and the shape object can be deleted. Convert text to curves now. From the menu bar, use Objects > Convert Text to Curves > As Single Shape.
The easiest way to select the object is to deselect the current selection. Use <ctrl>D or select from the menu bar Selections > Select None. Now select the object selector from the toolbar.
The easiest way to select the object rather than the text is to go at it from the oposite side that the text is planted on. If the shape is on a closed path shape such as a circle go for the object from the inside of the shape. When the crosshair is touching the line of the shape click. The selected object will switch to the shape rather than the text. Usually you will notice a change in the size of the selection, which will confirm that you have correctly selected the shape object. Select the shape object. Delete the shape. You can use the 'Delete' key from the keyboard. If you have forgotten to convert the text to curves, your text will flatten out when the shape object has been deleted (if that happens just click the undo button, or <ctrl>Z and convert it, etc). Now crop and save your image as a gif (See Exercise One).
The last lesson for this exercise to integrate two existing objects. That is apply existing vector text to an existing vector object (shape or path). Many of the instructions are identical to previous tasks. Open a
new canvas.
Set:
Width = 300 pixels; Height = 300 pixels; Resolution = 72 pixels/inch;
Select the shape tool (from the tool pallet to the left of your window).
Choose a shape from the tool options pallet.
Draw a shape on the canvas. To draw a shape, click your mouse above and to the left of where you want your shape to appear. Hold the mouse button as you pull the cursor down and to the right. When the shape is the size that you want, release the mouse button. Now, use the text tool to create a vector text object on canvas.
As you can see the shape object and the text object are comletely separate. It so happens that the text object is selected but it could just as well be the shape object. Now select the object selector from the toolbar.
Hold shift key and click on the vector shape object. The selection will expand to include the shape object.
From the menubar select 'Objects>Fit Text to Path'.
You may notice that your text doesn't quite look right on your shape or your path. At this point you can open the text entry box and make necessary adjustments.
Select the text tool.
Place the cursor over the text. When the cursor changes to a cross hair with 'A' in brackets like so: [A]. You can now click and the text entry box will open. And now you can adjust the text that appears in the box. The text as it appears on the path will be adjusted accordingly. (If you have not correctly selected the text object, you will see either an empty text entry box and text typed in will apply another text object, or if the 'Remember text' check box is checked a duplicate object will appear in your image. If that happens, just click cancel and try again.)
It is also an excellant opportunity to fix spelling mistakes! Again, instructions from this point are nearly identical to previous tasks. Before attempting to convert the text to curves, deselect the current selection. Use <ctrl>D or select from the menu bar Selections > Select None. Now use the object selector to select the text object alone.
Convert text to curves now. From the menu bar, use Objects > Convert Text to Curves > As Single Shape. If you have trouble converting as a single shape (my version of PSP crashes when I convert to a 'Single Shape' after applying a text object to a shape obect this way--), just convert the text object 'As Character Shapes' instead.
The easiest way to select the object is to deselect the current selection. Use <ctrl>D or select from the menu bar Selections > Select None. Now select the object selector from the toolbar.
The easiest way to select the object rather than the text is to go at it from the oposite side that the text is planted on. If the shape is on a closed path shape such as a circle go for the object from the inside of the shape. When the crosshair is touching the line of the shape click. The selected object will switch to the shape rather than the text. Usually you will notice a change in the size of the selection, which will confirm that you have correctly selected the shape object. Select the shape object. Delete the shape. You can use the 'Delete' key from the keyboard. If you have forgotten to convert the text to curves, your text will flatten out when the shape object has been deleted (if that happens just click the undo button, or <ctrl>Z and convert it, etc). Now crop and save your image as a gif (See Exercise One).
|
http://psptips.com/6/phoman/
Burned edges, merged images, torn photos: http://psptips.com/4/phoman/index.html
Please read the following Animation Tutorial Lessons 1-2:
Web Monkey Animation Tutorial http://hotwired.lycos.com/webmonkey/multimedia/animation/tutorials/tutorial1.html
http://animation.about.com/library/weekly/aa090498.htmThere is a variety of so called Java Lake applets the following uses overlays in an interesting manner. This tutorial and example is a classic. See: http://members.home.net/spring2/laketips.html
A page using the concept of animating words to convey their meaning.
See The Windy : http://www.cs.uml.edu/~pkrolak/lab9/animations.html
| Some Constrasting Student Approaches to Create an Animation Using the Little Alien | |
 |
 |
 |
 |
http://www.cs.uml.edu/~pkrolak/lab9/twitchyPMAlliet.html
Here we only show the the twitch:
Some Student Work is here without attribution.
| Note: PSP 7 has changed the GUI with regard to capture:
|
| Machine/OS | Method |
| Windows 95 98 NT 2000 | Hit [Alt][PrintScreen] This places the image into the Clipboard. Open PSP and create a new file, i.e. [File]/New and Paste |
| MAC | Comand-Shift-3 and it will be saved to your hard drive. |
Step 2 Design a Ws-FTP tutorial for this course:
Use PSP to screen capture of the initial Ws_FTP login dialog box:
Step 3 The Student will capture the images needed for a Ws-FTP
Tutorial
Step 4 The Student will write and put the images into the tutorial.
An introduction to scanning tutorial.
An alternative source is to use:
Failing to have access to digital image the student may use the
following image or one taken from the web (Make sure the image is not
copyrighted or
its use is otherwise restricted).:
 |
 |
Using the Black and White photo above, or one of your, own pick one
of
the processes and apply it to the chosen images.
The student should create at least use 3 or 4 different images. These images may use either text and a background. For purposes of stimulating an idea, take a word(s) and make an animation of the word(s) that illustrates the word(s) meaning, e.g. cold, windy, wet, humid, stormy.
Using PSP's Animation Shop, create an animated gif.
| Click [File]/Jasc Software Products/Launch Animation Shop |
Attempts at creative art is encouraged.
A simple example of for this exercise -- but not very
artistic one might be the 3 hotair 1-3 gif's
 |
 |
 |
 |
 |
 |
The
little alien is made by playing the three images above.
Select Text and created the word button in yellow. While text was still
selected, I selected Image/Special effects/Add Drop Shadow. The
Image/Special Effects/Buttonize give the 3-d border. Using Text again
with a red and Image/Special Effects/Cut out. Save as Button1.gif
Select Deformations/skew and Deformations/wind this gives a wind blown
effect. Save as button2.gif
<HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META NAME="Author" CONTENT="Pat Krolak"> <META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (WinNT; I) [Netscape]"> <TITLE>Magic Button --Twitchy button exercise.</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--- hide script from old browsers // browser test: // preload images: twitchybutton = new Image(400,80); twitchyb2 = new Image(400,80); } function hiLite(imgDocID,imgObjName)
{ // end hiding ---> <CENTER> <OL> <BR>I created two buttons to create an effect called
twitchy
buttons. <BR><A HREF="Your_Web_URL_Here"
onMouseOver="hiLite('img01','button1')"
onMouseOut="hiLite('img01','twitchyb2')"> </BODY> |
|
<applet code=Lake.class id=Lake width=WWW
height=HHH> <param name=image value="Your_Image.gif"> <param name=overlay value="Your_overlay.gif"> <param name=href value="#"> </applet> |
Replace the values in RED with their real values and real file names:
As alternative to the lake applet try the snow applet to create a
New England
winter scene.
See http://members.home.net/spring2/snows.html
If either the snow or the lake applet do not appeal, then select one of
the
others and place it on your web site.
| Open your index.html page in Composer | Counter based on this page's counts |
Steps:
|
Visitors Since Nov.11, 2000 -- |
| Important Note: It is absolutely essential that you :
Check -- Leave image
at
the original location |
CMYK -- The four color (Cyan, Magenta, Yellow, blacK) model used in printing. The inclusion of the separate Black ink guarantees that the inks will print a crisp black color.
dithering --
HSI -- Hue Saturation Intensity
anti-aliasing --
raster graphics -- bit mapped images
RGB -- Red Green Blue
vestor graphics --
transparency --
Artist Resource: http://www.artistresource.org/wdesign.htm
©P.D.Krolak &M.S. Krolak, 2000-1
Email
