Imaging and design for online environment
“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.
Basic Principles of Graphics and Layout
1. Balance - The visual weight
of objects, textures, colors and space is evenly distributed on a screen.
2. Emphasis – An area in the
design that may appear different in size, texture, shape or color to attract
the viewers attention.
3. Movement - Movement guides
the viewer’s eye around the screen.
4.
Pattern, Repetition and Rhythm - Visual elements that are repeated to create
unity in the layout or image.
5. Proportion - Visual elements create a sense of unity where
they can easily find one another.
6. Variety – This uses several
design elements to draw a viewers 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. Infographics
make complex data become more visually appealing.
Creating Infographics Using Piktochart
1. Create a piktochart account by going
to www.piktochart.com and click Sign
In on
the upper right corner of the page.
2. Fill up the information on the sign
up page;
alternatively, you can connect with Google+ or Facebook.
3.
Once you have created an account and logged in, select a template for your
infographic. Since your data relates to
marketing or sales, simply hover over the Presenta Board theme under Free
Themes then select Create.
4. The Piktochart editor will open. The
Presenta Board theme consists of three blocks or
parts. Select the blocks and input the information as you see fit.
5. While editing a block, you can use
the variation tools on the left side of the page.
a. Graphics – allows you to
insert lines, shapes, icons and even photo.
b. Uploads – allows you to
upload images for your infographics.
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 frame.
e. Styles – allows you to
modify the color scheme of your infographic.
f. Tools – allows you to
create charts 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
Here are common image file formats used on the web. We
will look at their use in the web.
Principles and Basic Techniques of Image Manipulation
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
find 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 millin megapixels, it will not display everything. Thus, it is not always wise to make our image big, most
specially in a website. Know how much space you want the image to consume. Or
have a “preview” image where the audience has the option to “see full size.
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 image using PhotoScape
- On PhotoScape’s main screen, you will
see the may features it has that you can use for creating web content as
follows:
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 pictures
for printing
8. Splitter - divides a single
photo into multiple parts
9. Screen Capture- captures the screen
and save 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.
