EMPOWERMENT TECHNOLOGIES LESSON 6

LESSON 6: IMAGING AND DESIGN FOR ONLINE ENVIRONMENT

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

Infographics (Information graphics)

• These 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.
• Infographics make complex data become more visually appealing to an average user.

Piktochart

• an example of a free online app that allows you to create your own infographic

Creating Infographics Using Piktochart

1. Create a Piktochart account by going to www.piktochart.com and click sign up on the upper right corner of the
page.

2. Fill up the Information on the Sign-Up page; alternately, you can connect with Google+ or Facebook.

3. Once you have created an account and logged in, select a template for your infographics. Since your data relates
to marketing or sales, simply hover the Presenta Board theme under Free Themes then select Create.

4. The Piktochart editor will open (may take a while to load depending on your Internet connection). The Presenta
Board theme consists of three blocks (parts). Select the blocks and input the information as you see fit.

5. While editing a block, you can use the various tools on the left side of the page.
a. Graphics – allows you to insert lines, shapes, icons, and even photos.
b. Uploads – allows you to upload images for your infographics.
c. Background – changes the background of a selected block.
d. Text – allows you insert to your infographic with the option to add text frames.
e. Styles – allows you to modify the color scheme of your infographic.
f. Tools – allows you to create charts, maps, and videos.

SHARON D. SOLIVEN Page 1 of 2

EMPOWERMENT TECHNOLOGIES LESSON 6
Editing Tips:
• Double-click a text to edit the content.
• When working with objects, the toolbox on top of the topmost block will allow you to manipulate it. This is
similar to working with objects in PowerPoint where you can arrange an object to be on top or bottom of
another.
• When working with charts, double click the chart to open the datasheet editor.
• You may rename the title of your infographic on the top toolbar.

6. To save your work, click on Save on the top right of the page. To save it in your computer, click on Download.
In the Download options, select the medium-sized and the PNG file type.

Principles and Basic Techniques of Image Manipulation

Tips to help you edit images for your website:

1. Choose the right file format.

Online Image File Formats
FILE SUPPORTS SUPPORT
NAME USE
EXTENSION TRANSPARENCY ANIMATION
Joint Photographic .jpeg or .jpg Real-life photographs, high
No No
Experts Group compression
Graphics .gif Computer-generated graphics
Yes Yes
Interchange Format
Portable Network .png Screenshots, high compatibility
Yes No
Graphics
2. Choose the right image size.
3. Caption it.

PhotoScape

• A free image manipulation tool that contains may features to help you in creating images for websites.

Photobucket

• An image hosting site

• Bandwidth – amount of data used to download your image by multiple users.

GIMP

• GNU Image Manipulation Program

• graphics editor used for image retouching and editing, free-form drawing, resizing, cropping, photo-montages,
converting between different image formats, and more specialized tasks

SHARON D. SOLIVEN Page 2 of 2