PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in...
Transcript of PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in...
![Page 1: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/1.jpg)
PREPARED BY: MARK JHON C. OXILLO
![Page 2: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/2.jpg)
a representation of the external form of a person or thing in
art.
![Page 3: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/3.jpg)
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 devices – such as cameras, mirrors, lenses, telescopes, microscopes, etc. and natural objects and phenomena, such as the human eye or water.
![Page 4: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/4.jpg)
are visual images or designs on some
surface, such as a wall, canvas, screen, paper,
or stone to inform, illustrate, or entertain
![Page 5: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/5.jpg)
-Photographs
-Drawings
-Line art
-Graphs
-Diagrams
-Typography
-Numbers
-Symbols
-Geometric designs
-Maps
-Computer Graphics
-Engineering drawings, or other images
![Page 6: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/6.jpg)
is part of graphic design that deals in the arrangement of visual elements on a page
![Page 7: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/7.jpg)
Basic Principles of Graphics
and Layout :
1. Balance. The visual
weight of objects,
texture, colors, and
space is evenly
distributed on the
screen.
![Page 8: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/8.jpg)
Basic Principles of Graphics
and Layout :
2. Emphasis. An area in
the design that may
appear different in size,
texture, shape or color to
attract the viewer’s
attention.
![Page 9: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/9.jpg)
Basic Principles of Graphics
and Layout :
3. Movement. Visual
elements guide the
viewer’s eyes around
the screen.
![Page 10: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/10.jpg)
4. Pattern, Repetition, and
Rhythm. These are the
repeating visual element on an
image or layout to create unity
in the layout or image. Rhythm
is achieved when visual
elements create a sense of
organized movement.
![Page 11: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/11.jpg)
5. Proportion. Visual
elements create a
sense of unity where
they relate well with
one another.
![Page 12: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/12.jpg)
6. Variety. This uses
several design
elements to draw a
viewer’s attention.
![Page 13: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/13.jpg)
INFOGRAPHICSInformation graphics or
infographics are used to
represent information, statistical
data, or knowledge in a
graphical manner usually done
in a creative way to attract the
viewer’s attention.
![Page 14: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/14.jpg)
5 Principles in Making an
Effective Infographic Design
1. Be Unique
2. Make It Simple
3. Be Creative and Bold
4. Less is More
5. The Importance of Getting
it Across
![Page 15: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/15.jpg)
1. Joint Photographic Experts Group (JPEG) – does not support transparency and animation (.jpeg or jpg)
![Page 16: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/16.jpg)
2. Graphics Interchange Format (GIF) – supports transparency and animation (.gif)
![Page 17: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/17.jpg)
3. Portable Networks Graphics (PNG) –supports transparency but not in animation (.png)
![Page 18: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/18.jpg)
![Page 19: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/19.jpg)
![Page 20: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/20.jpg)
Image Manipulation
Principles
1. Choose the right file
format. Try to make a real-life
photograph into GIF to see the
difference between PNG, GIF,
and JPEG. Knowing the
purpose is the key to finding
out the best file format.
![Page 21: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/21.jpg)
Image Manipulation
Principles
2. Choose the right image size. A
camera with 12 megapixels
constitutes to a bigger image size.
Monitors have a resolution limit, so
even if you have a million
megapixels, it will not display
everything.
![Page 22: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/22.jpg)
Image Manipulation
Principles
3. Caption it. Remember to
put a caption on images
whenever possible. If it is not
related to the web page, then
remove it.
![Page 23: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/23.jpg)
![Page 24: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/24.jpg)
Image Manipulation
Techniques
1. Cropping. Cutting parts
away to remove distracting
or irrelevant elements.
![Page 25: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/25.jpg)
Image Manipulation
Techniques
2. Color Balance. The
ambience and the tone of
light of the picture (ex. Warm
or cool light)
![Page 26: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/26.jpg)
Image Manipulation
Techniques
3. Brightness and Contrast.
One of the most basic
techniques in image editing,
making the image darker or
lighter.
![Page 27: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/27.jpg)
Image Manipulation
Techniques
4. Compression and
Resizing. The higher the
quality and the larger the
photo is, the bigger the file
size of the picture is.
![Page 28: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/28.jpg)
Image Manipulation
Techniques
5. Filters. Making the image
look sketched, grainy, classic
black and white or even let it
have neon colors. This gives
your image a twist from its
original look.
![Page 29: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/29.jpg)
Image Manipulation
Techniques
6. Cloning. Copying or
duplicating a part of an
image.
![Page 30: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/30.jpg)
Image Manipulation
Techniques
7. Changing the
Background. Adding
background to make your
image stand out
![Page 31: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/31.jpg)
Image Manipulation
Techniques
8. Removing the Color.
Removing certain colors in
your image or desaturating
the color of the image.
![Page 32: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/32.jpg)
Image Manipulation
Techniques
9. Combining Text,
Graphics and Image. Adding
multiple elements in your
layout
![Page 33: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/33.jpg)
![Page 34: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/34.jpg)
- Google+ Photos
- Flickr
- Smugmug
- Imgur
- 500px
- Photobucket
- Amazon Prime Photos
- DropBox
- Chevereto
- Imageshack
![Page 35: PREPARED BY: MARK JHON C. OXILLO€¦ · 05/10/2018 · the design that may appear different in size, texture, shape or color to attract the viewer’s attention. Basic Principles](https://reader033.fdocuments.us/reader033/viewer/2022052003/60162c3347214327c7555843/html5/thumbnails/35.jpg)
END