1. Graphic Communication
Desktop Publishing
Graphic Communication
Department of
Technological
Education

2. Desk Top Publishing Department of Technological Education
The DTP example shown to the right is taken from the 2002 Higher Graphic Communication Paper, Question 6 and will be used to describe the terminology required for the course.

3. Desk Top Publishing Page Layout Department of Technological Education
The layout of the page in this example is Portrait Orientation.
The height of the page is larger than the width of the page.
If the page is wider than its height the layout is known as Landscape Orientation.
Portrait
Landscape

4. Desk Top Publishing Page Layout Department of Technological Education
The page shown includes a number of different parts to its layout.
The word ‘DECO’ at the top of the page is called the HEADLINE (or Heading)
The word ‘ORIGINS’ under the Heading is called the SUB-HEADING.
The text is arranged into 2 COLUMNS.
The page also includes a GRAPHIC

5. Desk Top Publishing Page Layout Department of Technological Education
Arranged round the text and graphics there are also other important parts of the publication.
The area to the top of the publication above the header is called the TOP MARGIN
The area below the text or graphics at the bottom of the page is called the BOTTOM MARGIN.
The areas to the sides of the publication between the text or graphics and the edge of the page are called the SIDE MARGINS.
The area between columns is called the GUTTER

6. Desk Top Publishing Page Layout Department of Technological Education
Other techniques can be used to add style and interest to the publication.
Text which is white on a black or dark background is called a REVERSE. In this case it is used only for part of the Heading.
The line separating the Heading from the rest of the document is called a RULE. If this is placed between columns it is called a COLUMN RULE.
The text indicating the contents of the graphic is called a CAPTION.
The text at the bottom of the page indicating the page number is called the FOLIO

7. Desk Top Publishing Page Layout Department of Technological Education
Trinity High – Department of Technology
Department of Technological Education
Desk Top Publishing
Page Layout
Other techniques can be used to show standard features which apply to all pages rather than being specific to one page only.
Some documents will have a HEADER which usually gives information about the contents of the document or the company who own the document.
Some documents will include a FOOTER which usually gives information about location of where document is saved, date, etc.
NOTE: Footers DO NOT give the page number –
This would be called a FOLIO
Some documents will include a BACKGROUND or WATERMARK. An example of this is a company badge which appears on every page of the document or the company’s name
C://my documents/higher graph com/DTP notes/terminology PPP.ppp

8. Desk Top Publishing Page Layout Department of Technological Education
Other techniques can be used to add style and interest to the publication.
Some areas of the document may not have any content included. This area is called WHITE SPACE
Other areas of the document may have a picture which does not fit into the column structure and reaches to the edge of the page. This is called a BLEED.
Graphics used taken from ‘Design and Layout: Understanding and Using Graphics’ by David Dabner

9. Desk Top Publishing Page Layout Department of Technological Education
Page layout is important to try to draw attention to different parts of a document.
The layout of elements on a page, or on facing pages can be done in two ways.
If each of the pages has the same layout – either for text, graphics or both – and each page is a mirror image of each other - the layout is said to be SYMMETRICAL
If each of the pages has the different layout and is not a mirror image of each other, the layout is said to be ASYMMETRICAL
Graphics used taken from ‘Design and Layout: Understanding and Using Graphics’ by David Dabner

10. Desk Top Publishing Desk Top Publishing Desk Top Publishing
Department of Technological Education
Desk Top Publishing
Font and Lettering Styles
The looks of the publication can be affected by the types of font or lettering used.
Fonts can be grouped into 3 distinct styles
Desk Top Publishing
SERIF fonts
Desk Top Publishing
SANS SERIF fonts
Desk Top Publishing
DECORATIVE fonts

11. Desk Top Publishing Font and Lettering Styles
Department of Technological Education
Desk Top Publishing
Font and Lettering Styles
The various parts of a font are shown below.
The parts which are important to know for this course are:-
point height
serifs
ascender and descender

12. Desk Top Publishing Font and Lettering Styles
Department of Technological Education
Desk Top Publishing
Font and Lettering Styles
When a font is chosen for a publication the point size is normally chosen.
However, the part of the font which makes the size of the font look larger or smaller tends to be the x- height.
A font with a small x-height will look smaller than a font with a large x-height, even if the point size is the same, as shown below.

13. NAIRN NAIRN NAIRN NAIRN Desk Top Publishing Font and Lettering Styles
Department of Technological Education
Desk Top Publishing
Font and Lettering Styles
Whichever font is chosen it’s looks can still be changed and altered.
6 point
8 point
10 point
12 point
14 point
16 point
NAIRN
The size of fonts are given in POINTS and the point size can be altered
Fonts can also be changed in look and can be:
NAIRN
NORMAL, BOLD or ITALIC
NAIRN
They can be COLOURED or have COLOURED BACKGROUNDS
They can be UNDERLINED or be EMBOSSED
NAIRN
Or they can be SUPERSCRIPT or SUBSCRIPT

14. Desk Top Publishing Text Layout Department of Technological Education
The layout of text in a column can be altered in four main ways.
This is an example of text which has been justified to the left. This is an example of text which has been justified to the left. This is an example of text which has been justified to the left.
Normally text is JUSTIFIED to the LEFT
This is an example of text which has been justified to the right. This is an example of text which has been justified to the right. This is an example of text which has been justified to the right.
However it can also be justified in other ways
The following examples show text justified:-
This is an example of text which has been justified to the centre. This is an example of text which has been justified to the centre. This is an example of text which has been justified to the centre.
RIGHT
CENTRE
FULLY
This is an example of fully justified text. This is an example of fully justified text. This is an example of fully justified text. This is an example of fully justified text. This is an example of fully justified text.

15. T Desk Top Publishing Text Layout
Department of Technological Education
Desk Top Publishing
Text Layout
There are other more specialised effects that can be used to highlight particular parts of the document.
his is an example of a paragraph which starts with a drop cap letter. This is an example of a paragraph which starts with a drop cap letter. This T
is an example of a paragraph which starts with a drop cap letter.
A large ornate capital letter at the start of a paragraph is called a DROP CAPITAL
By formatting the paragraph the text can be made to move round other graphics or to overlap a graphic. This is called TEXT WRAP or TEXT RUNAROUND. There are various different types of text wrap. Two of them are given here as examples
Wrap tight round the edge of a picture.
Wrap to the edge of the picture frame

16. Desk Top Publishing Text Layout Department of Technological Education
Leading is the amount of space between each line of text, and this can be varied from the default to a more positive leading which gives more space between lines, or to a negative leading which gives less space between the lines
Text Layout
There are effects that can be used to change the way the text appears in the paragraph.
Leading is the amount of space between each line of text, and this can be varied from the default to a more positive leading which gives more space between lines, or to a negative leading which gives less space between the lines
The spacing between each line can be adjusted to tighten the text together or to space out the text. This is called LEADING
Leading is the amount of space between each line of text, and this can be varied from the default to a more positive leading which gives more space between lines, or to a negative leading which gives less space between the lines
The spacing of each letter, or individual letters, can be adjusted to make them closer or further apart. This is called KERNING.

17. Desk Top Publishing Design Considerations
Department of Technological Education
Desk Top Publishing
Design Considerations
When trying to design a publication for a client there are various thoughts and decisions to be made.
Some thoughts are listed below, but this is not an exhaustive list and many more could be added.
The Target Market should be considered.
Is the publication for fun / serious readers?
Are the readers young / old ?
Should the layout be modern / traditional ? Etc.
The Function of the publication should also be considered.
Is it a news based document such as a newsletter ?
Is it a trade journal or business publication ?
Is it a comic ?
The Production Limitations also have to be considered.
Type of paper available
Type of printing / photocopying available
Number of colours available at printing stage.
Binding or stapling of pages.

18. Desk Top Publishing Design Principles and Design Elements
Department of Technological Education
Desk Top Publishing
Design Principles and Design Elements
Finally, how each of the Design Principles and Design Elements fit together will determine how the publication looks and how successful it is.
DESIGN PRINCIPLES
Balance - This refers to Symmetrical or Asymmetrical layout of the page(s). Symmetrical is easier to achieve, but may not look as interesting as Asymmetrical layouts. It is also possible to achieve a rotational symmetry by arranging different page elements round a focal point
Contrast - makes the design interesting and eye-catching. The use of a bold font with a very thin font, or with light and dark areas on the page will give contrast in the publication. Contrast can be used to make the more important information stand out.
Proportion – Proportion describes the size of elements in a design and the manner in which the size relationships work within the publication. Important items will generally be larger than less important items so their proportion will be greater
White Space – White space describes areas of the publication where there is no graphic or text content. It allows items to be spaced out and means the publication does not become too cluttered.

19. Desk Top Publishing Design Principles (cont.)
Department of Technological Education
Desk Top Publishing
Design Principles (cont.)
Rhythm - Rhythm is the use of elements like lines, shapes and space to give the design vitality. It is the use of repetition to unify and add visual interest.
Alignment – Alignment usually describes the layout of text on the page. The paragraph can be left, right, centre or fully aligned.
Proximity / Unity – The grouping together of related items into close proximity creates organisation. Relates to using the elements within the design to create a sense of oneness and consistency in a design to make it interesting. This may be shown in text overlapping a graphic to show they are related

20. Graphic from SQA Advanced Higher Question Paper 2012
Department of Technological Education
Desk Top Publishing
Design Principles
Examples
Balance – Each of the 3 pages shown are Asymmetrical balance.
Contrast – The left hand page contrasts with the other two because of the darker colours used. There is also contrast on the other two pages with approximately half of each of the pages blue and the other half white.
Proportion – The title text which covers all three pages is larger than any of the other text and shows the importance of this element. The circles on the pages contain graphics showing scenes from the attraction, but the larger one shows that the attraction is aimed at excited children.
Graphic from SQA Advanced Higher Question Paper 2012
Rhythm – The use of the same shade of blue backgrounds shows unity across the two right hand pages. The use of graphics in a circular shape also shows rhythm as well as using a darker shade of blue as a ‘drop shadow’ round the three centre graphics.
Alignment– Most of the body text on all three pages is left justified, but bottom text on the middle of the three pages has been right justified.
Proximity / Unity – The title text overlapping the left hand page graphic shows that the three pages are all related. The circular graphics overlapping the different areas of coloured background also show proximity/unity
White Space – There is white space bordering the three page wide title allowing this to be easily read.

21. Desk Top Publishing - to be edited
Department of Technological Education
Desk Top Publishing - to be edited
DESIGN ELEMENTS
Colour – This describes all of the colours used in the publication, from graphics, paper colour, text colour, etc. Are there dominant colours, harmony colours, vibrant colours, etc. Colour may be chosen depending on the reason for the publication, such as publication type or potential client.
Shape – Shape describes the shape of the page, but also the shapes generated by text, graphics and other elements of the page suck as background lines, fills, etc
Line – Line describes borders round text and graphics, page rules and column rules, etc. and also graphics elements, such as a series of coloured dots, which, when put together, form what could be described as a line.
Mass/Weight – The describes the overall page or elements of the page. The page could be dark giving the impression of being heavy, or the size of the graphic dominating a page could be seen as a heavy element on the page.

22. Desk Top Publishing Design Elements (cont.)
Department of Technological Education
Desk Top Publishing
Design Elements (cont.)
Size – Size describes the relative size of the elements such as text or graphics on the page. Some publications will have elements that dominate the page because of their size compared to the size of the other elements.
Texture – Texture relates to the physical texture of the material used for the publication, such as glossy paper, embossed paper, etc.
Value – Value relates to the darkness or lightness of the publication. Dark values catch the eye most and can be used to lead the eye round the page to the lighter areas. This may give a sense of movement in the publication

23. Graphic from SQA Advanced Higher Question Paper 2012
Department of Technological Education
Desk Top Publishing
Design Elements
Examples
Colour – All three pages use different tones and shades of blue. The drop shadow behind the circular graphics use a deep blue colour
Shape – Circles have been used for the floating graphics. A curved text title gives a less structured layout to the publication.
Line – A circular white line has been used round the circular graphics to separate the graphic from the background.
Graphic from SQA Advanced Higher Question Paper 2012
Mass / Weight– The darker blues of the left hand page makes this look heavier than the lighter colours used on the other two pages. The blue drop shadows used with the graphics also adds visual weight to the graphic and gives the impression of weight .
Size – The left hand page graphic is the largest element on all three pages and gives this a feeling of importance. The graphic showing the happy children is the largest of the other graphics and gives the impression of the attraction being fun to go to.
Texture– It is not possible from this version of the publication to identify texture, but the ‘real’ version could have been printed on shiny or embossed paper.
Value – The darker area of the left hand page has the largest value and the curving title is light and in contrast and allows the reader to follow from the darker area across the publication to the lighter areas.

24. Desk Top Publishing
Raster images use many coloured pixels or individual building blocks to form a complete image. JPEGs, GIFs and PNGs are common raster image types. Almost all of the photos found on the web and in print catalogues are raster images.
Because raster images are constructed using a fixed number of coloured pixels, they can’t be dramatically resized without compromising their resolution. When stretched to fit a space they weren’t designed to fill, their pixels become visibly grainy and the image distorts. This is why altered photos may appear pixilated or low resolution. Therefore, it is important that you save raster files at precisely the dimensions needed to eliminate possible complications.

25. Desk Top Publishing
Vector images, alternatively, allow for more flexibility. Constructed using mathematical formulas rather than individual coloured blocks, vector file types such as EPS, AI and PDF* are excellent for creating graphics that frequently require resizing. Your company logo and brand graphics should be created as a vector and saved as a master file so you can use it with smaller items such as your business card and letterhead, but also on larger surfaces, such as your corporate jet. When necessary, always create a JPG or PNG for use on the web from this master vector file. Just be sure to save the new raster file in the exact dimensions needed.

26. Desk Top Publishing
JPG JPG (or JPEG) is a raster image that is often used for photographs on the web. JPGs can be optimized, when saving them out of photoshop, to find the perfect balance of small file size and high quality. On the web, you want your images files to be as small as they can be so your site loads quickly, but large enough to still appear crisp and not pixilated. A JPG can’t have a transparent background so they are always in the shape of a rectangle or square with a solid background.
Best use = rectangle or square photos and photographs on your website.
PNG PNG is another raster image type. For the general marketer, the main difference to understand between a PNG and JPG is that a PNG can have a transparent background and is generally larger and higher quality. Therefore a PNG is ideal for saving logo files for websites because they can be placed over a colored background.
Best use = logos, icons and other images where a transparent background is preferred.

27. Desk Top Publishing
TIF A TIF (or TIFF) is a large raster file. It has no loss in quality and therefore is primarily used for images used in printing. On the web, because of load time, you generally want to use smaller images such as JPG or PNG.
Best use = images and photographs for high quality print.
BMP
A BMP file format, also known as bitmap image file or device independent
bitmap (DIB) file format or simply a bitmap, is a raster graphics image file
format used to store bitmap digital images, independently of the display
device especially on Microsoft Windows[1] and OS/2[2] operating systems.
Best use = The BMP file format is capable of storing two-dimensional digital images both monochrome and color, in various color depths.

28. VECTOR IMAGES
DXF
AutoCAD DXF (Drawing Interchange Format, or Drawing Exchange Format) is a CAD data file format developed by Autodesk for enabling data interoperability between AutoCAD and other programs.
SVG
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since SVG images and their behaviors are defined in XML text files