Module 3: Imaging and Design for the Online Environment

Objectives:
 Independently apply the techniques of image manipulation and graphic design to create original
or derivative ICT content from existing images, text and graphic elements for use in specific
professional tracks.
o Use image manipulation techniques on existing images to change or enhance their
current state to communicate a message for a specific purpose.
o Create an original or derivative ICT content to effectively communicate a visual message
in an online environment related to specific professional tracks.

Group Activity 3.3 : Creation of Logo and Infographic

Objective:
 To work together as a team in coming up with creative and relevant ICT content to effectively
communicate a visual message in an online environment related to specific professional track
through the creation of a logo and an infographic, and uploading it online.

Task 1: Creating a Logo

Objectives:
 To be able to apply principles of design.
 To apply image manipulation techniques.

A. Preliminary work:
1. Choose a specific area in your strand for which you will be developing the logo and the
infographics.
 For STEM, you may focus on a specific field in Medicine; for ABM it might be for a
group of young entrepreneurs; for HUMSS it can be about creative writing or
about Philippine politics; for GAS it may focus on disaster readiness and risk
reduction; or it can be about sports, arts, culinary or information technology as it
applies.
2. Decide on the name of the group or the organization from the area you have chosen. It may be
an original name (fictional) or an actual existing organization without a logo.
3. Understand the brand. By this it means understanding the organization. What is the group
focused on? What does it care about and what does it aspire to be? From your responses, identify
images that will best represent the organization. You may look for inspiration from existing logos
of similar organizations but to still keep in mind to be original and always map back to the unique
attributes of your organization.
4. As a group, choose among the images identified earlier to be the symbol of your organization and
will be incorporated in the design of your logo. You have to make sure that the image will be of
high quality.
5. Decide on the colors that you will use for your logo. Every color has a different implication and
may convey the wrong message if used incorrectly. The Logo Company released an article "The
Science Behind Colors", here’s a quick guide:
 Red: energetic, sexy, bold
 Orange: creative, friendly, youthful
 Yellow: sunny, inventive, optimism
 Green: growth, organic, instructional
 Blue: professional, medical, tranquil, trustworthy
 Purple: spiritual, wise, evocative
 Black: credible and powerful
 White: simple, clean, pure
 Pink: fun and flirty
 Brown: rural, historical, steady
Try to match the color to the overall tone and feel of the brand. You may consider what color
tones are used in the organization.

B. Designing the Logo:

1. While some logos are solely represented with a symbol, it took a lot of time for people to associate
the symbol with the brand or organization. The logo that you will be creating will have two
elements, a wordmark and a symbol. Another practical reason is for recognition since the
organizations are practically new.
2. Prepare the two elements.
a. Edit the image/symbol you chose. If the image requires enhancing, refer to the activity on
image manipulation. The image may require cropping or cutting, color enhancements,
adding texture and saving it with an appropriate image type.
b. Create the wordmark. Choose your font type and size. Consider three main points when
choosing a font to accompany your logo design:
 Avoid the most commonly used fonts, such as Comic Sans, or else your design
may come off as amateurish.
 Make sure the font is legible when scaled down, especially with script fonts.
 One font is ideal, avoid more than two.
3. Put the 2 elements together. Incorporate the color tones you’ve chosen in the design of the logo.
Decide on the placement of the elements in your logo. Apply the principle of balance. Keep your
logo balanced by keeping the “weight” of the graphics, colors, and size equal on each side.
 Any image manipulation software may be used for this activity, either Photoshop
or Illustrator, GIMP or any online photo-editors
(http://thenextweb.com/creativity/2014/02/24/9-browser-based-photo-editing-
tools/).
4. Decide on the size of the logo. A logo has to look good and be legible at all sizes. A logo is not
effective if it loses too much definition when scaled down for letterheads, envelopes, and small
promotional items. The logo also has to look good when used for larger formats, such as posters,
billboards, and electronic formats such as TV and the Web. Below is a list of standard dimensions
based on more popular sizes.
Popular Social Media
 Facebook: 180 x 180
 Google+: 250 x 250
 Twitter: 400 x 400
 YouTube Channel icon: 98 x 98
 LinkedIn: 300 x 300
Logos for Websites
 Website Horizontal
o 250 x 150
o 350 x 75
o 400 x 100
 Website Square or Vertical: 160 x 160
Task 2: Creating an Infographic
Objective:
 To be able to apply principles of visual message design through an infographic.

A. Preliminary work:
1. Before you start creating the infographic, prepare all the information that will be included in your
visual message. Start by choosing your topic, it should be anchored on the field you specified in
the previous activity.
2. Gather all the information in one document, such as a word processing software, and create a
text outline. Gather resources (text, images, charts and other information) from the web, ensure
that these are reputable sources. Don’t forget to copy and paste the URL of the source material
into your outline.
3. Create a design plan, a template or a draft where you want to place the information you were
able to gather. The following is an example;

4. Decide on your color palette, what color tones will be used for your infographic. Consider the
guidelines on choosing color and how to combine them.
 B. Designing the Infographic:
1. In designing your infographic be guided with the Principle of Visual Message Design which are
Uniqueness, Simplicity, Creativity and Boldness, Less is More principle and the Ease of Sharing.
2. Prepare your elements.
a. Edit the images you downloaded. If the images require enhancing, refer to the activity on
image manipulation. The images may require cropping or cutting, color enhancements,
adding texture and saving it with an appropriate image type (usually .jpg and .png).
b. If your text content will not be images, choose your font type and size.
3. Put the elements together, placed according to the template or draft you prepared. Make sure to
incorporate the logo you created from the previous activity.
 Any image manipulation software may be used for this activity, either Photoshop
or Illustrator, GIMP or any online photo-editors
(http://thenextweb.com/creativity/2014/02/24/9-browser-based-photo-editing-
tools/). Microsoft Word or Powerpoint may also be utilized.
4. For purpose of publishing and sharing, make sure to save your infographic in standard image type
of either JPG or PNG format. Make sure that you also save a copy of the original file, that is the
one that can still be edited in case there will be changes that needs to be done on the infographic.
5. Finally, share it on social media. Post it on your Facebook wall.

For a quick review on how to work with layers and text styles for either Adobe Photoshop or GIMP, you
may refer to the following links:

Layer Masks
Photoshop: http://www.photoshopessentials.com/basics/understanding-photoshop-layer-masks/
GIMP : https://www.gimp.org/tutorials/Layer_Masks/

Text Styles
Photoshop: http://www.photoshopessentials.com/photoshop-text/text-effects
GIMP : https://www.gimp.org/tutorials/Floating_Logo/

You may also access the materials offline through the following link:
https://canvas.instructure.com/courses/1032082/files/folder/Materials for Module 3 Activity/Activity 3.3
Download all zip files and save them in the same folder. Click on the files with the .htm extension to launch
the materials on a web browser even without Internet connection.