INTRODUCTION

Technology and Livelihood Education (TLE) is one of the nomenclatures in the implementation
of the K to 12 Basic Education Program (BEP) consisting of four components, namely: Agri-Fishery Arts
(AFA), Home Economics (HE), Industrial Arts (IA)-0 and Information and Communication Technology
(ICT). In this module, the focus is on an ICT mini-course – PHOTO EDITING.

Now that the workforce lags behind in increasing the number of available jobs, the Department
of Education is revitalizing its resources to prepare the young minds by honing their skills as graphic
designers or the like to gain a competitive edge. Thus, this module aims to provide students with the
knowledge, skills, and motivation in the field of photo editing.

In this course, you will be introduced to different learning activities preparing you to be skillful
before you take the plunge into the world of work as a photo editor and to feel more confident while
providing support where needed.

This module is specifically crafted to focus on Process and Delivery enriched with hands-on
activities. Learning procedures are divided into different sections such as: What to Know, What to
Process, What to Reflect and Understand and What to Transfer. Examine and perform the suggested tasks
to practice developing a sustainable program, prioritizing needs and building vision.

So, explore and experience the K to 12 TLE modules and be a step closer to being a photo
editor.

Information and Communication Technology – PHOTO EDITING Page 2

Objectives
At the end of this module, you are expected to:
 formulate your learning goals and targets
 explore and examine the basic concepts and underlying principles of photo editing specifically
using the Adobe Photoshop
 apply the concepts and skills learned in photo editing
 produce a marketable product or service in photo editing
 appreciate the relevance of learning the basic concepts and skills of photo editing

PRE ASSESSMENT

"Assessment is today's means of modifying tomorrow's instruction."

-Carole Tomlinson

Information and Communication Technology – PHOTO EDITING Page 3

Activity. How Much Do You Know?

A. Direction: Answer the questions based on your current photo editing ability (in any photo editing
program). Use the 4-point Likert Scale below.

1 – Not at all 2 – Maybe, with some help

3 – Yes, independently 4 – So well that I could help others

Indicators 1 2 3 4
1. I can use the zoom tool to zoom in and out on a photo.

2. I can define what a pixel is.

3. I can resize a photo.
4. I can rotate/flip a photo.
5. I can crop a photo.
6. I can turn a photo to black and white and/or sepia.
7. I can use selection tools to select part of a photo.
8. I can add special effects to a photo.
9. I can add text to a photo.
10. I can put a decorative frame and/or mask around a photo.

11. I can use the stamp or clone tool.

12. I can use drawing tools on a photo.
13. I have used photo editing before.

A. If you have answered yes in question number 13, please describe how you have used photo editing and
through whom.

B. Direction: Accomplish the following activities to test your understanding on Photo Editing.

1. Imagine that you are a graphic artist expert in photo editing. You want to make use of your
learned skills to put up a Graphics and Design business. Cite possible services you could offer to
your clientele.

Information and Communication Technology – PHOTO EDITING Page 4

 2. In connection with the above question, what possible marketing strategies could you do to sell
your services to your target customers?

3. What computer application/software are you going to use?

Information and Communication Technology – PHOTO EDITING Page 5

 Process and Delivery

Study the pictures below showing services and products processed in Photo Editing.

1. Do you notice the changes?

2. What do you think was done to the pictures?
3. What are the effects of the changes? Were they done for advertising, for entertainment,
for emphasis, or for other effects?
4. Do you think you can create those changes? How?
5. Do you want to be a good photo editor? Why?

Information and Communication Technology – PHOTO EDITING Page 6

 Editing Concepts
Lesson 1
Image editing is the processes of altering whether they are traditiona
Traditional analog image editing is known as using tools such as an to
programs, which can be broadly grouped into and are the primary too
Basics of Image Editing Many image editing programs are also used to or create from scratch.

Images – they are incredibly

versatile, come in a variety of formats, and
deliver context, information and emotions
that words alone struggle to convey. Having
a clean and balanced image is of great value.

Newspapers have always used

dramatic images to sell their stories. An
image is the hook that draws the reader’s
eye to read the words.
It breaks up the text, brightens the page and sets the mood for the article. Websites
use photos in the same way, to catch the readers before they navigate away from a page, to
draw them on to reading the content.

You do not have to be a professional photographer to produce good enough images. It does help
to shoot a good clear image in the first place, but simple snapshots can be improved a lot in an image
editing program.

Whether you use a free image editing program like GIMP or Picasa, or purchase software such as
Adobe Photoshop, learning just a few basic image editing techniques can turn a photo from dull waste of
space to effective hook for your website.

As a beginner in photo editing, you are expected to learn the basics of image editing which are
presented below.

1. Cropping

Cropping an image effectively can already make a huge difference to its impact. When you cut
out distracting background, or a clutter of irrelevant objects around, the subject of your photo stands out
better. You can correct the placing of the subject if it is
awkwardly placed by trimming one side, focus more attention on a person’s face by cropping a wide shot
into a portrait format and much more.

When cropping, keep in mind a basic rule of composition: the rule of thirds. This golden rule of
photography divides the image into thirds, horizontally and vertically and then aligns the subject with one
of the intersecting lines. The horizon in a landscape shot, usually works best placed on one of these lines
too. Read more about composition and then you can apply it with your cropping tool.

2. Resizing and Compression

When you have cropped and edited your image, so you have it looking just the way you like, the
Information and Communication Technology – PHOTO EDITING Page 7
next stage is to resize and compress it to the optimum size for the use you intend it for. You may want to
save a copy of your edited image before you resize it, so that you can use it at a different size later.

When editing and preparing images for display it is important to consider the medium over which
your images will be transmitted. Are your images for print? Will it be used on a web page? Or maybe
they are for a PowerPoint presentation. Each of these media requires that you adjust the size and
resolution of your image appropriately.

You know size refers to the actually height and width that your image will be displayed as, but
resolution is just as important. Resolution refers to the number of dots per inch (dpi) that appear in your
images final form. For print these really may just be dots. On screen, however, these dots are referred to
as pixels. An image with high resolution (one produced for print, for example) will look very smooth and
will show virtually no pixilation. An image with low resolution (one produced for the screen—
particularly the web) may look far more pixelated.

For print you want high resolution because your printers can handle it and your pictures will look
best. For the screen you must rely on layout resolutions simply because monitors can only handle so
much.

2.1. Resizing image from digital camera

As the quality of digital cameras goes up, so does the volume of pixels they can capture. These
days, shooting in your camera’s highest quality mode can yield an image bigger than your printer can
actually print. While most image editing programs can resize your photo in their respective print
dialog boxes, knowing how to do it yourself gives you more control.

3. Correcting

One of the first decisions you must make after downloading the files from your camera is whether
they all need generalized correction. This might be because the light
that was used to make the photographs was not consistent with the white balance setting on the camera.
For example, the camera might have been set for bright sun, but perhaps there was a small amount of
haze, or photographing on the north side of a building may have created a color bias in the image. If all
the images in a single group were photographed under these conditions, you would need to correct all of
them. Further, the entire image would need to be corrected to change the color rendition because of the
inconsistency between the light and the white balance.

4. Sharpening or Softening
Sharpening or softening is the last of the global corrections that are often applied to digital
images. This may be needed because of the way digital sensors are made and how this affects the look of
the captured image. In many digital sensors there is a diffusion material that slightly blurs the captured
image to eliminate unwanted effects such as moiré pattern. Both pixel sharpening and edge sharpening
correct these effects. Pixel sharpening is applied to the pixels with processes such as unsharp masking.
Edge sharpening is applied only to the pixels that the software can identify as being on an edge.

To your eyes, particularly as you look at a rasterized image on a computer screen, the image
sharpness will always seem like it can be improved. However, this control should be used very sparingly
to avoid over sharpening the image. Over sharpening increases the contrast and often distorts color
relationships and is the opposite of softening. Sharpening may be applied in all steps of the imaging
process: capture, processing and printing. It should therefore not be applied in the camera because it can
Information and Communication Technology – PHOTO EDITING Page 8
be corrected in processing and printing.

Raster Image

Raster images are stored in a computer in the form of a grid of picture elements, or pixels. These
pixels contain the images color and brightness information. Image editors can change the pixels to
improve the image in many ways. The pixels can be changed as a group, or individually, by the refined
algorithms within the image editors.

The domain of this article primarily refers to bitmap graphics editors, which are often used to
alter photographs and other raster graphics.

Vector graphics software, such as Adobe Illustrator, Corel DRAW, Xara Designer Pro or
Inkscape, are used to create and modify vector images, which are stored as descriptions of lines,
Bézier splines and text instead of pixels.

It is easier to rasterize a vector image than to vectorize a raster image; how to go about
vectorizing a raster image is the focus of much research in the field of computer vision.Vector
images can be modified more easily, because they contain descriptions of the shapes for easy
rearrangement. They are also scalable, being rasterizable at any resolution.

Automatic Image Enhancement

Camera or computer image editing programs often
offer basic automatic image improvement features that correct
color hue and brightness imbalances as well as other
image editing features, such as red eye removal, sharpness adjustments,
zoom features and automatic cropping.
These are called automatic because generally they happen without user interaction or are offered
with one click of a button or mouse button or by selecting an option from a menu.
Some automatic editing features offer a combination of editing actions with little or no user
interaction.

Digital Data Compression

Many image file formats use data compression to reduce file size and save storage space.
Digital compression of images may take place in the camera, or can be done in the computer
with the image editor.
When images are stored in Joint Photograhic Experts Group (JPEG) format, compression has
already taken place.
Both cameras and computer programs allow the user to set the level of compression.

Some compression processes such as those used in Portable Network Graphics (PNG) file format,
are lossless, which means no information is lost when the file is saved. By contrast, the JPEG file format
uses a lossy compression algorithm by which the greater the compression, the more information is lost,
ultimately reducing image quality or detail that cannot be restored. JPEG uses knowledge of the way the
human brain and eyes perceive color to make this loss of detail less noticeable.Key Terms and Definitions

Photoshop Document (.psd). A .psd file is the file format in which Photoshop saves documents by
Information and Communication Technology – PHOTO EDITING Page 9
 default. It is a multi-layer document that retains its full editing options when saved. In many cases, you
will export web graphics from a .psd document file format.

Layers. Photoshop documents are composed of layers, which can basically be described as single
transparent sheets which hold particular pieces of an image. These layers can contain images, text and
vector graphics. They can be rearranged and grouped according to user needs. Layers are controlled with
the use of the Layers pane.

Selections. Selections refer to regions in an image that will be affected by the various tools. A selection
in Photoshop is similar to a selection that you highlight in a word processing application. Once you have
selected an area, you can apply a tool to it, such as paintbrush, or perform an operation such as copy or
crop. Selections can be any shape and size; the shape depends on which selection tool you are working
with. Your selection will apply only to the current layer. If that layer is empty in the region selected, an
error message will appear. When this happens, go to the Layers pane and select the correct layer.
Resolution. Resolution refers to the number of pixels in a full size image. An image with high
resolution contains more information than an image with low resolution and therefore, one can always
convert a high resolution (hi-res) image to a low resolutions (lo-res) image. However, because
information is lost in the conversion, the reverse is not true. If you were to increase the resolution of a lo-
res image, the result would be fuzzy.

Image Size. Resolution should not be confused with image size, which is also expressed in pixels.
Image size deals with the actual number of pixels tall and wide an image is. For an idea of how the two
differ, go to Image Size in the Image menu, and plug in different numbers for image size and resolution.

Color mode. Color mode refers to the types of colors you will be using in your image. CMYK and RGB
are the most important of these modes to be familiar with.

 CMYK is the setting for images that will be printed to paper. The letters refer to the four channels
of color used to create every color available: cyan, magenta, yellow and black.
 RGB refers to the three channel color mode suitable for images to be viewed on the web: red,
green and blue.

ACTIVITY 3
NAME: Date:

Direction: Complete the web below by enumerating the basics of photo editing and give brief
description of each.

Activity. Complete the Web

Information and Communication Technology – PHOTO EDITING Page 10

Information and Communication Technology – PHOTO EDITING Page 11
Screen Resolution
Screen resolution is close to 72 pixels per inch. If you are working with graphics to be viewed
only on screen, 72 should be fine. Depending on the printer you are using, you may increase this above 72
for graphics. The preferred resolution for images is 300 while the standard resolution for printing is 150.
A typical monitor is set to display somewhere around 800x600 pixels. This means that a 1”x1”, 600dpi
(dots per inch) image would fill up most of the screen. It is becoming more and more common that
monitors are set to display at higher resolution—somewhere around 1024x768 pixels.

For this reason you must design screen graphics at a lower resolution: 72dpi is the standard for
the world wide web (www). Due to screen resolution limitations, you should measure the dimensions of
images using pixels. To be safe, never publish an image for the web that is more than 800 pixels wide or
600 pixels high. Unless the screen image you are using came from the web, it is likely that you will have
to edit the image so that it is an appropriate resolution and size for display. To do so, rely on Photoshop’s
tools for cropping and resizing images.

As a basic rule for a medium web-site image, reduce the longest side of your image to around
450pixels. Make sure that it is set at the 72dpi standard resolution for web use. Adjust the quality further
if necessary, so that your final image ends up at about 30-50kb in size. Small thumbnail images can be
even smaller at 200 pixels wide and10-15kb in size.

Layering

Often times, when you find yourself frustrated with Photoshop, it is because you are trying to
perform operations on a layer that is not currently selected. Simply click on the name of a layer in order to
designate it as the current layer. Whenever you add text to an image in Photoshop, the text appears on a
new layer. You can "merge down" layers to consolidate them, and "flatten image" to force the entire
contents of the image onto one layer.

Information and Communication Technology – PHOTO EDITING Page 12

 Lesson 2

Overview of Adobe Photoshop

Adobe Photoshop is a seriously powerful photo and image editing application. Let us have a
quick look at what Photoshop is, and what it is not. Remember that Photoshop is not a drawing program.

This is a very common source of confusion and frustration. PS Trivia

Although it is possible to use Photoshop to design and construct original
graphics, you will find that it is difficult and limited. The reason is that The real power of Photoshop
Photoshop is not intended to be used for this type of work. Photoshop is is in working with existing
an image editing tool, not a design tool. To create original images, images.
Adobe provides other specialist programs such as Adobe Illustrator and Typical tasks include treating
Adobe Image Ready. and manipulation,
compositing, converting to
Compatibility different formats, printing,
etc.
Photoshop tends to work well with other applications. As well as integrating seamlessly with
other Adobe products (such as Premiere, Illustrator, etc), Photoshop formats are also widely recognized
and able to be imported into programs such as Macromedia Fireworks, Corel Draw, etc.

Elements of the Interface

Perhaps the most important element of the Photoshop interface is the toolbar. It
contains a bunch of icons that represent the different tools Photoshop offers to alter and
create images. These include tools for selecting specific areas of images, changing the colors
of the image, stretching, transforming, and erasing parts of an image, and many more. To get
an idea of what some of these tools can do, mouse over the icons and you will get an
explanatory tool tip.

PS Reminder
Photoshop is so feature-rich that it does take a while to learn all the i
Fig. 1. The Photoshop Toolbar

Information and Communication Technology – PHOTO EDITING Page 13

A. Panes

Panes are also important features of the Photoshop interface.

All sorts of information are displayed in these panes. They display
location information, tool options, and history, among other things. If
you ever lose track of a specific pane (they tend to stack up), go to the
windows menu and select that pane to view it.

B. Menu Bar

Menus are probably the most familiar interface elements to a

new Photoshop user. They contain all sorts
of options, but since these are not as visible as panes or the toolbar,
they are often only partially explored. Below are the features on the
menu bar. Fig. 2. Various Photoshop
Panes

1. File Menu contains all of the stuff you expect. It lets you open and close documents with a few
extras including import, which deals with scanning, and save for web, which allows you to export
a web-ready image from your Photoshop file.

2. Edit Menu is another familiar menu. In Photoshop, edit houses all of the expected options as well
as fill and stroke, and other image-altering functions.

3. Items on the image menu affect a whole image for the most part. Here you will find color
adjustments, size adjustments, and any other changes you need to make globally when working
with a Photoshop file.

4. The layer menu is similar to the image menu. It allows you to make changes to an image without
altering your original image data. It contains options that affect only current or selected layers.
Just understand that an image in Photoshop consists of stacked transparent layers. Options in the
Layer menu affect these pieces of the image rather than the complete image.

5. The select menu deals with selections you make. Selecting the specific parts of an image you
would like to change is a difficult part when working with Photoshop. This menu gives you some
options regarding selections, including the ability to save selections, reverse them, or add to
them. Learning the options on the selection menu can really save you some time.

6. The filter menu is probably what most people think when they work with Photoshop. The filter
menu allows you to apply filters to any part of your image. These filters include ways to change
the texture of the image, with some potentially radical results.

Information and Communication Technology – PHOTO EDITING Page 14

 7. The view menu is where you change the view settings. You can use this to show and display
guidelines on the image and to zoom in and out, among other things.

8. The window menu allows you to toggle back and forth between hide and show for each interface
element. This is the first place you should go if you lose track of a particular window while you
are working.

9. Last and least is the help menu. The help documentation is not so helpful, but for some reasons,
this menu contains two nice features: resize image and export transparent image.

C. Options Bar

The options bar which is located directly underneath the menus is a useful tool when working
with the different Photoshop tools.

As you can see right now, when the selection tool is in use, the options bar reflects the changes
that can be made to how that specific tool operates. Here, you have selection options and style
options which include the ability to make the selection tool a specific size in pixels. When you switch
tools, to the paintbrush tool for instance, these options change. When a tool in Photoshop is not behaving
as you expect it to, the options bar should be the first place you look to fix it.

Fig. 3. The options bar

Parts of the Options Bar

 Zoom In/Zoom Out tools: You can choose Zoom In or Zoom Out as separate tools to avoid
using the Alt key to toggle between the two.
 Zoom percentage: This figure shows you the current zoom level as a percentage. You can edit the
text by typing values between 5 and 3200.
 Zoom slider: Click the down-pointing arrow to open a slider bar. Drag the slider left to zoom out or
right to zoom in.
 Resize Windows to Fit: Select this check box to resize the window along with the image zoom.
Deselect the box to zoom in and out of an image while the image window remains at a fixed size.
 Zoom All Windows: If you have multiple images open and select this check box, zooming with the
zoom tool zooms all open documents simultaneously.
 1:1: Click this button to zoom the current window to a 1-to-1 ratio, showing the zoom level at which
the file will be printed.
 Fit Screen: Click to fit the image within the image window.
 Fill Screen: Click to zoom the current window to fill the screen.
 Print Size: Click to zoom the image to the size of the print file. Often, this option shows you the
same size as 1:1.
Creating Graphics in Photoshop

An advantage of Photoshop over basic photo editing software is the ability it gives you to
Information and Communication Technology – PHOTO EDITING Page 15
 create your own graphics. There are numerous tools in Photoshop.

Most of the functions these tools perform are based on your

selection in an image. The effect or tool only operates within a
selection.

Make a small selection and select the paintbrush tool. Move

the mouse over your selection holding down the mouse button. You'll
see that the image is only altered within the selection.

Foreground/Background Colors
The foreground color, which will be applied by tools like the paintbrush, is represented by
the top square in the middle of the toolbar.

Colors and Graphics

To change this color, double click the square. This reveals the color picker, where you can pick a color
with several different methods, including RGB values, hexadecimal codes and by simply selection. If you are
making an image for the web, it is best to check the "only web colors" box to ensure that no dithering (reductions
in color quality) will take place. Once you have picked your color, click ok, and you are ready to go.

Stroke and Fill

Fig. 4. The Color Picker

The most basic ways to apply colors to an

image are to use Fill and Stroke, both available on the
edit menu. Make a selection, and choose fill from the
edit menu. A dialog will appear asking you to make
some decisions about colors and transparency.
Make your selections, and press OK to fill the selection with the chosen color. Stroke operates in much
the same manner, though you are given the chance to determine the weight of the lines you create.

Paintbrush tool
Make a selection and choose the tool from the toolbar. You can change the size of the brush in the
options bar, as well as the behaviors of the paint. The best way to learn what these options do (and some
of it is pretty surprising) is to experiment. Remember, you have multiple undo’s and layers so do not
worry about ruining your image.

Pencil Tool
The Pencil tool works much like the Paintbrush, but draws a distinct line rather than a feathery
painted one. Click and hold the paintbrush icon to reveal the pencil.

Eraser Tool

Information and Communication Technology – PHOTO EDITING Page 16

 The eraser tool works much like the Paintbrush and Pencil, but rather than fill the selected region
with a color, it actually removes whatever is in the selection and reveals the background. This is a very
useful tool for cleaning up images with rough edges.

Process

Little by little, you are gaining knowledge about the different features and skills in working with
Photoshop application. To learn more, open your personal computer or laptop installed with Adobe
Photoshop and do the following:

Activity 1. Do It Right

1. Launching the Photoshop Application

Click the start button on the Windows taskbar. Point to All Programs on the start menu. Point to
Adobe and then click Adobe Photoshop.
Once you have opened the application (after a few moments of loading time), the Photoshop interface
will appear as shown on the next page.

Fig. 5. Photoshop Interface

2. Opening a Photoshop Document

To open or create a new document in Photoshop, follow these steps:

Click “File” on the menu bar, and then select “New”. You
will see a New dialog box like this.

Use the New dialog box to create a new, blank document. Then, select the attributes for the new
file.
Type a name for your new document and select a preset size from a drop down list. Then set the
resolution and background of your new Photoshop document. You can choose a colored, white,
or transparent background.
The resolution which tells how much information is contained in your image, how clear it is, how
big the file is and what it looks like in the format you want to output it in. Do not get confused.
As a beginner, just use the default resolution of 72. The recommended setting is:
Information and Communication Technology – PHOTO EDITING Page 17
Web Resolution = 72dpi
Print resolution = 150 or 300dpi Film
Resolution = 600dpi
3. Saving a Photoshop Document

To save your file after working on your new Photoshop document, follow the steps below:

1. Click the file menu.

2. Click Save as.
3. Choose the file format (e.g. in PSD) you wish to save the file .

Application Bar

Menu Bar

Options Bar Canvass Palettes

Image

Photoshop Document

Fig. 6. Workspace Switcher

4. Closing a Photoshop Document

After saving your Photoshop document, follow the steps below to close it:

1. Click the file menu.

2. Click the Close button, or simply press Ctrl+w.

Other activities are given below for you to accomplish. All you need to do is apply the
learning you derived from the lesson.

Information and Communication Technology – PHOTO EDITING Page 18

 Activity 2. Memory Enhancer

Direction: Label the Parts of the Photoshop Window below.

Fig. 7. Parts of a Photoshop Window

Reflect and Understand

You have explored some of the features of Adobe Photoshop. Now, try to surf the net and
look for other photo editing software. Then, compare and contrast their features with Photoshop.

Visit the website: http://www.pcmag.com/article2/0,2817,2369237,00.asp

Transfer

Open an Adobe Photoshop Interface and explore the different menus. Share with your classmates
whatever you will discover as well as the problems that you will encounter.

ACTIVITY 4
Information and Communication Technology – PHOTO EDITING Page 19
NAME: Grade & Section:
A. Direction: Write T if the statement is TRUE, write F if the statement is FALSE.

1. Image editing is the processes of altering images, whether they are digital photographs, traditional analog

photographs, or illustrations.

2. Photo retouching is called Digital image editing.

3. Newspapers have always used dramatic images to sell their stories.

4. Cutting an image effectively can already make a huge difference to its impact.

5. Jpeg file is the file format in which Photoshop saves documents by default.

6. Photoshop documents are composed of layers.

7. RGB refers to the three channel color mode suitable for images to be viewed on the web: red, green and

blue.

8. In Color Mode CMYK the K stands for Key.

9. Selections refer to regions in an image that will be affected by the various tools.

10. Resolution refers to the number of pixels in a full size image.

B. Identification
__________1. A person who organizes and operates a business or businesses taking on financial risk to do so.
__________2. Starting a new business.
__________3. A file format which means Joint Photographic Experts Group.
__________4. Any of a number of very small picture elements that make up a picture.
__________5. A file format and shortcut for Portable Network Graphics.
__________6. Shortcut for Photoshop document. A .psd file is the file format in which Photoshop saves
documents by default.
__________7. The number of pixels that form an image or a Phototograph. Rectilinear-Relating to a straight
line or lines.
__________8. An image that is composed of individual elements e.g. arc, line, polygon, that have their own
attributes.
__________9. Changing or improving graphic images.
__________10. Referred to as bits per pixel (bpp).

Information and Communication Technology – PHOTO EDITING Page 20

 Lesson 3

The Photoshop Toolbars

In the previous lesson, you have learned the steps in launching the Adobe Photoshop application
including the steps on opening, creating, saving and closing a document. Similarly, you have gained
knowledge on the elements of the interface, particularly the distinguishing features of the panes, menu
bars and the options bar.

Now it is time to learn how to use some of the tools in the Photoshop toolbar.

In working with any photo editing software such as Adobe Photoshop, you need to learn the
different tools on when and how to use them. For you to become a good photo editor, using the different
tools as shown in the illustration below will help you come up with an appealing and quality output.

Selection Tools

Alteration Tools

Drawing and Selection

Assisting Tools

Color Boxes and Models

Fig. 8. Toolbars and Shortcuts

Information and Communication Technology – PHOTO EDITING Page 21

 1. Selection Tools

The selection tools are used to facilitate the process of making selections of shapes, colors and
objects inside Photoshop, and positioning them in the working image area. With tools like the magnetic
lasso and magic wand, Photoshop packs a powerful array of selection gadgets!

In Photoshop, selections that you learned in Lesson 1 are used to work in a specified area, while
not altering any of the area around it. In many regards, a selection is a lot like a stencil. You are
basically enabling yourself to only paint in one area while the rest of your canvass is left unaffected.

There are variety of tools to help you draw out specific sizes and shapes of selections in
Photoshop.

A. Cropping
One of the benefits of cropping a photo with Adobe Photoshop is the speed with which you can
perform the task. Unlike some of Photoshop's more complex selection tools, choosing an area to crop in
Photoshop is as quick as drawing a square around a segment of the picture and pressing the Enter key.
Cropping works best when you want to reduce the size or change the shape of a picture.

PS Reminder
A note about lasso tool options: When extract
Read more:
How to Crop a Photo in Adobe Photoshop | eHow.com http://www.ehow.com/how_2044098_crop-
photo- adobe-photoshop.html#ixzz2DTQ8eBhk

B. Lasso Tools
The Lasso Selection Tools allow you to make selections of
irregular shapes. Using the ordinary lasso tool, simply click and drag a
freehand selection with your mouse. With the Polygonal Lasso Tool,
click to make various points which will define a selection and finish your
selection by clicking the starting point. Lasso tool allows you to draw a
selection by dragging the cursor freehand. The selection will
automatically close itself.

Lasso tools are similar to the marquee tools, except that the lasso
tools give you ultimate freedom in terms of the shape of your selection.
There are different lasso tools.

Magnetic Polygon Lasso tool works a little like a combination of

the other two lasso tools. As you drag, the selection maps to natural
borders in the image. This is a useful tool when dealing with well-
defined and high-contrast images.

Polygonal Lasso tool helps you create a selection composed of straight lines that can be as short as
one pixel. The selection grows with each additional click. This tool is especially useful for cutting out
objects in an image to place on new backgrounds.

C. Marquee Selection Tools

The following tools allow you to select regions in your image to alter, copy, move and apply
filters.

Information and Communication Technology – PHOTO EDITING Page 22

Rectangular marquee tool is the default selection setting. You can make a selection of any
rectangular size and shape.

Elliptical marquee tool is available when you click and hold down on the selection tool region of the
tool bar, selects elliptical spaces. To select a round area, hold the shift key while clicking and dragging.

Single row is a tool that will select a 1pixel region that is as wide as your image. This is very useful for
trimming edges and making straight lines.

Single column is a tool that will select a 1pixel region that is as tall as your image. Similar to single
row tool, this is also very useful for trimming edges and making straight lines.

Move Tool allows you to move an entire layer at a time. When you have selected this tool, click on a
layer in the layer pane, and then click and drag on the image. The current layer will move all at
once. You can even move it outside of the current image size. Do not worry, though, parts of an image
that move outside the borders still exist, they are just hidden. They will only be cropped out if you flatten
the image.

Magic Wand Tool is similar to the magnetic polygon lasso tool except that rather than dragging to
make a selection, you click in a region and a selection appears around similar colored pixels. You can
control how similar pixels must be to be included in the selection by altering the tolerance value. This tool
is useful for selecting monochromatic regions or pieces of high-contrast images.

Crop Tool works similarly to the Rectangular Marquee tool. The difference is when you press the
[Enter/Return] key it crops your image to the size of the box. Any information that was on the outside of
the box will be gone. However, it is not permanent, you can still undo.
Slice Tool is used mostly for building websites, or splitting up one image into smaller ones when saving
out. It is a kind of advanced tool, and since you are studying the basics, you will skip it for the meantime.

C. Exposure

Exposure in digital photography is best visualized

in a statistical graph called a "histogram," which plots the
amount of information in the tonal values ranging from
pure black, to middle grey, to pure white. For most
images, perfect exposure is represented by the typical
"bell curve".

The levels tool is a powerful way to redefine the

tonal values of an image. It displays a histogram of those
tonal levels. The levels tool can be found under the menu-
Image/ Adjustments/Levels. Be cautious never use
"Auto Levels"!!! Fig. 9. Level Tools

D. Cloning

Cloning is a great way to remove blemishes and unwanted objects to bring out the best in your
pictures.
Photoshop's clone stamp tool allows you to duplicate part of an image. The process involves
setting a sampling point in the image which will be used as a reference to create a new cloned area.

Information and Communication Technology – PHOTO EDITING Page 23

 2. Alteration Tools

You will learn more of this as you go on with the module.

Alteration tools are also indispensable tools that you need to be familiar of. Each tool under it is
described below.

A. Healing Brush
This is a really useful but mildly advanced tool. You can use this tool to repair scratches and
blemishes. It works like the brush tool. Choose your cursor size, then holding the [Alt] key, you can select
a nice or clean area of your image. Let go of the [Alt] key and paint over the bad area. It basically copies
the info from the first area to the second, in the form of the brush tool. Only, at the end, it averages the
information, so it blends.
B. Brush Tool
This is one of the first tools ever. It is what Photoshop is based on. It paints your image in
whatever color and size you have selected. You can use it to draw lines of different thickness and colors.

C. Clone Stamp
This is very similar to the Healing Brush Tool. You use it the exact same way, except this tool
does not blend at the end. It is a direct copy of the information from the first selected area to the second.
When you learn to use both of these tools together in perfect harmony, you will be a Photoshop master.

D. Art History Brush

This tool works just like the Brush Tool. It is used to paint over an image using the source
data from a specified history state or snap shot.

E. Erase Tool
This is the anti-brush tool. It works like an eraser and removes whatever path or stroke you wish
to erase. If you are on a Layer, it erases the information with transparent color. If you are on the
background layer, it erases with whatever secondary color you have selected. You can use the Erase tool
on paths, but not on text.

F. Paint Bucket Tool

This tool is used to fill an image or a selection with any color of your choice.

G. Gradient Tool
You can use this to make a gradiation of colors. Gradiation does not appear to be a word, but it
makes sense anyway. It creates a blending of your foreground color and background color when you click
and drag it like a gradient.

H. Blur Tool
The Blur tool blurs the sharp edges of an image. Click and drag the brush along the edges. The

Information and Communication Technology – PHOTO EDITING Page 24

I. Dodge Tool
This tool is not as crappy as the car brand. It is actually used to lighten whatever area you use it
on as long as it is not an absolute black. Absolute black cannot be lightened.
3. Drawing and Selection Tools

A. Path Selection Tool

It is related to the Pen Tool. You use this tool when working with paths.

B. Text Tool or Horizontal Type Tool

You can click a single point, and start typing right away. Otherwise, you can click and drag to
make a bounding box of where your text/type goes. There are many options for the Type Tool that you
can choose from. Just play around, it is fairly straight-forward.

C. Pen Tool
It is used for drawing smooth-edged paths, selected in the Path Selection Tool. Paths can be used
in a few different ways, mostly to create clipping paths, or to create selections. Click and drag the anchor
points to modify the path. This will allow you to bend and shape the path for accurate selections.

D. Rectangular Tool or Shape Tool

By default it draws a Shape Layer in the form of a rectangle. It fills the rectangle with whatever
foreground color you have selected. It is somewhat complicated but as you increase your skill level in
working with Photoshop, you will learn it perfectly.

4. Assisting Tools

A. Notes Tool
This tool serves as a comment feature usually used for electronic text edits but digital just like post-it
notes. You can use this tool to add small note boxes to your image. These are useful if you are very
forgetful, or if you are sharing your Photoshop file with someone else. It only works with .psd files.

B. Eyedropper Tool
This tool takes color samples from colors on the page and displays them in the Color Boxes. It works by
changing your foreground color to whatever color you click on. Holding the [Alt] key will change your
background color.

C. Hand Tool
This tool allows you to move around within the image. It is used for moving your entire image within a
window. Just click and drag. You can get to this tool at any time while using other tools by pressing and
holding the [Spacebar].

D. Zoom Tool
This tool magnifies or reduces the display of any area in your image window. It allows you to zoom into
your image. Hold the [Alt] key to zoom out. Holding the [Shift] key will zoom all of the windows you
have opened at the same time. Double-click on the Zoom Tool in the palette to go back to 100% view.
1. Color Boxes and Models

These tools consist of the foreground color, background color, quick mask, screen size, standard
and image ready. To reverse the foreground and background colors, click the Switch Colors icon (the
Information and Communication Technology – PHOTO EDITING Page 25
arrow) in the toolbox.

A Note on Selection Modes (in the options bar):

 Normal mode allows you to drag

the cursor to create the selection
size you want.

 Constrained aspect ratio allows

you to choose a scalable rectangle,
say with a width to height ratio of
1 to
2. The selection will grow when
you drag, but will remain the Fig. 10. Selection Mode
same shape.

 Fixed Size/Fixed Aspect Ratio allows you to predetermine the size, in pixels or a ratio, of the
selection you will make. When you click with fixed size selected, a selection box of the exact size
you specified will automatically appear. With fixed aspect ratio, you can make different-sized
selections of the same shape. This is a particularly helpful tool when cropping images to a certain
size or drawing identical boxes.

Process

Now that you have learned the components of the Photoshop toolbar, you are ready to apply your
new learning to the different activities below. But before doing so, practice first on cropping images to
revisit the skill you learned in previous lessons.

Steps in cropping an image

1. Open Adobe Photoshop. Select the "File" menu. Select the "Open" option. Click on a photo file
name.
2. Click the "View" menu and select "Fit on Screen" so you can see the entire image.
3. Click the "Crop" tool, which looks like two crossed right angles and is the fifth icon from the top
of the "Tools" column. The cursor changes to the crop icon.
4. Draw a dotted rectangle or square around the part of the photo that you want to keep. A nine-
square grid with blinking dotted lines appears over the image and the to-be-cropped area turns
dark.
5. Press the Enter key on the keyboard to crop the photo. Go to "File" then click "Save" to save the
crop to the original picture, or select "Save As" to create a new picture from the cropped
image.

Information and Communication Technology – PHOTO EDITING Page 26

 Reflect and Understand

Did you enjoy doing the previous activities? If yes, you are now on the right track towards
attaining your goals of becoming a good photo editor. You now possess the skills, knowledge and attitude
needed by a successful entrepreneur. Just keep on improving your skills. Remember, constant and correct
practice makes a person perfect.

However, if you find difficulty in doing the given tasks, you have nothing to worry about because
more activities are provided in the next lessons. Just have that positive mental attitude. If you believe in
yourself, you can do it! Always be guided by the competencies of a successful entrepreneur.

Transfer

Now that you have gained the confidence and determination to pursue your goals, it is time for
you to apply what you have learned.

In your Personal Computer (PC), open Adobe Photoshop and do a nature drawing with the
following elements. Save your file as PS Toolbar apps.psd.

a. Sky - use a gradient tool

b. Clouds - use a soft brush and use the smudge tool
c. Mountains - use paint brush
d. Grass - use the grass brush
e. Tree - use the paint brush to draw the trunks
f. Leaves - use leaf brush

Congratulations for doing a good job!

Lesson 4

Information and Communication Technology – PHOTO EDITING Page 27

 The Image Menu

Image Menu option is very important for photo editing in the Adobe Photoshop. It is used for
adjusting and modifying color mode, brightness, deepness etc. The details of the image menu are
discussed below.

1. Mode

The first item on the Image

menu is Mode. This is what you use
to change the color mode and
appearance on the entire image. You
have some other choices here,
including grayscale and duotone.
Some modes’ availability depends
on the pre-existing color mode.

Fig. 11. The Image and Mode menus

2. Adjustment

You can see that the adjust option on the

Image menu gives you a lot of different tools for
adjusting your image. The most basic types of
adjustments you can make with Photoshop involve
colors and brightness.
The most simple is the contrast/brightness adjustment. When you select contrast/brightness, you are
confronted with a dialog box with a slider

Fig. 12. The Brightness/Contrast dialog

for both brightness and contrast. Moving the sliders to the left makes the picture murkier or darker, and
moving the sliders to the right brightens and increases the contrast between the dark and light colors in
the image. You can play around with both sliders
until you get a suitable mix; the change is previewed in the image. This tool is helpful for brightening pictures
that were taken in low light.

The other adjustments you can make with the options on the adjustments menu are a little more
complex, and the best way to learn about them is just to experiment. Because Photoshop allows you to
preview your adjustments, you can get a good feel for the adjustments without hurting your image.

3. Image size

Another common basic feature of

Photoshop that lives on the Image menu is
image size. You use this function to resize an
image. When you select image size from the Image
menu, a dialog box appears with some numbers
corresponding to the current size.

Fig. 13. The Image Size dialog

Information and Communication Technology – PHOTO EDITING Page 28

 You will notice that there are two sets of sizes, Pixel Dimensions and Document Size. Pixel
Dimensions refers to the image's size on screen, and Document Size refers to the size at which the
document will print. You will observe
that all the numbers change when you change one of them. This default setting preserves the original
height and width ratio of your image when you make changes to its size. If you want to change only one
dimension of the image, uncheck the "constrain proportions" checkbox at the bottom of the dialog.

Notice that in the Documents size settings, you have the option to change the resolution
(remember, images will always be approximately 72 pixels/inch on screen). You can use this to change
the resolution of your image but, if you do not want the quality to decrease, you should only go from hi-
res to low-res.

4. Canvas Size
Canvas Size is similar to Image
Size, but changes to an image's canvas size
can provide more working area for your
image. In case you want to annotate it, copy
more images into it, or perform any number
of other graphic variations.

5. Crop
The Crop function in the image menu is fairly straightforward. Make a selection, go to Image
and select crop. Then, everything outside your selection disappears. The image size reflects the change.

ACTIVITY
You have learned much about image menu through classroom discussions, demonstration and
tutorial video presentations. The next activity will test your familiarity with the tools and terms discussed.
Take note that these are terms worth learning, remembering and applying. You are now a few steps away
for becoming a good photo editor.

Directions: Choose the image menu being described in the following statements. Write only the letter
of the correct answer.
1. This is where you change the current document’s color mode and bit depth.
2. From here, you can change the colors and overall tonal quality of your image.
3. This option lets you change your image’s resolution and dimensions.
4. Choose this option to change your document’s dimensions without changing its file size or resolution.
Use this command if you need more space in your document but do not want to resize the elements
that are already there. This command saves the area you have selected and deletes everything else,
leaving you with an image that is only as big as the selected area.
a. Crop
b. Mode
c. Image size
d. Adjust
e. Canvas size
f. Layer
g. Tools

Information and Communication Technology – PHOTO EDITING Page 29

 Lesson 5

Layer Management

The most difficult aspect of working in Photoshop is how to work in a document on multiple
layers. Creating multiple layers lets you easily control how your artwork is displayed, edited and printed.

Layers Pane

The layers pane is one of the panes that is best to keep visible at all times. If you do not see it
when you open Photoshop, go to window> show layers and it will be restored.

Layer Blending Mode Opacity

Layer Locking Option Fill

Layer Visibility

Layer Lock

Layer Style
Delete Layer

Layer Mask Create a new New Fill or Adjustment New Layer

set

Fig. 15. The Layers Pane

Information and Communication Technology – PHOTO EDITING Page 30

 Shop Reminder
Adding New Layers A note on working with jpeg file copied from other application

You can think of the layers as clear pages If you have pasted in a jpg image, you will notice that there is only one la
The layer is now unlocked. Depending on how you plan to alter this imag
overlaying each other.

The layers pane provides a good

visualization of this concept because the layers
appear in the layers pane as they are organized in
the document. To demonstrate this, add a new layer
and type a little on it.

 Go to Layer> and Select New Layer. Type a

name for the layer in the dialog box that
appears and click enter.
 It should now appear in the layers pane
(but since it is currently empty, there will be no sign of it in the image).
 Select the text tool from the tool bar, click and drag somewhere on the image (making sure the new
layer is still highlighted in blue).

Selecting Layers

1. Select the Type tool and type a title or

Filename. On the top text layer, click the
eye icon.
2. Click on the paintbrush next to it.
3. Click on the name of the layer below.
4. You see that the paintbrush now shows on
the new active layer.
5. Click on the empty paintbrush box
to lock and unlock layers to avoid
unwanted changes.
6. The squiggle means it is locked. Fig. 16. The Layer Pane
Arranging Layers

Arranging layers can be done manually. To do it, follow these steps.

1. Click and drag your text layer underneath the original image layer. You will see that the text
no longer appears. That is because it is now located behind the opaque image layer.

Information and Communication Technology – PHOTO EDITING Page 31

 However, there is a quicker and
easier way.

2. Just click on the do geared

page icon at the bottom of the
layers pane.
3. You can double click on this
layer's name to change it.
4. If you want to delete a layer,
you can either drag it to the
trash icon at the bottom of
the layers pane or select the
layer and click the trash icon.

Sometimes you want to combine the contents of two layers onto one layer. To do it, follow the
following steps:

1. Select the layer you want to be on top of the new merged layer, make sure the other layer you
Fig. 17.
would like to merge is directly beneath Merging
it, and Layers
select Merge Down from the Layer menu.
2. The two layers are now one. If you want to merge down an entire file of layers, select "Flatten
image" from the layers menu and then all layers will be squashed into one.
3. When you merge or flatten layers that contain text layers, you will be asked whether you would
like to rasterize that text (that is, convert it to an image and lose the ability to edit it). It is a good
idea to copy any layer and hide them before you rasterize and merge.
4. It saves you the work of completely recreating layers if you decide to change text.

A. Duplicate Layer

Open the image in Photoshop, and select the layer that you want to duplicate. Click and hold the
Photoshop layer and drag it to the bottom section of the layers palette on to the new layer button.
Now you will have two versions of the same layer, you can rename the layers so you know which
is which, or just turn off the visibility of the safe layer as shown by clicking on the eye symbol box and
delete the layer that you do not want.

B. Rasterize and Flatten Layers

If you apply layer style effects to text or shapes and then rasterize the layer, only the text or shape
content is rasterized. The layer effects stay separate and editable. Usually, this is a good thing, but if you
then apply a filter, it only gets applied to the text or shape and not the effects. To rasterize and flatten the
entire layer contents, create a new, empty layer below the layer with your effects and merge down
(Ctrl+E on Windows).

C. Copy and Paste Layer Style

Copying and pasting styles is an easy way to apply the same effects on multiple layers. From the
Layers panel, click on the layer with the style you want to copy, Then, go to Layer > Layer Style > Copy
Layer Style. Select the destination layer from the panel, choose Layer > Layer Style > Paste Layer Style.
This will replace any existing styles on the target layer. You can even copy a style from one document
and paste it into another.

Information and Communication Technology – PHOTO EDITING Page 32

D. Clear/Remove Layer Style

There are two ways to remove a style from a layer using the Styles panel.

1. The first style in the Styles panel is named “Default Style (None).” Clicking on it will remove all
style effects from the current layer, whether they were presets or not.
2. The second way is by clicking on the Clear Style button at the bottom of the Styles panel. Both of
these methods have the same effect as dragging the layer's Effects bar to the trashcan icon in the
Layers panel.

Now, as you add layers to an image, it is helpful to give them names that reflect their content.
Descriptive names make layers easy to identify in the panel.

Activity. Renaming a Layer or Group

Directions: Below is a hands-on activity that you will perform in renaming a layer or a group. Follow
the given instruction in each task carefully.

 Double-click the layer name or group name in the Layers panel, and enter a new name.
 Press Alt (Windows) and double-click the layer (not its name or thumbnail) in the Layers panel.
Enter a new name in the Name text box and click OK.
 Select a layer or group, and choose Layer Properties or Group Properties from the Layers menu
or the Layers panel menu. Enter a new name in the Name text box and click OK.

Reflect and Understand

Directions: Read the following selection on layer management. Write your reflection on it.
Understanding Layers

To visualize the layers concept, imagine the following: You have a color photo that you wish to
change. You place the photo on a tabletop to use as a work surface. One of the changes you want is to
darken the main subject's jacket with a black marker. However, you do not want to darken the photo
directly in case you do not like the results or change your mind later. Therefore, you take a sheet of clear
transparency and lay it on top of the photo. With the marker you draw on the transparency to darken the
jacket. Lifting the transparency away leaves the unchanged photo.

In the above scenario, you created two layers. The photo was the first layer, and the second layer
was the transparency to which the changes were applied. In the same manner you could have layered
additional sheets of transparency to isolate various changes onto unique layers; on the next layer you
could have drawn a mustache, on the one after that glued a bow tie, and so on.
Digital photo editing software uses the same concept of layers as described above, except that it is
done electronically. If you are still not clear on the concept of layers, please keep reading. You may also
conduct an interview with a photo editor on how they do this.

Transfer

Information and Communication Technology – PHOTO EDITING Page 33

 Have you mastered working on layers in Adobe Photoshop? Whether yes or no, the fact remains
that it is somewhat tedious and confusing. The best thing for you to do is to work on it repetitively.
Explore the layer panes until you master layer management skills.

Activity. Exploring Layers

Direction: Explore the layer panes and perform the tasks given below.

Select one or more layers. Then, explore and work on PS Reminder

them. For some activities, such as painting or making color and If you don’t see the desired results when using
tonal adjustments, you can work on one layer at a time. A
single selected layer is called the active layer. The name of the
active layer appears in the title bar of the document window.
command, you may not
For other activities, such as moving, aligning, havethe selected.
correct Check layer the
transforming, or applying styles from the Styles panel, you can Layerspanelto make
select and work on multiple layers at a time. You can select
layers in the Layers panel or with the Move tool. sure that you’re working
on the correct layer.

Information and Communication Technology – PHOTO EDITING Page 34

 Lesson 6

Working with Text

The tools that Photoshop provides for manipulating text are probably its most straightforward
features.

In the previous lesson, you had encountered this tool under the Photoshop toolbar. This is the tool
you need in working with text in your Photoshop document.

Just select the text/type tool, click and drag, and you are now ready to type your desired
text. Use the options bar to change the style of highlighted text.

Fig. 18. Text styles in the options

When you engage the type tool, what you type automatically becomes its own layer and is given
what is typed as a layer name. This is a very helpful feature when dealing with multiple text layers.
Double click the T to easily edit the text.

If you want to merge a text layer with an image layer, the text layer must be rasterized, or
converted to an image first. Once this is done, you can no longer edit the text. Unless you are using text in
an illustration or altering letters, this may not even be necessary.

The Type Tool

Information and Communication Technology – PHOTO EDITING Page 35
 Whenever you want to add any sort of text to a document, use Photoshop’s Type Tool which is
found in the Tools panel along the left side of the screen. It is the icon that looks like a capital letter T.
You can also select the Type Tool by pressing the letter T on your keyboard:

Fig. 19. Selecting the Type Tool from the

With the Type Tool selected, your mouse cursor will change into what’s commonly referred
to as an "I-beam". It is enlarged a bit here to make it easier to see.

Fig. 20. The Type Tool’s I-beam Mouse

Choosing a Font

As soon as you select the Type Tool, the Options Bar along the top of the screen updates to show
us options related to the Type Tool, including options for choosing a font, a font style and the font size:

Fig. 21. From left to right – the font, font style and font size options

To view the complete list of fonts that are available to you, click on the small down-pointing triangle to the right
of the font selection box:

Fig. 22. Clicking the triangle to the right of the font selection box
This opens a list of all the fonts you can choose from. The exact fonts you will see in your
list will depend on which fonts are currently installed on your system.

Changing the Size of the Font Preview

If you are using Photoshop CS2 or higher, Photoshop lists not only the name of each font but also
a handy preview of what the font looks like (using the word “Sample” to the right of the font’s name):

Fig. 23. List of all fonts installed on your computer

You can change the size of the font preview by going to Photoshop’s Preferences settings. On a
Information and Communication Technology – PHOTO EDITING Page 36
 PC, go up to the Edit menu in the Menu Bar along the top of the screen, choose Preferences, and then
choose Type. On a Mac, go to the Photoshop menu, choose Preferences, then, choose Type. This opens
Photoshop’s Preferences dialog box set to the Type options.
Fig. 24. Preview of the font beside the name
The last option in the list is Font Preview Size. By default, it is set to Medium. You can click on
the word “Medium” and choose a different size from the list. Extra Large size is shown below:

Fig. 25. Font Preview Size Option

Click OK to close out of the Preferences dialog box, and if you go back up to the Options Bar and
bring up the list of fonts again, you see that the font previews now appears much larger. The larger size
makes the previews easier to see but they are also taking up more space. Stick with the default Medium
although it is completely up to you. You can go back to the Preferences and change the preview size at
any time.
Choosing a Font Style

Fig. 26. Larger font previews

Once you have chosen a font, choose the font style by clicking on the triangle to the right of the
Style selection box:

Fig. 27. Choosing a font style

Select the style you need (Regular, Bold, Italic, etc.) from the list that appears. The style choices
you’re given will depend on the font you have chosen since some fonts have more styles available than
others.

Information and Communication Technology – PHOTO EDITING Page 37

Fig. 28. Choosing a style for the font from the list
Setting the Font Size

Choose a size for your font by clicking on the triangle to the right of the Size selection
box:

Fig. 29. Setting the font size from preset choices

This will open a list of commonly-used preset sizes that you can choose from, ranging from 6
pt up to 72 pt.

If none of these sizes suit your needs, you can

manually enter any value you want into the Size box.
Simply click and drag over the existing size to
highlight it, type in the new size, then press Enter
(Win) / Return (Mac) on your keyboard to accept it.
For example, change the size to 120 pt (do not worry
about adding the "pt" at the end of the number because
Photoshop will automatically add it when you press
Enter / Return):
Fig. 30. Several preset font sizes

Fig. 31. Typing directly into the size box if none of the preset sizes
Choosing the Text Color

The Options Bar is also where you choose a color for your text. A color swatch appears near the
far right of the options. By default, the color is set to black. To change the color, click on the swatch.
Fig. 32. Click on the color swatch to change the color of the

Photoshop will pop open the Color

Picker where you can choose a different
color for the text. For now, leave your set
to black, so simply click the Cancel button
to cancel out of the Color Picker. If you
do select a new text color, click OK when
you are done to close out of the Color
Picker:

Fig. 33. Using the color picker

Information and Communication Technology – PHOTO EDITING Page 38

Adding Type to the Document Fig. 34. Adding type to the Photoshop document

There are two different types of type that you

can add to a document in Photoshop. You can add point
type (also known as character type), and you can add area
type (also known as paragraph type). The difference
between them is that point type is mainly used for adding
small amounts of text to a document (a single letter or
word, a heading, etc.) while area type is used for adding
larger amounts of text inside a pre-selected area. The one
you are looking at here is point type because it is the
more straightforward of the two and the one you will use
most often.

To add point type, simply click with the Type

Tool in the spot where you want your text to begin. A
blinking insertion marker will appear
letting you know that Photoshop is ready for you to start typing. However, as soon as
you click, before you even begin typing, Photoshop will add a special kind of layer known as a Type
layer to your document, which you can see in the Layers panel. It is easy to spot Type layers because they
have a capital letter T in their thumbnail. Any time you add text to a document, it is placed on a Type
layer. Photoshop will initially give the new Type layer a generic name like "Layer 1," but the name will
actually change once you have added your text.

Process

You can add text and shapes of different colors, styles and effects to an image. Use the Horizontal
Type and Vertical Type tools to create and edit text. You can create single-line text or paragraph text, too.
Adding text to your image makes it more attractive and appealing.

Activity. Blazing Text

Directions: Below are the steps in adding text to an image. Perform the indicated steps and explore.
Save your output with the filename Adding Text.psd.

From the toolbar, select the Horizontal Type tool or the Vertical Type tool. Do one of the following:

1. To create a single line of blazing text, click in the image to set an insertion point for the type.
2. To create paragraph text, drag a rectangle to create a textbox for the type.
3. The small line through the “I” beam marks the position of the type baseline. For horizontal type,
the baseline marks the line on which the type rests; for vertical type, the baseline marks the center
axis of the type characters.
4. (Optional) Select type options, such as font, style, size and color in the Tool Options bar.
5. Type the characters you want. If you did not create a textbox, press Enter to create a new line.
6. The text appears in its own layer. To view the layers in the Expert mode, press F11.

Commit the text layer by doing one of the following:

Information and Communication Technology – PHOTO EDITING Page 39
 1. Click the Commit button.
2. Press the Enter key on the numeric keypad.
3. Click in the image outside the textbox.
4. Select a different tool in the toolbox.

Learning about using the text tool in Adobe Photoshop is an important part of the image editing
process. Watch this video to learn more.

Video: Using the Text Tool in Photoshop | eHow.com

http://www.ehow.com/video_4442157_using-text-tool-photoshop.html#ixzz28mwdnNcJ

ACTIVITY
The Disaster Risk Reduction Management Council (DRRMC) encourages us to help them in their
advocacy to prevent the occurrence of disasters. Your school is in full support to this purposeful
endeavor. As a student, you play a vital role in this. How could you apply your photo editing skills to
advocate this endeavor? Yes, do some advocacy campaigns.

Activity. Advocacy Campaign

Direction:Perform the activity given below.

1. Create a new file in Photoshop.

2. Choose a photo about a disaster/hazard.
3. Insert a slogan to inform every one of your advocacy campaign.
4. Print it in a legal size bond paper.

The Department of Education (DepEd) likewise campaigns for various programs and thrusts for
your own advantage on Solid Waste Management (SWM) such as War on Waste (WOW), SIGA (School
in a Garden), and the like. Make an advocacy campaign for this purpose. Follow these steps.
1. Form a group of five. Select your leader.
2. Brainstorm and assign each group to work on a program or thrust of your school that
you want everyone to be aware of and observed.
3. Create a legal sized poster of the program or thrust assigned to you by applying your
honed skills in photo editing.
4. Do group critiquing before printing the final poster.
5. Submit it to your teacher for rating and post it in conspicuous places in your campus.

Information and Communication Technology – PHOTO EDITING Page 40

 Lesson 7

Image Editing
Images do not always come exactly as you wish to use them. You may need to do some
cropping, adjust their colors or luminosity (brightness), change their size (resolution), or modify their
content. You could also try GIMP, PhotoPlus, Paint.NET, Corel PaintShop Photo Pro, or other image
editors for personal computers. In fact, there are many programs available, and one is sometimes included
with the purchase of any scanner or digital camera.

The directions provided here will apply to Photoshop Elements under Windows. For other
software, you will have to make some minor adjustments, but the basic functions are the same. You
should always think more about what you are trying to accomplish than which button to press.

You will be producing final images in Joint Photographic Experts Group (JPG) or Portable
Network Graphics (PNG) format as these are best for compressed photos with many colors and smooth
transitions. Photoshop's own format Photoshop Document (PSD) is the best for working copies to avoid
losing quality over multiple saves, but PSD files are quite large and do not work on the web. JPGs
compress very well, but the compression is "lossy" - some image quality is lost with each save - though at
the highest quality setting, very little is lost. You should not use compression until all of your editing is
done and your final version of the photo is ready. Then compress the final copy that will go online. It
is also a good idea to always work on a copy, so you can go back to your original backup copy if
something goes wrong.

Always use your image editor to adjust image size. Never adjust image size of a large photo in
your web page editor. Though it is possible to do this, it is very inefficient and tends to result in poor
image quality.

Cropping

You have learned how to crop images in the previous lessons. This time, you are given another
opportunity to enhance your learned skills.
1. Create a folder called "photos" or "Photoshop practice" or " project 1" in a place where you will be
sure to find it, possibly in your My Documents, or My Images folder, or on your Desktop.
2. Download the photo of the church, "ph-church.jpg" into your "photos" folder (right- click on the
image and save the image, taking care to navigate to the correct folder).

Fig. 35. Photo of the church

3. Open the image in Photoshop or other image editor.
4. Either look for your image from the Photoshop File/Open menu, or drag your image onto the
Information and Communication Technology – PHOTO EDITING Page 41
Photoshop icon, or into the program window.
5. Crop the image to get rid of the car, the pigeon and the empty sky. Then make the final image
smaller to fit your needs.
6. Once ph-church.jpg has been opened in your image editor, check to make sure that it is being
displayed at 100% of its full size so you know exactly what you are looking at (Photoshop will
sometimes initially display images at smaller resolutions to make them fit on your screen).

Fig. 36. Showing that the photo is displayed at 100%

7. Look at the title bar of the ph-church.jpg window within Photoshop. It should say 100% or 1:1. If not,
you can use the Zoom tool to change the way the image is displayed.

8. Hold the Alt key down and click to reduce the image display size (zooming in and out).
PS Reminder
9. Click on the Marquee tool button to select a Tools like the Zoom tool or the Marquee tool that we will soon be using, can be

rectangular area of the image. When the zoom tool is selected, clicking on the image will increase its apparent

10. When an area of the image is selected, effects (in Don't confuse zooming with changing the actual image ize.
other words anything you do) will apply only to that
area. To select the area, look at the image and imagine The key idea here is that unless you are at
100%, what you see is NOT what you get.
the rectangle within it that you wish to save as your
final image. Sometimes it is useful to zoom in or blow up an image while working on it, but

11. Point your cursor at one corner of your imagined

rectangle.

12. Click and hold with the marquee tool on that

corner, then drag the cursor to the opposite corner to
select the area that you want.

13. When you are satisfied with the selection, choose

PS Reminder
the Image/Crop menu item to finish cropping the For serious work in Photoshop with no loss of image quality during complic
photo.
Another option that can help avoid loss of quality may be to use JPG but at t

PNG has also become a popular image format for the web and can be used i

Fig. 37. Selecting the cropping menu

14. Save your work, and remember to save it often.
Resizing an Image

Information and Communication Technology – PHOTO EDITING Page 42

1. Choose the menu item Image/Resize/Image Size to reduce the size
of the image.

2. Make sure that the constrain proportions box is checked so the

proportions of the photo will be respected (This is the default
setting).
3. If the current resolution of the photo is 72, you can reduce the width and height by half (making
the image 1/4 its current size or area) by changing the resolution to 36.

4. Change either the width or the height by a percentage or by specifying the target size as a number of
pixels.
PS Trivia
5. If you are not satisfied with the results of Using pixels instead of percent can allow you to make all of a group of images t
the change and need to modify the image
size more than once, use the Edit/Undo To alter the image size in this way in Photoshop Elements, you may need to check
menu item to restore the original image
before making the new change. You may To preserve image quality, avoid making repeated changes.
also use the History tab (or Undo History) to
undo multiple edits.

6. Save your work and close the ph-

church.jpg image, but not the Photoshop
program.

Cutting out pieces

1. Open the ph-diet.jpg image to cut a sign out for use in a new file. Download
and open the photo.
Click on the Lasso tool button to select the outline of something in an image.

Begin with the green sign that says "cocolmeca para quemar la grasa."

Point the lasso tool on one corner of

the sign. Hold down on the left mouse button while you drag along the sign a

Fig. 38. The ph-diet.jpg

When doing careful work with small parts of images requiring good small muscle coordination, it is far easier to first zoom in on the

5. Point to the first corner again, but this time hold the ALT key down at all times. Click on the corner
and release the mouse clicker (however, keep holding down the ALT key).

Information and Communication Technology – PHOTO EDITING Page 43

6. Click the mouse pointer on the next corner, forming a dotted line
between the first point and the next point along the edge of the sign.
Click on the next corner, still holding down the ALT key. You can
continue clicking around the edges until you get back to your first point.

When you release the ALT key, the sign will be selected. (You might also want to play with the Magnetic Lasso tool or the Polygon

7. To make a new image containing just the sign, first copy the selected image to the clipboard:
choose the menu item Edit/Copy or press Ctrl-C.

8. Next create a new image window by choosing the File/New menu item.
Select New Image from Clipboard.

9. You might want to straighten the sign using various options in the Image/Rotate menu.
PS Trivia
10. Try saving your new image as GIF file (for
simple images with few colors, the GIF format In some programs, you may first need to change the
sometimes makes smaller files than JPG). mode from RGB Color (with millions of possible
colors for each pixel) to Indexed Color (with no more
than 256 possible colors for each pixel) using the
11. Finally, choose File/Save As change the file Image/Mode menu item.
type to GIF, and rename the file before you save
it. Some programs might use a File/Export If your image has more than one layer, this will flatten
feature to do the same thing. layers (as will the Layers / Flatten Layers menu),
leaving everything in just one layer. Layers can be very
Adjusting Exposure useful (for instance to paste the sign into another
picture).
Sometimes an image may be too light or
too dark for your needs. Ideally a photo should In some programs that use layers, you might need to
make use of the entire range of luminosity or flatten layers before changing the image mode.
brightness from black to white.
The default options for an indexed color image
(adaptive palette, 8 bits/pixel, diffusion
This is also true in conventional photography.dithering) are fine for now.
If an area of a photo is too light or too dark, it means that part of the contrast range is squeezed into too
narrow a band. There are several ways to illustrate this and to modify the way the image output will
appear.

Try to lighten the sidewalk in the ph-door.jpg image on the next page.

Information and Communication Technology – PHOTO EDITING Page 44

 Fig. 39. The ph-door.jpg image
1. Save a local copy and load it into Photoshop.

2. Choose the menu item Enhance/Adjust Lighting/Levels in Photoshop Elements to work with the
histogram for the image.

A histogram is a graphical
representation of the distribution of
colors by order of brightness from
black to white. The dark part of the
image is mostly in the leftmost peak
on the graph.

The input levels are the

values that will be displayed as
black (0 - the black triangle), white
(255 - the white triangle), and the
midpoint between them (1.00 - the
gray Fig. 40. Options on brightening and darkening images

triangle).
3. To change these values, slide the
triangles by dragging them with the mouse.

Grab the black triangle and slide it

to the right, lining it up with the
beginning of the leftmost peak, changing
the input level from 0 to 16.

Fig. 41. A histogram representing the distribution of colors

Notice that this makes the dark section look worse; you actually want to stretch out the colors in
that range instead of compressing them, so move it back to the edge (back to 0).

Information and Communication Technology – PHOTO EDITING Page 45

4. Next, try moving the white triangle to the left just a
bit to lighten up the highlights (moving it too far
creates a washed out effect).

5. Grab the gray triangle and slide it to the left until the
midpoint input level more evenly balances the light and
dark areas.

6. Save the image with a new name (ph- door1.jpg).

Fig. 42. Lightened image of figure 39

Using the Magic Wand
You will make your selection using the Magic Wand tool instead.

1. Click on the magic wand and look for the Tolerance option at the top of the window.

2. Set the tolerance to around 32 or 40. Why 32? Because the tolerance adjusts the sensitivity of the
selection. This is something that you may have to experiment with for each different magic wand
selection, depending on the area of the image that you are selecting.

3. Modify the size of the selection using Alt to subtract an area from the selection or Shift to add an area
to the selection.

4. Use the menu item Enhance/Adjust Lighting/Levels or even Enhance/Auto Levels or Auto Smart Fix
to make adjustments only to the selected area.

5. Save your work under a new name.

Many other adjustments found under Image, Filter, and Enhance can be quite
useful.
 If your manipulations make an image that begins to appear faded, you can enhance the Contrast.
 If the colors are washed out, you can enhance the Saturation. If the colors look odd, the Auto
Color Correction function might help.
 Explore the adjustment options and, if you do not like your changes, use Undo.
Cloning

Sometimes there are things in a photo that you wish were not there. The ads in the picture below
attract attention away from the two women who are the real subject.

Information and Communication Technology – PHOTO EDITING Page 46

 You can edit a photo in many ways.
Simply erasing the ads would look odd
because it leaves a solid, unnatural color. To
make it look natural, you will change the
image by cloning from other parts of the
photo using the Clone or Rubber Stamp

tool. Cloning in photographs is not

illegal. There are several steps to using this
tool. First decide what you want to remove
or create and which part of the image you
can copy over the part you do not want.
In this case you will take the white part of
the wall as your point of origin to cover the
Fig. 43. Original image for cloning ads.

1. Use the Zoom tool to zoom in on the area where you will be working. If it looks ok up close, it will
look great when you zoom out.
2. Select the Clone or Rubber Stamp tool.
3. Point to a white area that you want to clone, hold the ALT key and click once. This sets the origin
from which you will duplicate.

Look at the clone brushes. Pick one that is not too big nor too little, preferably a "fuzzy" brush
where you wish to avoid sharp lines. Make sure that the Rubber Stamp Opacity Options are set to 100%
so the new image will completely hide the old image.

Now slowly cover the ads with white from the wall. You will have to reset the point of origin
several times as you do this to cover a large enough area. As you move your brush, the origin point moves
as well. Avoid covering over anything that you do not have to. The more original material you leave, the
better the finished product will look. Think about shadows - is there really just one white? The farther the
point of origin is from the cloning area, the harder it will be to see repeated patterns. (That is the
psychology of perception.)

4. If you make mistakes, use the Edit/Undo menu item to undo them or use your History
window.

You might even get fancy and try to copy the brick wall, but watch out for those lines and the
perspective. To match up lines, you can use the preview feature.

Information and Communication Technology – PHOTO EDITING Page 47

 Fig. 44. Cloned image

5. Click the double rectangle icon to check the Show Overlay box to preview the image to be cloned.

You might also try the Clipped feature to see the preview only in the brush area or the Auto
Hide feature for a cleaner view while you are cloning.

Fig. 45. Show overlay, clipped and auto hide buttons

If you end up with any bad looking

transitions between old and new material,
the smudge tool can help you smooth over
the problem area.

6. Do not forget to save your work.

Putting it all together

Fig. 46. The smudge tool

Can you use all of the techniques to fix

this image?
Crop it to get rid of the boy in the
red pants on the left, the elbow on the right,
and some of the ground in front.
Put the woman wearing a purple dress
in a new image by herself. Select, copy,
File/New, paste.
Use the rubber stamp to remove the little boy in the shadows to the right, the woman in
purple dress, and the shadow on the ground in front of the children.

Finally, adjust the exposure as you see fit.

Set Photoshop Print Options and Print

1. Choose File > Print

A. Preview print
B. Set printer and print job options
C. Set paper orientation
D. Position and scale image
E. Specify prepress output options
F. Specify color management and proofing options

Information and Communication Technology – PHOTO EDITING Page 48

 Fig. 47. The Print tool box

2. Select the printer, number of copies and paper orientation.

3. Adjust the position and scale of the image in relation to the selected paper size and orientation.
4. Set Color Management and Output options, which you access from the pop-up menu in the upper-
right corner.

Do one of the following:

 To print the image, click Print.
 To close the dialog box without saving the options, click Cancel.
 To preserve the options and close the dialog box, then click Done.

Set Printer Options

Note
If you get a warning that your image is larger than the printable area of t
1. In the Print dialog box, click Print
Settings.
2. Set paper size, source and page
orientation as desired.

The available options depend on your printer,

printer drivers and operating system.

Work on each task given below:

 access to a computer with Adobe Photoshop

 open a photo in Photoshop
 do simple photo-editing tasks (cropping, resizing, rotating)
Get arty

You have decided to enter an artistic photo competition. Choose a photo and get creative with
some of the Photoshop tools and see what you can come up with. The more creative the better!

Information and Communication Technology – PHOTO EDITING Page 49

Crazy Crosslinks
Set up a Photoshop document 5” x 7” or 7” x 5” with a resolution of 72 dpi, RGB. Save your
image with “your name Integrate 1” into your own work folder. Selections will be made from multiple
images and put into this file. Canvas size can be enlarged or cropped to meet the needs of the image.

Students will create a hybrid image using a wide variety of selection tools and layer management
skills. Write down the steps of activities completed.

Combine the Images

Bring two photos together in a single file. You can do this in two ways, so be sure to demonstrate
both options:

 Use the selection tools to select an area of one photo, including the person, then cut and paste it
into the other file. Be sure to show both the free-form and the rectangular selection tools.
 Use the cloning tool to copy an area of one photo, pixel by pixel, into the other.

Create a Scrapbook

 Open Photoshop and create a letter size document with CMYK color.
 Study the layers in the document.
 Place a picture into the document and study the layers again.
 Resize, rotate, warp, and move the picture.
 Place picture from the Filter Pictures Folder onto the scrapbook page.
 Select a layer to make edits to the picture.
 Adjust a layer to make stacking order.
 Add text to the scrapbook page.
 Use the tools on the Option Bar to format the orientation, font, size, alignment, color and
shape.
 Resize, rotate, and move text.
 Save the document in a Scrapbook folder as Page 1.

Reflect and Understand

Want to learn more and enhance your photo editing skills like a professional one? Then
download and watch Adobe Photoshop tutorial videos in the Internet.
Watch this video (Photoshop Tutorial Professional Edit)
(http://www.youtube.com/watch?v=j9xjYx_Nh9s)

After watching the video, answer the following questions:

1. What is the most common photo editing tool used?

Information and Communication Technology – PHOTO EDITING Page 50
2. What are the concepts being applied during the editing process?
3. What are the advantages and disadvantages of editing pictures/images?

Play the video again to check your answers.

Transfer

Well, after learning the basics of photo editing using Adobe Photoshop, it is now time for you to
showcase your learning.

Show your Photo Editing skills!!!

Create a banner or tarpaulin about Mother Nature using photo editing tools. Be creative!

The banner shall have the following technical specifications: 300 DPI, 8X13 inches, Orientation:
Portrait.
Submit in soft and hard copy.

Apply the Principles of Design so that you can have the best banner.
 Balance
 Proportion
 Rhythm
 Emphasis
 Unity

Assessment Criteria
Creativity - 30%
Use of photo editing tools - 50%
Harmony and balance - 10%
Relevance to the theme - 10%
TOTAL 100%

Information and Communication Technology – PHOTO EDITING Page 51

 Summary
This module enables you to learn the process and delivery involved in photo editing. Moreover, you were
able to learn the basic features of Adobe Photoshop as one of the most commonly used photo editing application
software.

Now that you have learned the basic concepts, skills, techniques and ethical standards of photo editing, you
are now equipped with a wealth of information. Your new learning will consequently help you become a good
photo editor in your community which you might capitalize on later as a source of income. Moreover, you are now
capable of enhancing your own photos and creating a compilation of posters that support different government
thrusts and advocacies on environmental awareness. In addition, you can now create a banner or tarpaulin promoting
your school’s programs, projects, and achievements.

You Filipinos love to take pleasure in capturing memories through photographs. Now, we need not fear that
good moments will be ruined or faded through the years. Photo editing services will surely save the day.

Whether you are photo editing for business, or just for fun, there is a bright future ahead of you.
Glossary

Acetate- A transparent sheet that you write or print something on.

Aperture-The small hole at the front of a camera, which can be made larger or smaller to let more or less light in
when you take a photograph.
Attributes- Characteristics of a person, thing, or group.
Career path-Understanding what knowledge, skills, personal characteristics and experience are required for a
person to progress.
Choppy- Rough, coarse, or irregular.
Color depth- Referred to as bits per pixel (bpp).
Entrepreneur-A person who organizes and operates a business or businesses taking on financial risk to do so.
Entrepreneurship- Starting a new business.
Environmental scanning-A process of gathering, analyzing and dispensing information for tactical or strategic
purposes.
Fish eye-Wide angle.
Futuristic-Advanced, progressive, and forward thinking. Fuzzy- Indistinct; unclear, or distorted
histogram Statistical graphical representation showing the relative numbers of a variable or part of a range of
variables e.g. population of pixels with a certain value. The taller the column at a certain value the more pixels have
that value, the width of the column representing the range of values being counted. Usually arranged so the left is the
shadow end (low light) and highlight is to the right.
.jpeg- A file format which means Joint Photographic Experts Group.
Lossy-A form of image compression when saving the image that discards data from it. murky Gloomy or dark.
Myria-Indefinite number; innumerable.
Photo editing-Changing or improving graphic images. It typically refers to bitmapped images rather than vector
graphic drawings. Using an image editor, images can be modified by an artist using pen, brush, airbrush, and other
"painting" tools. Filters can be applied, which are algorithms that automatically change the appearance to a selected
area of the image.
Photo editor- An image editing application that is specialized for managing photos from digital cameras. It is used
to crop and touch up photos, as well as organize them into albums and slide shows. It also refers to somebody who
edits photos.
Pixels-Any of a number of very small picture elements that make up a picture.
.png- A file format and shortcut for Portable Network Graphics.
Information and Communication Technology – PHOTO EDITING Page 52
.psd- Shortcut for Photoshop document. A .psd file is the file format in which Photoshop saves documents by
default.
Raster image- A form of graphics in which closely spaced rows of dots form an image on a computer screen.
Resolution-The number of pixels that form an image or a photograph. Rectilinear-Relating to a straight line or
lines.
Silhouetting-Projecting on a screen. Skewed-Turned or placed at an angle.
Tactical- Actions carefully planned to gain immediate end.
Vector image-An image that is composed of individual elements e.g. arc, line, polygon, that have their own
attributes.

REFERENCES

Adobe Photoshop Elements Techniques Photoshop Tutorials / Tips & Tricks

http://www.thephotoargus.com/tips/3-signs-of-bad-photo-editing-and-how-to-avoid-the- common-pitfalls/
http://EzineArticles.com/163162
http://www.dslrfanclub.com/resources/tips-and-sharing/129-why-photo-editing-is- important.html
http://www.sooperarticles.com/art-entertainment-articles/photography articles/importance-professional-photo-editing-
services-884472.html
http://www.axzopress.co
www.youtube.com/watch?v=E8DmvSO-QL0 m/downloads/pdf/1426019181pv.pdf
http://www.mediacollege.com/adobe/photoshop/intro.html
http://lanoie.com/classes/Photoshop/Layers/lectures/lecture.html
http://web.cortland.edu/flteach/mm-cyourse/photoshop.html http://www.picturecorrect.com/tips/introductory-
photoshop-lessons-and-tips/
http://encyclopedia2.thefreedictionary.com/Photo+editing
http://www.pcmag.com/encyclopedia_term/0,1237,t=image+editing&i=44789,00.asp
http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e4100103 1ab64-78d2a.html
http://www.nscb.gov.ph/ncs/10thNCS/papers/invited%20papers/ips-06/ips06-02.pdf
HTTP://TINAAVALON.K12.MO.US/ASSIGN_FINAL_WEBSITE/MULTI-
MEDIA/PS_L1/PHOTOSHOP_LESSON_1.HTML

http://pc.net/glossary/definition/jpeg http://helpx.adobe.com/photoshop/using/tools.html
http://www.pcmag.com/encyclopedia_term/0,1237,t=PSD&i=62981,00.asp
http://www.tutorial9.net/tutorials/photoshop-tutorials/the-selection-tools/
http://www.ehow.com/how_2044098_crop-photo-adobe-photoshop.html
http://www.bairarteditions.com/pages/tutorials/photoshop/exposure.html
http://www.bairarteditions.com/pages/tutorials/photoshop/exlevels.html http://video.about.com/graphicssoft/Using-
the-clone-tool-in-photos.htm
http://www.technologytutorials.org/photoshop_basics/photoshop_toolbar_explanation_tu torial.html
http://www.insidegraphics.com/photoshop/photoshop_selection_tips.asp
Information and Communication Technology – PHOTO EDITING Page 53
http://www.google.com.ph/imgres?start=111&um=1&hl=en&sa=N&tbo=d&noj=1&tbm=is
ch&tbnid=rizPrcZ4XAD6M:&imgrefurl=http://www.alibony.com/pse/20090519text.htm&d ocid=w-
9KQvg6L4dfEM&imgurl=http://www.alibony.com/pse/images/2009
051909textoptions.jpg&w=600&h=500&ei=aBC2ULzkIKWSiAeevoGQCw&zoom=1&iact
=hc&vpx=955&vpy=72&dur=5953&hovh=205&hovw=246&tx=118&ty=111&sig=102564
490138504599628&page=5&tbnh=111&tbnw=133&ndsp=25&ved=1t:429,r:22,s:100,i:7 0&biw=1366&bih=667

http://www.google.com.ph/imgres?um=1&hl=en&sa=N&tbo=d&noj=1&tbm=isch&tbnid=
4YYOUR7xeZxq_hM:&imgrefurl=http://dandumitrache.com/working-layers-photoshop-
part-1/&docid=YgNiuebeo-5EiM&imgurl=http://dandumitrache.com/wp-
content/uploads/2012/09/layer_panel_options.jpg&w=600&h=400&ei=NRO2UPHfKauhi
Aesn4Ao&zoom=1&iact=rc&dur=1&sig=102564490138504599628&page=1&tbnh=128&
tbnw=198&start=0&ndsp=17&ved=1t:429,r:16,s:0,i:132&tx=1173&ty=441&biw=1366&bi h=615
http://www.kougarmedia.com/resources/PS_FUN.pdf
http://www.technologytutorials.org/photoshop_basics/photoshop_toolbar_explanation_tu torial.html
http://www.photoshoplab.com/photoshop-tool-basics.html
http://www.mediacollege.com/adobe/photoshop/tool/clone.html
https://www.elance.com/q/blog/2010/07/image-editing-basics-five-techniques-you-need- to-know.html
http://www.uvsc.edu/disted/tetc/docs/workshops/basic_image_editing_photoshop.pdf
http://www.macworld.com/article/1157702/imagesize.html http://www.graphics.com/modules.php?
name=Sections&op=viewarticle&artid=954
http://graphicssoft.about.com/od/pselements/ig/documents.--70/Saving-Images.-- 7D.htm
http://www.ischool.utexas.edu/technology/tutorials/graphics/photoshop7/index.html
http://www.dummies.com/how-to/content/options-bar-in-photoshop-elements-10- organizer.html
http://news.cnet.com/8301-17939_109-10170333-2.html http://www.ehow.com/how_5822567_create-new-file-
photoshop.html http://www.psyag.com/photoshop-basic/creating-a-new-document-in-photoshop/
http://www.photoshopbrushes.com/tutorials/duplicating-layers.htm
http://simplephotoshop.com/elementsplus/en_US/rasterize-layer.htm
http://graphicssoft.about.com/cs/photoshop/qt/flatlayereffect.htm
http://lanoie.com/classes/Photoshop/Layers/lectures/lecture7.html
The Importance of Professional Photo Editing Services
http://www.sooperarticles.com/art-entertainment-articles/photography- articles/importance-professional-photo-
editing-services-884472.html#ixzz28fyXbH7l
Video: Using the Text Tool in Photoshop | eHow.com http://www.ehow.com/video_4442157_using-text-tool-
photoshop.html#ixzz28mwdnNcJ

QUARTER II

WEB DESIGN
Information and Communication Technology – PHOTO EDITING Page 54
 • A web page is a document that is suitable for the World Wide Web and web browsers. 
Web page
A document which can be displayed in a web browser such as Firefox, Google Chrome, Microsoft Internet Explorer or
Edge, or Apple's Safari. These are also often called "web pages" or just "pages."
A WEBSITE, or simply a site, is a collection of related web pages, including multimedia content, typically identified
with a common domain name, and published on at least one web server.
Web Server
A computer that hosts a website on the Internet. "Hosting" means that all the web pages and their supporting files are
available on that computer. The web server will send any web page from the website it is hosting to any user's browser,
per user request.
Search Engine
A website that helps you find other web pages, such as Google, Bing, or Yahoo.  InternetExplorer,  Edge,  Safari, 
Firefox, or Chrome.
• Web pages, which are the building blocks of websites, are documents, typically composed in plain
text interspersed with formatting instructions of Hypertext Markup Language (HTML, XHTML). They may
incorporate elements from other websites with suitable markup anchors.
• Web pages are accessed and transported with the Hypertext Transfer Protocol (HTTP), which may optionally
employ encryption (HTTP Secure, HTTPS) to provide security and privacy for the user. The user's
application, often a web browser, renders the page content according to its HTML markup instructions onto
a display terminal.
HISTORY
The World Wide Web (WWW) was created in 1990 by the British CERN physicist Tim Berners-Lee. On 30 April
1993, CERN announced that the World Wide Web would be free to use for anyone. Before the introduction of
HTML and HTTP, other protocols such as File Transfer Protocol and the gopher protocol were used to retrieve
individual files from a server. These protocols offer a simple directory structure which the user navigates and chooses
files to download. Documents were most often presented as plain text files without formatting, or were encoded
in word processor formats.
Two types of Website:
1. Static
2. Dynamic
Two types of Website:
A static website is one that has web pages stored on the server in the format that is sent to a client web
browser. It is primarily coded in Hypertext Markup Language (HTML); Cascading Style Sheets (CSS) are used to
control appearance beyond basic HTML. Images are commonly used to effect the desired appearance and as part of
the main content. Audio or video might also be considered "static" content if it plays automatically or is generally
non-interactive. This type of website usually displays the same information to all visitors.
A dynamic website is one that changes or customizes itself frequently and automatically. Server-side
dynamic pages are generated "on the fly" by computer code that produces the HTML (CSS are responsible for
appearance and thus, are static files).
There are a wide range of software systems, such as CGI, Java Servlets and Java Server Pages (JSP), Active Server
Pages and ColdFusion (CFML) that are available to generate dynamic web systems and dynamic sites.
Various web application frameworks and web template systems are available for general-use programming
languages like Perl, PHP, Python and Ruby to make it faster and easier to create complex dynamic websites.
Why do people put up websites?
1. To do business and trade
2. To share personal interests and entertain people

Information and Communication Technology – PHOTO EDITING Page 55

 3. To send out information and push advocacies
4. To create communities
5. To search information
6. To create online school l and upload a tutorial
THE TOP 10 MOST IMPORTANT ELEMENTS OF A WEBSITE DESIGN
1. Navigation

 The website design should be easy to navigate and the menu items should easily accessible from any page.
 The viewer should always know exactly where they are on the website and have easy access to where they
would like to be.
2. Visual Design

People are visually oriented creatures, and utilizing great graphics is a good way to make your website more
appealing. Your website has about 1/10th of a second to impress your visitor - and potential customer - and
let them know that your website - and business (by proxy) - is trustworthy and professional.
 It's important not to go overboard with too much. Scrolling text, animation, and flash intros should be used
sparingly in your web design and only to emphasize a point for maximum effect.
3. Content
 This is the backbone of your website. Not only does your content play a major role in your search engine
placement, it is the reason most visitors are seeking from your website in the first place.
 Your website text should be informative, easy to read, and concise. Well thought out web content and copy
will do more than anything else to make your website design engaging, effective and popular.
4. Web Friendly
 No matter how informative, beautiful, and easy to use your website design is, it's useless unless it's web-
friendly. It is important that your web designers know the keys to making your website work on all the major
browsers, and that they utilize meta tags, alt tags, are fully versed in SEO (Search Engine Optimization).
 Many factors effect your search engine placement and visual appearance of your site, so make sure your web
designers know their stuff.
5. Interaction
 A truly effective website design engages your visitors immediately and continues to hold their attention
through EVERY page, as well as influences them to contact you. This is called 'conversion', and is probably
your website's ultimate goal.
 There is a fine line between ʻinteractionʼ and ʻannoyanceʼ, so the level of interac- tion should never outweigh
the benefit.

6. Information Accessibility
 Not all visitors to your website are interested in, or have the time to peruse the entire site. They may need to
access only a phone number or address, or just a certain bit of info. For this reason itʼs important to place key
information in plain site, in an area that's easily accessible.
 We've all had the experience of not being able to locate some needed information on a website, and the result
is always a frustrated visitor. The experience is annoying at best, and a disgruntled visitor won't stay on your
site very long and is unlikely not to return, much less do business with you.

7. Intuitiveness
 A great website anticipates what your visitor is thinking and caters directly to their needs, and has elements
arranged in a way that makes sense. If a visitor is searching for one of your products or services on a search
engine or directory where your site is listed, it's important that your website have a landing page that is
Information and Communication Technology – PHOTO EDITING Page 56
 directly relevant to what they searched for rather than forcing them to filter through all of your information.
Remember, the shortest distance between two points is a straight line.
8. . Branding
 Your website should be a direct reflection of your business and your brand. Your visitor should immediately
make a visual connection between your logo, print material, and brick-and-mortar location. A website that
does this not only contributes to the memorability of your branding, but adds a level of credibility and
enhanced image of that of your overall business.
9. Turnaround Time
 The number one complaint of website design customers is the time it takes to get the site up and running.
Unfortunately, a firm that takes unusually long to complete your website is par for the course. The longer it
takes to complete the website, the more business - and value - you lose. A website that isnʼt on the web isnʼt
and working properly isn't going to bring you any business!
10. Conversion
 Your website can be the most important client generator your business can have, and must place the primary
emphasis on bringing in new clients and making additional services available to existing clients through
increased awareness of all the services you offer. Providing them with the tools they need to do business with
you in an easy and enjoyable way will increase your website conversion and bring you the kind of success
you seek.

5 Parts of a Website and Design Trends

1. Header/Banner

The header or banner is located on top of a website. It includes the logo of the company, the publisher, or owner of
the website. This automatically informs website visitors what the website is about. Websites that offer products
and services usually have banners that feature their latest offers or even the current news about their company.

Trends        
• Logos – are always in no matter how header design innovates.
• Page-sized images – are trending in web design, particularly in banners. Images make a huge impact in user
engagement, especially if the images are interesting and visually appealing.
• Videos – are now utilised on headers. They usually contain the introduction or summary of the commodities that
the company is offering.
• User interface elements – one good example of this is navigation. For instance, a banner shows a series of
images of the latest promos. These elements are clickable.

2. Navigator Bar

The navigation bar/menu tab allows the visitors to check other pages of the website. It appears in all pages within a
website for more convenient navigation. Navigation bars are usually placed just below the banner/header for
convenient access.
• Sidebar – this refers to the placement of the primary navigation and not the usual content of a regular sidebar.
Usually they put the navigation on the left side.
• Navicon – this is common in Facebook mobile app. The navigation is practically hidden until you tap the icon
similar to this:
Hidden navigation allows users to view the entire page.
• Full screen navigation – this is similar to that of Navicon. The only difference is that when you click the button
to show the tabs, it will go full screen instead of appearing on the side.
• Super-sized navigation – this navigation trend allows users to see a preview of what they should expect in a
certain tab. For example, the website of a clothing brand has a tab for “Tops.” This tab can still be narrowed

Information and Communication Technology – PHOTO EDITING Page 57

 down to blouses, shirts, tank tops, etc. This basically allows users to explore especially because the categories
have submenus.

3. Sidebar
sidebars are still relevant because of these advantages:
• Content marketing – you will be able to market other contents of your website.
• Promotion – you can promote similar websites or companies in the sidebar.
• Navigation – although this is not a primary navigation, it will still allow users to navigate other parts of the
website through links.

Trends:
Sidebars are basically standard. The trend may appear on the content of the side bar. What trendy things should we
put on the sidebar? Here some of them:
• Social media buttons – these buttons serve as links to the social media profiles of the website owner or the
company.
• Widgets – these widgets could be in a form of feeds (usually social media), polls, contact us forms, subscription
boxes, etc.
Archives – this content allows users to read your previous posts or entries

4. Content
The quality of a website’s content usually dictates the value of your website. You can find different types of content
in a website. They could come in a form of text, image, audio, video, or a combination of those.
Trends:
• Infographics – these are images, diagrams, and charts that represent certain information.
• Video streaming – this engages users because videos are easy to understand.
• Image collections – these are common in online shops, real estate websites, and travel blogs.

5. Footer
They say the footer is as important as the header. Of course, the users will reach the footer if they were engaged with
the website’s content. And the purpose of engaging them is to make sure they convert into clients.
Trends:
About us link
Contact us link
Terms of service
Privacy policy
Sitemap
Social media buttons
Address
Phone number
E-mail address
Other offers
Related links/posts
Subscription boxes

Information and Communication Technology – PHOTO EDITING Page 58

Information and Communication Technology – PHOTO EDITING Page 59
 WEB DESIGNING
NAME: GRADE & SECTION::
Direction: The image below is a Sampe of Simple Web Design. With that sample create your own Web
design by drawing it or making a collage using old reading materials. Base your design in the image below.
What to put in your Web;
 Your Site name
 About yourself ( below your sitename)
 On website add-ons put your favorite hobbies
 Tell me about your Family and friends.

YOUR
CHOICE OF YOUR
PICTURE CHOICE OF
About Yourself PICTURE

Favorite hobbies Tell me about your Family and friends.

Your Dreams:

Information and Communication Technology – PHOTO EDITING Page 60

 Summary:

This exploratory module taught you the importance of Desktop Publishing that helps you
create designs in school as well as in industry. Creativity and innovation that the digital world
demands are enhanced through the subject in focus. It gives you an opportunity to work directly
for business, schools or in other areas that will improve your socio-economic status in today’s
modern society.

Glossary:
ads - abbreviation for advertisement
annual reports - report showing progress on a certain program or project
booklet - book created in a publication with only a few pages that
contain information on one subject
business card - small card printed with a person's name and information
about that person's company and job
brochures - small, thin book or magazine that usually has many
pictures and information about a product, a place, etc.
embellish - to decorate by adding special details
fliers - piece of paper that has something printed on it and that is given to many people
icon - small picture on a computer screen that represents a program or function
letterhead - name and address of an organization
link - join or connect
logo - symbol that is used to identify a company and that appears on its products
magazine- type of thin book with a paper cover that contains stories, essays, pictures, etc.,
newsletter - short written report that tells about the recent activities of an organization
and that is sent to members of the organization

Information and Communication Technology – PHOTO EDITING Page 61