Module 3: Imaging and Design for the Online Environment

Objectives:
 Independently apply the techniques of image manipulation and graphic design to create original
or derivative ICT content from existing images, text and graphic elements for use in specific
professional tracks.
o Use image manipulation techniques on existing images to change or enhance their
current state to communicate a message for a specific purpose.
o Create an original or derivative ICT content to effectively communicate a visual message
in an online environment related to specific professional tracks.

Individual Activity 3.2: Image Manipulation using Image Editor

Objectives:
 To understand basics of image editing
 To understand basic photo manipulation techniques
 To apply basics of image editing and photo manipulation techniques

This activity will allow you to apply the basic image/photo editing techniques using image editor
software (online or offline). There is no specific software used in this activity. However, a recommended
list of software and online photo editing websites is provided.

Online photo editing websites Offline image editing software

Pixlr Photoshop
BeFunky Pixlr
iPiccy GIMP
PicMonkey Paint.NET
FotoFlexer PhotoScape
LunaPic Picasa
Fotor SumoPaint
Phixr
Freeonlinephotoeditor
PicMagick
PhotoMania
tuxpi

Task #1

Objective: To understand basics of Image Editing

Every time we do image editing, we always focus on stunning, complex and difficult tutorials mainly
targeted the pros. But most of the times we need to perform basic tasks such as focusing an object, or
changing a color in a photo. Or maybe we want to reproduce just one technique of a complex image.
We 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.1

1.1 Cropping

Cropping is an easy yet important step to consider when editing photos. Every image editing program
has a crop tool that lets you trim, or eliminate, the edges of an image. The effects of cropping will
improve overall composition, focus on the main subject, remove distracting elements, “Zoom in” on a
subject, change the orientation, and change the aspect ratio.

BEFORE AFTER

1.2 Resizing and Compression

Resizing and compression is simply optimizing the image. This is done after you have cropped and edited
your image.

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

1
http://www.depedbataan.com/resources/9/k_to_12_entrep-based_photo_editing_learning_module.pdf
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.1

There are also free online software available for image optimization. Such as image optimizer
(http://www.imageoptimizer.net/Pages/Home.aspx) you can simply open the edited image and enter
the desired size and quality.

1.3 Correcting

Dark or too much light pictures are a very common problem, whether the pictures were taken in the
1960's or last week. There are many ways to fix a dark and bright image. The most common and simplest
way to do this is adjusting the brightness and contrast.

Brightness & Contrast has two separate controls that allow you to lighten your image or "brighten" it
and will also allow you to either add or take away contrast (the dark points). In most cases, this option is
usually located under “Adjustments” menu on any editing software.

1
http://www.depedbataan.com/resources/9/k_to_12_entrep-based_photo_editing_learning_module.pdf
Start with the Brightness and move it to the right (software may differ with the direction, so play around
until you figure out what direction makes your image lighten vs. darken). As you move to the left you
will see your image lighten. You need to be careful not to lighten it too much otherwise you could blow
out parts of your image. If you look at the wave example below you will see that the more brightness
added you lose detail in the waves.

Now you can move onto adjusting your contrast. Typically you will want to add contrast, not take it
away, however they may be an occasion that you will lessen the contrast.

You will need to work around with both adjustments until you have reached a good balance of
brightness & contrast.
1.4 Sharpening and Softening

The vital tools in fine-tuning your images are sharpening and softening (blur). These tools are everyday
operations with digital images. You can use them to remedy flaws or to enhance the appearance of your
subject.

BEFORE(ORIGINAL) AFTER SHARPENNED

If your image is pixelated, you can soften it to give it a smoother and more unified look. Smooth out
someone's complexion. Since all areas are affected, use eraser tool to remove the effect from specific
areas. All image editor software has eraser tool

BEFORE AFTER
Make an image appear out of focus or use blur in conjunction with eraser to blur the entire image, then
removed the blur from specific areas.

BEFORE (ORIGINAL) BLURRED BLUR AND ERASER USED

These fundamental techniques are the most common used in image editing. If you are working with
images or photos, definitely you will apply at least one of these.

Task #2

Objective: To understand basic photo manipulation techniques

This task is about basic photo manipulation techniques for beginners, such as changing skies, red eye
fixing, tilt shift effect, infrared effect, watercolor effect, and many other popular basic techniques that
you can use in a quick retouching work or in a more complex artwork. Some of these techniques require
a bit of work, but many do not. Remember that good results always require using good quality photos.

3.1 Red Eye

Red Eye is the most common photographic error when human beings or sometimes animals are the
subjects. With the effect of camera flash, often times the eyes show glow effect “in red.” Nowadays, we
can easily remove red eye effect without going through a much technical stuff.
Web based editing software have built in adjustment tool to remove red eye effect. Usually, just choose
the “red eye reduction tool” then select the area in which red eye exists.

BEFORE AFTER

3.2 Infrared Effect

Infrared photography is the technique of capturing light not visible to the naked eye. Infrared (IR) light
lies between the visible spectrum and radio waves. The look of these IR photos is distinct and can be
stunning.
3.3 Paint Effect

Apply a nice saturated paint effect to your photos.

BEFORE

AFTER

3.4 Remove Color Cast

Learn how to non-destructively offset and neutralize color casts in your photos and make them appear
more pleasing and natural.

BEFORE AFTER

3.5 Whitening Teeth

Some editing software use brush tool to apply the whitening effect. You can adjust the brush size as well
as the intensity.

BEFORE AFTER
3.6 Remove Wrinkles

Nowadays, photo filtering effect is inevitable when it comes to portrait imaging. Removing those
wrinkles, pimples, and blemishes easily would give us a nice flawless complexion result. No need for
complicated software to do this. Most online editing software have a built-in feature for such effect. You
simply choose “beauty” effect or sometimes “brush” tool.

3.7 Pencil Sketch effect

There is no need to search for a street artist, using this effect you can make a pencil drawing out of your
photo. This effect is not only limited to black and white, you can play around with the custom color red,
blue, and green.
3.8 Pin Hole

You may want to use the cropping tool to zoom in tighter. But, don’t crop too tight. The pinhole camera
effect will blur and darken the edges of your photo, so allow for some image loss on the edges.

BEFORE AFTER

Task #3

Objective: To apply basics of image editing and photo manipulation techniques

In this task you will apply the basics of image editing and photo manipulation techniques using different
software/application either online or offline version. Images that will be used can be downloaded here.
Numerous editing software are available today. There are software which require professional skills to
work with but there are also software which are simple to use and expect the same output. Most of the
effects can be done via online web editing software. You can check on the list again on the first page of
this activity.

Extract the photos to your pictures folder. Open a photo editor or visit the site of your choice and use
the editing tools to edit each picture. Save your edited photos in your ‘My Pictures’ folder.

Download the Activity 3.2 Task#3 Template.docx as your answer sheet.