Manipulating Text, Graphics, and Images for Online ICT Content (copy)

Graphics & Layout Fundamentals

• 5 Basic Principles of Graphics and Layout

• Proximity

• Alignment

• Repetition

• Contrast

• White Space

Proximity

• Definition: Grouping related elements to guide viewers through a message.

• Effects

• Adds unity & continuity even when elements first look scattered.

• Useful for customizing templates.

• Visual example cues (page text): multiple price tags “19.95”, repeating words “LOREM/IPSUM/DOLOR” & the number “100” are close to one another, implying relation.

Alignment

• Amateur default: center‐alignment; professionals explore additional options.

• Consistent alignment maintains balance.

• Troubleshooting tip: If a layout feels “off,” tweak alignments first.

• Example text: mixed Latin copy, headline "CONSECT TURI O ADIPISCING" alongside repeated price “19.95”.

Repetition

• Reusing visual elements gives emphasis & directs attention.

• Example: Cropped sandwich photo repeated in square masks; repeated red strokes above “PANE.”

• Extra mini‐example text list (author bucket list with numbered steps 1–4) mirrors repetition idea.

Contrast

• Strong contrast separates important information from background noise.

• Techniques: color, size, shape, symbolism (arrows → check mark icon).

• Example slides: Marketing goals presentation dates "2014"; arrows/checks colored differently for contrast.

White Space

• “Very powerful” communication device.

• Uses

• Highlights direct messages amid clutter.

• Can itself act as a form of contrast (Robin Williams concept).

• Slide example: Large white margins framing text “Jennifer Devoy.”

Infographics: Visual Message Design

What & Why

• Definition: Visual presentations of information that leverage design to improve comprehension.

• Key virtues

• Convey complex data quickly & clearly.

• Self‐contained messages (vs. decorative images).

• Frequent users: scientists, technical writers, mathematicians, educators, statisticians.

Core Purposes

• Communicate a message.

• Compactly present large data sets.

• Analyze data for cause-and-effect insight.

Infographic Building Blocks

• Visual Elements: color coding, graphics, reference icons.

• Content Elements: time frames, statistics, references.

• Knowledge Elements: facts.

Historical Milestones

• Ancient Egypt cave paintings/hieroglyphics (~5000 years ago).

• Nicole d’Orseme (1352–1382): grouped & graphed figures.

• Leonardo da Vinci: graphic/text hybrids in “Treatise on Painting.”

• Fortune magazine & Chicago (partial transcript) popularized in print.

• Gallup Organization first deep corporate adopter.

• Internet era drives mainstream use.

Five Functional Types

• Cause & Effect

• Explain causal chains (e.g., US recession → global economy).

• Chronological

• Show events through time (sales growth bar chart 1950–2010 timeline).

• Quantitative

• Deliver stats fast via charts/graphs/tables.

• Directional

• Navigate audiences (traffic symbols, scale maps, arrows, bullets, numbered distances).

• Product

• Instructions & data on notice boards, diet/cooking visuals.

Three Visual Delivery Modes

• Static – all information at once (newspaper graphics).

• Motion – sequential (cinema, PowerPoint animations).

• Interactive – viewer‐controlled (web dashboards).

Design Tips (“TIPS FOR DESIGNING INFOGRAPHICS”)

• Simplicity: clean, concise, orderly.

• Emphasize Cause → Effect.

• Draw Boundaries: narrow scope; respect short attention spans.

• Think in Color: guide emotion, hierarchy. “Contrast is king.”

• Layout ≠ only typography: mix fonts (max 2–3), charts, icons. Add logo where relevant.

• Eye Appeal: design for final display size & article context.

• Verifiability: cite sources; enable deeper data dives.

Creative Examples Mentioned

• Oil spill magnitudes (tonnage bars).

• Periodic Table of Typefaces.

• “Biggest Shift Since the Industrial Revolution” bicycle infographic.

• Powering Africa stats (1.5 billion population ref, left/right brain 79 ext{%} illustration).

• Pop‐culture vehicles cost chart: “1 pixel = 1 million.”

Online File Formats for Images & Text

Key Formats & Uses

• JPG / JPEG (Joint Photographic Experts Group)

• Common for photos; lossy compression.

• TIF / TIFF (Tagged Image File Format)

• Lossless; large; pro photography/print.

• PNG (Portable Network Graphics)

• Lossless; supports transparency; more colors than GIF.

• GIF (Graphics Interchange Format)

• Lossless; \le 256 colors; supports basic animation & transparency.

Compression Concepts

• Lossy: discards detail → smaller (e.g., JPG).

• Lossless: preserves detail → larger (e.g., PNG, TIF, GIF).

Color Depth Considerations

• Simple logos: 1–2$$ colors.

• Digital photos: millions of colors.

• GIF best for limited palette; JPEG for millions.

Choosing a Format (Major Criteria)

• Compression quality: lossy vs. lossless.

• Color model: RGB (photos) vs. Indexed (graphics); 16-bit (48-bit RGB) sometimes needed.

• Special needs: transparency, animation, CMYK for prepress, multi-page docs (TIFF).

Offline & Open-Source Image-Editing Software (Reviewer)

1. GIMP (GNU Image Manipulation Program)

A professional-grade image editor that is fully open-source and runs on Windows, macOS, and Linux.

Highlight Features:

Extensive editing tools: clone, healing, masking, color correction

Full layer and channel support

Cross-platform compatibility

Supports plugins and scripting

---

2. Paint.NET

A lightweight Windows image editor that balances simplicity and power, making it ideal for quick edits.

Highlight Features:

Simple and intuitive user interface

Red-eye removal, resize, crop, rotate

Supports layers and transparency

Expands through a strong plugin ecosystem

---

3. Autostitch

A tool that automatically stitches photos into panoramic images with no manual input.

Highlight Features:

Fully automatic panorama creation

Supports both horizontal and vertical stitching

Great for landscape or cityscape photography

---

4. Microsoft Research Group Shot

Allows users to create a single, perfect photo by combining parts from several similar shots.

Highlight Features:

Select and blend the best faces or poses

Create seamless composite group photos

Very useful for fixing blinking or bad timing in portraits

---

5. TKexe Kalender

An offline tool for making personalized paper calendars using your own images and event data.

Highlight Features:

Fast calendar design with custom photos

Add notes, birthdays, holidays

Output ready for printing at home

---

6. Opanda PhotoFilter

Simulates the look of traditional photography filters for artistic post-processing.

Highlight Features:

Over 100 virtual filters (Kodak, Cokin, Hoya)

Easily adjust color tone, warmth, and mood

Great for giving digital photos a film-style look

---

7. Foto Mosaik

Creates stunning photo mosaics by arranging thousands of tiny images to form one large picture.

Highlight Features:

Uses your own image library

Automatically builds mosaic-style artworks

Ideal for creative posters or gifts

---

8. Win Morph

A morphing and warping tool for still images and videos, usable as a standalone app or plugin.

Highlight Features:

Create smooth morphs and warps

Supports multiple input/output formats

Can be integrated into video editing workflows

---

9. Free Digital Camera Enhancer

Optimizes images taken from digital cameras with quick fixes.

Highlight Features:

Noise reduction for low-light shots

Adjusts mid-tones and saturation

Includes skin smoothing for portraits

---

10. JPEG Lossless Rotator

Rotates JPEG images without reducing quality, using a block-based transform.

Highlight Features:

Lossless rotation (no re-compression artifacts)

Useful for camera photos that need orientation correction

Simple and very fast to use

---

Combining Text, Graphics & Images (Design Micro-Tips)

• Transparent shapes overlay text (example word “FREEDOM”).

• Mix & Match fonts/backgrounds for motivational quotes: “IF NOT NOW WHEN?”

• Align text with background imagery for cohesion (“Life is Sweet” cupcake pic alignment).

• Keep backgrounds clean/clear when you want the message to dominate (“THE FUTURE IS BRIGHT”).

---

Uploading, Sharing & Hosting Platforms (Reviewer)

These platforms allow users to upload, store, and share images or other media. Each one offers different features depending on whether you're looking for bulk uploads, quick sharing, editing, or long-term hosting.

---

Imgur

Owner / Founded: Created by Alan Schaaf in 2009

Best For: Fast image uploads, sharing memes or GIFs, and embedding on social media or forums

Free Storage / Limits:

Up to 20 MB for static images

Up to 200 MB for animated GIFs

Great for users who want a no-sign-up option for quick visual sharing.

---

Google Photos

Owner / Founded: Owned by Google, launched in 2015

Best For: Automatically backing up photos from mobile devices, bulk uploads, smart photo search, and editing

Free Storage / Limits:

Previously unlimited for “High Quality” photos up to 16 megapixels and videos up to 1080p

(Note: Google may now count storage toward your Google account quota)

---

Flickr

Owner / Founded: Started by Ludicorp in 2004, acquired by Yahoo in 2005

Best For: Photo editing, creating albums, connecting with other photographers, and using a social platform for photography

Free Storage / Limits:

Up to 1 TB of free storage for images

Ideal for hobbyists and professionals organizing photo portfolios.

---

500px

Owner / Founded: Developed by a Toronto startup in 2009

Best For: Building a professional photography portfolio, licensing images, and connecting with a creative photo community

Free Storage / Limits:

No specific free limit stated

Features vary based on membership tiers (free or paid accounts)

---

Photobucket

Owner / Founded: Launched in 2003, acquired by Fox in 2007, and later by Ontela in 2009

Best For: Storing images, basic editing, ordering prints and photo gifts

Free Storage / Limits:

2 GB free initially

Up to 10 GB total if the mobile app is used

Once a top image host, now more focused on storage and premium features.

---

ImageShack

Owner / Founded: Founded in 2003

Best For: Hosting image galleries, organizing photos in private or public albums

Free Storage / Limits:

No total upload cap

Individual images up to 25 MB

Great for users needing privacy controls and high-resolution uploads.

---

Dropbox

Owner / Founded: Created by Drew Houston and Arash Ferdowsi in 2007

Best For: Sharing folders, individual files, and syncing across devices—not limited to images

Free Storage / Limits:

2 GB free by default

Can be increased up to 16 GB through referrals and bonus actions

Versatile platform for both photos and documents.

---

Free Image Hosting

Owner / Founded: Simple, anonymous platform (not widely branded)

Best For: Fast, single-image uploads for direct linking (e.g., for forums or HTML embedding)

Free Storage / Limits:

Each image must be 3 MB or smaller

Good for users who want a fast, no-account solution.

---

TinyPic (Discontinued)

Owner / Founded: Operated by Photobucket

Best For: Quick and easy sharing for forums and social media, supported tagging for discovery

Free Storage / Limits:

Images auto-resized if larger than 1600×1600 pixels

Deleted after 90 days of inactivity

Once popular for forum avatars and posts, but now shut down.

---

PostImage

Owner / Founded: Independent hosting service (name same as platform)

Best For: Hosting images for forums, message boards, or blogs; also allows adult content (must be legal and non-violent)

Free Storage / Limits:

No officially stated image or bandwidth limits

Offers resizing presets for forum use

Simple and long-term image hosting, perfect for online communities.