MC9237

80
MC9237 GRAPHICS LAB KLNCIT 1 MCA DEPARTMENT K.L.N. College of Information Technology (An ISO 9001:2008 Certified Institution) Pottapalayam – 630611, Sivagangai District. Department of Computer Applications (M.C.A) Lab Manual and Observation MC9237 GRAPHICS LAB Prepared by Mrs.G.Devika, Mrs. B.Seetha lakshmi Academic Year : 2012-2013 Semester : III

Transcript of MC9237

Page 1: MC9237

MC9237 GRAPHICS LAB

KLNCIT 1 MCA DEPARTMENT

K.L.N. College of Information Technology

(An ISO 9001:2008 Certified Institution)

Pottapalayam – 630611, Sivagangai District.

Department of Computer Applications (M.C.A)

Lab Manual and Observation

MC9237 GRAPHICS LAB

Prepared by Mrs.G.Devika, Mrs. B.Seetha lakshmi

Academic Year : 2012-2013 Semester : III

Page 2: MC9237

MC9237 GRAPHICS LAB

KLNCIT 2 MCA DEPARTMENT

K.L.N. College of Information Technology (An ISO 9001:2008 Certified Institution)

Pottapalayam – 630611, Sivagangai District.

Department of Computer Applications (M.C.A)

Lab Manual and Observation

MC9237 GRAPHICS LAB

Academic Year : 2012-2013 Semester : III

Name of the Student :___________________________

Branch :___________________________

Year/Semester :___________________________

Roll Number :___________________________

Register Number :___________________________

Page 3: MC9237

MC9237 GRAPHICS LAB

KLNCIT 3 MCA DEPARTMENT

OBJECTIVES:

The objectives of this lab are:-

• To draw the pictorial data in a easiest way.

• To understand how the properties of different media can be used to process the

digital representation for text, images, audio and video;

• This lab is intended to give students an introduction to graphics and

multimedia systems and an understanding of the concepts of drawing different

shapes and implementing different algorithms. It describe the multimedia data

types, how to handle, store, and transmit multimedia data. It is also aimed to

give the students a chance to build a multimedia application using a

Multimedia Application Development tool.

Page 4: MC9237

MC9237 GRAPHICS LAB

KLNCIT 4 MCA DEPARTMENT

MC9237 GRAPHICS LAB LT P C

0 0 3 2

1. TWO DIMENSIONAL TRANSFORMATIONS:

Creation of two dimensional objects and applying simple transformations like

Translation, Scaling, Rotation and applying composite transformations.

2. THREE DIMENSIONAL TRANSFORMATIONS:

Creation of simple three dimensional objects like cube, cone and cylinder and

applying simple transformations like Translation, Scaling, Rotation and

applying Composite transformations.

3. VISIBLE SURFACE DETECTION:

Finding out visible surfaces and removal of hidden surfaces in simple objects

using object space and image space algorithms.

4. IMAGE EDITING:

Image enhancement, Image transformation from color to gray scale and vice

versa, Image manipulation and Image optimization for web - Usage of editing

tools, layers, filters, special effects and color modes. Creation of simple Gif

animated images with textual illustrations.

TOTAL : 45 PERIODS

Software Required : Turbo C, Adobe Photoshop, Macromedia Flash, Java

Page 5: MC9237

MC9237 GRAPHICS LAB

KLNCIT 5 MCA DEPARTMENT

Index

S.No. Date Name of the Program Page

No.

Signature

with date

FUNDAMENTALS

1. Drawing Basic Shapes

TWO DIMENSIONAL TRANSFORMATIONS

2. Simple Transformations on 2D Shapes

3. Composite Transformations on 2D Shapes

THREE DIMENSIONAL TRANSFORMATIONS

4. Creation of Cube, Cone and Cylinder

5. Simple Transformations on 3D Shapes

6. Composite Transformations on 3D Shapes

VISIBLE SURFACE DETECTION

7. Back Face Detection

8. Depth Buffer Method

9. Scan Line Method

IMAGE EDITING

10 Image Enhancement

11. Image transformation from color to gray scale and vice versa

12. Image manipulation and Image optimization for web

13. Implementation of layers and filters

14. Implementation of special effects and color modes

15. Creation of simple Gif animated images with textual illustrations.

Page 6: MC9237

MC9237 GRAPHICS LAB

KLNCIT 6 MCA DEPARTMENT

Page 7: MC9237

MC9237 GRAPHICS LAB

KLNCIT 7 MCA DEPARTMENT

FUNDAMENTALS

• To Develop Graphics programs in C we need a header file called GRAPHICS.H

and a library file called GRAPHICS.LIB. Include Graphics.h header file in your

Program.

• initgraph() function initializes the graphics mode and clears the screen.

Syntax :

void initgraph(int *graphdriver, int *graphmode, char *pathtodriver);

*graphdriver: Integer that specifies the graphics driver to be used.

*graphmode : Integer that specifies the initial graphics mode

If *graphdriver = DETECT, initgraph sets *graphmode to the highest resolution

available for the detected driver.

pathtodriver : Specifies the directory path where initgraph looks for graphics

drivers (*.BGI)

Example

int gd=DETECT, gm;

initgraph(&gd, &gm, "c:\\turboc3\\bgi " );

• The basic tools we’ll need for drawing shapes are functions like putpixel(), line(),

circle(), ellipse(), arc() and drawpolygon(). The following table list the functions

and its meaning. Before drawing the rectangle we have used two functions

getmaxx() and getmaxy(). These two fetch the maximum x and y co-ordinates for

the chosen graphics mode.

S.No. FUNCTION MEANING

1. putpixel(x1,y1) Points the pixel at ( x1, y1)

2. line(x1,y1,x2,y2) Draws line from (x1,y1) to (x2, y2)

3. circle(xc,yc, rad) Draws a circle with center (xc,yc) and radius rad

4. Rectangle( x1,y1,x2,y2) Draws a rectangle with (x1,y1) and (x2,y2) as corners.

5. Ellipse (xc,yc,start,end,xrad,yrad) Draws an ellipse with (xc,yc) as center with xrad and

yrad as x and y radius. If start is 0 and end is 180 only

the upper half of the ellipse is drawn.

6. Arc((xc,yc,start,end,rad) Draws an arc with (xc,yc) as center, rad as radius and

start and as the starting and ending angles.

Page 8: MC9237

MC9237 GRAPHICS LAB

KLNCIT 8 MCA DEPARTMENT

Example:

line(100,150,200,300);

circle(250,200,30);

rectangle(100,100,300,200);

bar(100,100,150,300);

ellipse(150,200,0,360,40,20);

arc(250,250,0,110,30);

putpixel(350,300);

setcolor(WHITE);

setcolor(100); // Specify a number between 0-255

setbkcolor(BLUE); // Set Background color

POLYGON

The drawpoly() function described with following example.

int array []={ 200,300, 250,200, 300,300, 300,350, 200,350, 200,300}

1 2 3 4 5 6

drawpoly(6,array)

array�ser defined name,

6� No. of coordinate positions

Mention the first and last co-ordinate is same otherwise the diagram is in incomplete.

Page 9: MC9237

MC9237 GRAPHICS LAB

KLNCIT 9 MCA DEPARTMENT

Ex.No. 1 Drawing Basic Shapes

Date Write a C program to draw some basic 2 Dimensional shapes using graphics functions and fill them with different colors.

Page 10: MC9237

MC9237 GRAPHICS LAB

KLNCIT 10 MCA DEPARTMENT

Page 11: MC9237

MC9237 GRAPHICS LAB

KLNCIT 11 MCA DEPARTMENT

Page 12: MC9237

MC9237 GRAPHICS LAB

KLNCIT 12 MCA DEPARTMENT

Page 13: MC9237

MC9237 GRAPHICS LAB

KLNCIT 13 MCA DEPARTMENT

TWO DIMENSIONAL TRANSFORMATIONS

Changes in orientation, size and shape are accomplished with geometric

transformations that alter the co-ordinate descriptions of object. Basic transformation

are translation, scaling and rotation. Other transformations that are often applied to

objects include reflections & shear.

Translation:

A translation is applied to an object by repositioning it along a straight-line

path from one co-ordinate location to another. We translate a two dimensional point

by adding translation distances, tx and ty, to the original coordinate position(x,y) to

move the point to a new position (x’ and y’).

x’ =x+tx and y’=y+ty 1

The translation distance pair (tx,ty) is called a translation vector or shift vector .

we can express the translation equation 1 as a single matrix equation by using column

vectors to represent coordinate positions and the translation vector:

P= x 1 P’= x1’ T= t1

x2 x2’ t2 2

This allows us to write the two dimensional translation equations in the matrix

form:

P’=P+T

Scaling:

A scaling transformation alters the size of an object. This operation can be

carried out for polygons by multiplying the coordinate values (x,y) of each vertex by

scaling factors Sx and Sy. to produce the transformed coordinates (x’,y’):

X’=x.Sx, y= y.Sy 1

P

P’

Page 14: MC9237

MC9237 GRAPHICS LAB

KLNCIT 14 MCA DEPARTMENT

Scaling factor Sx scales objects in the x direction, while Sy scales in y direction.

The transformation equations can also be written in the matrix form:

x’ Sx 0 x

= . 2 or P’=S . P 3

y’ 0 Sy y

where S is the 2 by 2 scaling matrix in equation 2

ROTATION:

A two-dimensional rotation is applied to an object by repositioning it along a circular

path in the x-y plane. When we generate a rotation we get a rotation angle (θ) and the

position about which the object is rotated (xr ,yr) this is known as rotation

point or pivot point. The transformation can also be described as a rotation

about rotation axis that is perpendicular to x-yplane and passes through the pivot

point. Positive values for the rotation angle define counter-clockwise rotations about

the pivot point and the negative values rotate objects in the clockwise direction.

Counterclockwise about the origin, by angle .

Original polar coordinates:

x = r cosφ y = r sinθ

After substitution:

Page 15: MC9237

MC9237 GRAPHICS LAB

KLNCIT 15 MCA DEPARTMENT

SHEARING The effect of a shear transformation looks like “pushing” a geometric object in a

direction that is parallel to a coordinate plane (3D) or a coordinate axis (2D). How far

a direction is pushed is determined by its shearing factor.

In case of 2-D shearing, we have two types namely x-shear and y-shear.

REFLECTION:

A reflection is a map that transforms an object into its mirror image with respect to a

"mirror", which is a hyperplane of fixed points in the geometry.

Page 16: MC9237

MC9237 GRAPHICS LAB

KLNCIT 16 MCA DEPARTMENT

Ex.No. 2

Simple Transformations on 2D Shapes Date Write a program to perform Simple Transformations

Page 17: MC9237

MC9237 GRAPHICS LAB

KLNCIT 17 MCA DEPARTMENT

Page 18: MC9237

MC9237 GRAPHICS LAB

KLNCIT 18 MCA DEPARTMENT

Page 19: MC9237

MC9237 GRAPHICS LAB

KLNCIT 19 MCA DEPARTMENT

Page 20: MC9237

MC9237 GRAPHICS LAB

KLNCIT 20 MCA DEPARTMENT

Ex.No. 3

Composite Transformations on 2D Shapes Date Write a program to perform Composite Transformations

Page 21: MC9237

MC9237 GRAPHICS LAB

KLNCIT 21 MCA DEPARTMENT

Page 22: MC9237

MC9237 GRAPHICS LAB

KLNCIT 22 MCA DEPARTMENT

Page 23: MC9237

MC9237 GRAPHICS LAB

KLNCIT 23 MCA DEPARTMENT

Page 24: MC9237

MC9237 GRAPHICS LAB

KLNCIT 24 MCA DEPARTMENT

Page 25: MC9237

MC9237 GRAPHICS LAB

KLNCIT 25 MCA DEPARTMENT

THREE DIMENSIONAL TRANSFORMATIONS

3D-dimensional polygons are the lifeblood of virtually all 3D computer

graphics. As a result, most 3D graphics engines are based around storing points

(single 3-dimensional coordinates), lines that connect those points together, faces

defined by the lines, and then a sequence of faces to create 3D polygons.

Assume a right handed coordinate system

Points , Vectors

Translation:

Scale:

About the origin

Rotation:

About a coordinate axis

Page 26: MC9237

MC9237 GRAPHICS LAB

KLNCIT 26 MCA DEPARTMENT

Ex.No. 4 Creation of Cube, Cone and Cylinder

Date Write a C program to draw some basic 3 Dimensional shapes like Cube, Cone and Cylinder using graphics functions and fill them with different colors.

Page 27: MC9237

MC9237 GRAPHICS LAB

KLNCIT 27 MCA DEPARTMENT

Page 28: MC9237

MC9237 GRAPHICS LAB

KLNCIT 28 MCA DEPARTMENT

Page 29: MC9237

MC9237 GRAPHICS LAB

KLNCIT 29 MCA DEPARTMENT

Ex.No. 5

Simple Transformations on 3D Shapes Date Write a program to perform Simple Transformations on Three Dimensional shapes

Page 30: MC9237

MC9237 GRAPHICS LAB

KLNCIT 30 MCA DEPARTMENT

Page 31: MC9237

MC9237 GRAPHICS LAB

KLNCIT 31 MCA DEPARTMENT

Page 32: MC9237

MC9237 GRAPHICS LAB

KLNCIT 32 MCA DEPARTMENT

Page 33: MC9237

MC9237 GRAPHICS LAB

KLNCIT 33 MCA DEPARTMENT

Ex.No. 6

Composite Transformations on 3D Shapes Date Write a program to perform Composite Transformations on 3 Dimensional Shapes.

Page 34: MC9237

MC9237 GRAPHICS LAB

KLNCIT 34 MCA DEPARTMENT

Page 35: MC9237

MC9237 GRAPHICS LAB

KLNCIT 35 MCA DEPARTMENT

Page 36: MC9237

MC9237 GRAPHICS LAB

KLNCIT 36 MCA DEPARTMENT

Page 37: MC9237

MC9237 GRAPHICS LAB

KLNCIT 37 MCA DEPARTMENT

Page 38: MC9237

MC9237 GRAPHICS LAB

KLNCIT 38 MCA DEPARTMENT

VISIBLE-SURFACE DETECTION METHODS

To identify those parts of a scene that are visible from a chosen viewing

position surfaces which are obscured by other opaque surfaces along the line of sign

(projection) are invisible to the viewer.

Classification of Visible-Surface Detection Algorithms:

1. Object-space Methods

Compare objects and parts of objects to each other within the scene definition

to determine which surfaces, as a whole, we should label as visible:

For each object in the scene do

Begin

1. Determine those part of the object whose view is unobstructed by other parts of it

or any other object with respect to the viewing specification.

2. Draw those parts in the object color.

End

2. Image-space Methods (Mostly used)

Visibility is determined point by point at each pixel position on the projection plane.

For each pixel in the image do

Begin

1. Determine the object closest to the viewer that is pierced by the projector through

the pixel.

2. Draw the pixel in the object colour.

End

Algorithms which perform visible surface detection are

1. Back Face Detection Algorithm

2. Depth Buffer Method

3. Scan Line Method

Page 39: MC9237

MC9237 GRAPHICS LAB

KLNCIT 39 MCA DEPARTMENT

1. BACK-FACE DETECTION

In a solid object, there are surfaces which are facing the viewer (front faces) and

there are surfaces which are opposite to the viewer (back faces). These back faces

contribute to approximately half of the total number of surfaces. Since we cannot see

these surfaces anyway, to save processing time, we can remove them before the

clipping process with a simple test.

Each surface has a normal vector. If this vector is pointing in the direction of the

center of projection, it is a front face and can be seen by the viewer. If it is pointing

away from the center of projection, it is a back face and cannot be seen by the viewer.

The test is very simple, if the z component of the normal vector is positive, then, it is

a back face. If the z component of the vector is negative, it is a front face.

Note that this technique only caters well for nonoverlapping convex polyhedra.

For other cases where there are concave polyhedra or overlapping objects, we still

need to apply other methods to further determine where the obscured faces are

partially or completely hidden by other objects

2. DEPTH-BUFFER METHOD (Z-BUFFER METHOD)

This approach compare surface depths at each pixel position on the projection

plane. Object depth is usually measured from the view plane along the z axis of a

viewing system. This method requires 2 buffers: one is the image buffer and the other

is called the z-buffer (or the depth buffer). Each of these buffers has the same

resolution as the image to be captured. As surfaces are processed, the image buffer is

used to store the color values of each pixel position and the z-buffer is used to store

the depth values for each (x,y) position.

Algorithm:

1. Initially each pixel of the z-buffer is set to the maximum depth value (the depth of

the back clipping plane).

Page 40: MC9237

MC9237 GRAPHICS LAB

KLNCIT 40 MCA DEPARTMENT

2. The image buffer is set to the background color.

3. Surfaces are rendered one at a time.

4. For the first surface, the depth value of each pixel is calculated.

5. If this depth value is smaller than the corresponding depth value in the z-buffer (ie.

it is closer to the view point), both the depth value in the z-buffer and the color value

in the image buffer are replaced by the depth value and the color value of this surface

calculated at the pixel position.

6. Repeat step 4 and 5 for the remaining surfaces.

7. After all the surfaces have been processed, each pixel of the image buffer

represents the color of a visible surface at that pixel.

3. SCAN-LINE METHOD

In this method, as each scan line is processed, all polygon surfaces intersecting

that line are examined to determine which are visible. Across each scan line, depth

calculations are made for each overlapping surface to determine which is nearest to

the view plane. When the visible surface has been determined, the intensity value for

that position is entered into the image buffer.

Page 41: MC9237

MC9237 GRAPHICS LAB

KLNCIT 41 MCA DEPARTMENT

Algorithm

For each scan line do

Begin

For each pixel (x,y) along the scan line do ------------ Step 1

Begin

z_buffer(x,y) = 0

Image_buffer(x,y) = background_color

End

For each polygon in the scene do ----------- Step 2

Begin

For each pixel (x,y) along the scan line that is covered by the polygon do

Begin

2a. Compute the depth or z of the polygon at pixel location (x,y).

2b. If z < z_buffer(x,y) then

Set z_buffer(x,y) = z

Set Image_buffer(x,y) = polygon's colour

End

End

End

Page 42: MC9237

MC9237 GRAPHICS LAB

KLNCIT 42 MCA DEPARTMENT

Ex.No. 7

Back Face Detection Date Write a program to Detect Visible Surface using Back Face Detection Algorithm.

Page 43: MC9237

MC9237 GRAPHICS LAB

KLNCIT 43 MCA DEPARTMENT

Page 44: MC9237

MC9237 GRAPHICS LAB

KLNCIT 44 MCA DEPARTMENT

Page 45: MC9237

MC9237 GRAPHICS LAB

KLNCIT 45 MCA DEPARTMENT

Ex.No. 8

Depth Buffer Method Date Write a program to Detect Visible Surface using Depth Buffer Algorithm.

Page 46: MC9237

MC9237 GRAPHICS LAB

KLNCIT 46 MCA DEPARTMENT

Page 47: MC9237

MC9237 GRAPHICS LAB

KLNCIT 47 MCA DEPARTMENT

Page 48: MC9237

MC9237 GRAPHICS LAB

KLNCIT 48 MCA DEPARTMENT

Ex.No. 9

Scan Line Method Date Write a program to Detect Visible Surface using Scan Line Method.

Page 49: MC9237

MC9237 GRAPHICS LAB

KLNCIT 49 MCA DEPARTMENT

Page 50: MC9237

MC9237 GRAPHICS LAB

KLNCIT 50 MCA DEPARTMENT

Page 51: MC9237

MC9237 GRAPHICS LAB

KLNCIT 51 MCA DEPARTMENT

Page 52: MC9237

MC9237 GRAPHICS LAB

KLNCIT 52 MCA DEPARTMENT

INTRODUCTION TO ADOBE PHOTOSHOP

Adobe® Photoshop® CS is the professional image-editing standard for

photographers, professional designers, and graphics producers. Photoshop provide a

consistent work environment with other Adobe applications including Adobe

Illustrator®, Adobe InDesign®, Adobe GoLive®, Adobe LiveMotion™, Adobe After

Effects®, and Adobe Premiere®.

DRAWING IMAGES

When you draw in Photoshop, you create vector shapes--mathematically

defined lines and curves. You use the drawing tools to create shape layers and work

paths. Shapes are resolution-independent--they maintain crisp edges when resized,

printed to a PostScript printer, saved in a PDF file, or imported into a vector-based

graphics application. You can use shapes to make selections and create libraries of

custom shapes with the Preset Manager.

In Photoshop, paths are used for making selections and defining areas of an

image. The outline of a shape is a path. Paths are made up of one or more straight or

curved segments. Each segment is marked by anchor points, which work like pins

holding wire in place. You can easily change the shape of a path by editing its anchor

points. The Paths palette helps you manage paths.

� Drawing options A. Shape layers B. Paths C. Fill pixels � In Photoshop, you can quickly select, resize, and move a shape, and

you can edit a shape's attributes (such as stroke, fill color, and style).

Page 53: MC9237

MC9237 GRAPHICS LAB

KLNCIT 53 MCA DEPARTMENT

Working with paths

A path is composed of one or more path components--collections of one or more

anchor points joined by segments. Because they take up less disk space than pixel-

based data, paths can be used for long-term storage of simple masks. Paths can also be

used to clip sections of your image for export to an illustration or page-layout

application.

Managing paths

� When you use a pen or shape tool to create a work path, the new path appears

as the Work Path in the Paths palette. The Work Path is temporary; you must

save it to avoid losing its contents. If you deselect the Work Path without

saving it and start drawing again, a new path will replace the existing one.

� When you use a pen or shape tool to create a new shape layer, the new path

appears as a vector mask in the Paths palette. Vector masks are linked to their

parent layer; you must select the parent layer in the Layers palette in order to

list the clipping path in the Paths palette. You can remove a clipping path from

a layer and convert a clipping path to a rasterized mask.

� Paths saved with an image appear when you open it again. In Windows, the

Photoshop, JPEG, JPEG 2000, DCS, EPS, PDF, and TIFF formats support

paths. In Mac OS, all available file formats support paths

LAYERS AND MASKING

About layers

Layers allow you to work on one element of an image without disturbing the

others. Think of layers as sheets of acetate stacked one on top of the other. Where

there is no image on a layer, you can see through to the layers below. You can change

the composition of an image by changing the order and attributes of layers. In

addition, special features such as adjustment layers, fill layers, and layer styles let you

create sophisticated effects

Page 54: MC9237

MC9237 GRAPHICS LAB

KLNCIT 54 MCA DEPARTMENT

About masking layers

Masks control how different areas within a layer or layer set are hidden and

revealed. By making changes to the mask, you can apply a variety of special effects to

the layer without actually affecting the pixels on that layer. You can then apply the

mask and make the changes permanent or remove the mask without applying the

changes.

There are two types of masks:

• Layer masks are resolution-dependent bitmap images that are created

with the painting or selection tools.

• (Photoshop) Vector masks are resolution independent and are created

with the Pen or Shape tools.

In the Layers palette, both the layer and vector masks appear as an additional

thumbnail to the right of the layer thumbnail. For the layer mask, this thumbnail

represents the grayscale channel that is created when you add the layer mask. The

vector mask thumbnail represents a path that clips out the contents of the layer.

Masking layers A. Layer mask selected B. Layer mask link icon C. Layer

mask thumbnail D. Vector mask thumbnail E. Vector mask link icon F. New

Layer Mask

Create a Greeting card using techniques like Layers and Onion Skin.

Page 55: MC9237

MC9237 GRAPHICS LAB

KLNCIT 55 MCA DEPARTMENT

1. Open a new document

2. Import an image from library

3. Set keyframe in frames

4. Add text

5. Set keyframe in frames

6. Set motion tween for image and text.

7. Repeat steps 2,3,4,5 & 7.

8. Execute.

Develop a Movie clip and play a scene.

a. Open a new document

b. Create image.

c. Convert it to symbol

d. Create a scene.

e. Import the clip from library.

f. Play the scene.

Create an image using layers

When you build an image from different pieces--background color, text,

shapes, and photographs--Adobe Photoshop layers give you complete creative

control. In this tutorial you'll create a multilayered image, apply a layer mask, and

then add a text layer.

1. Open an Image in Photoshop.

Choose File > Open or double-click a thumbnail in the File Browser. By

default, the Layers palette should show. If not, choose Window > Layers. The

Layers palette displays all the layers in your document with the layer name

and a thumbnail of the layer's image.

2. Convert the background layer.

In the Layers palette, double-click the background layer. Click OK in the New

Layer dialog. Converting the background into a regular layer lets you use

transparency in this layer. You can now view or hide the layer using the eye

Page 56: MC9237

MC9237 GRAPHICS LAB

KLNCIT 56 MCA DEPARTMENT

icon. Click the eye icon on a layer. Notice that the icon disappears and the

layer is hidden. Click the empty icon box again. Both the eye icon and the

layer's content reappear.

3. Apply a layer mask.

A layer mask lets you select and display just the part of the image you want to

use, without altering the image. Here we'll mask out all of the image except a

circular area of the flower. Click and hold the Rectangular Marquee tool, and

then select the Elliptical Marquee tool from the pop-up menu. Hold down the

Shift key to constrain the selection to a circle, and then drag an area on the

image. In the Layers palette, click the Add Layer Mask icon.

Now only the area you selected is visible. You can change the visible area by

moving the mask around the image. First click the link icon to unlink the mask

from the layer. Select the Move tool, and then click inside the mask and drag

to reposition it. Once you have your final position, click the link icon to relink

the mask and the layer. Now you can move the layer and the mask will move

with it.

4. Add a stroke effect.

Click the Add a Layer Style button at the bottom of the Layers palette, and

select Stroke from the menu. Choose stroke settings in the Layer Style dialog

box, including color, size, and position of the stroke.

5. Create a new layer.

Click the Create a New Layer button to add a new layer to the image. The new

layer is added on top of existing layers and becomes the selected layer. Click

the Foreground color swatch and select a color with the Color Picker. Select

the Paint Bucket tool (located in the toolbox with the Gradient tool) and click

anywhere in the image to create the fill.

6. Reorder the layers.

Page 57: MC9237

MC9237 GRAPHICS LAB

KLNCIT 57 MCA DEPARTMENT

Click the new layer and drag it beneath the lower layer. Changing the stacking

order of your layers makes certain parts of the image appear in front of or

behind other layers.

7. Add a text layer.

In the Layers palette, click the top layer. Select the Text tool, and then click on

the image. The text cursor appears. In the options bar, change text size, font,

style, or color to your liking. When you add text, Photoshop automatically

places it on its own layer, where you can edit it separately from the rest of the

image. To edit the text, select it with the Text tool, and then change any of the

settings in the options bar. To move the text, select the Move tool and then

drag the text.

8. Add an effect to the text.

Click the Add a Layer Style button and select Drop Shadow from the menu.

You can change the color or angle of the shadow or make other adjustments in

the Layer Style dialog box. In the Layers palette, the layer effect shows under

the layer name. You can turn display of the layer effect on or off by clicking

the eye icon next to the effect.

Image Enhancement Using Photoshop 1) Open any image which needs improvement in Photoshop.

2) Create a new empty layer , as seen in the image below.

Page 58: MC9237

MC9237 GRAPHICS LAB

KLNCIT 58 MCA DEPARTMENT

3) Now activate the background layer and select the whole image. Copy the image

and paste it in the empty layer you have created in previous step.

4) Now set the blending mode for the layer 1 to screen, in Adobe Photoshop. As

shown in the image below.

5) Now adjust the layer fill up to your satisfaction, as shown in image below.

6) Now you just have to adjust color on your image using color balance option in

Photoshop. Click on Image + Adjustments + Color Balance

Page 59: MC9237

MC9237 GRAPHICS LAB

KLNCIT 59 MCA DEPARTMENT

7) Flatten the layers And you are done. Also, if you need high variation of contract in your image , than you can repeat the step 4-5 and this time, choose blending mode -

"color dodge" (again adjust the fill).

BLENDING FILTER EFFECTS

The Fade command changes the opacity and blending mode of any filter,

painting tool, erasing tool, or color adjustment. The Fade command blending modes

are a subset of those in the painting and editing tools options (excluding the Behind

and Clear modes).

Applying the Fade command is similar to applying the filter effect on a

separate layer and then using the layer opacity and blending mode controls.

Note: The Fade command can also modify the effects of using the Extract command,

Liquify command, and Brush Strokes filters.

Page 60: MC9237

MC9237 GRAPHICS LAB

KLNCIT 60 MCA DEPARTMENT

To fade the effect of a filter, painting tool, or color adjustment:

1. Apply a filter, painting tool, or color adjustment to an image or selection.

2. Choose Edit > Fade. Select the Preview option to preview the effect.

3. Drag the slider to adjust the opacity, from 0% (transparent) to 100%.

4. Choose a blending mode from the Mode menu

5. Click OK.

Note: The Color Dodge, Color Burn, Lighten, Darken, Difference, and Exclusion blending modes do not work on Lab images

Selecting a blending mode

The blending mode specified in the options bar controls how pixels in the image are

affected by a painting or editing tool. It's helpful to think in terms of the following

colors when visualizing a blending mode's effect:

1. The base color is the original color in the image.

2. The blend color is the color being applied with the painting or editing tool.

3. The result color is the color resulting from the blend.

Blending effects before and after is given below

Before Blending Filter Effects After Blending Filter Effects

IMAGE OPTIMIZATION

To reduce the size of an image by reducing the number of colors or reducing the color

palette size, removing comment blocks and redundant pixels, eliminating local color

Page 61: MC9237

MC9237 GRAPHICS LAB

KLNCIT 61 MCA DEPARTMENT

palettes in an animation in favour of a global color palette, cropping frames in an

animation so that each frame only stores information that is unique to that frame, etc.

Basic Image Optimization – Global

It will be necessary to adjust the overall Density (brightness/darkness), Contrast

(difference between lightest and darkest areas), Color Balance, Saturation level as

well as Black & White conversion of the image. This can be accomplished two ways:

1. Image > Adjust > Levels | Curves | Color Balance | Hue/Saturation | Black &

White

2. Layer > New Adjustment Layer > Levels | Curves | Color Balance |

Hue/Saturation | Black & White

In utilizing the Image > Adjust > option, once the density, color balance, saturation

level and/or black & white conversion has been adjusted, it is not possible to make

further adjustments without causing image deterioration.

In utilizing New Adjustment Layer > for Levels | Curves | Color Balance |

Hue/Saturation | Black & White, you can go back to the specific Adjustment Layer

and make additional adjustments without any image deterioration, though the file size

will increase when saving the image with Adjustment Layers.

.Levels

Page 62: MC9237

MC9237 GRAPHICS LAB

KLNCIT 62 MCA DEPARTMENT

Levels are utilized to adjust overall density (brightness/darkness) in an image. Either

using the sliders or the eyedroppers can set the dynamic range. Proceed to use the

middle slider for overall desired tone.

Use the eyedroppers to set the lightest and darkest areas of the image. In the Levels

dialog box, hold down the option key and slide the white point slider. First areas to

show will be the lightest areas. Release the slider where it is appropriate. Proceed to

do the same with the black point slider and release where it is appropriate.

The grey eyedropper is color correction tool.

To further modify the white and black point settings, double-click the white

eyedropper, which will open the color picker window and set HSB to 0/0/96 for the

white point and 0/0/4 for the black point. In general, output devices have difficulty

holding detail at 0% and 100% so backing off a little will preserve tonal information

at the highest and lowest points of the image.

.Curves

Curves, which is similar to the characteristic curve with analog sensitometry, is used

to adjust not only the overall density (brightness/darkness) of an image, but also

Page 63: MC9237

MC9237 GRAPHICS LAB

KLNCIT 63 MCA DEPARTMENT

contrast (difference between brightest and darkest areas), allowing for both global and

local manipulation of tones. Begin by setting the highlights and shadows, and then

adjust the shape of the curve to modify contrast.

In order to maintain a “natural” look to the images, it is essential to keep the curve

smooth while preserving the angle of ascent at all times. If a point to the right is lower

than a point to the left, the image will begin to solarize.

Color Balance

Color Balance is used to adjust the overall color of an image.

When the Color Balance adjustment window is opened, three sliders will appear. The

sliders are relative and work just like the subtractive color process with analog color

printing. When cyan is removed, red is added and so forth with the other colors. Each

of the sliders can be used to affect color in the shadows, midtones and highlights of an

image. Learning how to color balance is subjective and intuitive.

Global changes in color can also be made with Levels or Curves and/or by using the

different Channels (red, green and blue).

Hue/Saturation

Hue/Saturation is used to transform color as well as affect the overall purity of a

color. It is not used to correct color balance, but rather enhance the appearance of

Page 64: MC9237

MC9237 GRAPHICS LAB

KLNCIT 64 MCA DEPARTMENT

color. When selectively adjusting the saturation or hue of certain color ranges of an

image, it is important to understand that this will affect the overall color balance and

dynamic range of the image.

.

Black & White

Black & White provides for grayscale conversion of a color image as a separate

adjustment, allowing for a single file to be used | printed as both color and grayscale.

Sliders for individual color channels can be mixed for refined black and white tonal

adjustments.

Page 65: MC9237

MC9237 GRAPHICS LAB

KLNCIT 65 MCA DEPARTMENT

.

Basic Image Optimization – Local

In may be necessary to enhance the density in specific areas of your image. This can

be accomplished with the Burn and Dodge Tools, which are located in the Tool

Options bar. The Burn Tool is used to add density in a specific area of the image,

while the Dodge Tool is used to reduce density in a specific area of the image. To

utilize either tool, you will need to go to the toolbar at the top,

1. Select a Brush, and

2. Select the Exposure, which is determined in percentages (a lower percentage

provides lower exposure or intensity compared to a higher percentage). Use the

mouse to control how the tool is utilized in a specific area of the image.

Retouching with Clone Stamp Tool As there will be scanning imperfections and dust

marks in your image, it will be necessary to utilize the Cloning Tool, which is located

in the Toolbox. Just like the Burning and Dodging Tools, you will need to select a

Brush from the Tool Options bar. In addition, insure that the Mode is set at Normal,

the Opacity is set at 100% and that the Aligned box is checked. If you have utilized

Adjustment Layers, it will be necessary to utilize the Cloning Tool on the Background

Layer or preferably on a separate Duplicate Background Layer with all the

Adjustment Layers above turned off.

To use the Cloning Tool, place the Cloning Tool in an area of similar tone that you

want to duplicate. Hold the down the Option Key and click once with the mouse. The

Cloning Tool is now activated to duplicate that tone. Move to the area of the image

being retouched and click the mouse. The + symbol marks the area being duplicated.

Page 66: MC9237

MC9237 GRAPHICS LAB

KLNCIT 66 MCA DEPARTMENT

Save Image with Adjustment Layers

So as to make density and color adjustments to your image file at a later date, it’s

important to save your image file with adjustment layers. Do not Flatten Layers. Save

image file as .psd

ANIMATION

A simulation of movement created by displaying a series of pictures, or

frames. Cartoons on television is one example of animation. Animation on computers

is one of the chief ingredients of multimedia presentations. There are many software

applications that enable you to create animations that you can display on a computer

monitor.

Note the difference between animation and video. Whereas video takes

continuous motion and breaks it up into discrete frames, animation starts with

independent pictures and puts them together to form the illusion of continuous

motion.

Types of Animation

• Character Animation – humanise an object

• Highlights and Sparkles

• Moving Text

• Video – live video or digitized video

Page 67: MC9237

MC9237 GRAPHICS LAB

KLNCIT 67 MCA DEPARTMENT

Create Frame by Frame Animation using multimedia authoring tools

1. Open a new document.

2. Draw an image.

3. Set keyframe in frames.

4. Draw the image with different styles

5. Set keyframe for every image.

6. Execute

Develop a Screensaver using translations, rotation and scaling.

1. Open a new document

2. Import an image from library

3. Set keyframe in frames

4. In the menu select rotate and transform.

5. Repeat steps 3 & 4 in the multiple layers.

6. Execute.

Page 68: MC9237

MC9237 GRAPHICS LAB

KLNCIT 68 MCA DEPARTMENT

Ex.No. 10

Image Enhancement Date Develop an Application for Enhancing an Image.

Page 69: MC9237

MC9237 GRAPHICS LAB

KLNCIT 69 MCA DEPARTMENT

Page 70: MC9237

MC9237 GRAPHICS LAB

KLNCIT 70 MCA DEPARTMENT

Ex.No. 11

Image transformation from color to gray scale and vice versa Date 3. Develop an Application for Image transformation from color to gray scale and vice versa.

Page 71: MC9237

MC9237 GRAPHICS LAB

KLNCIT 71 MCA DEPARTMENT

Page 72: MC9237

MC9237 GRAPHICS LAB

KLNCIT 72 MCA DEPARTMENT

Ex.No. 12

Image manipulation and Image optimization for web Date Design an Web page using an Image which optimized and manipulated.

Page 73: MC9237

MC9237 GRAPHICS LAB

KLNCIT 73 MCA DEPARTMENT

Page 74: MC9237

MC9237 GRAPHICS LAB

KLNCIT 74 MCA DEPARTMENT

Ex.No. 13

Implementation of layers and filters Date Develop an application for implementing layers and filters.

Page 75: MC9237

MC9237 GRAPHICS LAB

KLNCIT 75 MCA DEPARTMENT

Page 76: MC9237

MC9237 GRAPHICS LAB

KLNCIT 76 MCA DEPARTMENT

Ex.No. 14

Implementation of special effects and color modes Date 3. Perform special effects and apply color modes in an image.

Page 77: MC9237

MC9237 GRAPHICS LAB

KLNCIT 77 MCA DEPARTMENT

Page 78: MC9237

MC9237 GRAPHICS LAB

KLNCIT 78 MCA DEPARTMENT

Ex.No. 15

Creation of simple Gif animated images with textual illustrations . Date Develop an animated application with textual illustrations.

Page 79: MC9237

MC9237 GRAPHICS LAB

KLNCIT 79 MCA DEPARTMENT

Page 80: MC9237

MC9237 GRAPHICS LAB

KLNCIT 80 MCA DEPARTMENT