Scribd
Upload
20 views4 pages

Emtech W6

Uploaded by

olimpoarianekaye
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
20 views4 pages

Emtech W6

Uploaded by

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

IMAGING AND DESIGN FOR

6 ONLINE ENVIRONMENT

What should I expect?


At the end of this lesson, the student is able to:
1. Understand the basic principles of graphics and layout;
2. Create s simple infographic using web tool; and
3. Understand and use several file formats used on the web.

What do I know?
Define the following terms based on your own understanding:
1. Graphic –
2. Layout –
3. Style –
4. Proportion –

What do I remember?
What is the most visited website in the world? Think about it for a second. No, it is not Facebook
nor Twitter. Here is a clue, the site’s mission statement is to “organize the world’s information and make it
universally accessible and useful.” You have probably guessed it by now, yes – it is Google. On December 2014,
Alexa.com, a renowned website for ranking web page popularity, ranks this website number one in the entire
world. Why do you think Google ranks number one despite the countless search engines and websites in the
Internet?
What do I need to know?
Creating a web page is like creating a 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.

EMTECH W6 1
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

Figure 1. an example of balance and emphasis


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 unity in the layout or image. Rhythm is achieved when visual elements create a sense of
organized movement.

Figure 2. This image uses pattern and repetition which create harmony for the entire image.
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.

Figure 3. Bing uses a combination of text and images to make the site more appealing but nit distracting from
the site’s purpose

EMTECH W6 2
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.

Online Image File Formats


Unlike images that are found in our computer, you have to consider that website images should be
more compressed because data travels over the Internet and not everyone has a fast internet connection.
Consequently, we have to use compressed images on our websites. Likewise, even though wide variety of
websites already support high-definition (HD) photos, you do not have to use HD all the time. In fact, most of
the time, you do not even have to. Here are common file formats used on the web. All of them are already
discussed in lesson 3.
Name File Use Supports Supports
Extension Transparency Animation
Joint Photographic .jpeg or .jpg Real-life photographs, No No
Experts Group high compression
Graphics .gif Computer-generated Yes Yes
Interchange graphics
Format
Portable Network .png Screenshots, high Yes No
Graphics compatibility

Principles and Basic Techniques of Image Manipulation


Personal websites do not necessarily have to downsize the file size of the images. But if you have a
wider target audience, you need to make the necessary changes. Here are some tips to help you edit images
for your website:
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.

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)

3.Brightness and Contrast. One of the most basic techniques in image editing,
making the image darker or lighter
EMTECH W6 3
4. Compression and Resizing. The higher the quality and the larger
the photo is, the bigger the file size of the picture is

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.


7. Changing the Background. Adding background to make your image stand out

8. Removing the Color. Removing certain colors in your image or desaturation the color of the image
9. Combining Text, Graphics and Image. Adding multiple elements in your layout

SUMMARY

The basic principles of graphics and layout include balance, emphasis, movement,
pattern and repetition, proportion, and variety. Infographics or information graphics is used to
represent information, statistical data, or knowledge in a graphical manner. Similar to MS Word, you
can use several image file formats over the Internet; the most commonly used are JPEG, GIF, and PNG.
Each of which can be used in different instances depending on what you need.

REFERENCES

Rex Book Store (2017)Empowerment Technologies, 856 Nicanor Reyes, Sr. St., Rex Book Store, p. 103-119.

EMTECH W6 4

You might also like