Imaging and Design for

Online Environment
Lesson Objectives:
1. Understand the basic principles of graphics and layout.
2. Create a simple infographic using web tools.
3. Understand and use several files formats used on the 
web.
4. Easily manipulate images using a simple image editor.
5. Upload and share images using Photobucket.
Basic Principles of Graphics and Layout
The nuts and bolts in graphic and layout
• Balance – it is the visual weigh of objects, texture, 
colors, and space is evenly distributed on the screen.
• Emphasis – an area in the design that may appear 
different in size, texture, shape or color to distract 
the viewer’s attention.
• Movement – how the eye moves through the 
composition leading the attention of the viewer 
from one aspect to another.
• 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.
• Proportion – visual elements create a sense of 
unity where they relate well with one another.
• Variety – this uses several design elements to draw a 
viewer’s attention.
 INFOGRAPHICS

• 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.
 CREATING INFOGRAPHICS USING PIKTOCHART

1. Create Piktochart account by going to 
www.piktochart.com 
2. Fill up the information on the sign up page, you can 
connect with Google+ or Facebook
3. Once you have done, select a template for your 
infographic. 
4. Select the blocks and input the information as you see 
fit.
5. While editing, you can use various tools on the left side of 
page.
•A. Graphics – allows you to insert lines, shapes, icons, and even 
photos.
•B. Upload – 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 colors scheme of your 
infographic
•F. Tools – allows you to create charts, maps, and videos.
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. 
 ONLINE IMAGE FILE FORMATS

Name File Extension Use Supports Supports animation

transparency
1. Joint  Real life  No No
Photographic  jpeg or jpg photographs, high 
Experts Group compression

2.   Graphics gif Computer generated  Yes Yes

      Interchange graphics
      Format

3.   Portable png Screenshots, high  Yes No

       Network compatibility
       Graphics
 Principles & Basic Techniques of Image
Manipulation
• 1. Choose the right file format- Knowing the 
purpose is the key to finding out the best file 
format.
• 2. Choose the right image size- Know how much 
space you want the image to consume.
• 3. Caption it- Remember to put a caption on 
images whenever possible.
CREATING AND MANIPULATING IMAGES USING
PHOTOSCAPES

PhotoScape Main Screen

 Features
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 a single one; 
similar to 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 picture 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 to JPEG
12. Rename – allows you to rename a batch of 
photos
13. Paper Print – useful tool for printing your own 
calendar, sheets, lined paper, graph paper, etc. 
 EDITOR EDIT Steps
1. Open Photoscape then choose editor
2. Choose the folder where the image you want to manipulate is 
located. 
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 image will now be shown on a much bigger preview 
inside your work area similar to what is shown below. 
5. Notice the properties of the image like the file name, 
the image size and the file size found on the bottom of the 
preview. 
6. Manipulating 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. Objective Tab – this is where you can place a wide 
variety of images like text, shapes, and symbol. 
C. Crop – this is where various tool can be found in order to 
properly crop an image to a desirable size.
D. Tools – includes other tools like red eye correction, mole 
removal, mosaic effect, and brush tool.
7. Click SAVE location on the lower right of the program. 
The Save as dialog box will appear. Save it in your 
activities, folder with the file name. Check the file size 
and see how much space you saved. 
 Batch Edit Steps
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 work area (center).
2. Use the tools on the right to edit your photo. This similar 
to the option 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 pixel in 
width. Add filters if You want.
4. Click on Covert 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.
Inserting, Uploading, and Sharing photos over the Internet

Sharing your photos over the Internet has never 
been so easy using social media. However, it is 
highly recommended to put your social media 
photos private and separated from the ones that 
are posted over the Internet. In that case you need 
an image host while others are free where you can 
pay for more storage space or bandwidth.
 Sharing Photos with Photobucket
1. First, sign up for a Photobucket accoun on 
photobucket.com. Just like Piktochart, 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.
3. A new page will load allowing you to drag and drop your 
photos or choose them manually or the entire folder to 
upload any photos you have right then.
4. Once selected, a progress bar will appear 
indicating that the image is uploading.
5. Once you are done you will see these indicators:
A. View Uploads- views photos you just uploaded which 
also grants you options to share and edit them 
individually.
B. Share Albums- shares everything you just uploaded 
plus the other contents of your specified folder.
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. Share 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 may now 
log off and close the browser.