| layout |
|---|
page |
<hr /> <h2>Color</h2> <p><i>Property in graphic design used to highlight important points, to evoke emotional mood, as an abstraction of a physical thing.</i> </p> <ul> <li>Color</li> <ul> <li>Channels (RGB/CMYK/HSB)<br /></li> </ul> <ul> <li>Hue</li> <ul> <li>Black</li> <li>White</li> <li>Red</li> <li>Orange</li> <li>Yellow</li> <li>Cyan</li> <li>Green</li> <li>Blue</li> <li>Purple</li> <li>Pink<br /></li> </ul> <li>Shade</li> <ul> <li>Light</li> <li>Dark</li> <li>Bright</li> <li>Weak</li> <li>Neutral</li> <li>Fresh</li> <li>Soft</li> <li>Hard<br /><br /></li> </ul> </ul> </ul> <p><b>Aesthetics</b></p><p><b>1) Hue evokes mood:<br /></b><a href="http://www.uhh.hawaii.edu/academics/hohonu/writing.php?id=73" target="_self">http://www.uhh.hawaii.edu/academics/hohonu/writing.php?id=73</a><br />Black: <i>dark, night, death, mourning, gloomy, sorrow, dirt, wicked, evil, drama</i><br />White: <i>winter, peace, glory, dignity, purity, innocence, clean, pale, weak, harsh</i> <br />Red: <i>rage, blood, fire, danger, courage, bravery, excitement, passion, sex</i> <br />Orange: <i>warmth, autumn, energy, tension, cheer, life</i> <br />Yellow: <i>caution, heat, sun, light, brightness, radiance, joy, cowardness, jaundiced, intellect</i> <br />Cyan: <i>ice, depression, sadness</i> <br />Green: <i>growth, nature, hope, fresh, fertility, gentle, pastoral, envy</i> <br />Blue: <i>wisdom, truth, water, sky, heaven, cold, distance, masculinity, rest, melancholy</i> <br />Purple: <i>shadow, religion, fantasy, magic, royalty, dignity</i>< br />Pink:<i> sex, lust, love, joy, sweetness, happiness, affection, kindness</i> </p> <p> </p> <hr /> <h2>Photographic Image</h2> <p><i>A 2D reproduction of the human eye with an emotional connotation or an informational goal. </i></p> <ul> <li>Image</li> <ul> <li>Format (vertical/horizontal)</li> </ul> <ul> <li>Focus<br /></li> <li>Angle (up/down/level/wide)</li> <li>Lighting </li> <ul> <li>Color<br /></li> </ul> <ul> <li>Direction (front/side/flat)<br /></li> </ul> <li>Depth of field<br /></li> <li>Motion effects<br /><br /></li> </ul> </ul> <p><b>Aesthetics</b> <br /></p> <p><b>1) Focus : rule of thirds</b><i><br /></i><a href="http://en.wikipedia.org/wiki/Rule_of_thirds" target="_self">http://en.wikipedia.org/wiki/Ruleofthirds</a><br />Rule of thirds: an image can be divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines. The four points formed by the intersections of these lines can be used to align features in the photograph. Proponents of this technique claim that aligning a photograph with these points creates more <i>depth</i>, <i>tension</i>, <i>energy</i> and <i>interest</i> in the photo than simply centering the feature would.</p><p><b>2) Lighting color:</b> <br />Twilight produces <i>mystery</i> and <i>gloom</i>, early morning light <i>safety</i> and <i>memory</i>. A light subject will have more <i>impact</i> if placed against a dark background and vice versa.<br /></p><p><b>3) Lighting direction:</b> <br />Front light produces bright, well-exposed colors but lacks sense of depth. Side light produces shadows, modelled surfaces and saturated colors and is ideal for landscapes. Back light produces theatrical, <i>dramatic</i> effect. Flat light is ideal for <i>soft</i>, <i>natural</i> close-ups </p> <p><b>4) Rules of thumb:</b><b> <br /></b></p> <ol> <li>Avoid blur</li> <li>Put the sun behind you</li> <li>Move closer, remove any clutter, keep it simple</li> <li>Include a scale reference (person, car, ...)</li> <li>Add depth</li> <li>Look for details</li> <li>Level the horizon</li> <li>Follow lines (leading into the picture) </li> </ol> <p> </p> <hr /> <h2>Layered Image</h2> <p><i>A 2D image of superimposed (photographic) pixel layers that form a composition.</i><br /><a href="http://www.adobe.com/products/photoshop/family/" target="_self">http://en.wikipedia.org/wiki/Alphacompositing <br />http://www.adobe.com/products/photoshop/family/ </a></p> <ul> <li>Canvas</li> <ul> <li> Size</li> <li>Resolution</li> <li>Color profile</li> <li>Layer(s)</li> <ul> <li>Source (image/fill/gradient/texture)<br /></li> </ul> <ul> <li>Index</li> <li>Origin point</li> <li>Size</li> <li>Transformations</li> <ul> <li>Scale</li> <li>Rotation</li> <li>Flip</li> <li>Distortion<br /></li> </ul> <li>Blend </li> <ul> <li>Opacity</li> <li>Merge mode<br /></li> </ul> <li>Mask Layer</li> <li>Adjustments</li> <ul> <li>Brightness</li> <li>Contrast</li> <li>Hue</li> <li>Saturation<br /></li> </ul> <li>Filters</li> <ul> <li>Blur</li> <li>Sharpness <br /></li> </ul> </ul> </ul> </ul><p> </p><hr /> <p> </p><h2>Vector Graphics</h2> <p><i>A 2D or 3D scalable, mathematical representation of an image typically used for text, logo's, color planes and decorative elements in a composition.</i><br /><a href="http://www.w3.org/TR/SVG/" target="_self">http://www.w3.org/TR/SVG/<i> </i></a></p> <ul> <li>Path(s)</li> <ul> <li>Stroke width</li> <li>Stroke color</li> <li>Fill </li> <li>Contour(s)</li> <ul> <li> Segment(s)</li> <ul> <li>Command (line/curve/move/close)</li> <li>Position</li> <li>Control handles</li> </ul> </ul> <li>Transformations</li> <ul> <li>Scale</li> <li>Rotation</li> <li>Flip<br /></li> <li>Distortion<br /></li> </ul> <li>Filters</li> </ul> </ul><p> </p><hr /> <h2>Typeface</h2> <p><i>A coordinated set of characters (alphabetical, numeral, punctuation) with a stylistic unity.<br /><a href="http://www.w3.org/TR/REC-CSS2/fonts.html" target="_self">http://www.w3.org/TR/REC-CSS2/fonts.html</a></i><br /></p> <ul> <li>Font</li> <ul> <li>Family</li> <ul> <li>Serif</li> <li>Sans-serif</li> <li>Script</li> <li>Monospace</li> <li>Blackletter</li> <li>Display</li> <li>Symbol</li> </ul> <li>Style</li> <ul> <li>Regular</li> <li>Italic</li> </ul> <ul> <li>Bold</li> <li>Bold Italic</li> </ul> <li>Glyphs</li> <li>Metrics<br /></li> <li>Kerning<br /><br /></li> </ul> </ul> <p> </p> <p><b>Aesthetics</b></p><p><b>1) Type <br /></b><a href="http://hubel.sfasu.edu/courseinfo/SL99/typography.html" target="_self">http://hubel.sfasu.edu/courseinfo/SL99/typography.html</a> <br />Serif is used for printed, readable blocks of texts, the serifs forming visual anchor between letters. Sans-serif is used for display typography (signage, headings) that demand visual <i>clarity</i> and <i>impact</i>. Sans-serif has a higher readibilty than serif on web pages however. Script is used to simulate handwriting and evokes <i>elegance</i> and <i>personal touch</i>. Monospace is used for programming code or to emulate an old-style typewriter, or to simulate an <i>impersonal</i>, <i>bureacratic</i> feel. Blackletter is usually used for diplomas, certificates and formal invitations, evoking <i>weight</i>, <i>etiquette</i> and <i>formality</i>.</p> <p><b>2) Style</b> <br />Italic is used for titles and proper names or to create <i>subtle (subjective) emphasis</i> to small amounts of text. Bold is used for <i>contrast</i>, to highlight <i>important</i> <i>words</i>, <i>instructions, statements</i> and <i>facts</i>.</p> <p> </p> <hr /> <h2>Typography</h2> <p><i>Typography is the art and techniques of type design, modifying type glyphs, and arranging type. Type glyphs (characters) are created and modified using a variety of illustration techniques. The arrangement of type is the selection of typefaces, point size, line length, leading (line spacing) and letter spacing. </i></p> <ul> <li>Typography block</li> <ul> <li>Heading (<i>single line paragraph</i>)<br /></li> <li>Paragraph(s)</li> <ul> <li>Width<br /></li> </ul> <ul> <li>Font size</li> <li>Font family<br /></li> </ul> <ul> <li>Alignment (left/center/right/justify)</li> <li>Spacing</li> <ul> <li>Indentation<br /></li> </ul> <ul> <li>Line spacing</li> <li>Letter spacing</li> <li>Top<br /></li> <li>Bottom </li> </ul> <li>Rotation<br /></li> <li>Words</li> <ul> <li>Font style (regular/bold/italic)</li> <li>Fill color</li> </ul> <li>Background (color/vector/image)<br /></li> <li>Vector graphic<br /><br /></li> </ul> </ul> </ul> <p><b>Aesthetics </b></p> <p><b>1) Headings:</b> <br />Use a tpyeface that is bigger and bolder than the paragraph font. Reuse the same typeface for each type of heading. The heading text is a summarisation of the paragraph text that draws <i>attention</i> to it.</p><p><b>2) Paragraphs:</b><br />Paragraphs communicate information and should be <i>legible</i>. Don't change the font in mid sentence unless you have a very good reason. Don't use more than three fonts on any one page. Limit the width of a paragraph to a hundred characters.</p><p> </p> <hr /> <h2>Layout</h2> <ul> <li>Layout</li> <ul> <li>Color scheme (<i>inherited</i>)<br /></li> <li>Typography styles (<i>inherited</i>)</li> </ul> <ul> <li>Composition</li> <ul> <li>Golden ratio</li> <li>Grid (rows/columns)</li> <li>Dynamic (recursion/particles/agents)</li> <li>Superimposed<br /></li> <li>Symmetrical</li> <li>Radial<br /></li> </ul> <li>Contrast<br /></li> </ul> <ul> <li>Coherence</li> <li>Consistency</li> </ul> <ul> <li>Element(s)</li> </ul> <ul> <ul> <li>Image(s)</li> <li>Vector graphic(s)</li> <li>Typography block(s)</li> <li>Layout</li> </ul> <li>Whitespace</li> <li>Texture<br /><br /></li> </ul> </ul> <p><b>Aesthetics</b> </p><p><b>1) Contrast | Highlighted center of attention</b><br />The <i>focus</i> of the layout: where is the center of attention? More contrast highlights the focal point while dimming the other elements. Also: the distinction between <i>types</i> of elements (e.g. making headings bigger and paragraph text smaller, color images and black-white typography). Contrast influences size, color, type. </p><p><b>2) Coherence | Alignment and proximity of peer elements<br /></b><a href="http://chd.gmu.edu/immersion/knowledgebase/strategies/cognitivism/gestalt/gestalt.htm" target="_self">http://chd.gmu.edu/immersion/knowledgebase/strategies/cognitivism/gestalt/gestalt.htm</a> <br />Gestalt Law of Proximity: how close together or far apart elements are placed suggests a <i>relationship</i> (or lack of) between otherwise disparate parts. Unity is also achieved by using a third element to connect distant parts. Multiple images are usually kept connected both through alignment and proximity - grouping the images so that they form a single visual unit and aligning them in a similar fashion. Essentially, <i>everything relates to everything</i> in a layout.<br /></p> <p><b>3) Consistency | Repetition of similar forms</b> <br /><a href="http://ezinearticles.com/?Gestalt:-Law-of-Similarity&id=118395" target="_self">http://ezinearticles.com/?Gestalt:-Law-of-Similarity&id=118395</a><br />Gestalt Law of Similarity: the human mind is excellent at patterns recognition. We like to look at how the pattern flows together. We love designs with repeating shapes, forms, colors, and textures. All stop signs are white text on red background. Repeating design elements and consistent use of type and graphics styles within a layout evokes <i>reliability</i>. Variation (<i>anomaly</i>) inside the repetition counters <i>dullness</i> - the anomaly becomes a focal point. Repeated variation is <i>rhythm</i>.<br /></p><p><b>4) Whitespace</b><br />A composition needs visual breathing room to avoid <i>tension</i>. The best place for white space is around the edges of the layout and the edges of text or graphic elements so it doesn't get trapped in the middle of the layout but increased paragraph, line, and letterspacing can also improve a layout. <br />See also: golden ratio (<a href="http://en.wikipedia.org/wiki/Golden_ratio" target="_self">http://en.wikipedia.org/wiki/Goldenratio</a>)</p><p><b>5) Balance</b><br /> Symmetrical balance or the use of even elements such as two or four columns or a block of 4 pictures generally produces a <i>formal</i>, more <i>static</i> layout. Odd numbers tend to create a more <i>dynamic</i> layout.</p><p><b>6) Form follows function</b></p> <p> </p> <hr /> <h2>Page</h2> <ul> <li>Page</li> <ul> <li>Paper<br /></li> <li>Format</li> <li>Layout </li> </ul> </ul> <p> </p>