Scribd
Upload
83 views5 pages

Empowerment Technologies Week 1-2 - Final Term: Prepared By: Mr. Jake Indico Edited By: Ms. Shaira G. Raquil

The document provides an overview of foundational concepts for designing online environments and editing images, including: 1) Basic principles of graphics and layout like balance, emphasis, movement, and proportion. 2) Types of images like raster and vector, and image editing tools. 3) Features of image editors like selection tools, layers, cropping, and adjusting brightness/contrast. 4) The process of making infographics including gathering ideas, designing, and sharing on social media.

Uploaded by

Justine Evasco Rubia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
83 views5 pages

Empowerment Technologies Week 1-2 - Final Term: Prepared By: Mr. Jake Indico Edited By: Ms. Shaira G. Raquil

The document provides an overview of foundational concepts for designing online environments and editing images, including: 1) Basic principles of graphics and layout like balance, emphasis, movement, and proportion. 2) Types of images like raster and vector, and image editing tools. 3) Features of image editors like selection tools, layers, cropping, and adjusting brightness/contrast. 4) The process of making infographics including gathering ideas, designing, and sharing on social media.

Uploaded by

Justine Evasco Rubia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

EMPOWERMENT TECHNOLOGIES WEEK 1-2 – FINAL TERM

LESSON 1: IMAGING AND DESIGN FOR ONLINE ENVIRONMENT

Image Placement
Creating the web page like creating work of art. There are certain things that you need to consider
in order to get your message across. In the previous lesson, you learned how to create an effective
PowerPoint Presentation. Some of those tips can help you in graphics and layout design.

BASIC PRINCIPLES GRAPHICS AND LAYOUT


1. Balance. The visual weight of objects, texture, colors, and space is evenly distributed on the
screen. When visiting a website, check if one side holds the same amount of weight on the other.
The colors should also have a similar visual weight.
2. Emphasis. An area in the design that may appear different in size, texture, shape or color to
attract the viewer’s attention.
3. Movement. Visual elements guide the viewer’s eyes around the screen.
4. Pattern, Repetition, and Rhythm. These are the repeating visual elements on an image or
layout to create a sense of organized movement.
5. Proportion. Visual elements create sense of unity where they relate well with one another.
6. Variety. This uses several design elements to draw a viewer’s attention.

PHOTO EDITING
Photo editing encompasses the processes of altering images, whether they are digital photographs,
traditional photo chemical photographs, or illustrations. Traditional analog image editing is
known as photo retouching, using tools such as an airbrush to modify photographs, or editing
illustrations with any traditional art medium.

GRAPHIC SOFTWARE PROGRAMS


Which can be broadly grouped into vector graphics editors, raster graphics editors, and 3D
modelers are the primary tools with which a user may manipulate, enhance, and transform images.
Many image editing programs are also used to render or create computer art from scratch.

Prepared by: Mr. Jake Indico


Edited by: Ms. Shaira G. Raquil
1
EMPOWERMENT TECHNOLOGIES WEEK 1-2 – FINAL TERM

BASIC OF IMAGE EDITING


1. RASTER IMAGES are stored in a computer in the form of a grid of picture elements or pixels.

2. VECTOR IMAGES such as Adobe Illustrator, Inkscape and etc. are used to create and modify
vector images, which are stored as descriptions of lines, Bezier curves and text instead of pixels.
RASTER IMAGES-use many colored pixels or individual building blocks to form a complete
image JPEGs, GIFs and PNGs are common raster image types. Almost all of the photos found on
the web and in print catalogs are raster images.
VECTOR IMAGES alternatively, allow for more flexibility. Constructed using mathematical
formulas rather than individual colored blocks, vector file types such as EPS, AI and PDF are
excellent for creating graphics that frequently require resizing.

3. 3D MODELING (OR MODELLING) is the process of developing a mathematical


representation of any three-dimensional surface of an object via specialized software. The product
is called a 3D model. It can be displayed as a two-dimensional image through a process called
3D rendering or used in a computer simulation or physical phenomena. The model can also be
physically created using 3D printing devices.

FEATURES OF IMAGE EDITORS


SELECTION One of the prerequisites for many of the app mentioned below is a method of
selecting parts of an image, thus applying a change selectively without affecting the entire picture.
MARQUEE TOOL for selecting rectangular or other regular polygon-shaped regions.
LASSO TOOL for freehand selection of a region.
MAGIC WAND TOOL selects objects or regions in the image defined by proximity of color or
luminance.
LAYERS which are analogous to sheets of transparent acetate, stacked on top of each other, each
capable of being individually positioned, altered and blended with the layers below, without
affecting any of the elements on the other layers.
IMAGE SIZE resizes images in a process often called image scaling, making them larger, or
smaller. High image resolution cameras can produce large images which are often reduced in size
for Internet use.

Prepared by: Mr. Jake Indico


Edited by: Ms. Shaira G. Raquil
2
EMPOWERMENT TECHNOLOGIES WEEK 1-2 – FINAL TERM

CROPPING creates a new image by selecting a desired rectangular portion from the image being
cropped. The unwanted part of the image is discarded. Image cropping does not reduce the
resolution of the area cropped.

CLONING uses the current brush to copy from an image or pattern. It has many uses: one of the
most important is to repair problem areas in digital photos.

IMAGE ORIENTATION – Image editors are capable of altering an image to be rotated in any
direction and to any degree. Mirror images can be created and images can be horizontally flipped
or vertically flopped. Rotated image usually requires cropping afterwards, in order to remove the
resulting gaps at the image edges.

PERSPECTIVE – is the art of drawing solid objects on a two- dimensional surface so as to give
the right impression of their height, width, depth and position in relation to each other when
viewed from a particular point.

SHARPENING AND SOFTENING– Sharpening makes images clearer. Too much sharpening
causes grains on the surface of the image. Softening makes images softer that removes some of
the highly visible flaws. Too much causes the image to blur.

SATURATION- is an expression for the relative bandwidth of the visible output from a light
source. As saturation increase, colors appear more “pure.’’ As saturation decreases, colors appear
more ‘’ washed-out.’’

CONTRAST AND BRIGHTENING


Contrast of images and brighten or darken the image. Underexposed images can be often be
improved by using this feature.
• Brightening lightens the image so the photo brightens up. Brightness is a relative
expression of the intensity of the energy output of a visible light source.
• Adjusting contrast means adjusting brightness because they work together to make a better
image.

Prepared by: Mr. Jake Indico


Edited by: Ms. Shaira G. Raquil
3
EMPOWERMENT TECHNOLOGIES WEEK 1-2 – FINAL TERM

Infographics
also known as data visualization, information design, and communication design
• It is any graphic that display and explains information, whether that be data or words.
When we use the term ‘’infographics’’, we’re using it as a general term used to describe
data presented in a visual way.
• Infographics are important because they change the way people find and experience
stories. Infographics are being used to augment editorial content on the web, it creates a
new way of seeing the world of data, and they help communicate complex ideas in a clear
and beautiful way.

PROCESS OF MAKING INFOGRAPHICS


Know what is needed
1. Take a reference
2. Know the audience
3. Decide the type of infographics
4. Gather ideas
5. Build thought process
6. Choose your tool and start designing
7. Cross check the data to deliver flawless output
8. Make it viral
9. Share on social network

References:
RBS empowerment technologies (first edition) Rex Book Store, Inc. and Innovative Training
Works, Inc. Sampaloc, Manila 2016

Prepared by: Mr. Jake Indico


Edited by: Ms. Shaira G. Raquil
4
EMPOWERMENT TECHNOLOGIES WEEK 1-2 – FINAL TERM

ACTIVITY SHEET
Name: __________________________________________ Date: _________________
Grade and Strand: ________________________________ Score: _________________

Activity No 1:

1. Give three websites that you visit. What makes their site design work?

2. Research on Photobucket and two more image hosting sites and check out the limitations
of the free account. What is the best hosting site for you and why?

3. What are the limitations of PhotoScape compared to another image editor’s?

Activity 2:
Creating Infographic
Mechanics:
1. Students will form a group with a maximum member of 5.
2. Create an infographic of your strand (original work).
3. Take a picture of your group while doing the task up until work is finished.
4. Submit it to google classroom.

Prepared by: Mr. Jake Indico


Edited by: Ms. Shaira G. Raquil
5

You might also like