LAB # 7

Introduction to the Multimedia software

Objective

 Introduction to basic multimedia tools using adobe Photoshop.

Theory

Multimedia is media and content that uses a combination of different content forms. This
contrasts with media that use only rudimentary computer displays such as text-only or traditional
forms of printed or hand-produced material. Multimedia includes a combination
of text, audio, still images, animation, video, or interactivity content forms.
Multimedia is usually recorded and played, displayed, or accessed by information
content processing devices, such as computerized and electronic devices, but can also be part of
a live performance. Multimedia devices are electronic media devices used to store and
experience multimedia content. Multimedia is distinguished from mixed media in fine art; by
including audio, for example, it has a broader scope. The term "rich media" is synonymous
for interactive multimedia. Hypermedia can be considered one particular multimedia application.
Types of Multimedia

1. Static-------Photoshop
2. Dynamic----------Flash

Adobe Photoshop is a graphics editing program developed and published by Adobe Systems.
Adobe Photoshop is the premier photo editing software tool available. Whether you are working
on a webpage, PowerPoint presentation, or a document to be printed, Photoshop can be used to
enhance your images. In this lab we will learn about image file types, cropping images,
compositing (putting several images together), ghosting images (for use as webpage
backgrounds), using layers, creating masks, applying filters, and formatting text with bevels and
other effects.

1. Create original artwork

2. Design graphics for a webpage or website
3. Make "ghosted" images that can be used as the background for webpages
4. Correct flaws and imperfections in a photograph
5. Create a photo collage: a composition made up of several different photos
6. Create a deceptively realistic photo that is not real
7. Alter photographs
8. Design smashing layouts

1
Adobe Flash (formerly called "Macromedia Flash") is a multimedia and software platform used
for authoring of vector graphics, animation, games and Rich Internet Applications(RIAs) which
can be viewed, played and executed in Adobe Flash Player. Flash is frequently used to add
streamed video or audio players, advertisement and interactive multimedia content to web pages,
although usage of Flash on websites is declining.
Flash manipulates vector and raster graphics to provide animation of text, drawings, and still
images. It allows bidirectional streaming of audio and video, and it can capture user input via
mouse, keyboard, microphone and camera. Flash applications and animations can be
programmed using the object-oriented language called Action Script. Adobe Flash Professional
is the most popular and user-friendly authoring tool for creating the Flash content, which also
allows for automation via the JavaScript Flash language (JSFL).

The Photoshop Screen

Below is a screenshot that shows what Photoshop looks like. Move your mouse over each section
to see what the different areas are called.

Application Bar - The top of the screen holds common tools that you would use in any situation.
You can change your Workspace from here as well (currently set to 'Essentials'). On the right
side is the "X" to close the application (or you can click on the "Ps" icon to the left as well), and
the other buttons to minimize or shrink the window that program is using.

Menu Bar - This area holds all drop down menus. For example, if you want to see a list of
filters, click on the "Filters" tab to see a complete list of filters that are installed. Many of the
options you'll use are in these menus. For working with photographs, the Image menu will be
used extensively.

2
Option Bar (below the Menu Bar) - this area changes depending upon which tool is being
used. In this example, the Zoom tool is active, so you will see various options related to zoom,
shown.

Toolbar (in this case, on the left side of the image and lists all of the tools) - the toolbar
contains the most common tools and is usually kept on the screen at all times.

Workspace (the space in which your image is located) - This is where the action takes place. It
contains the design or photo that you are working on. You can vary the size of the workspace
window, zoom in or out, add guides for placement, etc. You'll also hear this referred to as the
Image Window.

Filename (Located across the top of the Work Space window)- This bar shows the file you
are either working on, or if you have multiple files open, each file will have a title bar tab so that
you don't get confused.

Ruler (located on the top and left side of the Workspace Window) - you have the option of
turning the rulers on or off (Ctrl +R), but if they are on you can choose different units such as
pixels or inches by "Right Clicking" in the ruler bar. These are handy when creating designs that
require specific sizes or spacing. You can also "Click & Drag" a guideline from the ruler bar
and place it anywhere on the page or change the measurement starting point by "Clicking &
Dragging" from the upper left corner of the ruler. The visibility of these can be turned on and off
by navigating to "View> Show> Guides" from the "Menu Bar". You can lock them into place
from the same drop down menu.

Windows - Windows contain tools that give you control over the image. Some examples of
Windows are Layers, Colors, Character and History. These aren't really tools like you see in the
toolbar, but offer you complete control over the image and settings. These will be covered in
more depth as they pertain to the later tutorials. These Windows can be docked (fixed in place)
or floating (moved to any area of the screen).

So those are the basic parts of the screen, the later tutorials will refer to them from time to time
so it's good if you get to know them.

Working with Images

From the WINDOW menu, make sure LAYERS and NAVIGATOR have checkmarks beside
them. These are floating palettes that are in the bottom right and upper right corners of the screen
by default.

These basic techniques will help you view and navigate around within an image in Photoshop:

3
1. Select a Layer

1. In the Layer palette (lower right corner) click on a layer to selected it.

2. The layer will be blue when selected:

2. Hide / Show a layer
1. Click on the eye ( ) next to a layer to hide it.
2. Click on the same box (which will be empty when the image is hidden) to show the
layer again.
3. Use the Navigation Palette to zoom in/out and move around in a zoomed

image
4. Resize the displayed window
1. Click on the lower left corner of a Photoshop window and hold down the mouse
2. Drag the corner to resize the window
5. Move contents of a layer with the MOVE tool
1. Select the layer containing the content you want to move or reposition (hide/show to
find it).
2. Click on the move tool (arrow tool) in the upper left corner of the toolbar (left side of
the screen):
3. Click and drag on the layer to move it as desired.

Creating New Images

After opening Photoshop, set your preferences for images.

1. Choosing EDIT - PREFERENCES - UNITS AND RULERS

4
2. Select pixels for the Rulers unit:
3. By making this preference setting, Photoshop will by default ask you how many PIXELS
wide and high you want a new image to be when you create it.

Next, choose FILE - NEW. Specify the height and width of the new image. For your first image
make it 450 pixels wide and 300 pixels high:

As a rule of thumb for webpage images, use a maximum width of 450 pixels. If you make
images too wide, they will not completely be displayed if a web visitor's screen size is set to 640
x 480, or their browser window is small.

RESOLUTION

 Resolution is how many pixels (dots) are included in a defined measurement. Often dpi
(dots per inch) are used as a unit of resolution.
 Basic guidelines for resolution:
o For screen display (PowerPoint) and webpage work: Use 72 dpi
o For graphics that will be printed: Use 300 dpi

INDEXED COLOR is used for GIF images. This format is limited to a 256 color palette. The
fewer the colors contained in the palette, the smaller the file size.

CMYK and other image modes are used extensively by commercial print shops, who must have
precise "color separations" for their printers.

Image File Types

5
Whenever you save a file in Photo Shop, you can choose the FILE FORMAT to save in:

In this class we will keep things a bit more simple. We will

primarily save our files in PHOTOSHOP format. This format has
the benefit of retaining the different layers you create in the image
(they stay separate, instead of being "flattened")

 As a technique, I recommend creating a temporary version

of any image you are working on and SAVING IN
PHOTOSHOP FORMAT.
 After the image is finished, choose to save a copy of the file in the desired format (FILE -
SAVE - under SAVE OPTIONS check "As a Copy"):

Two of the best known image formats (because they are widely used on the internet) are:

JPEG (Joint Photographic Experts Group) retains 24 bit color (millions of colors).

 extension is .jpg
 Can compress JPEG up to 4:1 (loss compression, some detail may be lost)
 Can compress in Photoshop.

GIF (Graphics Interchange Format)

 extension is .gif
 Limited to 8 bit color palate (256 colors)
 Needs to be in INDEXED COLOR format
 Best for simple graphics
 3 variations of GIF: transparent, animated, and interlaced

When saving a Photoshop image as a JPG file, several options will be presented:

6
Select image quality based on the expected use of the file (internet images should be smaller) and
desired quality.

SAVE FOR WEB OPTION:

 One of the best "new" features of Photoshop, introduced in version 5.5, is the "Save for
Web" option.
 Choose FILE - SAVE FOR WEB to display a variety of optimized file saving options, in
different formats.
 Select the version you prefer and save in the desired location.

Tools

The Photoshop toolbar contains a large array of selectable tools for image manipulation. The
toolbar in Photoshop 6.0 for Windows looks like this:

*
7
 *

Multiple Undo’s

One of the best features of Photoshop is its ability to allow multiple undoes. This means that,
unlike most programs which allow you to just "undo" the last thing you did, Photoshop will let
you go back MANY steps.

Use the History palette ( ) to "move back in time" and undo past
actions.

After a file is closed, actions are not saved, however, so complete all undoes before closing.

Copy & Paste

One of the best sources for graphics is the internet. Any image copied from a webpage can be
inserted into Photoshop easily.
8
1. After an image is copied to "the clipboard," create a new image in Photoshop (FILE - NEW).
The dimensions of the photograph will automatically correspond to the exact height and
width of the image copied on the clipboard!
2. When you paste the clipboard contents into the Photoshop image (see instructions below) the
copied picture is brought in as a NEW PHOTOSHOP LAYER.
3. Choose to save the image file as a copy and select the desired format. Remember most
photographs should be saved in JPG format to preserve colors most accurately.

Drawing / Painting

The drawing and painting tools are located in the second part of the Photoshop toolbar:
Whenever a tool is selected, like the Airbrush tool ( ), options for that tool are shown at the
top of the screen and can be changed by clicking on each setting:

Note that some tools, like the Fill tool (Paint Bucket), are hidden by default behind another tool
choice (in this case, the Gradient Tool):

Also note the differences between tools: the Paintbrush tool ( ) located beside the Airbrush

tool, and the Pen tool ( ) located below the Path Component Selection Tool ( ):

 The Airbrush tool "applies gradual tones (including sprays of color) to an image,
simulating traditional airbrush techniques." (PS 5.0 Manual, p. 197)
 The Paintbrush "creates soft strokes of color." (SSAA, p. 197)

9
  The Pencil tool "creates hard-edged freehand lines and is most useful for bitmapped
images." (SSAA, p. 197)
 The Pen tool "lets you create straight lines and smooth flowing curves with greater
precision than possible with the freeform pen or magnetic pen tool. For most users, the
pen tool provides the best control and greatest accuracy for drawing." (SSAA, p. 153)

9. Working with Layers

Layers provide a powerful way for you to organize and manage the various components of
your image. For example, by placing an artwork element on a separate layer, you can easily
edit and arrange the element without interfering with other parts of the image. To organize
related groups of elements, you can nest several layers under a layer set. Layers also provide
the basis for managing and defining advanced features such as Web animations and
rollovers.

Create a New Layer

 From the LAYER menu, choose LAYER - NEW - LAYER, or

 Click on the Create New Layer button ( ) at the bottom of the layers palette
 After creating the layer, name it if desired. Layers can be renamed later if desired by
double clicking on their name.

Move or Delete a Layer

 Move a layer to a new relative location by clicking and dragging it within the layers
palette.
 Delete a layer by clicking on the Delete Current Layer button on the layers palette. It
looks like a trash can:

Hide or Show a Layer

 Click on the eye ( ) next to a layer to hide it.

10
  Click on the same box (which will be empty when the image is hidden) to show the layer
again.

Duplicate a Layer

 From the LAYER menu, choose DUPLICATE LAYER.

 As a technique, before modifying something in Photoshop create a duplicate layer, then
hide the original (click on the eye). Then make changes to the copy. If you don't like the
changes, delete the duplicate layer and repeat these steps.

Cropping

One of the most basic ways to edit an image is to CROP it: remove unwanted portions and focus
the viewer's attention on a particular aspect or element.

Cropping a photo means cutting out parts of the photo by making it a smaller rectangle.

Crop an image in Photoshop:

1. Open the image you want to crop.

2. Click on the crop tool in the toolbar, under the lasso:
3. Click and drag on the image to define the part you want to KEEP. As a technique, click in
the upper left corner first and then drag down, to the right.

11
 4. Stretch the crop region "handles" (the boxes in the corners and on the sides of the

selected area) as desired:

5. Press ENTER to crop the photo as selected.

Using Type

After selecting the text tool ( ), text options are displayed at the top of the screen that can be
changed as desired:

To add text to an image:

1. Create a new layer (LAYER - NEW - LAYER)

2. Click on the text tool:
3. Click on the layer where you want to insert text
4. Change the Text Options at the top of the screen, below the menu options, as desired.
5. Type your text

To add a fancy layer effect:

1. Click on the text layer in the layers palette.

2. From the LAYER menu, choose LAYER STYLE, then the desired effect. More than one
can be selected.

12
12. Compositing

To create a photo composite:

1. Each image should be inserted as a separate LAYER. Refer to the previous section on
copying/pasting.
2. When you save the final version as a JPG image, it will be FLATTENED so the different
layers will not be preserved.
3. Save a copy of the original image in Photoshop format (PSD) to keep the layers separate,
in case you want to change something later.

13
Retouching Photos

Adjust the CURVES

1. With an image open and selected in Photoshop, choose IMAGE - ADJUST - CURVES.
Click and drag on the line to make the image darker or lighter:

2. With the PREVIEW box checked, you can immediately see the effects of your curve
changes.
3. Click OK to save the changes.

Adjust the LEVELS (the definition of pure white, pure black, and the point midway between
these values)

 Try to adjust levels automatically by choosing IMAGE - ADJUST - AUTO LEVELS:

If this result is not desirable, manually define the pure white and black values for your image by
choosing LEVELS from this menu and:

14
 1. Dragging the triangles under the graph on the left and right sides underneath the levels
graph.
2. Click on one of the eyedroppers, and then click on the appropriate part of the photograph
(white eyedropper on the right defines pure white, black eyedropper on the left defines
pure black, middle eyedropper defines mid-gray.)
3. Your image may not include pure white or pure black pixels. If this is the case, don't use
these eyedroppers.

Adjust Contrast, Brightness, and Color Balance

 From the same menu (IMAGE - ADJUST) select other variables to change
 Either drag sliders to adjust values, or directly input numerical values:

Use the Clone Stamp Tool to "Touch Up"

1. Use the Magnifying glass ( ) to zoom in on your selection first.

2. The Clone Stamp Tool allows you to duplicate one part of the screen on another, by
"painting it on"
3. After selecting it, choose the desired type and size of the brush, depending on what size

and type of cloning you need to do:

4. Make sure you are in the desired LAYER before using the Clone Stamp Tool.
5. Hold down the ALT key (Mac: Option key) and click to DEFINE the part of the image
you want to clone.
6. Release the key and click / drag over the area you want to erase and STAMP a clone of
the defined area.

15
Color Enhancement

One of the things Photoshop is widely used for is color enhancement. We can achieve this using
a combination of the Levels and Hue & Saturation commands.

1. The first thing we need to do is adjust the levels of the photograph using the Levels
command. Press CTRL+L to access the dialogue box.
2. Move the far right slider towards the left until it reaches the start of the first peak. Next alter
the gamma by moving the middle arrow towards the right or left. You will see the changes as
you move the arrow. Select OK when you are satisfied with the new colors.
3. Now to brighten up the colors. From the Image menu, select Adjust... Hue & Saturation (or
press CTRL+U (WIN) or COMMAND+U (MAC)). From the Edit drop down list, choose
Reds. Move the Saturation slider to the right. Straight away you will notice that only the red
colors within the image have brightened.
4. You can do the same with any of the other colors in the Edit drop down list. Press OK when
you are finished.

Ghosting Photos (Opacity)

This technique involves three basic steps:

1. Cutting all parts of a saved image and pasting them in a new layer
2. Changing the opacity of the layer (usually to 20 or 30 percent for a webpage background)
3. Saving the image again as a flattened JPG

image To create a "ghosted" image:

1. Open a saved image in Photo Shop

2. Select the entire picture by pressing CONTROL - A (Mac: Command - A)
3. From the EDIT menu choose CUT
4. From the EDIT menu choose PASTE (the image should be pasted as a new Photo Shop
layer)
5. In the Layers palette, change the OPACITY setting (for that layer) between 20 and 30

percent: It may look too faint in Photo Shop, but in a web browser a
background with an opacity greater than 30% tends to compete with overlaying text.
6. From the LAYER menu, choose FLATTEN IMAGE (this removes the separate layer)
7. Save the image (FILE - SAVE)
8. Alternatively, skip steps 6 and 7 and choose FILE - SAVE AS COPY

16
Lab Task _

Lab Task. 7.1) Apply following features on a picture;

i. Select two pictures merge them in a one picture

ii. Change the background color / theme
iii. Apply at least two different effects on the picture
iv. ADD your name and roll number on a picture

Lab Task. 7.2) Save each edited picture with different extension.

Note: Attach a snap shot of every above mentioned task.

17