St.

Mary’s Educational Institute

Ilustre Avenue, Lemery, Batangas

MODULE IN Empowerment Technologies 12

Module No. 4
Date September 27 and 29, 2021
Title Principles of Graphic Design and Image Manipulation Techniques
This module covers the principles of graphic design and some techniques in image
Overview
manipulation
549
 manipulate text, graphics, and images to create ICT content intended for an
online environment
Objectives
 evaluate existing websites and online resources based on the principles of
layout, graphic, and visual message design

Monday

10 Basic Principles of Graphic Design

Graphic design plays a critical role in brand-building and at the same time, in
showcasing your skill-sets. Although branding and design are an inseparable
experience, it’s important to understand the fundamentals of graphic design before
embarking on any new assignment. When working with clients, you get only one
opportunity to make a strong first impression, so why not infuse their experience with
your knowledge and application of design elements to a range of projects — social
media graphics, web and app UI, videos, banners, advertisements, et al. Of course, as
a designer, don’t worry about drawing outside the lines and having fun whilst doing it!
In fact, you must frequently colour outside the lines to pull away from a mediocre or a
repetitive design structure, but, the beginners must first know what those prescribed
lines are. So, let’s understand the ten basic design principles that will help you create
Content stunning graphics.

01. Balance

Balance lends stability and structure to an overall design. To understand it better, think
that there’s weight behind each of your design elements. Shapes, text boxes and
images are the elements that form your design, so it’s important to be familiar with the
visual weight each of those elements possesses. Now, this doesn’t mean that the
elements always need to be distributed evenly or that they must be of an equal size —
balance is either symmetrical or asymmetrical. Symmetrical balance is when the
weight of elements is evenly divided on either side of the design, whereas
asymmetrical balance uses scale, contrast, and colour to achieve the flow in design.

PAASCU Accredited Bureau of Immigration Accredited

 St. Mary’s Educational Institute
Ilustre Avenue, Lemery, Batangas

A symmetrically balanced design. Asymmetrical balance design

(Designed by: Anahat Rawal) (Designed by: Anahat Rawal)

02. Proximity

Proximity helps in creating a relationship between similar or related elements. These

elements need not be grouped, instead, they should be visually connected by way of
font, colour, size, etc.

The above is an example of ‘Proximity.’ Here, a consistent shape (circle) and colours
create an organised design.

03. Alignment

Alignment plays a pivotal role in creating a seamless visual connection with the design
elements. It gives an ordered appearance to images, shapes, and blocks of texts by
eliminating elements placed in a dishevelled manner.

PAASCU Accredited Bureau of Immigration Accredited

 St. Mary’s Educational Institute
Ilustre Avenue, Lemery, Batangas

The text, shape and image have been lined up in the middle, creating an ‘Alignment.’

04. Visual Hierarchy

In simple words, a hierarchy is formed when extra visual weight is given to the most
important element or message in your design. It can be achieved in various ways —
using larger or bolder fonts to highlight the title; placing the key message higher than
the other design elements; or adding focus to larger, more detailed and more colourful
visuals than those less relevant or smaller images.

In this design, you can easily point out the heading, date, shapes, image and also, the
text at the bottom.(Designed by: Anahat Rawal)

PAASCU Accredited Bureau of Immigration Accredited

 St. Mary’s Educational Institute
Ilustre Avenue, Lemery, Batangas

05. Repetition

Repetition is a fundamental design element, especially when it comes to branding. It

creates a rhythm and strengthens the overall design by tying together consistent
elements such as logo and colour palette, making the brand or design instantly
recognizable to viewers.

In this online portfolio, the green colour is repeated across the page, creating cohesion
and a ‘Repetition.’ (Designed by: Anahat Rawal http://bit.ly/Anahat_Behance)

06. Contrast

Contrast happens when there is a difference between the two opposing design
elements. The most common types of contrast are dark vs. light, contemporary vs. old-
fashioned, large vs. small, etc. Contrast guides a viewer’s attention to the key
elements, ensuring each side is legible.

PAASCU Accredited Bureau of Immigration Accredited

 St. Mary’s Educational Institute
Ilustre Avenue, Lemery, Batangas

This image has been darkened to allow the text to create a sharp contrast against the
background.

07. Colour

Colour is an important design basic and it dictates the overall mood of a design. The
colours you pick represent your brand and its tonality, so be careful with the palette
you choose. As a graphic designer, it’s always helpful to have a basic knowledge of
colour theory, for example, gold & neutral shades evoke an overall feel of
sophistication, bright colours signal happiness, and blue creates a feeling of calmness.
Colour palettes can be used as a contrast or even to complement the elements.

This contrasting colour palette creates a vibrant and an energetic design.

PAASCU Accredited Bureau of Immigration Accredited

 St. Mary’s Educational Institute
Ilustre Avenue, Lemery, Batangas

08. Negative Space

We’ve discussed the importance of colours, images, and shapes, but what about the
space that is left blank? It is called the ‘negative space’, which in simple words means
the area between or around the elements. If used creatively, negative space can help
create a shape and highlight the important components of your design.

This is a stunning example of negative space. (Image Credit: Mallika Favre

http://malikafavre.com)

09. Typography

“Words have meaning, type has spirit,” — Paula Scher.

Typography is one of the key pillars of design, and it speaks volumes about a brand or
an artwork when executed stylistically or even customised. Sometimes, ‘type’ is all you
need to showcase your design concept.

PAASCU Accredited Bureau of Immigration Accredited

 St. Mary’s Educational Institute
Ilustre Avenue, Lemery, Batangas

An example of display typography. (Designed by: Anahat Rawal)

10. Rules

Once you’re an adept graphic designer who understands the foundations of design,
then it’s time to break some of those rules. And, by that, I don’t mean, use pixelated
images or an illegible font type. Remember, whatever it is that you’re choosing to
communicate, should not be compromised.

Sushileaf’s new album design is a rule-bending work of art. https://apple.co/2JgpSSW

While these principles may require some of you to be more observant and take mental
snapshots of novel designs (that you stumble upon), they’re key principles for those
who want to create a great brand by way of strong visuals and content.

https://medium.com/@anahatrawal/10-basic-principles-of-graphic-design-
b74be0dbdb58

PAASCU Accredited Bureau of Immigration Accredited

 St. Mary’s Educational Institute
Ilustre Avenue, Lemery, Batangas

https://www.youtube.com/watch?v=65WjYDEzi88

Wednesday

Principles and Basic Techniques of Image Manipulation

1. Cropping

 it is a process of removing unwanted parts of the image focusing only on

the subject
 it is a process of cutting off the upper or outer parts of something
 A process of cutting of part of a picture or photograph

2. Color balance

 This command will allow you to make changes in the mixture of colors in
an image.

3. Adjusting the brightness and contrast

 This command is the most basic when adjusting the image tone
(highlights, shadows, and midtones).

4. Compression and resizing

 Compressing and resizing an image is an important aspect in image

manipulation. Images to be uploaded on the web must be of the standard
resolution of 72 dpi (dots per inch) to maintain its image file size of 30-50
KB. If the image is for printing, set the maximum resolution to 300 dpi and
set its physical printing size in inches.

5. Color blending

 Use the different special effects buttons available in the different image
editing software. You can combine colors and commands that will give
you a more dynamic image result.

6. Combining multiple images

 Compositions must be planned and conceptualized first so that you will

be able to render the best image and message possible.

Assessment Assessment Task #2 (INDEPENDENT LEARNING 1

Directions: Create a digital art design for your adviser.

PAASCU Accredited Bureau of Immigration Accredited

 St. Mary’s Educational Institute
Ilustre Avenue, Lemery, Batangas

Assessment Task #1 (INDEPENT LEARNING 2

Directions: Evaluate your digital art based on the given principles of graphic design.

ICT Empowerment Technologies by Callo

https://medium.com/@anahatrawal/10-basic-principles-of-graphic-design-
b74be0dbdb58
References
https://www.youtube.com/watch?v=pFyOznL9UvA

https://www.youtube.com/watch?v=65WjYDEzi88

Prepared by: Checked by: Noted by:

Mr.JONATHAN P. NAPIZA Mrs. DIVINA G. AGONCILLO Dr. Randy M. Baja, FRIEdr

Subject Teacher Assistant Principal Principal

PAASCU Accredited Bureau of Immigration Accredited