EMPOWERMENT TECHNOLOGY

Presented By: Aaron James M. De Mesa

WHAT IS AN IMAGE?

• An image is a representation of the external

form of a person or thing in an art.
• Images may be 2 dimensional such as a
photograph or screen display or 3 dimensional
such as a statue or hologram.
• They may be captured by optical cameras,
mirrors, lenses telescopes, microscopes etc. And
natural objects and phenomena such as a
human eye or water
WHAT ARE GRAPHICS

• Are visual images or designs on some surface,

such as a wall, canvas, screen, paper of stone to
inform, illustrate or entertain.
• Are visual representations of data made on a
computer and is displayed on a computer
screen or monitor.
• The process of planning and arranging graphic
element in a page or template. A good layout
should have balanced make up and alignment
of elements
• Layout is a part of graphic design that deals in
the arrangement of visual elements
WHAT ARE GRAPHICS
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT

• Communication is critical for people to share thoughts, feelings, and emotions.

With the use of different media, people can express their views in many ways,
including adding artistic designs. The purpose of the combined images and texts
also gives influence to people not just understand the sent idea or message, but it
also adds emotion to what is being seen.
UNDERSTANDING GRAPHIC DESIGN AND
LAYOUT
• What makes a good and effective website? How do users interact with the
websites they visit?
• A good website must know its target audience, determine its needs, and
communicate effectively using the basic principles of graphics and layout.
• Usability is important for the users as it satisfies their experience on the website, but a
good design will drag the audience’s attention to stay on the page.
• Always remember that first impressions last and web design has an impact on the users
on how they perceive the brand or message.
• Graphic design is an artistic way of communicating ideas and messages through
visual expressions using texts, images, and symbols.
• Graphic designers work on the quality of the output they serve for the audience or
clients like websites, advertisements, posters, flyers, logos, videos, and any other
multimedia form.
GRAPHIC DESIGN VS. LAYOUT

• Design is a plan of creating an idea through a combination of texts, images, and

other elements that are placed together artistically, whereas, the layout is a term
used as the process of organizing and arranging these elements in a design as
you plot it in a paper.
BASIC PRINCIPLES OF DESIGN AND LAYOUT

• Balance
• It refers to the proper arrangement of the
elements, which gives a visual weight for the
design.
• There are two types of balance, Symmetrical
or Asymmetrical.

• Symmetrical Balance • Asymmetrical Balance

• Symmetrical balance is where the • Asymmetrical balance is a free layout
elements are equally distributed on where the elements can be placed in
both sides of your design, technically any order or the opposite of
a mirror-based design. symmetrical.
BASIC PRINCIPLES OF DESIGN AND LAYOUT
BASIC PRINCIPLES OF DESIGN AND LAYOUT
BASIC PRINCIPLES OF DESIGN AND LAYOUT
• Emphasis
• It refers to something that needs to stand-out or emphasize. When working on
emphasis, you can change the color, size, or even the element itself to lead the eye to
the focal interest.
• Also referred to as an area in the design that may appear different in size, texture,
shape or color to attract the viewers attention.
BASIC PRINCIPLES OF DESIGN AND LAYOUT

• Pattern, Repetition and Rhythm

• The use of repetitive elements such as lines, shapes, forms, textures, space, colors, font,
style, and the like to create texture, movement, continuity, and consistency of the
design.
• It also makes the design formal and more comfortable to read because of its
uniformity.
BASIC PRINCIPLES OF DESIGN AND LAYOUT

• Alignment
• It refers to the proper placement of an element to your design, just like invisibly
placing or aligning your texts or images diagonally, vertically, and horizontally. The
standard texts or paragraph alignment we apply are center, right, left, and justified.
BASIC PRINCIPLES OF DESIGN AND LAYOUT

• Hierarchy
• It refers to the proper arrangement of the details such as text, characters,
numbers, and symbols. Changing its character size, thickness, spaces, or even
font type to stand out is its most critical features. By applying this principle, it
can help the viewer to recognize and navigate the highlight of the event smoothly.
BASIC PRINCIPLES OF DESIGN AND LAYOUT

• Contrast
• It refers to the use of different or opposite elements such as sizes (large or small),
shapes (geometric or organic), spaces (negative or positive), form (real or abstract),
colors (monochromatic, complementary, triadic, tetradic), texture (smooth or
rough), and values (light or dark).
• The contrast gives visual weight to an object or design. You must consider and
limit the use of different elements, color, style, and typography to avoid
cluttered design.
• When creating contrast in color and text, it is advised to choose a color from the
background to create consistency of your design. Always remember that the details
must be readable by having a dark-light value of either text and background or
vice-versa.
BASIC PRINCIPLES OF DESIGN AND LAYOUT
BASIC PRINCIPLES OF DESIGN AND LAYOUT

• Unity and Harmony

• It refers to the relationship of the elements or the contents when you place them
together. The elements of the design must work together and agree to its meaning,
theme, feeling, or mood.
PRINCIPLES OF VISUAL MESSAGE DESIGN USING
INFOGRAPHICS

• We, humans, highly depend in our sense of sight, that’s why it is said that we are
‘visual creatures’. Text information can be very detailed but to most people it fails
to ‘visualize’ the message. Showing a table of sales in a year will take time to be
fully analyzed but can be easily understood with the smart use of graphics.
• There are software that can be used in creating Infographics most requires
advance knowledge and skills to make or needs internet connection to use. With
the use of a prior application that we discussed earlier, Microsoft Excel, that is
effective, practical and easy to learn.
PRINCIPLES OF VISUAL MESSAGE DESIGN USING
INFOGRAPHICS
• Infographics is the portmanteau or combination of the words ‘information’ and ‘
’, Graphics meaning, information from graphics. Like what you did with the
activity earlier, graphics, pictures and images can convey a lot of information
especially when it has context. Infographics can greatly enhance the way you
present your information.
PRINCIPLES OF VISUAL MESSAGE DESIGN USING
INFOGRAPHICS
• As seen in the figure, the graph through the use of shapes and lines, gives the
reader a visual interpretation of the data. The main purpose of an infographic is
to engage and to make understanding easier. Remember that infographics are
not used to make documents more appealing, but the use of graphical elements
that will improve how quickly and easily an idea or information is presented.
PRINCIPLES OF VISUAL MESSAGE DESIGN USING
INFOGRAPHICS
• Graphs and Charts as Infographics
• Graphs and charts are representation of data (mostly numeric) through graphics.
There are many types of charts. Their uses depend on what you want to show or
report. The following are some of the charts and their uses.

• Bar graphs – These are primarily used in comparing sets of data. They visualize the
difference between values in a table and show rate of change over time.
• Line graphs – These are similar with bar graphs in terms of use, with a difference
that line graphs are more suitable in showing trends.
• Pie charts These are circular statistical graphical representation of proportion or
percentage.
PRINCIPLES OF VISUAL MESSAGE DESIGN USING
INFOGRAPHICS
• Forest graphs – These graphs are used to visually represent values within a group
and compare them to other groups.
• Radial graphs – These are similar to a forest graph in many aspects but are
presented using a circle
CREATING INFOGRAPHICS USING EXCEL

1. In your desktop, create a document named ‘Sales Data’. (Always remember to

save your progress by pressing Ctrl + S.)

2. In your work area, copy the set of data

3. Drag select A1 to L2, then in the ribbon press Insert then in the charts section,
click the desired chart. For example, click Insert Column Chart or Area Chart.
CREATING INFOGRAPHICS USING EXCEL

4. A dropdown window will appear as seen in

Figure 2.5, in the 2-D Column section, select
Clustered Column.
5. To rename, double click the name of the
graph then type the “Sale Rending Graph”.
6. To resize, click the graph then click and drag
any of the eight handles in the edges of the
graph.
CREATING INFOGRAPHICS USING EXCEL

7. To reposition the graph, click and drag the graph to the desired position.
8. You can copy and paste the graph to other Microsoft Office application. To
copy press Ctrl + C then press Ctrl + V to paste
INFOGRAPHIC IMAGE AND GRAPHICAL
FORMATTING
• The visual preference of people when it comes to gathering data must not be
discounted. When making an infographic specifically a graph, it is necessary it is
tailored to our target audience. In MS excel there are options in editing,
manipulating and formatting visual elements in our graph.
INFOGRAPHIC IMAGE AND GRAPHICAL
FORMATTING
• Design Tools
1. To access the Chart Tools where Design
and Format Menu tools can be found you
must first select any Graph that you want to
edit. In the ribbon.
2. Click on Design, In the Chart Styles section
click More (as seen on figure 2.8). It will
expand and display multiple Chart Styles
options.
INFOGRAPHIC IMAGE AND GRAPHICAL
FORMATTING
3. In the Multiple Chart Styles you can
choose different types of styles that can
accommodate different styles
requirements or preference. Click and
explore any of each to see their
differences
ONLINE FILE FORMATS

• What is a File Format?

• A standard process that data is encoded for storage in a computer file
• Defines how buts are used to encode information in a digital storage device.
• Most information comes from different format.
ONLINE FILE FORMATS

• File Compression
• Lossy – This compression type removes some information from the image and lowers
the overall quality in order to reduce file size.
• Lossless – this compression does not remove any information form the image, but it
usually cannot reduce the file size as much as lossy compression.
ONLINE FILE FORMATS

• JPEG or Joint Photographic Expert Group-is a “lossy” format meaning that the
image is compressed to make a smaller file. The compression does create a loss in
quality but this loss is generally not noticeable. JPEG files are very common on the
Internet.
• JPEG is a popular format for digital cameras making it ideal for web use and non–
professional prints.
• Compression: Lossy – some file information is compressed or lost.
• Best for: Web Images, Non-professional printing, E-Mail, PowerPoint
ONLINE FILE FORMATS

• GIF or Graphics Interchange Format-are widely used for web graphics, because
they are limited to only 256 colors, can allow for transparency, and can be
animated.
• GIF files are typically, small is size and are very portable.
• Compression: Lossless - compression without loss of quality Best For: Web Images
ONLINE FILE FORMATS

• PNG or Portable Network Graphics-are a lossless image format originally designed

to improve upon and replace the gif formats.
• PNG files are able to handle up to 16 million colors, unlike the 256 colors
supported by GIF. This image is transparent/no background.
• Compression: Lossless - compression without loss of quality
• Best For: Web Images
OTHER ONLINE FILE FORMATS
• PDF or Portable Document File
• It is optimized in smaller file size without losing the file quality
• Can be viewed using its reader or through Web Browsers

• DOC or Document File

• File format created by Microsoft and commonly used by Microsoft Word.
• Can include charts, illustration, formatted text, tables and etc.
END OF LESSON