Scribd Logo
Upload

Welcome to Scribd!

  • 5 views

    Principles of Graphics and Layout

    Uploaded by

    Jeanelle Magturo
    The document discusses principles of graphics and layout. It identifies different types of visual elements that can be used including photographs, drawings, line art, graphs, typography, numbers, symbols, maps, and engineering drawings. It also discusses principles of layout such as symmetry, asymmetry, contrast, repetition, alignment, proximity, and the use of white space. Guidelines are provided for making text legible and images proportionate with high resolution and captions. Examples analyze graphics based on applying layout principles. The key principles for effective infographics highlighted are making them unique, simple, creative, bold, using less text while clearly communicating the main idea.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Principles of Graphics and Layout

    Uploaded by

    Jeanelle Magturo
    5 views81 pages
    The document discusses principles of graphics and layout. It identifies different types of visual elements that can be used including photographs, drawings, line art, graphs, typography, numbers, symbols, maps, and engineering drawings. It also discusses principles of layout such as symmetry, asymmetry, contrast, repetition, alignment, proximity, and the use of white space. Guidelines are provided for making text legible and images proportionate with high resolution and captions. Examples analyze graphics based on applying layout principles. The key principles for effective infographics highlighted are making them unique, simple, creative, bold, using less text while clearly communicating the main idea.

    Original Description:

    Original Title

    Principles-of-Graphics-and-Layout

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses principles of graphics and layout. It identifies different types of visual elements that can be used including photographs, drawings, line art, graphs, typography, numbers, symbols, maps, and engineering drawings. It also discusses principles of layout such as symmetry, asymmetry, contrast, repetition, alignment, proximity, and the use of white space. Guidelines are provided for making text legible and images proportionate with high resolution and captions. Examples analyze graphics based on applying layout principles. The key principles for effective infographics highlighted are making them unique, simple, creative, bold, using less text while clearly communicating the main idea.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    5 views81 pages

    Principles of Graphics and Layout

    Uploaded by

    Jeanelle Magturo
    The document discusses principles of graphics and layout. It identifies different types of visual elements that can be used including photographs, drawings, line art, graphs, typography, numbers, symbols, maps, and engineering drawings. It also discusses principles of layout such as symmetry, asymmetry, contrast, repetition, alignment, proximity, and the use of white space. Guidelines are provided for making text legible and images proportionate with high resolution and captions. Examples analyze graphics based on applying layout principles. The key principles for effective infographics highlighted are making them unique, simple, creative, bold, using less text while clearly communicating the main idea.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 81

    1

    *Information & Images taken from various sites on the internet and is under OER Commons.
    Specific Objectives:
    1. Identify the different principles of graphics and
    layout.
    2. Interpret the basic principles of graphics and
    layout.
    3. Value the principles of graphics and layout.

    2
    *Information & Images taken from various sites on the internet and is under OER Commons.
    3
    *Information & Images taken from various sites on the internet and is under OER Commons.
    4
    *Information & Images taken from various sites on the internet and is under OER Commons.
     Photographs  Drawings

     Line Art  Graphs


    5
    *Information & Images taken from various sites on the internet and is under OER Commons.
     Typography  Numbers

    6
    *Information & Images taken from various sites on the internet and is under OER Commons.
     Symbols  Geometric Designs

    7
    *Information & Images taken from various sites on the internet and is under OER Commons.
     Maps  Computer Graphics

    8
    *Information & Images taken from various sites on the internet and is under OER Commons.
     Engineering drawings, or other images

    9
    *Information & Images taken from various sites on the internet and is under OER Commons.
    10
    *Information & Images taken from various sites on the internet and is under OER Commons.
    11
    *Information & Images taken from various sites on the internet and is under OER Commons.

    12
    dm | DesignMantic

    13
    *Information & Images taken from various sites on the internet and is under OER Commons.

    14
    1. Symmetrical:
    There should be equal
    weights or elements on both sides
    of the page.
    Photo by

    Alan McFadyen
    2. Asymmetrical:
    It may be asymmetrical when
    there is an artistic and different
    intensity on one side of the page.
    dm | DesignMantic
    *Information & Images taken from various sites on the internet and is under OER Commons.
    26
    dm | DesignMantic
    *Information & Images taken from various sites on the internet and is under OER Commons.
    27
    dm | DesignMantic
    *Information & Images taken from various sites on the internet and is under OER Commons.
    28
    dm | DesignMantic
    *Information & Images taken from various sites on the internet and is under OER Commons.
    29
    dm | DesignMantic
    *Information & Images taken from various sites on the internet and is under OER Commons.
    30
    dm | DesignMantic
    *Information & Images taken from various sites on the internet and is under OER Commons.
    31
    dm | DesignMantic
    *Information & Images taken from various sites on the internet and is under OER Commons.
    32
    dm | DesignMantic
    *Information & Images taken from various sites on the internet and is under OER Commons.
    focus.

    33
    dm | DesignMantic
    *Information & Images taken from various sites on the internet and is under OER Commons.
    ddresses

    34
    dm | DesignMantic
    *Information & Images taken from various sites on the internet and is under OER Commons.
    Reaps

    35
    dm | DesignMantic
    *Information & Images taken from various sites on the internet and is under OER Commons.
    • Legible
    • Appropriate font face
    • Left justified, Right justified, or
    centered
    • The flow of text should be easy to read.

    *Information & Images taken from various sites on the internet and is under OER Commons.
    Legible?
    Appropriate?
    Alignment
    Flow of Text
    Image – the image should
    be:
    • Proportionate
    • Sharp in color
    • With high resolution
    • With appropriate
    captions
    Which one is….
    2

    3
    1
    PROPORTIONATE?
    Directions: Analyze and evaluate the
    given picture below and identify which
    principle of graphics and layout best
    applies in each design.

    46
    dm | DesignMantic
    *Information & Images taken from various sites on the internet and is under OER Commons.

    47
    *Information & Images taken from various sites on the internet and is under OER Commons.
    48
    49
    *Information & Images taken from various sites on the internet and is under OER Commons.
    *Information & Images taken from various sites on the internet and is under OER Commons.

    50
    ▰ Infographics make complex data become
    more visually appealing to an average user.

    ▰ Piktochart is an online app that allows you


    to create your own infographics.

    *Information & Images taken from various sites on the internet and is under OER Commons.
    Important Principles of
    Be Unique - Create an original and
    unique design to get the viewer’s
    attention. The use of the colors, fonts,
    images, and text, the design should
    be unique.

    *Information & Images taken from various sites on the internet and is under OER Commons.
    Make it Simple - Colors, layout,
    design should be used consistently.

    *Information & Images taken from various sites on the internet and is under OER Commons.
    Be Creative and Bold - be creative
    using your imagination to create
    something unique.

    *Information & Images taken from various sites on the internet and is under OER Commons.
    Less is More - minimizes the information
    that the viewers need to do to understand
    the main idea of your infographics
    The Importance of Getting It Across - Make
    sure you’re creating an infographic that the

    *Information & Images taken from various sites on the internet and is under OER Commons.
    content must be related to the title and
    understand the message so that the viewers
    can easily navigate the information without
    being confused.

    *Information & Images taken from various sites on the internet and is under OER Commons.
    58
    *Information & Images taken from various sites on the internet and is under OER Commons.
    59
    *Information & Images taken from various sites on the internet and is under OER Commons.
    INFOGRAPHIC VIDEO

    60
    *Information & Images taken from various sites on the internet and is under OER Commons.
    https://goo.gl/srcHyh 61
    *Information & Images taken from various sites on the internet and is under OER Commons.
    TECNIQUES & HOSTING

    62
    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
    finding out the best file format.

    63
    *Information & Images taken from various sites on the internet and is under OER Commons.
    64
    ONLINE IMAGE FILE FORMAT

    1. Joint Photographic Experts Group (JPEG) – does


    not support transparency and animation (.jpeg
    or jpg)

    65
    *Information & Images taken from various sites on the internet and is under OER Commons.
    66
    ONLINE IMAGE FILE FORMAT

    2. Graphics Interchange Format (GIF) – supports


    transparency and animation (.gif)

    67
    *Information & Images taken from various sites on the internet and is under OER Commons.
    68
    *Information & Images taken from various sites on the internet and is under OER Commons.
    ONLINE IMAGE FILE FORMAT

    3. Portable Networks Graphics (PNG) – supports

    69
    *Information & Images taken from various sites on the internet and is under OER Commons.
    transparency

    70
    *Information & Images taken from various sites on the internet and is under OER Commons.
    71
    *Information & Images taken from various sites on the internet and is under OER Commons.
    72
    *Information & Images taken from various sites on the internet and is under OER Commons.
    IMAGE MANIPULATION TECHNIQUES

    73
    *Information & Images taken from various sites on the internet and is under OER Commons.
    IMAGE MANIPULATION TECHNIQUES

    2. Color Balance. The


    ambience and the
    tone of light of the picture
    (ex. Warm or cool light)

    74
    *Information & Images taken from various sites on the internet and is under OER Commons.
    IMAGE MANIPULATION TECHNIQUES

    3. Brightness and
    Contrast. One of the most
    basic techniques in image
    editing, making the
    image darker or lighter.

    75
    *Information & Images taken from various sites on the internet and is under OER Commons.
    IMAGE MANIPULATION TECHNIQUES

    4. Compression and
    Resizing. The higher the
    quality and the larger the
    photo is, the bigger the
    file size of the picture is.

    76
    *Information & Images taken from various sites on the internet and is under OER Commons.
    IMAGE MANIPULATION TECHNIQUES

    77
    *Information & Images taken from various sites on the internet and is under OER Commons.
    IMAGE MANIPULATION TECHNIQUES

    6. Cloning. Copying or duplicating a part of an image.

    78
    *Information & Images taken from various sites on the internet and is under OER Commons.
    IMAGE MANIPULATION TECHNIQUES

    79
    *Information & Images taken from various sites on the internet and is under OER Commons.
    IMAGE MANIPULATION TECHNIQUES

    80
    *Information & Images taken from various sites on the internet and is under OER Commons.
    IMAGE MANIPULATION TECHNIQUES

    81
    *Information & Images taken from various sites on the internet and is under OER Commons.

    You might also like