1 JOUR260 Computer Graphic Design & Publishing Will W.K. Ma.

transcript

JOUR260Computer Graphic Design & Publishing

Will W.K. Ma

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/

Course Outline

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.

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.

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.

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%

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.

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.

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

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,

Mid-term Examination

• 50 MC Questions

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

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

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

Final Examination

• 50 MC Questions (50%)

• Practical (50%):– Photoshop (25%):

• 10 tasks

– Dreamweaver (25%): • Basic web site design• Insert multimedia elements• Hyperlinks

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.

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

What is Graphic Design?

• It is all around us, imposing meaning on the world, by;– explaining, – decorating, – identifying:

• – Sorts and differentiates– Informs– Provides sentiments

Function versus aesthetics

• The model of the artist

• The model of the artisan

Definitions

Graphic design is the business of making or choosing marks and arranging them on a surface to convey an idea. – Richard Hollis

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

What is a graphic designer? • First, "making sense"

• Second, "creating difference"

Three Core Graphic Design Elements

• Typography– the mechanical arrangement of text

• Color– create contrast and sentiment

• Graphics– photographs and illustrations

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)

Browsing contemporary works• Corporation Logo

– -McDonald’s (http://www.mcdonalds.com/);

– -Google (http://www.google.com)

Café Deco Website

Brokerback Mountain Postcard

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

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

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

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

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

Session Outline

Objectives

• Theory: Layout, grids and hierarchies

• Practical: understanding layers and channels

Layout

• Seeing

• Perception

• Symmetrical: calmer, more peaceful

• Asymmetrical: more dynamic

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

Layout

• 3 basic stages in producing layouts:– The brief– Practical factors: format, colour, hierarchies– The 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

• Horizontal

• Ratio in size

• Left & Right

• Dynamic

• Symmetry?

• Asymmetry?

• No clear grid

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

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

Hierarchies

• Objective: consider how the information will be consumed

• Sole manipulation

• Typography: the structuring and arranging of the written word

• Modernists: “Less is more”

Hierarchies

Level 1 Level 2

Level 3

Level 4

Level 5

Level 6

Level 7

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洛奇美國開畫

振奮

打不死口碑凌厲

蘋果日報

Hierarchies

• Level 1• Level 2• Level 3• Level 4• Level 5• Size;• Spatial

arrangement;• Color / Graphic

Hierarchies

• Level 1– Bold – spatial arrangement

• Level 2– Size– Typeface

• Level 3– Size, – bottom

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

PhotoshopPhotoshop

• Image

• Colour Mode– Gray/ RGB/

• Adjustment– Hue, Saturati

on, Brightness

– Shadow / Brightness

• Image size

• Canvas size

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

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

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

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

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

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.

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)

In Class Exercise (cont’d)

• Upload onto ftp://hknews.hksyu.edu• Create link as

http://hknews.hksyu.edu/media/filename

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

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

Week 3

• Theory: Typography

• Practical: Colour & Adjustments

Typography

• Typeface – Definition: The style of type

– e.g., comic sans, calligrapher• Font

– Definition: The size of a typeface – e.g., 12 point

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

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.)

The Anatomy of type

H f x g b p

Crossb

m Term

inal B

ody size

Link C

ounter Ear A

scender B

height

Descend

Impact of x-height

x x dp dpX-height is the height of a lower-case x and determines the visual size of type.

Typography

• Letter spacing– Kerning:

• allowing for individual reductions or increments to the letter spacing

– Tracking:• To increase or reduce space between

• widows or orphans– single words from the end of a

paragraph left at the end of beginning of a column of text

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’)

Type as image

• Typefaces can convey personality and each face has its own characteristics.

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;

Practical

• Colour Use in Photoshop

• Hue / Saturation / Brightness

• RGB

In Class Exercise (cont’d)

In Class Exercise

• Create a signature logo and upload onto your page at HKNews

• Save file in jpg, with StudID_description.jpg

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

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

• 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’

• 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

Colour

• Temperature– Colours appear Hotter as yellow dimini

shes and red increases– E.g., blue – very cold; green – slightly

warmer

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

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

Colour

• Advancing– Come forward the viewer– red, orange,

• Receding– Recede when next to advance colours– blue, green

• Weight– Lighter – blue-greens– Stronger, heavier - red

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

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?

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

Colours in language

• He turned purple with rage

• I’m feeling blue.

• She turned green with envy.

• 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

Yellow

• Associated with the sun, light

• Negative– Illness, jaundice, cowardice

• Positive– Hue of happiness, sun, gold, hope

• 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

• Associated with the sky, water, brightness, spirituality

• Clear, cool, transparent qualities

• Detachment, peace, distance

• Negative– Depression, cold, introversion

Colour systems

• Comprehension, understanding, contrasting differences– Signage– Maps– Financial matters– Catalogues & Books– Web design

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

• 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

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

• 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

Technical consideration

• Monitor display resolution

• VGA – 640x480

• SVGA – 800x600

• XGA – 1024x768

• 1280x1024

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 )

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)

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

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)

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)

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)

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)

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

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

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.

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.

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.

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.

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.

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.

Week 6

• Basic Design Principles

Four Basic Design Principles

• Alignment

• Proximity

• Repetition

• Contrast

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

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

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

Repetition

• When?

• How?

Repetition

• Meaning

Repetition

• Web

• Why?

• Too much information

• Too small the screen

• Cannot flip the page physically

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)

Contrast

• Focal point?

Contrast

• Strong?

Contrast

Week 7

• Design Project Planning:– Structure

• Bhaskaran (2004). “Size Matters”

– Logo Design Process

Structure

• Case: – LettError Book; – Open Road Tour; – Fabrica Files (Benetton); – Rock Style; – Fraccija; – Labour Party Manifesto; – Annual Reports; – Hours Diary / Minutes Diary

Structure

• Planning + Production

• Planning:– Time schedules

• Pre-production– Methods of cataloging information

• Production– Grids– Style sheets

Structure

• Large-project content– A table of contents– Listing the divisions– Hierarchies of information

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

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

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

• Explain– “what grid is; what functions grids

provide; when to use strict/tight grid; why designer see grids as a constraint”

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.”

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?)

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

Logo Design Process

• Sketch thumbnails

• Pick top three thumbnails

• Get on the computer

• Refine, refine, refine– Graphic; font; style; size (2”-4”)

• Get colorful

Name Card Analysis

Practical

• Computer Editing

• InDesign

• CUP page 2– Grids– Hierarchies: Number of levels (Style sh

Week 12

• Navigation

• Symbolism

• Information design

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

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.

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

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

Navigation

• Viewing ergonomics– Preparing preliminary mock-ups– Print to scale, test in position– Assess legibility, lighting, reading heights,

distances

Navigation

1. Corporation logo 2. Site Menu

3. Page menu

3. Page location

4. Page title

5. Side link

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,

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.

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

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;

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

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)

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

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 )

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.”

Symbolism

• Systems of symbols– A Coherent look– Treated consistently in terms of size,

placement, and rendering

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;

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”

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

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

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)

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)

Information design

• Be aware of simple, repetitive, daily life tasks:– Bills, train or bus timetables, street map– Without design of information, is information anxiet

• 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

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

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

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

1 JOUR260 Computer Graphic Design & Publishing Will W.K. Ma.

Documents