Layout and Graphics

1
Layout and Graphics
2
Layout and Graphics

• Graphic file formats
• Graphs and Tables
• Layout styles

3
Graphic

• A picture or non-text item within a document.
  Most Web pages will contain a number of Graphics.

4
Types of Graphics File Formats

• Bitmap formats
• Vector formats
• Scene formats
• Multimedia formats

5
Bitmap Formats

• Best suited to storage of real world images, i.e.
  photographs. Contain an exact pixel by pixel map
  of an image. Commonly used bitmap formats
  include
• BMP Bitmap
• PCX Paintbrush
• TIFF Tagged Image File Format
• TGA Picture

6
Advantages and Disadvantages of Bitmap formats

• Advantages
• Easily created from existing pixel data.
• Pixel values may be modified individually.
• Disadvantages
• Large files
• Data compression can shrink the size of pixel
  data
• Bitmap files do not scale very well

7
Example of re-sized Bitmap
8
Vector Formats

• Useful for line based elements
• Contain mathematical descriptions of an image
• Structurally simpler than bitmap files

9
Advantages and Disadvantages of Vector Formats

• Advantages
• Easily scalable without distortion
• Can be editing using text editing tools
• Easy to render
• Disadvantages
• Not easy to store complex images
• Appearance varies depending on application used
  to interpret

10
Scene Formats

• Store a condensed representation of an image or
  scene
• Describes the image in terms of instructions.
• Very similar to Vector Formats

11
Multimedia Formats

• Used to store data of different types in the same
  file.
• Allow the inclusion of graphics, audio and Video
  information.
• Well known examples include
• MPEG
• RIFF
• FLI

12
Graphs and Tables

• Visual methods can make the point much stronger
  than simply describing the data.
• Appropriate use of graphs and tables is one way
  to enhance the message you are delivering.

13
Graphs

• During 1996 the member of the team with the most
  consistent sales during all four quarters was
  Albert.

14
Graphs Types

• There are 5 basic types of graphs that are used
  frequently.
• Area
• Column
• Bar
• Line
• Pie

15
Key Graph Elements

• Colours - colours should also be consistent with
  colour scheme of the slides.
• Depth - Refers to whether the graph is 2-D or
  3-D.
• Axes - One for the data values and the other is
  for the time scale or how the data is separated.
• Data Labels Used to clearly indicate the data
  value in a graph.
• Title - The title of the graph should focus on
  the interpretation of the data.
• Legend - The legend shows the audience which data
  series is represented by which colour on the
  graph.

16
Tables

• A table is generally less effective than a graph
  because it only shows the data, whereas the graph
  shows an interpretation of the data, which is
  easier for the audience to understand.

17
Tables Continued . . .
When presenting a table, provide the
interpretation of the data for the audience. One
way to make certain cells stand out is to change
the background colour of the cell.
18
Layout Styles

• Depends on the type of document you are
  producing.
• Certain layouts suited to particular types.
• Be sure to consider your reader and what you want
  them to gain.

19
Newspaper Layout

• Initially draw attention to heading.
• Then draw attention to sub heading to persuade
  further reading.
• Give the reader a reason to continue reading.

20
Poster Layout

• Limited use of small typefaces.
• Limited words with large, bold typeface.
• Use images, photographs etc.

21
Poster Layouts continued . . .

• There are three main poster layout approaches
• Freehand Style objects are inserted directly
  onto the poster, e.g. Text boxes, shapes, lines
  etc.
• Slide Show Style where you create a PowerPoint
  presentation and add the slides directly onto the
  poster.
• Combination Style is where you combine the
  Freehand and the slide show style.

22
Poster Layout Tips

• Choose a theme
• Mat your pictures and text on bright colours
• Not everything has to be square think shapes
• Use fancy fonts for headings and labels
• Use images / graphics to enhance your overall
  visual appeal

23
Leaflet Layout

• Dont clutter with too many images
• Use chunks of text
• Make important information stand out

24
Leaflet Layout Continued . . .

• Use bold colours to attract attention
• Only use relevant images/clipart/graphics
• Try and use metaphors to convey what the poster
  is about.

25
Aspects of a leaflet

• Front Cover Should announce what the leaflet is
  about and encourage further reading.
• Inside Pages Should clear and concise so
  readers can see at a glance.
• Back Page Contact details, directions, prices
  etc.

26
Web Page Layout

• Make menu options clear
• Dont over complicate the page
• Aim for consistency

27
Web Page Layout Continued . . .

• First stage is to define your site
• What is the purpose of the site?
• Who will be visiting the site?
• How will the site serve the client?

28
Identifying the purpose of a site

• Site will look different depend on the primary
  purpose of the site.
• A site may have several purposes.
• Fundamental to all sites is the informative aspect

29
Identifying who will visit the site

• Users will effect the
• site appearance
• Technology used
• User analysis required

30
Business Card Layout

• Should include company logo
• Make contact details clear
• Dont Use too much colour

31
Deciding on the type of document

• What is the purpose of your document?
• Who is your audience?
• What information do you need to include?
• What image do you want to project?
• Do you have to conform to a particular style?
• How will it be reproduced and distributed?

32
Summary

• Graphic file formats
• Bitmap
• Vector
• Scene
• Multimedia
• Graphs and Tables
• Layout styles
• Newspaper
• Poster
• Leaflet
• Webpage
• Business Card