SHA ETECH11
Empowerment Technology ICT for Professional Track
PRINCIPLES OF VISUAL MESSAGE DESIGN
USING INFOGRAPHICS
Five Principles in Order to Create an Effective Infographic
Design.
1. Be unique
̵ Creating an infographic design to be easily recognized and
memorable is one of the most vital factors.
̵ You should never just create a graph out of an application
and put in the information needed and hope that readers will
be thrilled about it.
̵ A good infographic design must include a twist that will grab
the attention of the target audience.
2. Make It Simple
̵ You must never put so much detail into the design as you
want to keep it clear and not overwhelm the audience.
̵ Having too many colors or different images may hinder their
ability to understand the main point as most of the time,
people tend to look away when they see too much,
sometimes the simpler it is, the better.
3. Be Creative and Bold
̵ Bold Creativity is the way to catch the attention of the
audience quickly and the most efficient way to get your
message understood.
4. Less is more
̵ Minimizing the text will probably generate more impact than
a page filled with words, people are overwhelmed with
information throughout the day.
̵ An effective picture will immediately capture attention with
something as simple as an effectively displayed word that
makes them stop and look at the most important data under
it.
5. The Importance of Getting it Across
̵ The last and most vital principle you want your infographic
to deliver is a simple way to ask people to share it with other
people.
̵ Always prepare a share button or barcode so people can
share it using social media and such.
Basic Principles of Graphics and Layout
Layout is the process of planning and arranging graphics or text in a
page or book.
 Symmetrical. A layout may be symmetrical where there is
equal weight of elements on both sides of the page. The
layout may be left braced or right braced.
 Assymetrical. A layout may be assymetrical where there is
an artistic and different intensity on one side of the page.
 Text. The text type should be legible, appropriate font face
and arrange either left justified, right justified or centered.
The flow of the text and picture should be easy to read.
 Image. The image should be proportionate, with sharp color
and high resolution. The images used should have captions.
 Proximity and harmony. The elements should be close
together and not scattered and arranged apart from each
other.
 Consistency. There should be uniformity of theme on each
page.
 Color and shape. Use color to create interest by providing
variety in design.
 Color and shape. Use color to create interest by providing
variety in the design like the use of color contrast and
shapes.
 Emphasis. There should be one point of interest in a page.
The element to be emphasized should have a different size,
color, shape or background.
PRINCIPLES AND BASIC TECHNIQUES OF
IMAGE MANIPULATION
Techniques of Image Manipulation:
Background Color. You can change the background if it does not
match the image or the totality of the presentation. You can also add
effects to the background.
Multiple Images. You can combine multiple images to make a point
or use to highlight your message.
Shadow. Using shadow effect will make the image realistic.
Proportion. When combining images, resize the image to make it
proportionate and realistic.
Blending Color. You can use color blending to match the background
with the other elements in the page.
Texture. Adding texture allows you to blend different images. Textures
add to the depth of your art. Blending will allow smooth transition of
one image to another.
Emphasis. There should be a focal point to a page that will attract
viewers. The element you want to emphasize should be sharp, big and
most vibrant in your design.
 COMBINING TEXT, GRAPHICS AND
IMAGES
Combining text, graphics and images in your presentation,
infographics or web pages will make your message clearer.

Combining text, graphics and images:

Transparent shapes. Add simple shapes with a slight transparency

behind your text to clearly see the text you want to emphasize.

Fonts and shapes. Fonts and shapes should complement each other.
You can use rounded shapes with rounded fonts and sharp shapes
with sharp fonts.

Text and background. Text and background should be aligned to

have an organized look. You can align text with shapes or geometric
figures in the image.

Clean and clear background. Use a clean and clear background for
the message to be readable. Background should not washout your
message.

BASIC IMAGE MANIPULATION USING

OFFLINE OR OPEN-SOURCE SOFTWARE
There are various offline or open-source you can use for image editing.
Usable platform/applications include:

Picasa. It is a Google’s free photo manager to edit and organize your

photos. It has tools for photo editing like crop, straighten, rotate, red-
eye removal, contrast and filters.

Paint.net. It is a Window-based alternative to the MS Paint Editor. It is

a free and open source available in Windows. It can be used for photo
editing like recolor, crop, text edit, rotate, multiple layers and other
photo editing work.

Google Sketch Up. It is a free, 3D-modeling program with tool that

allow you to create 3D models of houses, home renovation,
woodworking, projects and others with dimensional accuracy.

Autodesk Pixlr. It is a free photo editing tool that is similar to

Photoshop and has more than 600 effects, overlays and borders that
you can use.

Adobe Photoshop. It is a tool to create, modify, combine and optimize

digital photos and images. It is used to perform changes such as
adjusting brightness and contrast of the images, combines different
image elements and keep your images organized.

GIMP or GNU Image Manipulation Program is a free, open-source

image/graphics editing program used for image retouching and editing,
free-form drawing/painting and other specialized tasks.
ADOBE PHOTOSHOP CS6 FOR IMAGE MANIPULATION
The Photoshop Window
Menu Bar
Tool Option
Palettes

History Panel
Tools Panel
Adjustments Panels

Document Tab

Layers

Document Workspace
Window Options
Panel Dock

1. Menu Bar. If you look at the top of the screen you will see the Menu bar, which contains all the main functions of Photoshop, such as File, Edit,
Image, Layer, Select, Filter, Analysis, 3D, View, Window and Help.

2. Tools Panel. Most of the major tools are located in the Tools Panel for easy access.

3. Document Window. Where you can see the image or your working template.

4. Document Tab. Where you can see the name of the image or template you’re working on.

5. Palettes. It contains functions that help you monitor and modify images. By default, palettes are stacked together in groups. These are the palettes
that are usually visible: Color, Adjustments and Layers.

6. History. It stores and displays each actions performed allowing you jump to any recent stage of the image alteration.

7. Adjustments Panels. It gives you the ability to apply an effect to a group of layers in Photoshop, and then you can edit that effect later, while
preserving the original layers.

8. Layers. It let you organize your work into distinct levels that can be edited and viewed as individual units.

a. Layer Visibility. The eye shows that the selected layer is visible. Click on or off to see or hide a layer.

b. Layer Locking Options. Click the checkered square icon to lock Transparency, click the brush icon to lock the
Image, click the arrow icon to lock the Position, and click the lock icon to lock all options.

c. Layer Blending Mode. Defines how the layer’s pixel blend with underlying pixels in the image. By choosing a
particular blending mode from the drop-down menu you can create a variety of special effects.

d. Fill. By typing in a value or dragging the slider you can specify the transparency.

e. Opacity. By typing in a value or dragging the slider, you can specify the transparency of the entire layer.

f. Layer Lock. The icon shows when the layer is locked and disappears when it is unlocked. Double-click the icon
to unlock the layer.
g. Layer Options Menu. Click the black triangle to display the following options: New Layer, Duplicate Layer, Delete Layer, Layer Properties, etc.
Some of the options are presented as icons at the bottom of the Layers Palette/Panel.

h. Link Layers. Can be used to link layer’s together.

i. Layer Styles. If a layer has an style, an “fx” icon show at the bottom of the Layers palette/panel. Click the little black triangle to see style options.

j. Layer Mask. Allows you to hide certain parts of the layer, which can then be revealed by using the paintbrush and the white paint color to expose
portions of the layer.

k. Layer Set. This option helps to organize images with multiple layers. Click the icon to create a folder for several layers.

l. Create New Fill or Adjustment Layer. Have the same opacity and blending mode options as image layers and can be rearranged, deleted, hidden
and duplicated in the same manner as image layers. Click the icon and select an option to create a new fill or adjustment layer.

m. Create New Layer. Click this icon to create a new layer.

n. Delete Layer. To delete a layer, select a layer in the Layers palette and drag it to the trash can icon or select a layer and click the icon.
 ADOBE PHOTOSHOP CS6 TOOLBOX
Tools, Function and Shortcut Keys.
Move Tool. Used to select and move objects on the page.
[V]
Marquee Tool. Selects an object by drawing a rectangle or
an ellipse around it. [ M ]
Lasso Tool. Selects an object by drawing a freehand
border around it. [ L ]
Magic Wand Tool. Selects all objects in a document with
the same or similar fill color, stroke weight, stroke color,
opacity or blending mode. [ W ]
Crop Tool. Click the tool button, the click and drag the tool
over the part of the image that you want to keep. Resize the
selected area dragging the squares at the sides and
corners. [ C ]
Eye Dropper Tool. Takes color sample from colors on the
page and display them in the Color Boxes. [ I ]
Healing Brush Tool. Corrects small blemishes in scanned
photos. [ J ]
Brush Tool. Draws brush strokes of different thicknesses
and colors. [ B ]
Clone Stamp Tool. Takes a sample of an image and
applies over another image, or a part of the same image.
[S]
Art History Brush. Paints over an image using the source
data from a specified history state or snapshot. [ Y ]
Eraser Tool. Removes part of an existing path or stroke.
[E]
Paint Bucket Tool. Applies a color fill to a selected part of
the image or to an entire layer. [ G ]
Blur Tool. Blurs the sharp edges of an image.
Path Selection Tool. Selects paths and segments.
[A]
Type Tool. Types text on a page.
[T]
Pen Tool. Draws smooth-edged paths.
[P]
Shape Tool. Draws a shape. Other shapes that are hidden
in this tool are: Round Rectangle Tool, Ellipse Tool, Polygon
Tool, Line Tool and Custom Shape Tool. [ U ]
Hand Tool. Allows you to move around within the image.
[H]
Magnify Tool. Magnifies or reduces the display of any area
in your image window.
HANDS-ON: USING ADOBE PHOTOSHOP
TO EDIT PHOTOS
Opening an Image
There are two ways to open an image in Photoshop.
To open an image using the workspace:
1. Double click the gray area in the Photoshop window.
2.When the Open dialog box appears, select the file name of the
image you want to open, then click Open.
The Selection Tools
To select a part of an image:
1. On the Tools panel, click any of the selection tools available.
2. Click the area that you want to select.
To select the whole image:
1. On the Menu Bar, click Select and click All.
The Marquee Tools
Marquee tools are selection tools using shapes.
Selection Using Marquee Tools
1. Click the Rectangular or Elliptical Marquee
tool.
2. Click on the image and drag it to create a rectangular marquee.
The Lasso Tools
Lasso Tool is a selection tool that uses shape to select an object.
Lasso tools are usually used for selection of irregular shapes.
1. Click the Lasso tool.
2. Click your mouse on the any part
of the object and drag to create any
shape you want.
Selection Using Color
You can make a selection using color with
the Magic Wand and the Quick Selection
Tools.
Quick Selection Tool
1. Click on the Quick Selection tool.
2. Click your mouse on the object and it will make an irregular-shaped
marquee.
3. Drag the mouse pointer + on the closed marquee until it snaps
on the edges of your object.
4. If you want to reduce the size of your marquee, press Alt while
dragging your mouse backwards; your mouse pointer will change to -
 5. Specify the Load Setting to control how much color is loaded on
the brush before you start applying the color.
Magic Wand Tool
6. Specify the Flow setting to control the rate of flow of color from the
1. Click the Magic Wand tool, select a high tolerance setting and click brush to the image.
the background of the picture.
7. Click and drag your mouse to the image to apply the colors.
2. If needed, you may adjust again the tolerance setting and click on
the background. 8. Repeat the process to apply other colors to be mixed with the
previous colors.
3. When a marquee covers the image, on the Menu Bar click Select
and select Inverse. Using Feather

Feathering the Border of a Selection The Feather setting makes the border of a portrait fades into the
surrounding edge.
The Feather setting makes the border of a portrait fade into the
surrounding edge. 1. On the Tools panel, click the Elliptical Marquee tool.

1. On the Tools panel, click the Elliptical Marquee tool. 2. On the Options Bar, change the Feather setting to 20px.

2. On the Options bar, change the Feather setting to 20px. 3. On the Menu Bar, click Layer, click Layer Mask and click Reveal
Selection.
3. On the Menu Bar, click Layer, click Layer Mask and select Reveal
Selection. Using the Clone Stamp Tool

Selecting the Background Color The Clone Stamp Tool copies a color or portion of the image that you
have selected and put it over to another area of the image.
1. Import an image.
1. On the Tools panel, click the Stamp tool .
2. Create a new file from the File and click New.
2. On the Options Bar, select the size of your Clone Stamp.
3. On the New dialog box, set the size to 12x9 inches and click OK.
3. Press the Alt key and click the area or color you want to copy and
4. On the Tools panel, click the Foreground/Background color and release the mouse.
on the Color Picker, select yellow.
4. Click on the location where you want to place the area or color that
5. Click the Paint Bucket tool and click it on the canvass to fill it you have selected.
with color.

6. Then, drag the image you have imported into the canvass.

Deleting the Background

1. On the Menu Bar, click Select and click Inverse.

2. Press the Delete Key and the feathering to the image is applied.

Changing the Background Color

You may change the background color or place a color on a white

background.

Using the Mixer Brush

1. On the Tools Panel, click the Brush Tool and click the Mixer
Brush tool .

2. On the Options Bar, click the arrow and choose a brush size from
the menu.

3. On the Option Bar again, click the arrow and select the color you
want to apply.

4. Specify the Wet Setting to control how much color you are going to
use.
GIMP (GNU IMAGE MANIPULATION PROGRAM) FOR IMAGE MANIPULATION
The GIMP Windows

Toolbox
Layers Dialog

Image Window

Tool Options

Brushes/Patterns/Gradients

1. Toolbox. This is the part where the main tools are located such as the tools used to crop, select, erase and more.

2. Tool Options. Located below the Toolbox, here you will be able to see the options for the currently selected tool.

3. Image Window. This is where your works or image will be shown. You will also have an option to open multiple images at the same time.

4. Layers Dialog. This shows the layer structure of the images shown in the image window. You will be allowed to manipulate it in a variety of ways.

5. Brushes/Patterns/Gradients. Located below the Layers Dialog, you will be able to see the choices of brush, patterns and gradients that can be
used in your work.
GIMP TOOLBOX Text Tool. Create or edit text layers.
[T]
Tools, Function and Shortcut Keys.
Bucket Fill Tool. Fill selected area with a color or pattern.
Rectangle Select Tool. Select a rectangular region. [ Shift + B ]
[R]
Blend Tool. Fill selected area with a color gradient.
Ellipse Select Tool. Select an elliptical region. [L]
[E]
Pencil Tool. Hard edge painting using a brush.
Free Select Tool. Select a hand-drawn region with free and [N]
polygonal segments. [ F ]
Paint Brush Tool. Paint smooth strokes using a brush.
Fuzzy Select Tool. Select a contiguous region on the basis [P]
of color. [ U ]
Erase Tool. Erase background or transparency using a
Select by Color Tool. Select regions with similar colors. brush. [ Shift + E ]
[ Shift + O ]
Airbrush Tool. Paint using a brush, with variable pressure.
Scissors Select Tool. Select shapes using intelligent edge- [A]
fitting. [ I ]
Ink Tool. Calligraphy-style painting.
Foreground Select Tool. Select a region containing [K]
foreground objects.
Clone Tool. Selectively copy from an image or pattern, using
Paths Tool. Create and edit paths. a brush. [ C ]
[B]
Healing Tool. Heal image irregularities.
Color Picker Tool. Set colors from image pixels. [H]
[O]
Perspective Clone Tool. Clone from an image source after
Zoom Tool. Adjust the zoom level. applying a perspective transformation.
[Z]
Blur/Sharpen Tool. Selective blurring or unblurring using a
Measure Tool. Measure distances and angles. brush. [ Shift + U ]
[ Shift + M ]
Smudge Tool. Smudge selectively using a brush.
Move Tool. Move layers, selections and other objects. [S]
[M]
Dodge/Burn Tool. Selectively lighten or darken using a
Alignment Tool. Align or arrange layers and other objects. brush. [ Shift + D ]
[Q]
Foreground & Background Colors.
Crop Tool. Remove edges areas from image or layer. The black and white squares reset the colors.
[ Shift + C ] The arrows swap the colors.
Click to open the color selection dialog.
Rotate Tool. Rotate the layer, selection or path.
[ Shift + R ]

Scale Tool. Scale the layer, selection or path.

[ Shift + T ]

Shear Tool. Shear the layer, selection or path.

[ Shift + S ]

Perspective Tool. Change perspective of the layer,

selection or path. [ Shift + P ]

Reverse Tool. Reverse the layer, selection or path

horizontally or vertically. [ Shift + F ]

Cage Transform. Deform a selection with a cage.

[ Shift + G ]
 HANDS-ON: USING GIMP FOR IMAGE
MANIPULATION Creating a New Blank Layer.
Opening a File. 1. Click on the icon just below the Layer Dialog to add a layer.
1. Click File on the Menu Bar. 2. Then when a layer options appear, you can change the size and the
type of layers.
2. Click Open.
a. Foreground Color. The layer will appear on what the
3. Go to the folder where your image is located at. Select the image
foreground color is; the current foreground color is located
and then click Open.
on the tool box.
Changing the Size/Dimension of Your Image
b. Background Color. Similar to the foreground color, the
1. Click Image in the Menu Bar. layer will appear on what background color, which is located
beside the foreground color.
2. Select Scale Image.
c. White. Just as the name states, then new layer will be
3. Here you can enter your desired size of your image. This icon color white.
means that the Width and Height are locked to each otherm so when
the other value changes, so with the other. Tis happens so that the d. Transparency. The new layer will be transparent,
ratio will stay the same. therefore everything will still be the same with the layer on
top of it.
4. After scaling the image, select Scale to apply.
Hiding Layers
Cropping an Image
1. To hide a layer, click the beside the layer you want to hide.
1. Select the Crop Tool from the Toolbox.
2. To unhide the layer, hover your mouse on the layer, and click on the
2. Click and drag the tool and select the part of the picture you want to first box.
crop.
Moving Layers
3. After releasing, you’ll see that the selection is still active. The four
boxes on each edge can be dragged so that you can still resize the 1. Select the layer(s) you want to move.
region you cropped.
2. There arrows below the Layer Dialog; use the arrows
4. You can crop it by pressing Enter on your keyboar. Or if you decided to move the layer up or down.
not to crop it, click Esc.
Duplicating Layers
Adding Text
1. Select the layer(s) you want to duplicate.
1. Click the Text Tool from the Toolbox.
2. Click the icon to create a duplicate.
To add text, click on any part of the photo, and type. You will notice
Deleting Layers
that the text option will appear. It is where you can change the font,
font size, font 1. Select the layer(s) you want to delete.
style, etc.
You can also 2. Click the icon to delete the layer.
edit your text
Brightness and Contrast
on the Tool Options.
1. Click Colors on the Menu bar.
3. To change the font color, click on the colored box and a color
options will appear, where you can customize your color. 2. Select Brightness-Contrast.
4. If you are satisfied with your font, just press Enter. 3. When the Brightness-Contrast options appear, you can adjust the
brightness and contrast that you prefer.
Layers. Layers are like stacked sheets of acetate you can see through
the transparent areas of the layers below. 4. After adjusting the brightness and contrast, click OK.
Changing the Opacity of the Layer

1. Select on the layer you want to edit.

2. The opacity is just above the layers, remember that as the number
decreases, the more transparent the layer will appear.