1. Online Platforms for ICT
Content Development
By: Lloyd Christopher M. Esteban
• Nature and purposes of online platforms
• Web applications for content development
2. • Identify applications that will be useful in imaging and designing
• Apply skills needed in imaging and designing
• Innovate designs for an online environment
4. • 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.
5. • These are visual images or designs on some surface, such as a
wall, canvas, screen, paper, or stone to inform, illustrate, or
entertain.
7. • It is part of graphic design that deals in the ARRANGEMENT
of visual elements on a page.
8. Basic Principles of Graphics and Layout :
1. Balance. The visual weight of objects, texture, colors, and space
is evenly distributed on the screen.
2. Emphasis. An area in the design that may appear different in
size, texture, shape or color to attract the viewer’s attention.
9. Basic Principles of Graphics and Layout :
3. Movement. Visual elements guide the viewer’s eyes around
the screen.
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.
10. Basic Principles of Graphics and Layout :
5. Proportion. Visual elements create a sense of unity where they
relate well with one another.
6. Variety. This uses several design elements to draw a viewer’s
attention.
11. INFOGRAPHICS
• Information 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.
12. 1. Be Unique
2. Make It Simple
3. Be Creative and Bold
4. Less is More
5. The Importance of Getting it Across
INFOGRAPHICS
13. 1. Joint Photographic Experts Group (JPEG) (.jpeg or jpg). It does not support
transparency and animation.
2. Graphics Interchange Format (GIF) – supports transparency and animation (.gif)
3. Portable Networks Graphics (PNG) – supports transparency but not in animation
(.png)
14.
15.
16. 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.
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.
3. Caption it. Remember to put a caption on images whenever possible. If it is not related
to the web page, then remove it.
17.
18. Image Manipulation
Techniques
1. Cropping. Cutting parts away to remove distracting or irrelevant
elements.
2. Color Balance. The ambience and the tone of light of the picture (ex.
Warm or cool light)
Image Manipulation Techniques
19. Image Manipulation
Techniques
3. Brightness and Contrast. One of the most basic techniques in image
editing, making the image darker or lighter.
4. Compression and Resizing. The higher the quality and the larger the
photo is, the bigger the file size of the picture is.
Image Manipulation Techniques
20. 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.
6. Cloning. Copying or duplicating a part of an image.
Image Manipulation Techniques
21. Image Manipulation
Techniques
7. Changing the Background. Adding background to make your image stand
out
8. Removing the Color. Removing certain colors in your image or
desaturating the color of the image.
9. Combining Text, Graphics and Image. Adding multiple elements in your
layout
Image Manipulation Techniques