I hope it helps your lesson in empowerment technologies

1. IMAGING AND DESIGN
FORTHE ONLINE
ENVIRONMENT
Prepared by: Mr.Teodoro R. Llanes II
EMPOWERMENT TECHNOLOGIES

2. I CAN
2
*Information & Images taken from various sites on the internet and is under OER Commons.
 I canevaluate existingwebsites andonlineresources
basedontheprinciples of layout,graphic,andvisual
messagedesign.
 I canuseimagemanipulationtechniquesonexisting
imagestochangeorenhancetheircurrentstate to
communicatea messagefora specific purpose.

3. WHAT IS ANIMAGE?
AnImageis a
representationof
theexternalformof
a personorthingin
art.
3
*Information & Images taken from various sites on the internet and is under OER Commons.

4. WHAT IS ANIMAGE?
Imagesmaybe2-dimensional,suchas a
photographorscreendisplay,or3
-
dimensional,suchas a statueor
hologram.Theymaybecapturedby
optical devices – suchas cameras,
mirrors,lenses, telescopes,
microscopes,etc. andnaturalobjects
andphenomena,suchas thehumaneye
orwater.
4
*Information & Images taken from various sites on the internet and is under OER Commons.

5. GRAPHICS:
Graphics – arevisual
imagesordesignson
somesurface, suchas a
wall, canvas, screen,
paper,orstonetoinform,
illustrate, or entertain
5
*Information & Images taken from various sites on the internet and is under OER Commons.

6. EXAMPLES OFGRAPHICS:
 Photographs  Drawings
6
*Information & Images taken from various sites on the internet and is under OER Commons.

7. EXAMPLES OFGRAPHICS:
 LineArt  Graphs
7
*Information & Images taken from various sites on the internet and is under OER Commons.

8. EXAMPLES OFGRAPHICS:
 Typography  Numbers
8
*Information & Images taken from various sites on the internet and is under OER Commons.

9. EXAMPLES OFGRAPHICS:
 Symbols  Geometric Designs
9
*Information & Images taken from various sites on the internet and is under OER Commons.

10. EXAMPLES OFGRAPHICS:
 Maps  Computer Graphics
10
*Information & Images taken from various sites on the internet and is under OER Commons.

11. EXAMPLES OFGRAPHICS:
 Engineering drawings, or otherimages
11
*Information & Images taken from various sites on the internet and is under OER Commons.

12. IMAGE FORMAT
Differenttypesofimageformatonthe
computer.
12
1

13. ONLINE IMAGE FILEFORMAT
1.Joint Photographic Experts Group (JPEG) – doesnot
supporttransparencyandanimation(.jpeg or jpg)
13
*Information & Images taken from various sites on the internet and is under OER Commons.

14. ONLINE IMAGE FILEFORMAT
2.Graphics Interchange Format (GIF) – supportstransparency
andanimation (.gif)
14
*Information & Images taken from various sites on the internet and is under OER Commons.

15. ONLINE IMAGE FILEFORMAT
3.Portable Networks Graphics (PNG) – supportstransparency
butnotinanimation (.png)
15
*Information & Images taken from various sites on the internet and is under OER Commons.

16. LAYOUT
DefinitionandPrinciples ofLayout&
Graphics.
16
2

17. LAYOUT
Layout – is partof
graphicdesignthat
deals inthe
arrangementof
visual elementsona
page.
17
*Information & Images taken from various sites on the internet and is under OER Commons.

18. BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
1.Balance. Thevisual
weightof objects,
texture,colors,and
space is evenly
distributedonthe
screen.
18
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

19. BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
2.Emphasis. Anarea in
thedesignthatmay
appeardifferentinsize,
texture,shapeorcolor
toattract theviewer’s
attention.
19
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

20. BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
3.Movement.
Visual elements
guidetheviewer’s
eyes aroundthe
screen.
20
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

21. BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
4.Pattern. Builds
course. It builds
familiarity and
organizesdesign
fortrouble-free
viewing.
21
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

22. BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
5.Repetition. makes
designaware. It brings
consistency andflowto
thedesign.
22
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

23. BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
6.Proportion.
Conveysstability. It
involves scaling of
variouselementsto
create a coherent
design.
23
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

24. BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
7.Harmony. Brings
elementscloser. It
utilizes familiartraits
of designelements
andputstheminto
focus.
24
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

25. BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
8.Contrast. Addresses
conflict. It highlights
thedifference andputs
anemphasistowhatis
important
25
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

26. BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:
9.Variety. Reaps
attention.It addsflavor
tothedesign,makingit
moreinteresting and
engaging.
26
dm | DesignMantic
*Information & Images taken from various sites on the internet and is under OER Commons.

27. INFOGRAPHICS
Let’s start withthefirst set ofslides
27
3

28. INFOGRAPHICS
Infographics – Information
graphicsorinfographics are
usedtorepresent
information,statistical data,
orknowledgeina graphical
mannerusuallydoneina
creative waytoattractthe
viewer’sattention.
28
*Information & Images taken from various sites on the internet and is under OER Commons.

29. 5 PRINCIPLES IN MAKING AN EFFECTIVE
INFOGRAPHICDESIGN:
1.Be Unique
2.MakeIt Simple
3.Be CreativeandBold
4.Less isMore
5.TheImportanceof
Gettingit Across
29
*Information & Images taken from various sites on the internet and is under OER Commons.

30. INFOGRAPHICEXAMPLE
30
*Information & Images taken from various sites on the internet and is under OER Commons.

31. INFOGRAPHICEXAMPLE
31
*Information & Images taken from various sites on the internet and is under OER Commons.

32. INFOGRAPHICEXAMPLE
32
*Information & Images taken from various sites on the internet and is under OER Commons.

33. INFOGRAPHICVIDEO
Infographic Video – is
a visualrepresentation
of dataandknowledge
intheformof an
onlinevideo.
33
*Information & Images taken from various sites on the internet and is under OER Commons.

34. INFOGRAPHIC VIDEOEXAMPLE
https://goo.gl/srcHyh 34
*Information & Images taken from various sites on the internet and is under OER Commons.

35. INFOGRAPHIC VIDEOEXAMPLE
https://goo.gl/DJzSCv 35
*Information & Images taken from various sites on the internet and is under OER Commons.

36. IMAGE PRINCIPLES,
TECNIQUES &HOSTING
Imagemanipulationtechniques,
principlesandhostingsites.
36
4

37. 3 IMAGE MANIPULATIONPRINCIPLES
1.Choose the right file
format. Trytomakea real-
life photographintoGIF to
see thedifference between
PNG,GIF,andJPEG.
Knowingthepurposeis the
keytofindingoutthebest
file format.
3
7
*Information & Images taken from various sites on the internet and is under OER Commons.

38. 3 IMAGE MANIPULATIONPRINCIPLES
2.Choose the right image
size. Acamerawith12
megapixelsconstitutes toa
biggerimagesize. Monitors
havea resolutionlimit,so
evenif youhavea million
megapixels,it will not
display everything.
38
*Information & Images taken from various sites on the internet and is under OER Commons.

39. 3 IMAGE MANIPULATIONPRINCIPLES
3.Caption it. Rememberto
puta captiononimages
wheneverpossible. If it is
notrelatedtothewebpage,
thenremove it.
39
*Information & Images taken from various sites on the internet and is under OER Commons.

40. 9 IMAGE MANIPULATIONTECHNIQUES
1.Cropping. Cuttingparts
awaytoremove
distractingorirrelevant
elements.
40
*Information & Images taken from various sites on the internet and is under OER Commons.

41. 9 IMAGE MANIPULATIONTECHNIQUES
2.Color Balance. The
ambienceandthe
toneof lightof the
picture(ex. Warmor
coollight)
41
*Information & Images taken from various sites on the internet and is under OER Commons.

42. 9 IMAGE MANIPULATIONTECHNIQUES
3.Brightness and
Contrast. Oneof themost
basic techniquesin
imageediting,making the
imagedarkeror lighter.
42
*Information & Images taken from various sites on the internet and is under OER Commons.

43. 9 IMAGE MANIPULATIONTECHNIQUES
4.Compression and
Resizing. Thehigherthe
qualityandthelarger
thephotois, thebigger
thefile sizeof the
pictureis.
43
*Information & Images taken from various sites on the internet and is under OER Commons.

44. 9 IMAGE MANIPULATIONTECHNIQUES
5.Filters. Makingthe
imagelooksketched,
grainy,classic blackand
whiteorevenlet it have
neoncolors. Thisgives
yourimagea twist from
its originallook.
44
*Information & Images taken from various sites on the internet and is under OER Commons.

45. 9 IMAGE MANIPULATIONTECHNIQUES
6.Cloning. Copyingorduplicatinga partof an image.
45
*Information & Images taken from various sites on the internet and is under OER Commons.

46. 9 IMAGE MANIPULATIONTECHNIQUES
7.Changing the
Background. Adding
backgroundtomake
yourimagestand out.
46
*Information & Images taken from various sites on the internet and is under OER Commons.

47. 9 IMAGE MANIPULATIONTECHNIQUES
8.Removing the Color.
Removingcertain
colors inyourimage
ordesaturatingthe
colorof theimage.
47
*Information & Images taken from various sites on the internet and is under OER Commons.

48. 9 IMAGE MANIPULATIONTECHNIQUES
9.Combining Text,
Graphics and Image.
Addingmultiple
elementsinyourlayout.
48
*Information & Images taken from various sites on the internet and is under OER Commons.

49. IMAGE HOSTING WEBSITES:
49
*Information & Images taken from various sites on the internet and is under OER Commons.
 Google+Photos
 Flickr
 Smugmug
 Imgur
 500px
 Photobucket
 AmazonPrime Photos
 DropBox
 Chevereto
 Imageshack

50. ▰ 1.InformationandCommunication
TechnologyEffects inPhilippines
▰ 2.OnlineSafety, Security, Ethics and
Etiquette
▰ 3.Microsoft Office (Word,PowerPoint, Excel)
▰ 4.CreativeCommonsRights/CopyrightLaw
▰ 5.GoogleTools
50
*Information & Images taken from various sites on the internet and is under OER Commons.