REVIEWER IN EMTECH

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. 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 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 another.
6. Variety. This uses several design elements to draw a viewer's attention.

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.
a. Graphics - allows you to insert lines, shapes, icons, and even photos.
b. Uploads - allows you to upload images for your infographic.
c. Background - changes the background of a selected block.
d. text - allows you to insert text 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 (similar to the ones in PowerPoint), maps (for demographics), and videos.

Online Image File Formats

Unlike images that are found in our computer, you have to consider that website Images should be connection.

Principles and Basic Techniques of Image Manipulation

1. Choose the right file format. Try to take 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.

Creating and Manipulating Images Using PhotoScape

1. Viewer - as the name implies, is a picture viewer with features the same with most image viewers like changing
image orientation
2. Editor - alters the appearance of a single image
3. Batch Editor - alters the appearance of multiple images
4. Page - arranges several photos to create one; like a mosaic
5. Combine - links several images together to form a bigger image
6. Animated GIF - allows you to create an animated GIF from several pictures
7. Print - readies pictures for printing
8. Splitter - divides a single photo into multiple parts
9. Screen Capture - captures the screen and saves it
10. Color Picker - grabs a pixel from your screen to be used in editing
11. Raw Converter - converts RAW images (uncompressed images usually from digital camera) to JPEG
12. Rename - allows you to rename a batch of photos
13. Paper Print - useful tool for printing your own calendars, sheets, lined paper, graph paper, etc.

I. Editor Edit
For this exercise, take a photo from your camera. It can be a selfie, a groupie, or a random photo.

1. Open PhotoScape then choose editor.

2. Choose the folder where the image you want to manipulate is located using the file explorer on the upper left.
3. Once you have selected the folder, you will see a preview of all the images found on that folder at the bottom of the
file explorer.
4.From the preview, select the image you want to use the in what is show Frontage selectance your work area similar
to what is shown below.
5. Notice the properties of the image like the file name, the image size (in pixels), and the file size found on the
bottom of the preview.
6. Manipulate the image using the tools on the bottom.
A. Home tab - this is where you can add a frame, resize, sharpen, and add filters and effects to your image.
B. Objects tab - this is where you can place a wide variety of images like texts, shape, and symbols.
C. Crop - this is where various tools can be found to properly crop an image to a desirable size.
D. Tools - includes other tools like red eye correction, mole removal, mosaic effect, and brush tools.
7. Click Save located on the lower right of the program. The Save As dialog box will appear. Save it in your activities
folder with the file name editorexer.jpg. Check the file size and see how much space you saved.

I. Batch Edit
Batch editing is one of the most useful tools when trying to easily manipulate all images at the same time.
1. Select the folder where your photos are located, then on the Preview window, drag the photos you want to be part of
the batch edit to the work area (center).
2. Use the tools on the right to edit your photo. This is like the options in edit except the Crop and Tools tab which are
replaced by the Filters tab. The Filters tab is used to add a certain filter that will apply to all your photos.
3. Resize the pictures so that they do not exceed 800 pixels in width. Add filters if you want.
4. Click on Convert All button found on the upper right.
5. The Save dialog box will appear that will allow you to change the location, the name of the images, and the file
type.

Sharing Photos with Photobucket

There are plenty of free image hosting sites out there, and Photobucket is one of the oldest.

First, sign up for a Photobucket account on photobucket.com. Just like Piktochart,

1. you may use your Google+ or Facebook account to automatically sign up.
2. Once your account is set up and you are already logged in, click the Start Uploading button.
a. View Uploads - views photos you just uploaded which also grants you options to share and edit them individually of
your specified folder.
b. Share Album - shares everything you just uploaded plus the other contents.
c. Edit Photos - uses Photobucket's photo editing tools to manipulate your image.
6. Let us assume you will share a photo individually. To do this, click on View Uploads then once the page loads, click
the photo you want to share.
7. On the top of the image, you will see the following options:
A - shares your photo directly to social media and blogging platforms: Facebook, Twitter, Google+, Tumblr, and
Pinterest, respectively
B - gives you a variety of link codes for HTML, Forums, Emails, Instant Messaging, and a direct link
C - shares your image via email
D - allows you to download your image
E - shares your image to social media sites with the option to add a custom message
8. You may choose to share your photo to your friends on Facebook. If you are done sharing, you máy now log off and
close the browser.