Scribd
Upload
768 views

Imaging and Design For Online Environment

The document discusses principles of graphics and layout, creating infographics, common online image file formats, and basic image manipulation techniques. It outlines learning objectives for students to understand graphics and layout principles, create a simple infographic, recognize common file formats used on the web, and easily edit images. The document also provides details on principles of balance, emphasis, movement, pattern, and proportion in design as well as tips for choosing the right file format and image size when editing images for a website.

Uploaded by

nielamp4s0 -
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
768 views

Imaging and Design For Online Environment

The document discusses principles of graphics and layout, creating infographics, common online image file formats, and basic image manipulation techniques. It outlines learning objectives for students to understand graphics and layout principles, create a simple infographic, recognize common file formats used on the web, and easily edit images. The document also provides details on principles of balance, emphasis, movement, pattern, and proportion in design as well as tips for choosing the right file format and image size when editing images for a website.

Uploaded by

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

Imaging and Design for

Online Environment
• Basic principles of graphics and layout
• Creating infographics
• Online file formats for images
• Principles and basic techniques of image
manipulation

E-Tech
At the end of this lesson, the students should be able to:

1. understand the basic principles of graphics and layout;

2. create a simple infographic using web tools;

3. understand and use several file formats used on the web;

4. easily manipulate images using a simple image editor

E-Tech
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.

3. Movement. Visual elements guide the viewer’s eyes


around the screen.

E-Tech
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.

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.

E-Tech
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.

E-Tech
Online Image File Formats

*When inserting text to a web page, you can simply copy


a text to your html editor, or you can upload it on a website
as a PDF file. Most browsers support “add-ons” so that
you can open PDF files without leaving the browser.

E-Tech
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.

E-Tech
• Create a brochure for your company’s
newest product indicating its properties,
components, uses and advantages.
• Use Microsoft Publisher to layout your
brochure applying a good graphics layout.
You can make infographics as well.

*****Reminders on next slide*****

E-Tech
Reminder:

• Individual (brochure should be related to your business plan.)


• Short bond paper.
• To be submitted on TUESDAY during
ROBOTICS time.
• **ROBOTICS FINAL PT (practical exam)
on Tuesday, failure to attend the class will
result to incomplete grades.

You might also like