VISUAL DESIGN:

IMAGING AND
LAYOUT DESIGN
MODULE 3
2 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.
• They even behave differently depending on what they perceive
on the website.
• Web design matters in every user, whether they can decide to
stay or just leave.
• 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.
3 Understanding Graphic Design and Layout
• 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.
• A practical graphic layout and design can easily catch the
attention of the viewers and allow them to understand the
message conveniently.
4 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.

• Layout is a term used as the process of organizing and

arranging these elements in a design as you plot it in a
paper.
5 Basic Principles of Design and Layout
The elements and principles of design are the building blocks
of a successful beautiful design. The elements of design are the
things or tools that make up a design while the Principles of
design are what we do to those elements.
6 The Elements of Design
These are the materials or tools to make different designs or
Arts.

 LINE – Lines are defined by points moving in space. It can

create a sense of movement or direction in your design.
Line is can be smooth, rough, straight, curve, broken,
thick or thin.
7 The Elements of Design
 SHAPE – A shape is an enclosed space, the boundaries of
which are defined by other elements of art like lines,
colors, values or textures. Shapes can be used to create
patterns and draw the viewer’s attention.

 DIRECTION – Applying motion to create the visual illusion of

movement. Use horizontal direction for calmness,
stability and tranquility while vertical direction for
emotions of balance, formality and alertness.
8 The Elements of Design
 SIZE (SCALE) – Size is basically the relationship of the area
occupied by one shape to that of another. Large
elements means more significant than the small one.

 TEXTURE – Texture refers to surface appearance of an object

given by the dimensions, form, thickness, arrangement,
and amount of its basic parts.
9 The Elements of Design
 COLOR – Color is light redirected off objects. It is used to create
curiosity and emotions to the viewer’s. It has three main
characteristics: hue (these are red, green, blue, etc.),
value (lightness/ darkness), and intensity (saturation, or
amount of pigment) and temperature (warm and cool)
10 The Principles of Design
These are the rules that help you organize and place the
materials to make arts or designs.

 Balance – Balance in design is the state of equal

relationship.
- It means equal distribution of visual weight in a
design.
- It refers to the proper arrangement of the
elements, which gives a visual weight for the
design.
- Balance in graphic design provides stability
and structure to a design.
11 The Principles of Design
There are different kinds of balance
o Symmetrical balance :
- occurs when identical weights are on
equal sides of a composition.
- where the elements are equally distributed on
both sides of your design, technically a mirror-
based design.
12 The Principles of Design
o Asymmetrical balance :
- occurs when a design have unequal graphic
weight on either side, but those unequal
graphics need to balance each other (un-
evenly balanced).
- a free layout where the elements can be
placed in any order or the opposite of
symmetrical.
13 The Principles of Design
o Radial balance :
- occurs when the design elements swirl out
from a central axis (emanating from a central
point)
14 The Principles of Design
 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.
15 The Principles of Design
 PROXIMITY – Proximity maintains a relationship between
items that go together.
- It helps creates organization by grouping the
same elements together or in close proximity.
The elements should be connected visually.
16 The Principles of Design
 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.
- refers to lining up the elements of a design along the
top, bottom, center or sides of the elements.
- It allows us to create order and organization in our
design.
17 The Principles of Design
 Pattern, Repetition and Rhythm – Repetition
duplicates the characteristics of similar
elements to contribute to design
consistency.
- It strengthens a design by tying
together individual elements.
- It also makes the design formal and
more comfortable to read because of
its uniformity.
- pattern is a regular arrangement of
alternated or repeated elements like
shapes, lines or colors;
- rhythm--is a combination of elements
repeated, but with variations.
18 The Principles of Design
 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.
 The Principles of Design
19

 Contrast – It refers to the use of different or

opposite elements such as sizes (large or
small), shapes (geometric o organic),
spaces (negative or positive), form (real
or abstract), colors (monochromatic,
complementary, triadic, tetradic), texture
(smooth or rough), and values (light or
dark).
- Contrast refers to the use of
conflicting elements or colors while
still remaining harmonious and
unified when the artwork is viewed
as a whole.
- It allows you to give emphasis to
key elements in your design
- The contrast gives visual weight to
an object or design.
20 The Principles of Design
 SPACE – It refers to the area that an object occupies.
- Both positive and negative space should be
considered in graphic design.
- White space gives your design breathing room.
21 The Principles of Design
 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.
Activity 1 Task:
22
23 What is Infographic?
The term Information graphic or Infographic is a
photographic presentations of data and information that use the
different elements of design to make data easily understandable
at a glance.

• Infographics make complex messages become more

visuall
• Visual Message Design can help with effectiveness of
delivery of a message.
- It can lend assistance in presenting your
ideas clearly.y appealing to the viewers.
24 Infographic
 Principles of Visual Message Design using Infographics
25
1. Be unique Be creative is one of the most important aspect of
designing an effective infographic.

2. Keep it simple Make a design easy to understand. Straight to the

point and focus more on the message.

3. Less is more Focus on what matters. Keep your text minimal will
most likely produce more impact than a page full of
words.

4. Sharing Share it with your friends. It is the most important and

effective thing to do in making infographic
26
Activity 2 Task:
27
 Use Basic Image Manipulation Techniques
28

An image editor is a software application that allows the photo to

be edited and enhanced.
It can be an:
o online application (www.canva.com),
o offline software (Adobe Creative Suite) and
o open source (GIMP software and SketchUp
- formerly Google SketchUp).
The image file format that can be used are JPEG or JPG,
TIFF, GIF and PNG.
 Use Basic Image Manipulation Techniques
29
 Use Basic Image Manipulation Techniques
30 The questions in preview are some of the few questions that comes into mind
when we talk about Photo Editing Sofware. The picture in preview is the Graphical
user interface (GUI) of GIMP Photo Editor that we will be using throughout the
lesson 2. Before we go further, you need to answer the first activity of the lesson .

Photo editing and designing software allow you to manipulate or edit

images. In order to perform image manipulation, you need to have basic
knowledge of image editing operations such as cutting, cropping, replacing and
more.
For this, you need an image editing software for image manipulation
practices. The followings are some examples of image editing software:
Adobe Photoshop
Gimp
Corel Draw
Pixlr Editor
PAINT.NET
InPixio
 Online File Formats for Images and Text
31

• Image file format:

- refer to how data associated to the image will be stored.
- It can be compressed to decrease file size of the image.
- There are two different compression you can choose
when enhancing your images: lossy and lossless
compression.

 Lossy compression reduces file size by removing

redundant information means that some data from
the image file is lost.
 Lossless compression retains values and manages
to lower file size.
 Online File Formats for Images and Text
32
 Online File Formats for Images and Text
33

• Image resolution:
- refers to the number of pixels in an image or the detail
an image holds.
- It is identified by the height and the width of the image.
- A pixel is just one unit of the whole digital image it is the
smallest unit of an image.
- The higher the resolution, means that there more pixels
per inch (PPI), resulting in more pixel information and
creating a high-quality, crisp image
 What is GIMP?
34

GIMP:
- It is a cross-platform image editor available for
GNU/Linux, OS X, Windows and more operating systems.
- It is free software, you can change its source code and
distribute your changes.
- It is identified by the height and the width of the image.
- GIMP means "GNU Image Manipulation Program".
- It is free software to download at http://www.gimp.org/.
GIMP was built for a Linux system, but it can also runs on
any platforms like Windows and Mac OS.
35
 GIMP Manipulation Techniques
36

1. Opening of Image Files :

 GIMP Manipulation Techniques
37

2. Select Tools :
Select tools can be seen in the toolbox. It allows you to select
a portion of image you want to edit like crop tool, rectangular
tool, ellipse tool and free tool. (see Figure 3.4)
 GIMP Manipulation Techniques
38
3. Paintbrush tool :
Select the paintbrush tool then click and hold the left mouse
button while drawing. You can choose different colors in the
foreground color in the select tool. (see Figure 3.5)
 GIMP Manipulation Techniques
39
 GIMP Manipulation Techniques
40
 Other Tools:
41
1. Rectangle Select Tool:
Select a rectangular region.
2. Ellipse Select Tool: Select
the elliptical region.
3. Free Select Tool: Select a
hand drawn region with
free and polygonal
segments.
4. Fuzzy Select Tool: Select a
contiguous region based
on color.
5. Select by Color Tools:
Select regions with similar
colors Shift + O.
6. Scissor Select Tools: Select
tools using intelligent edge-
fitting
7. Foreground Select Tools:
Select a region containing
foreground objects.
8. Paths Tools: Create and
edit paths.
9. Color Picker: Select Color
from image pixels.
10. Zoom Tools: Adjust the
zoom level.
 Other Tools:
42
11. Measure: Measure distance
and angle.
12. Move: Move layers,
selections, and other
objects.
13. Alignment: Align or arrange
layers and other objects.
14. Crop: Remove edge areas
from image or layers.
15. Unified Transform: Transform
the layer, selection or path
Shift + T
16. Rotate Tool: Rotate the
layer selection or path Shift
+ R.
17. Scale Tool: Scale the layer
selection or path Shift + S.
18. Shear Tools: Shear the layer
selection or path Shift + H.
19. Handle Transform Tool :
Deform the layer, selection
or path with handles Shift +
L.
20. Perspective Tool: Change
perspective of the layer,
selection or path Shift + P.
 Other Tools:
43
21. Flip Tool: Reverse the layer,
selection or path
horizontally or vertically Shift
+ F.
22. Warp Transform: Deform
with different tools.
23. Text Tool: Create or edit
layers
24. Crop: Remove edge areas
from image or layers.
25. Bucket Fill Tool: Fill selected
area with a color or pattern
Shift + B.
26. Gradient Tool: Fill selected
area with a color gradient.
27. Pencil Tool: Hard edge
painting using a brush.
28. Paintbrush Tool: Paint
smooth stroke using a brush.
29. Erase tool: Erase the
background or
transparency using a brush
Shift + E.
30. Airbrush Tool: Paint using a
brush with a variable
pressure.
 Other Tools:
44
31. Ink Tool: Calligraphy-style 36. Smudge Tool: Smudge
painting. selectively using a brush.
32. Clone Tool: Selectively 37. Dodge/Burn Tool:
copy from an image or Selectively lighten or
pattern, using a brush.
darken using a brush Shift +
33. Healing Tool: Heal image D
irregularities.
34. Perspective Clone Tool:
Clone from and image
source after applying a
perspective transformation.
35. Blur/Sharpen Too: Selective
blurring or unblurring using a
brush Shift + U.
45
Combining Text, Graphics, and Images
Combining text, graphics, and images in your design will make your message
clearer.
Transparent shapes
o Add simple opacity to your shape to see clearly the text you want to
emphasize. It adds an elegant and focal point to your design
Fonts and Shapes
o Used the right font size (not to small and not to big) and font type in your
design and combined it with a nice shapes.
Text and background
o Organized your design. Make used of the different text alignment on an
image(s).
Clean and clear background
o Less is more. Focus on what matters. Use a clean and clear background
for the message to be readable.
Activity 3 Group
46 Task:
THANK YOU!!!