1 jour260 computer graphic design & publishing will w.k. ma
TRANSCRIPT
1
JOUR260Computer Graphic Design & Publishing
Will W.K. Ma
2
Course Administration• How to login 209:
– Login: JO260xxx.wkm.stu– Password: XNXNXN
• Individual student homepage (URL):– http://stu.hksyu.edu/~jo260xxx/
• Course website– http://hknews.hksyu.edu/jour260
• User Login: 260jour • Password: (leave it blank))
• Instructor– http://stu.hksyu.edu/~wkma/
3
Course Outline
4
Course Aims• One semester introductory course
• To develop an understanding of the potential of computer applications to journalism students to produce professional publications.
• To explore issues that shape design:– design elements: typography, color and graphics;– how these elements combine – the essence of graphic design; – how the process of reproduction underpins every aspect of design.
• Applications:– Computer graphic design, desktop publishing and online publishing
• Adobe Web Premium Suite, including – Photoshop, Illustrator, InDesign, and Dreamweaver.
• Present in different forms in daily life, including – corporation logos, posters, and websites,
• To demonstrate understanding in the applications.
5
Course Objectives
• By the end of this course, you should be able to:
– Understand the broad issues in graphic design, editing and web publishing;
– Equip with basic computer skills to effectively prepare computer design work in both offline and online publications;
– Examine contemporary design work from different perspectives.
6
Teaching Approach
• 1st period:– lectures; – group discussions;
• 2nd period:– demonstrations, hands-on coaching and practice;
• Continuous Assessment:– weekly practical assignment;– individual project; – group project and presentation.
7
Assessment
• Continuous Assessment– Individual project 10%– Group project 20%– Written assignment 10%– Practical assignment 10%– Class participation 10%
• Examination– Mid-term exam 20%– Final exam 20%
• 100%
8
Class Participation
• Students are to form groups that work together throughout the semester and are expected to contribute to group discussion and class activities.
• Students will be assigned readings to discussion tasks.
• Students are strongly advised to complete assigned readings before each class.
• Attendance is an integral part of the course.
9
Hands-on Coaching & Practice
• There will be demonstrations in each class.
• Students will be required to complete a variety of tasks and to submit before the next practical session.
10
Individual Project
• Personal profile poster:– Personal photograph, describing
himself/herself.
• Short brief (less than 100 words) to describe how the design fits the theme.
• Submit: A4 size hardcopy
11
Assessment
• Excellent: – Clear focus; – well-defined grid; – clear hierarchy - good repetition of graphic
elements; enough contrast to create hierarchy
– relevant typeface; – sharp graphics; – good mix of colour;– Strict alignment, appropriate proximity,
12
Mid-term Examination
• 50 MC Questions
13
Group Projects• Grouping: – 5-6 students
• Objectives: – select a media organization or a magazine, or a
newspaper to design an advertising package, including a logo, a poster, and a webpage for the organization or an event
• Assessment: – 50%: Rich content, layout & navigation design
achieving objectives– 50%: Computer Skills: competence and
relevance• One-page written proposal:
– Objectives, rationale, design specifications and the computer skills involved.
• Presentation: 20-min PowerPoint presentation
14
Individual Written Assignment: Website Site Critique
• One offline (a magazine cover) >500 words;• One online (a page of a media website)
publication work - >500 words– Use the design analysis framework and concepts
learnt during the course to evaluate their chosen design works.
• One-page proposal:– name and web address of the chosen publication
work, – a copy of the offline publication work and – a screen capture of the online publication work
15
Assessment
• Excellent:– Explain in good details of all key terms in d
esign;– An analysis of all key terms in design in goo
d details, including screen capture, figures, in both table summary and in text description;
– Message/focus, layout, grids, hierarchy, 3 core design elements (typography, colour, graphics), 4 design principles (alignment, proximity, repetition, contrast), conclusion
16
Final Examination
• 50 MC Questions (50%)
• Practical (50%):– Photoshop (25%):
• 10 tasks
– Dreamweaver (25%): • Basic web site design• Insert multimedia elements• Hyperlinks
17
Principal Reading
– Dabner, D. (2004). Graphic Design School: The Principles & Practices of Graphic Design, Thames & Hudson: London, U.K.
– Bhaskaran, L. (2004). Size Matters, RotoVision: Mies, Switzerland.
18
Session Outline
• Theory: – Introduction to Computer Graphic Desi
gn: What it is, its definition, and its functions
• Practical: – An Introduction to Photoshop Selection
and Drawing Tools
19
What is Graphic Design?
• It is all around us, imposing meaning on the world, by;– explaining, – decorating, – identifying:
• – Sorts and differentiates– Informs– Provides sentiments
20
Function versus aesthetics
• The model of the artist
• The model of the artisan
21
Definitions
Graphic design is the business of making or choosing marks and arranging them on a surface to convey an idea. – Richard Hollis
22
Definitions
• ...graphic design, in the end, deals with the spectator, and because it is the goal of the designer to be persuasive or at least informative, it follows that the designer’s problems are twofold: to anticipate the spectator’s reactions and to meet his own aesthetic needs. – Paul Rand
23
What is a graphic designer? • First, "making sense"
• Second, "creating difference"
24
Three Core Graphic Design Elements
• Typography– the mechanical arrangement of text
• Color– create contrast and sentiment
• Graphics– photographs and illustrations
25
Browsing contemporary works• Corporation Logo
– -McDonald’s (http://www.mcdonalds.com/);– -Google (http://www.google.com)
• Posters– -Café Deco Website (
http://www.cafedecogroup.com/general_news.asp )
– -Brokerback Mountain Postcard
• Website Banner– -Sun Hung Kai Properties (http://
www.shkp.com.hk/en/scripts/main/main.php)
26
Browsing contemporary works• Corporation Logo
– -McDonald’s (http://www.mcdonalds.com/);
– -Google (http://www.google.com)
27
Café Deco Website
28
Café Deco Website
29
Café Deco Website
30
Brokerback Mountain Postcard
31
Assessment Criteria –Analysis Framework
• Overall– Message; Focus
• Layout– Grid; Hierarchy
• Core Design Elements– Typography; Color (Color Psychology,
Color Strategies); Graphics
• 4 Design Principles– Alignment; Proximity; Contrast; Repetition
32
Class Exercise
• A survey of listing companies logo.
• HKNews (http://hknews.hksyu.edu) - 資料館• Task
– Check listing companies logo from their websites;– Create (copy, crop, save) logo jpg / gif files, save w
ith StudID-Description (no chinese, no space, no cap. letter);
– Upload onto ftp site: ftp://hknews.hksyu.edu– Add link to the corresponding company page: http:/
/hknews.hksyu.edu/media/filename
33
Trouble-shooting – uploading files to HKNews• Link:
– ftp – to upload files– http – to browse web page– “Media” folder
• Flash animation /movie: SWF– Not to be able to right click to save– PrintScreen >> Photoshop >> New file >> P
aste (Ctrl + V)
• Filename– No space, no chinese, no capital
34
Photoshop• Tasks:
– To create a new image / save changes
– Correct color and tone• Image / adjustment
– Select areas in an image– Create an image using layers
• Move Tool• Marquee Tool• Lasso Tool• Magic Wand• Crop Tool• Slice Tool
35
In Class Exercise
• Create a web banner 800x100 and upload onto your page at HKNews
• Save file in jpg, with StudID_description
• Upload onto ftp://hknews.hksyu.edu
• Create link as http://hknews.hksyu.edu/media/filename
36
Session Outline
37
Objectives
• Theory: Layout, grids and hierarchies
• Practical: understanding layers and channels
38
Layout
• Seeing
• Perception
• Symmetrical: calmer, more peaceful
• Asymmetrical: more dynamic
39
Layout
• Layout: – the way in which we organize the disparate
material that makes up the content of a design
• Aim:– Present information in a logical, coherent
way– Make important elements stand out
• Use grid, hierarchy
40
Layout
• 3 basic stages in producing layouts:– The brief– Practical factors: format, colour, hierarchies– The grid
41
Grid
• The invisible framework that organizes graphic material on a surface.
• Purposes:– Help choose how to arrange the elements
on each page, by limiting the choices– Bring a unity to a design, help look
coherent even while containing pages that are different from one another
42
Grid
• Horizontal
• Ratio in size
43
Grid
• Left & Right
• Dynamic
• Symmetry?
• Asymmetry?
44
Grid
• No clear grid
45
Hierarchies– Level of importance– An order, the one who came first– Maybe measured by size, length
• A hierarchy list:– Headings and titles;– The author’s name– Introduction / prefaces– Content pages– Introductory ‘stand-first’ that explains the article– Sub-heads– Captions– Chart titles
46
Hierarchies
• A level of order• Different levels of importance• Consistent, visually coherent, clear way• By means of choices in different:
– Typefaces,– Sizes,– Colors,– Textures,– Weights
47
Hierarchies
• Objective: consider how the information will be consumed
• Sole manipulation
• Typography: the structuring and arranging of the written word
• Modernists: “Less is more”
48
Hierarchies
Level 1 Level 2
Level 3
Level 4
Level 5
Level 6
Level 7
49
Grid Level 1
1 1a-110pt, 黑體1b-37pt, Arial
1c-28pt,
2 2a-16pt
2b-10pt
3 3a-11pt
3b-6pt, Bold
3c-6pt
ROCKY洛奇美國開畫
振奮
打不死 口碑凌厲
蘋果日報
50
Hierarchies
• Level 1• Level 2• Level 3• Level 4• Level 5• Size;• Spatial
arrangement;• Color / Graphic
51
Hierarchies
• Level 1– Bold – spatial arrangement
• Level 2– Size– Typeface
• Level 3– Size, – bottom
52
Class Exercise• A survey of listing companies logo.• HKNews - 資料館• Task
– Check listing companies logo from their websites;
– Create (copy, crop, save) logo jpg / gif files, save with StudID-Description (no chinese, no space, no cap. letter);
– Upload onto ftp site: ftp://hknews.hksyu.edu– Add link to the corresponding company pag
e: http://hknews.hksyu.edu/media/filename
53
PhotoshopPhotoshop
• Image
• Colour Mode– Gray/ RGB/
CMYK
• Adjustment– Hue, Saturati
on, Brightness
– Shadow / Brightness
• Image size
• Canvas size
54
Photoshop• Tasks:
– Layer Style• Drop Shadow / • Inner Shadow• Outer Glow / • Inner Glow• Bevel and Emboss• Satin• Color / gradient / pattern
overlay• Stroke
– Layer Mask– Merge Layer / Merge
Visible / Flatten Image
55
Photoshop
Tasks:• Colour Mode & Cha
nnels: – Gray: Gray– RGB: RGB, Red, Gr
een, Blue– CMYK: CMYK, Cya
n, Magenta, Yellow, BlacK
– Alpha Channel– Copy Channel, Add
filtering effect to channel
56
Graphic Types
• Rasterize: the process of converting a vector image into a bitmap image.
• Vector image: – Individual objects, defined by mathematical
statements– Vector graphics are resolution independent
-(scalable). – Common software applications:
• AI (Adobe Illustrator), CDR (CorelDRAW), SWF (Shockwave Flash), and DXF (AutoCAD and other CAD software).
– much smaller file sizes
57
Graphics• Bitmap (or raster) image:
– pixels in a grid. – Bitmap images have a fixed resolution -
cannot be resized without losing image quality.
– Common bitmap-based formats:• JPEG, GIF, TIFF, PNG, PICT, and BMP.
– much large file sizes
58
Alpha channel• for transparency information. • 32-bit graphics systems, four channels –
– 3 8-bit channels for R, G, B + 1 8-bit alpha channel.
• Alpha channel, a mask• define the alpha channel per object • Different parts of the object would have
different levels of transparency• This allows you to create rectangular objects
that appear as if they are irregular in shape• This is especially important for animation,
where the background changes from one frame to the next.
• Rendering overlapping objects - alpha blending
59
Color Model• Photoshop: [Image]>>[Mode]>>[Gray] /
[RGB] / [CMYK] / [Lab color] / [Index color]
• CMYK (Color model in offset printing): – Cyan-Magenta-Yellow-Black– four-color printing.
• RGB (Color model for display devices):– Red-Green-Blue. – looks the same as what appears on the
monitor.
60
Practical• Website Administration & HTML Basics (Dreamweaver)
• Add– Site / Site administration– Add / New site
• Local setting– Create and assignment folder– Make sure everything inside, not to link out of this root folder
• Remote setting– *FTP (file transfer protocol)
• **Server: stu.hksyu.edu• **Folder: public• **Account: jo260xxx• **Password: xnxnxn (all small letter)
61
In Class Exercise (cont’d)
• Create a web banner 800x100 and upload onto your page at HKNews
• Save file in jpg, with StudID_description
• Upload onto ftp://hknews.hksyu.edu• Create link as
http://hknews.hksyu.edu/media/filename
62
In Class Exercise
• Create a signature logo and upload onto your page at HKNews
• Save file in jpg, with StudID_description.jpg
• Upload onto ftp://hknews.hksyu.edu• Create link as
http://hknews.hksyu.edu/media/filename
63
Home assignment - selection
• Choose a photo of yourself,
• Use lasso tool to outline yourself
• Select “Inverse”
• Save the gif file and upload to ILN >> Task >> Photo Outline
64
Week 3
• Theory: Typography
• Practical: Colour & Adjustments
65
Typography
• Typeface – Definition: The style of type
– e.g., comic sans, calligrapher• Font
– Definition: The size of a typeface – e.g., 12 point
66
Typography• Sans serif: – (1) No short start or finish stroke; – (2) Make bolder headlines
– e.g. Arial;• Serif:
– (1) Short start or finish stroke; – (2) Easier to read for larger chunks of text
– e.g., Times New Roman; Courier New• Proportional:
– Use characters that take up only as much space as they require,
– e.g., Arial; • Monospaced:
– (1) Use the same fixed width for all characters; – (2) On only special occasions for designers,
– e.g., Courier New
67
Letterform• Key terms• There are over 25 terms applicable to a letterform.• It’s not necessary to know all of them but certain ones
are essential in order to make visual judgements about type.
• The principal terms that determine how letterforms differ are:– x-height,– serif,– counter,– descender,– ascender,– stress– (Other interesting terms include: loop, spur, tail, link, etc.)
68
The Anatomy of type
H f x g b p
Crossb
ar
Ste
m Term
inal B
ody size
Link C
ounter Ear A
scender B
ow
l
Cap-
height
X-
height
Descend
er
69
Impact of x-height
x x dp dpX-height is the height of a lower-case x and determines the visual size of type.
70
Typography
• Letter spacing– Kerning:
• allowing for individual reductions or increments to the letter spacing
– Tracking:• To increase or reduce space between
words
• widows or orphans– single words from the end of a
paragraph left at the end of beginning of a column of text
71
Typography
• Word spacing– With justified setting– With ranged-left setting
• Leading– the amount of spacing between lines of ty
pe– ascenders (e.g., the vertical stroke of a ‘k’
or ‘d’) and – descenders (e.g., the vertical stroke of a ‘
p’ or ‘q’)
72
Type as image
• Typefaces can convey personality and each face has its own characteristics.
73
Typeface• [Garamond] Italic is elegant;
• [Franklin Gothic] is powerful;• Meta is fashionable;• Helvetica is bland but safe;• Black Letter Gothic type is capable of conjuring an
atmosphere of fear and mystery;• Old English Text
• Serif fonts: – are generally used to achieve an elegant or classical look;– Banking industry: choose classic serif font such as
[Garamond] to convey dependability; – Calligrapher;
• Sans serif fonts: – can impart an appearance of confidence.– A more contemporary look: a sans serif such as Bank
Gothic;
74
Practical
• Colour Use in Photoshop
• Hue / Saturation / Brightness
• RGB
75
In Class Exercise (cont’d)
• Create a web banner 800x100 and upload onto your page at HKNews
• Save file in jpg, with StudID_description
• Upload onto ftp://hknews.hksyu.edu
• Create link as http://hknews.hksyu.edu/media/filename
76
In Class Exercise
• Create a signature logo and upload onto your page at HKNews
• Save file in jpg, with StudID_description.jpg
• Upload onto ftp://hknews.hksyu.edu
• Create link as http://hknews.hksyu.edu/media/filename
77
Color• Never be an arbitrary decision
• Purposes:– Enhance designs– Enhance the layout– Create a visual impact
• Consider:– Pay close attention to colour relationships– Potential for creating different emotional an
d psychological responses– Never add more colours than needed
78
Dimensions to describe a colour
• Hue, Tone, Saturation
• Hue– A pure colour– Name of the colour– Distinguish one from another– E.g., red, blue, green
79
Dimensions to describe a colour
• Hue, Tone, Saturation• Tone (or value)
– Variations of pure colour– From light to dark, relative lightness or
darkness of a colour– E.g.,
• 10 percent – a very page version; • 90 percent- almost the full value; • 100 percent – ‘solid’
80
Dimensions to describe a colour
• Hue, Tone, Saturation
• Saturation (or chroma, intensity)– Variations of brightness– Full intensity to low intensity– From brightness to greyness– High intensity – bright colour– Low intensity – a dull colour
81
Colour
• Temperature– Colours appear Hotter as yellow dimini
shes and red increases– E.g., blue – very cold; green – slightly
warmer
82
Colour• Colour wheel• Primary colour
– Red, yellow, blue
• Second colour– Mix any two primary colours– E.g., orange, green, violet
• Tertiary colour– Mix primary with secondary colour nearest t
o it– E.g., red-orange; yellow-orange; yellow-gre
en; yellow-green; blue-violet; red-violet
83
Colour
• Subtractive primaries– Primaries used in printing– When combined, make black– E.g., Cyan (C), Magenta (M), Yellow (Y), Bl
acK (K)
• Additive primaries– On computers, TV – projection of light– When combined, in white light– E.g., red, green, blue
84
Colour
• Advancing– Come forward the viewer– red, orange,
• Receding– Recede when next to advance colours– blue, green
• Weight– Lighter – blue-greens– Stronger, heavier - red
85
Colour psychology
• Wilhelm Ostwald, Nobel Prize-winning chemist
• People responded to colours emotionally, from an objective biological viewpoint
• Colour works in language, signs, different cultures and religions and create emotional response
86
Colours in culture• Mourning, death
– Black in the west,– China and India?
• Mailbox– US - blue, UK / Sweden – red– HK?
• Red– Stop – automobiles
• Green– 19th C – arsenic, poison– Now?
87
Colour in emotions• Warm (?)
– Exciting feelings of stimulation, cheeriness, good health, aggression
– Increase body hear and raise blood pressure
• Cool / Cold (?)– Calmness, peace, safety, depression, relaxing
effect
• Dark– Night, fear, mystery
• Intensity– High intensity – dynamic, a feeling of movement
88
Colours in language
• He turned purple with rage
• I’m feeling blue.
• She turned green with envy.
89
Red
• Associated with fire
• Intense, vibrant, advancing, aggressive character
• Positive– Love, red roses, sexiness, festivity (Santa
Claus), luck
• Negative– Devil, debt, revolution (red flag),
bureaucracy (red tape), danger
90
Yellow
• Associated with the sun, light
• Negative– Illness, jaundice, cowardice
• Positive– Hue of happiness, sun, gold, hope
91
Green
• Associated with spring, youth, environment, help to feel calm (used in hospital), relaxing
• Negative– Envy, nausea (A feeling of sickness in the
stomach characterized by an urge to vomit; strong aversion, disgust), poison, decay
92
Blue
• Associated with the sky, water, brightness, spirituality
• Clear, cool, transparent qualities
• Detachment, peace, distance
• Negative– Depression, cold, introversion
93
Colour systems
• Comprehension, understanding, contrasting differences– Signage– Maps– Financial matters– Catalogues & Books– Web design
94
Technical considerations
• Complementary– Yellow & black– Blue and yellow– Bland page and a color logo
• Clash– Too many different colors,– Yellow and white– Black and red (students’ typical problem)
• Color-blind– Problems recognizing red and green
95
Technical considerations
• Web-safe palette– 216 colors (out of 256 colors)– Javascript, html incompatible with different browser
s– Inconsistencies between colors on Mac or Window
s based systems– 216 overlap and are safe to use
• If no such color in palette– Dithered: two or more colors are mixed in a pattern;– Converting a color to the nearest shade within that
palette
96
Colour Mode - RGB• Red, green and blue values mix to form every
color in monitor• Depends on no. of bits• Each spot, one pixel each for red, green and
blue• Range from 0 (no color) to 255 (max. amount
of that color)• Black (no color – 0 for each); White (full color –
255 for each)• Hexadecimals: 0-9 & A-F (i.e., 10-15) to
represent RGB values• Black- 000000; white- FFFFFF; unmixed red-
FF0000; yellow mixing red and green-FFFF00
97
Technical considerations
• No. of colors, color depth– Increasing no. of information in form of bits,
increases the range of color exponentially– 21 – 1-bit, 2 colors, on/off, black/white– 28 – 8-bit, 256 colors (0-255)– 216 – 16-bit, High color, 64K color– 224 – 24-bit, full color, 16.7 million hues– 32-bit, 36-bit, 48-bit
98
Technical consideration
• Monitor display resolution
• VGA – 640x480
• SVGA – 800x600
• XGA – 1024x768
• 1280x1024
99
Color strategies• Use color to direct focus
– The selection of color mix to focus attention on the product, not the surroundings
– Make the product of service the focus– E.g., a palette of neutral colors, white walls,
muted colors, clean, simple design– Check palette for:
• New York Times (http://www.nyt.com )• Barnes and Noble (
http://www.barnesandnoble.com )• Apple Inc. (http://www.apple.com )
100
Color strategies• Use color to organize
– To present the same information with the same color code
– To give each level a sense of place– To provide visitors with the subtle cues– How?
• Use color to separate the space• To code each section with same color• Color section titles• N.B. How to simply the color use? (Typical
students’ problem)
101
Color strategies• Use color to simplify
– Reducing the number of colors to reduce visual noise in order to direct visitors the focus to the message
– How?• Change full color photographs to two-tone
photographs, or duotones, eliminate some of the noise
– E.g., color palette: white, black, and red – the best colors, striking, readable, in perfect contrast (Designer Roger Black)
– E.g., red, black, pale green, yellow – http://www.newsweek.com
102
Color strategies• Create a one-of-a-kind color palette
– Discard Ready to use color palette– Design your own unique palette, based on the
context and relevance to the message– Reference: Pantone Digital Color Guide (
http://www.pantone.com/allaboutcolor/allaboutcolor.asp?ID=34 ) – colors in print, ink color, RGB value, HTML code
– “PrintScreen” – capture screen color and check in Photoshop (eyedropper)
103
Graphic types• GIF
– Lossless compression– Redundant colors are calculated by a mathematical
formula– Restricted to 256 colors– Complex images such as photographs
• GIF format is larger than JPEG format
– Large area of simple colors such as logo / buttons• GIF format is smaller, sharper, clearer
– Save for GIF animation– Save for transparent background– Wrong: because of lossless, therefore better for
photographs (typical students’ mistake)
104
Graphic types• PNG
– Short for Portable Network Graphics (pronounced ping)
– a new bit-mapped graphics format similar to GIF. – PNG was approved as a standard by the World Wide
Web consortium (http://www.w3c.org) to replace GIF because GIF uses a patented data compression algorithm called LZW.
– PNG is completely patent- and license-free. – Browser support PNG– Preserving Photoshop-like layers– JPEG-style compression rates and colors (24-bit color)
105
Graphic types
• Other formats– Flash (SWF) – graphics, animation, movie,
vector format, required flash player– Scalable Vector Graphics (SVG), open form
at– Proprietary formats: CorelDraw (cdr); Photo
shop (psd)
106
Graphics• Web design for graphics:
– Speed– Image size– Download time
• Avoid too many images, too large file size• Compression
– Reduce File size– Reduce quality
• Slicing (ImageReady (Photoshop); Fireworks)– Slice complex graphics, compress different sections
at different rates
107
Graphic types
• JPEG / JPG– Lossy compression– Discard information, flattening areas of simil
ar color into one– As aggressively as possible– Can display 24-bit full color– Useful for full color images, photographs
108
Graphic types• JPEG2000
– a standard for image compression method and file format.
– successor of traditional JPEG format – written by the ISO group Joint Photographic Experts G
roup. – uses compression techniques based on wavelet techn
ology. – architecture lends itself to a wide range of uses from p
ortable digital cameras to advanced pre-press, medical imaging and other key sectors.
– Compared to JPEG, JPEG2000 offers higher compression without compromising quality, progressive image reconstruction, lossy and lossless compression, and the JP2 file format (.jp2) is XML based metadata.
109
Graphic Types
• Rasterize: the process of converting a vector image into a bitmap image.
• Vector image: – Vector graphics are made up of many individual object
s. – Each of these objects can be defined by mathematical
statements and has individual properties assigned to it such as color, fill, and outline.
– Vector graphics are resolution independent because they can be output to the highest quality at any scale (scalable).
– Common software applications: • AI (Adobe Illustrator), CDR (CorelDRAW), SWF (Shockw
ave Flash), and DXF (AutoCAD and other CAD software).
– Vector graphics tend to have much smaller file sizes than raster-based bitmaps.
110
Graphics• Bitmap (or raster) image:
– Bitmap-based images are comprised of pixels in a grid.
– Each pixel or "bit" in the image contains information about the color to be displayed.
– Bitmap images have a fixed resolution and cannot be resized without losing image quality.
– Common bitmap-based formats:• JPEG, GIF, TIFF, PNG, PICT, and BMP.
– Most bitmap images can be converted to other bitmap-based formats very easily.
– Bitmap images tend to have much large file sizes than vector graphics and they are often compressed to reduce their size.
111
Alpha channel
• In graphics, a portion of each pixel's data that is reserved for transparency information.
• 32-bit graphics systems contain four channels -- three 8-bit channels for red, green, and blue (RGB) and one 8-bit alpha channel.
• The alpha channel is really a mask -- it specifies how the pixel's colors should be merged with another pixel when the two are overlaid, one on top of the other.
• Typically, you wouldn't define the alpha channel on a pixel-by-pixel basis, but rather per object.
112
Alpha channel
• Different parts of the object would have different levels of transparency depending on how much you wanted the background to show through.
• This allows you to create rectangular objects that appear as if they are irregular in shape -- you define the rectangular edges as transparent so that the background shows through.
• This is especially important for animation, where the background changes from one frame to the next.
• Rendering overlapping objects that include an alpha value is called alpha blending.
113
Color Model• Photoshop: [Image]>>[Mode]>>[Gray] / [RGB] /
[CMYK] / [Lab color] / [Index color]• CMYK (Color model in offset printing):
– Short for Cyan-Magenta-Yellow-Black, and pronounced as separate letters.
– CMYK is a color model in which all colors are described as a mixture of these four process colors.
– CMYK is the standard color model used in offset printing for full-color documents.
– Because such printing uses inks of these four basic colors, it is often called four-color printing.
• RGB (Color model for display devices):– stands for Red-Green-Blue. – One of the most difficult aspects of desktop
publishing in color is color matching -- properly converting the RGB colors into CMYK colors so that what gets printed looks the same as what appears on the monitor.
114
Week 6
• Basic Design Principles
115
Four Basic Design Principles
• Alignment
• Proximity
• Repetition
• Contrast
116
Alignment• “Alignment means that items on the page
are lined up with each other.”– Lack of alignment is the single most prevalent
problem on web pages– Also a big problem on printed pages– Align items on the
• Left side• Right side• Centered: balanced, symmetrical, calm, formal
– Align text away from the edge– If indent text (“block quote”); indent also the
right edge
117
Proximity • “The relationships that items develop when they
are close together, in close proximity.”– Close – have a relationship– Far away – don’t have a relationship– Consider:
• Headline / subhead and text• Caption and picture
– Create appropriate spatial arrangement;– Prevent inappropriate relationships– Prevent widow:
• The last line of a paragraph that appears alone at the top of the next page
– Prevent orphan:• The first line of a paragraph that appears alone at the bottom
of a page
118
Repetition• Repeat certain elements• Purpose:
– Tie all the disparate parts together– Unify the entire design piece
• Aim:– Look like the same web site, same company, same
concept
• Advantage:– A repetitive (consistent) navigation system– Help visitor– Don’t have to learn
• How?– Colors, style, illustrations, format, layout, typography
119
Repetition
120
Repetition
• When?
• How?
121
Repetition
• Meaning
122
Repetition
• Web
• Why?
• Too much information
• Too small the screen
• Cannot flip the page physically
123
Contrast• Create a hierarchy of information• Create a focal point
– Create a dominant force, the other elements follow a hierarchy from that point down
• Enable readers to pick what they need• How?
– Different types, different styles: Bolder, different size: bigger, different texture, different colors, different graphic signposts, different spatial arrangement,
– To be effective: must be strong, make them very different
• Only if necessary– Not for continuous text, e.g., a novel– Be bland, uninterrupted, start at the beginning and
continue to the end– Note: a link is also a form of contrast (color,
underline, interruptive status)
124
Contrast
• Focal point?
125
Contrast
• Strong?
126
Contrast
127
Week 7
• Design Project Planning:– Structure
• Bhaskaran (2004). “Size Matters”
– Logo Design Process
128
Structure
• Case: – LettError Book; – Open Road Tour; – Fabrica Files (Benetton); – Rock Style; – Fraccija; – Labour Party Manifesto; – Annual Reports; – Hours Diary / Minutes Diary
129
Structure
• Planning + Production
• Planning:– Time schedules
• Pre-production– Methods of cataloging information
• Production– Grids– Style sheets
130
Structure
• Large-project content– A table of contents– Listing the divisions– Hierarchies of information
131
Structure
• Time schedule of work:– Start with an estimation of time needed
for various stages– Constantly refer to and update it
throughout the project– Keep track of progress (monitoring)– Re-allocation of resources
132
Structure
• Style sheets– An excellent and much underused
means of ensuring continuity throughout a large project
– Text is styled and preset, or globally altered later on, in terms of
• Headings, subheadings, introductory and body text
– Save time, minimize error
133
Structure
• Grid– One of the most effective means of
organizing space and bringing a visual consistency to the overall design
– E.g., newspaper• Uses a tight grid• To speed up production process• To reassure its audience
134
Grid
• Explain– “what grid is; what functions grids
provide; when to use strict/tight grid; why designer see grids as a constraint”
135
Structure
• “Implementing a clear structure as early as possible provides the space, both physically and mentally, to not only manage the information but also come up with a creative design solution as a result.”
136
Logo Design Process – 1. Gather Information• What is the average age of your target market?• What level of education do they have?• What gender is the majority of your target market?• Is there a certain ethnic group you’re targeting?• Describe the benefits of your company/product.• What is the most important benefit to your customer?• What is your unique selling point?• What are the strengths & weaknesses of your
competitors?• What images/symbols do you want to be associated with?• What images/symbols do you NOT want to be associated
with?• Do you want a logo (graphic) or an all text logo?• When someone looks at your logo, what is the first thing
you want them to think?• How will the logo be used? (in print, on the web?)
137
Logo Design Process –2. Pick a font• Have a print out of the fonts• Looking through all the fonts• Write down names of the ones that is
appropriate• Start setting the company name: in all
caps; in lowercase and caps; as many variations as possible
• Assign selected fonts to the variations• Check and decide with the hardcopy
print outs
138
Logo Design Process
• Sketch thumbnails
• Pick top three thumbnails
• Get on the computer
• Refine, refine, refine– Graphic; font; style; size (2”-4”)
• Get colorful
139
140
Name Card Analysis
141
Practical
• Computer Editing
• InDesign
• CUP page 2– Grids– Hierarchies: Number of levels (Style sh
eets)
142
Week 12
• Navigation
• Symbolism
• Information design
143
Navigation
• “Plotting and following a logical course to get from one point to another”– A successful navigation system can mean the
difference between success and failure for a designer.
– A huge difference to the user’s experience– Creating the optimal user experience is key
• Must design to cater to many different types of people.– E.g., Google vs Yahoo!– E.g., new user vs experienced user – Linear vs non-linear– Strict hierarchical structure vs no structure
144
Navigation
• Successful navigation:– Overview– System of signs
• Overview– A Site map on the map;– A Venue map at museum entrance;– A table of contents in a book or magazine
• Purpose:– Enabling the designer to develop a logical structure
to the organization of large content.
145
Navigation
• How?– Consistent hierarchies
• Creating a style sheet• Creating a comprehensive graphics spec sheet
– Have a complete understanding of the user’s requirement:
• Who are the main users?• In what order will they require the information?• On what level will they require the information?
– Effective hierarchy of information
146
Navigation
• Procedures:– In the planning process, Mapping all routes
and possible destinations– Highlight key information and decision-
making points– Ascertain the different levels of information
required– Note differences between physical space
(exhibition, museum) and on-screen
147
Navigation
• Viewing ergonomics– Preparing preliminary mock-ups– Print to scale, test in position– Assess legibility, lighting, reading heights,
distances
148
Navigation
1. Corporation logo 2. Site Menu
3. Page menu
3. Page location
4. Page title
5. Side link
149
Symbolism
• Graphic icons and symbols– One of the most important form of visual
communication;– One of the most complex
• Have the ability to independently navigate foreign territories:– E.g., hospital, museum, airports, using
maps, guide books, TV guides,
150
Symbolism
• Whatever the individual format, representing systems of information visually requires:– “The designers to distill large amount of
information to the bare minimum in order to effectively communicate them to the user.”
• The results often appear very simple; the thinking behind is all the hard work.
151
Symbolism
• Historical background– Symbols have been used as a form of
communication for as long as history records;
• In response to ever-changing world:– Daily life continues to increase in pace;– Advances in technology communicate
faster and more efficiently than ever before new graphic language evolve
152
Symbolism
• Readability is increasingly being achieved through the use of graphic symbols:– E.g., General operational symbols imposed
by mobile phone manufacturers;– E.g., Graphic language developed
independently through the increased use of text messaging and email;
– E.g., readers can interpret signs and symbols on bills and bank statements almost without thinking;
153
Symbolism • Bridge the gap between different
cultures and countries;• Allow us to communicate simply and
effectively without worrying about the language barriers;
• E.g., – 1972, Pioneer 10 mission sent graphic
symbol messages to Jupiter to unknown cultures;
– e.g., Point It
154
Point IT – A Traveller’s Language kit
• Editorial Reviews– The Linguist, Summer, 1999,
England• "Compact, pocket-sized and
very light, it contains pictures of anything you might need."
– Evening Standard, London, February 17, 1999
• "Help is finally at hand for frustrated tourists in London who don't speak a word of English or Brits abroad who are too lazy to learn the language. Instead of struggling with awkward pronunciations, all you have to do, thanks to a revolutionary picture guide-book called Point It, is to point to a picture of what you want."
Product Details: Paperback: 64 pages Publisher: Graf Editions; 5th rev. edition (April 6, 1999)
155
Symbolism
• Symbol is Contextualized:– We often respond to symbol without
thinking twice;– Symbol’s meaning is not intrinsic to the
design: It has to be learnt– What meanings we attach to these symbols
form part of our identity, and reliant to a number of factors, including race, religion and age
156
Application of symbols
• Big content: – e.g., Harry Beck’s London Underground ma
p - a map of a large amount of information;– e.g., Michael Johnsons’ (johnson banks con
sultancy) the Rewind book (of symbols) and exhibition – visual glue for a large exhibition (http://www.adobe.com/studio/features/johnson/page2.html )
–
157
THINK LONDON
• “We were struggling a bit with Think London’s symbol until, slightly desperately, we turned London’s famous skyline literally upside down. Then we started to build a ‘new’ city out of all the other reasons to live and work there. ‘Hey,’ said one of the designers, ‘that’s clever, it looks like a reflection.’ ‘You’re absolutely right,’ I said. All we had to do then was keep the river running through it and we were home and dry.”
• “Think London’s job is to encourage world businesses to set up their European headquarters in London (not Paris or Berlin or anywhere else). The symbols represent all aspects of London life, such as the arts, restaurants, entertainment, transport, technology, creative industries, and environment.”
158
Symbolism
• Systems of symbols– A Coherent look– Treated consistently in terms of size,
placement, and rendering
159
Symbolism • Signage
– A key role in physical world– Guide us through unfamiliar surroundings
• E.g., road signs, navigational signage,
– Projects take the longest amount of time to complete due to:
• the detailed planning process; • the amount of money invested in them; • the need for total accuracy; • the results are likely to be around for many years; leaving no
room for error
– The split second for the user to receive information;• E.g., Directing a worried relative in a hospital;• E.g., A museum visitor in an exhibition;
160
Symbolism• Now
– Graphic literacy: • As a society we are becoming ever more graphically litera
te;• The need to understand and interpret information in graph
ical form is more relevant;– Globalization demand universal understanding acr
oss countries:• Cheaper transportation; worldwideweb; globalization of co
mmerce– E.g., Alexander Gelman created a universal symbo
ls for Seiko Epson to be used on control panel and remote controls of LCD projectors (http://www.designmachine.net/gelman.html )
– In 2001, the Museum of Modern Art listed Alexander Gelman as one of the “world’s most famous modern and contemporary artists in all media”
161
Symbolism
• Designer & Symbolism
– Traditionally – where content meets form (see newspaper and magazine);
– Now – be brought in at a much earlier stage in order to develop the most effective design possible
162
Information Design
• Forms for information design:– Information kiosks, data displays, listings,
charts, diagrams, schedules, timetables, forms, reports, manuals
– All involve large amounts of complex data
• Purpose:– To transform the data into easily digestible
units, thus optimizing the user experience
163
Information design
• Information designers are:– Have a mastery of all the skills and talents
of a designer– Combine with the rigor and problem-solving
ability of a scientist or a mathematician– Bring the curiosity, research skills, and
doggedness of a scholar to their work– (Terry Irwin, design consultant and
educator)
164
Information design
• Think innovatively and systematically at the same time
• Designer: presenting information in a form that is attractive and functional, by– Think beyond the accepted norm by
developing graphic systems,– Being Fresh and modern,– To Challenge convention– And to Achieve primary objective
• E.g., Economic Times (presenting charts)
165
Information design
• Be aware of simple, repetitive, daily life tasks:– Bills, train or bus timetables, street map– Without design of information, is information anxiet
y
• Choice of format:– Broadband TV – e.g., NOW, HKBN
• information interactively on-screen, use only the remote control
– Annual report• A-Z editions of online annual report
– Newspaper, printed vs online• The way information is accessed and consumed on the w
eb is a completely different experience
166
Information design
• Designing for the web:– Preparing and working to a comprehensive
brief– Accurately assessing and preparing a time
schedule for the production process– A web style sheet showing key information
• Ensure all technical aspects have been covered before design process begins
• e.g., max. file size, text, graphics, background, hyperlinks, browsers
167
Information design
• Information architecture– New field in web design
• From a strategic perspective, from an implementation point of view
• Focuses on structure– Defining the content and functionality of a site
• Developing organizational systems
– Working with visual designer to develop the interface
• Use wireframes, without showing the distracting aesthetics of the visual design
• Wireframes indicate all the interface elements (e.g., buttons, links, content); their relationship
• Solely focus on the structure and design of the user interface
168
Information design
• Communication of data is crucial:– Readability– Legibility
• Information design:– Start at the beginning of a project– Providing them with necessary time to fully
understand the information– Then, execute it