CMPF 124:Basic Skills for Knowledge Workers IMAGE & IMAGE EDITING

  • Published on
    03-Jan-2016

  • View
    216

  • Download
    0

Embed Size (px)

Transcript

  • CMPF 124:Basic Skills for Knowledge WorkersIMAGE & IMAGE EDITING

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Chapter Overview

    ObjectivesWhat is Image?Capturing & Editing ImagesImage Editing Tools

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*ObjectivesEnable the students to understand the definition of imageEnable the students to understand the processes involved in producing imageProvide the students with some general background to the techniques and systems

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*IntroductionA picture is worth a thousand words; this statement describes that no matter how innovative your interface design, how sophisticated your programming, the public face of your multimedia application and the major make-or break factor is your graphics and images. Your potential customer will able to make an instant judgment for better or for worse through the first impression on the screen.

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*What is Image?

    Term DefinitionClickable image map A map or other graphic that has "hot spots" or hyperlinks. A user can click on a spot on the map or graphic and link to more detailed information. Clickable image An image that, when clicked on, sends some instruction to the computer. Client-side image map An image map in which the map that relates parts of the image to different URLs is stored in the current file.

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Clickable image map Used to create sensitive clickable images that respond to the area of the image the user click on.Created by mapping the different areas of an image using the x,y coordinates.The coordinates are recorded as circles, squares, rectangles etc.Each objects coordinates are assigned a URL that is to be linked when they are selected.http://geoimages.berkeley.edu/GeoImaGes/BainCalif/CalClickMap.html

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Client-side image mapImagemaps which do not have to make a separate call to the server to determine what URL should be returned to the browser.The coordinate/URL correlations are kept in the HTML coding of the page itself.After clicking on the image, a request for the correct URL is immediately sent to the server, this method loads the page quicker and uses less system resources in the process.

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*What is Image? (cont.)

    Term DefinitionImage editing Making changes in an image. Image format A format in which an image can be stored and used. Some formats, such as TIFF and PICT.Image map A map or other graphic in an HTML document that has "hot spots" or hyperlinks.

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*What is Image? (cont.)

    Term DefinitionImageA picture. Images on the computer are usually represented as bitmaps (raster graphics) or vector graphics. Image editor A program that can be used to make changes in computer graphics. Image filter A tool for modifying images in paint and photo editing programs.

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Example of image editorAdobe Photoshop, Corel Photo-Paint, Paint Shop Pro, GIMP, and Paint.NET.

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*ColorsProperly used, color can be a powerful tool to improve the usefulness of an information display system. The inappropriate use of color can seriously reduce the performance of such a system, however. Gerald Murch 1984 Color is a vital component of multimedia Picking the right colors and combinations of colors for your project can involve many tries until you feel the result is rightColor frequencies - carry pleasant, unpleasant, soothing, depressing, and many other special meanings

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Colors (cont.)Green, blue, yellow, orange, purple, pink, brown, black, gray, and white are the ten most common color-describing words used in all human languages and cultures

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Computerized ColorThe eyes receptors are sensitive to red, green and blue light, the combinations of these three additive primary colors, the eye and brain will interpolate the combinations of colors in between. Refer to the table

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Computerized Color (cont.)

    RGB Combination Perceived Color Red only Red Green only GreenBlue onlyBlueRed and Green YellowRed and Blue MagentaGreen and Blue CyanRed, Green and Blue WhiteNoneBlack

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Image File FormatThere are two common types of file formats:Vector graphics Made up of lines and curves defined by mathematical objects called vectorRetain their crispness whether they are moved, resized, or have their color changedVector graphics are appropriate for illustration, type and graphics such as logos that may be scaled to different sizes

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Image File Format (cont.)Bitmap images Based on a grid of colors known as pixels Each pixel is assigned a specific location and color valueAppropriate for continuous-tone images such as photograph or artwork created in painting programsDisadvantage of bitmap graphics is that they contain a fixed number of pixels

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Image File Format (cont.)There are many file formats which can be used to store bitmaps and drawingMost of the image editing application offers a Save As option that lets you write files in other common format such as JPEG (JPG), TIFF (tif), GIF, PCX and etc.

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Example of image formatJPEG(joint photographic experts group) supports 8 bits per color red, green and blue for 24 bit total GIF (Graphic interchange format) is limited to an 8-bit or 256 colors.Suitable for storing graphics with relatively few colors such as simple diagrams, shapes, logos and cartoon style images.

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Making Still ImagesStill images may be small or large, or even full screenThey may be colored, placed at random on the screen, evenly geometric or oddly shapedWhatever their form, still images are generated by the computer in two ways: as bitmaps and a vector-drawn graphics

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Making Still Images (cont.)The image you see on your monitor is a digital bitmap stored in video memory, updated every 1/60 second or fasterAs you assemble images for your project, you may often need to capture and store an image directly from your screenThe simplest way to capture what you see on the screen is to press the proper keys on your computer keyboard

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*How to Capture an Image?Macintosh the keystroke combination COMMAND-SHIFT-3 creates a readable PICT2-format file named Picture and places it in your active disk drives root directory. You can then import this files image into your multimedia authoring system or paint programFor Windows press PRINTSCRN, a copy of your screens image goes to the Clipboard. From the Clipboard you can then paste the captured bitmap into an application such as Paintbrush or Adobe Photoshop or other editing tools

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*How to Capture an Image? (cont.)Image-editing tools allow you to alter and distort images. The figure 2.1a shows a full screen image of Yahoo website was captured using Adobe Photoshop. Using the Press-Screen command you can capture any image into your screen.

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*How to Capture an Image? (cont.)This figure below shows the edited image

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Image Editing ToolsImage editing applications are used for enhancing and retouching existing bitmapped imagesThese applications also provide features and tools of drawing and painting programs and can be used to create images from scratch as well as images digitized from scanner, digital cameras, clip-art or original artwork files

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Image Editing Tools (cont.)Here are some features typical of image editing applications and of interest to multimedia developers:Multiple windows, which provide views of more than one image at one timeConversion of major-image data types and industry-standard file formatsDirect inputs of images from scanner and video sourcesEmployment of virtual memory scheme that uses hard disk space as RAM for images that require large amounts of memory

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Image Editing Tools (cont.)Capable selection tools, such as rectangles, lassos and magic wands, to select portions of a bitmapImage and balance controls for brightness, contrast, and color balanceGood masking featuresAnti-aliasing capability controls for precise adjustment of color balanceColor-mapping controls for precise adjustment of color balanceTools for retouching, blurring, sharpening, lightening, darkening, smudging, and tintingGeometric transformations such as flip, skew, rotate, and distort, and perspective changesAbility to resample and resize an image

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Image Editing Tools (cont.)24-bit color, 8- or 4-bit indexed color, 8-bit gray-scale, black-and-white, and customizable color palettesAbility to create images from scratch, using line, rectangle. Ellipse, paintbrush, pencil and other toolsMultiple typefaces, styles, and sizes, and type manipulation and masking routinesFilters for special effect such as crystallize, dry brush, watercolor, wave and etc.

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Example: PaintBrush ToolTools Editing toolsFillPick colorDraw pencilAirbrush LinesShapesEraserCanvasColor paletteZoomingBrushText

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*How to draw using Paintbrush?To draw freehand, select the brush tool, then move to the palette and click once with the left button to choose the ink, (click with the right button to define the color of the background)If you are using clip art or scanned images, they may need to be resizedYou can set the size of the canvas (Click the Image Attribute Command) but you cannot resize an existing image in Paintbrush

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Editing Image using PaintBasic steps: To duplicate part of an image. Refer to figure Open the image file using File-OpenClick on editing/cutting toolsMove the pointer to one edge of the image to be duplicated, hold down the right button and trace around itWhen you have finished, release the right mouse buttonSelect the Edit-Copy command to copy the section of the image to the clipboardSelect Edit-Paste command and youll see a duplicate image appear at the top leftDrag the new image into position

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Editing Image using Paint (cont.) a. Open imageb. Outline the area

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Editing Image using Paint (cont.) c. Copy imaged. Paste image

    CMPF124: Basic Skills for Knowledge Workers

  • CMPF124: Basic Skills for Knowledge Workers*Editing Image using Paint (cont.)e. The result

    CMPF124: Basic Skills for Knowledge Workers

  • The EndCMPF 124: Basic Skills for Knowledge Workers

    CMPF124: Basic Skills for Knowledge Workers