Art
Understanding Colour Wheel And Colour Theory-Part 1 of 2
Colour is perception. Our eyes see amazing things and data sent from our eyes to our brains tells us it’s a certain colour blue, green or any other colour. Things reflect light in unusual amalgamation of wavelengths. Our brains pick up on those wavelength amalgamation and translate them into the experience what we call colour.
Before establishing to judge colour preference, the following basic guide can gain a better understanding of colour. Taking a deeper look at individual colours and how they’re perceived. Exploring the basics of colour theory, the colour wheel, colour harmony and the context in which colours are used. Whether designing something for yourself or a client, your choice of hue for logos, campaigns, websites or advertisements will massively determine how the brand is perceived by the public. Colour plays a major role in any brand’s visual identity. It can set the mood, attract attention and even spark emotions in some cases, it can cause physical reactions, so it’s important to get right.
Colour Wheel
A color wheel is an abstract illustrative organization of color hues around a circle, which shows the relationships between primary colors, secondary colors, tertiary colors etc.
Primary Colour
Every color can be traced back to the three basic colors on the color wheel. Red, yellow, and blue are known as the primary colors. It is impossible to mix any other colors together to make these colors.
In traditional colour theory, primary colours are the three pigment colours – red, yellow and blue – that can be mixed together to form any combination of other colours. Which means all other colours are derived from these three hues.
Secondary Colour
By mixing the three primary colours together, you get the secondary colours. Red and yellow make orange, yellow and blue make green, and red and blue make purple. Green, orange and purple make up the secondary colours – formed by mixing the primary.
Tertiary Colour
Combining the primary and secondary colors, you get the tertiary colors. Blue and green become teal. Green and yellow become chartreuse. Yellow and orange become amber. Orange and red become vermillion. Red and purple mixed together become magenta. Purple and blue become violet. Tertiary colours are created by combining primary and secondary colours, for example yellow-orange, red-orange, red-purple, blue-purple, blue-green and yellow-green.
In the next coming article I would be explaining the basics of different colour combination, additive and subtractive color mixing model. Click here for part 2 to read more…
132,965 total views, 3 views today
Art
Typeface Classification And Subcategories
Maximilien Vox’s, Vox System, introduced in 1954, is one of the most lauded. Hybrid system of 15 styles, based on the historical nomenclature. It was first published in 1954 as the Vox system. Its still accepted as a standard today. There are thousands of diverse typefaces. Fonts are accessible to publishers, artists, designers, printers and writers at the moment. There are all type of display and text typefaces. The enormous variety of type available today. It makes impossible to decide between various fonts. A classification arrangement can be useful in categorizing, selecting and unite various typefaces.
Type classification
It is a method used to divide typefaces into many groups. The majority typefaces come under four wide categories. Such as sans serif, serif, scripts and decorative. There is another typeface called Pixel Typeface. Its based on the on-screen display format of pixels. But within these groups are many subcategories. Though there are four categories and it’s not enough for design professionals.
Typeface classifications & subcategories
- Sans Serif Type Styles
- Humanist
- Grotesque
- Square
- Transitional
- Geometric
- Serif Type Styles
- Old Style
- Clarendon
- Slab
- Glyphic
- Transitional
- Modern (Neoclassical & Didone)
- Egyptian
- Script Type Styles
- Casual
- Calligraphic
- Formal
- Blackletter & Lombardic
- Handwriting
- Decorative
- Grunge
- Psychedelic
- Graffiti
- Pixel Typeface
1. Sans Serif Typeface
Sans-serif typefaces originated in the 18th century. But didn’t see extensive use until the 19th century. A sans-serif typeface is a group of typeface not counting serifs. They are the small lines at the ends of characters. They are found in history as early on as the 5th century. Even though the classical restoration of the Italian Renaissance. Returning to old style serifed typefaces made them out of date until the 20th century. On lower-resolution displays, sans-serifs tend to display better. Development of sans-serif typefaces started in Germany. As a revolt alongside the ornate lettering of the admired Blackletter styles. It led to sans-serif typefaces based on the purity of geometric forms. Much like serifed typefaces, there are many different classifications for sans-serif typefaces. It included Gothic, Grotesque, Doric, Linear, Swiss and Geometric. In the print world, serif typefaces are almost used. For setting running body text, on the web, sans-serifs dominate. Popular sans serif fonts include Helvetica, Avant Garde, Arial, and Geneva. Serif fonts include Times Roman, Courier, New Century Schoolbook, and Palatino. Sans serif fonts are more difficult to read according to many research in this field.
1.1. Humanist Sans Serif
These are based on the proportions of Roman inscriptional letters. Frequently, contrast in stroke weight is readily apparent. Typographic experts claim that these are the most legible and most easily read of the sans serif typefaces. Humanist characteristics include proportions that were modeled on old style typefaces, open strokes and a slightly higher contrast in strokes in comparison to other sans-serif typefaces. Example: Gill Sans. Humanistic sans serif typefaces also closely match the design characteristics and proportions of serif types, often with a strong calligraphic influence.
1.2. Grotesque Sans Serif
This style was the first popular sans serif. These are the first commercially popular sans serif typefaces. Contrast in stroke weight is most apparent in these styles, there is a slight “squared” quality to many of the curves, and several designs have the “bowl and loop” lowercase g common to Roman types. In some cases the R has a curled leg, and the G usually has a spur. This category also includes more modern, sans serif designs patterned after the first grotesques. Stroke contrast is less pronounced than earlier designs, and much of the “squareness” in curved strokes has been rounded. Its distinguishing features are slight contrast in stroke weight, a squared look to some curves, a “spurred” capital G, and a double-bowl lowercase g. Later versions lost their squared curve, and have a single-bowl lowercase g. Normally the most obvious distinguishing characteristic of these faces is their single bowl g and more monotone weight stress.
1.3. Square Sans Serif
These designs are generally based on grotesque character traits and proportions, but have a definite and, in some instances, dramatic squaring of normally curved strokes. They usually have more latitude in character spacing than their sans serif cousins, and tend to be limited to display designs.
1.4. Transitional Sans Serif
Closely related to the characteristics of transitional serifed typefaces, these typefaces include a more upright axis and a uniform stroke. Example: Helvetica.
1.5. Geometric Sans Serif
Simple geometric shapes influence the construction of these typefaces. Strokes have the appearance of being strict monolines and character shapes are made up of geometric forms. Geometric sans tend to be less readable than grotesques.Geometric sans-serif typefaces, as their name implies, are based on geometric forms. In some cases letters, such as the lower case ‘o’, are perfect geometric forms. Example: Futura.
2. Serif Typeface
Serifed typefaces were popular much earlier than sans-serif typefaces and include semi-structural details on many of the letters. People often refer to them as feet, although that is in no way a proper anatomical term when referring to typography. Their are many different classifications for serifed typefaces, often named for their origins, including Grecian, Latin, Scotch, Scotch Modern, French Old Style, Spanish Old Style, Clarendon and Tuscan. Some of these classifications can also be placed into broader classifications of typography including the styles below.
2.1. Old Style Serif
This category includes the first Roman types, originally created between the late 15th and mid 18th centuries, as well as typefaces patterned after those designed in this earlier period. It is characterized by curved glyphs with the axis inclined to the left, minimal contrast between thick-and-thin strokes, angled head serifs, and bracketed serifs (curves between the serif and the stem). The axis of curved strokes is normally inclined to the left in these designs, so that weight stress is at approximately 8:00 and 2:00 o’clock. The contrast in character stroke weight is not dramatic, and hairlines tend to be on the heavy side. Serifs are almost always bracketed in old style designs and head serifs are often angled. Some versions, like the earlier Venetian old style designs, are distinguished by the diagonal cross stroke of the lowercase e. Some typefaces in this category contain an e with a diagonal cross stroke. The Old Style or Humanist serif typefaces developed in the 15th and 16th centuries and are characterized by a low contrast in stroke weight and angled serifs. Example: Garamond.
2.2. Clarendon Serif
This category includes the typefaces patterned after the Clarendon type styles first released in the mid 19th century. Clarendons were designed as bold faces to accompany text composition. Their stroke contrast is slight, and serifs tend to be short to medium length. Later, many of these designs were released at larger point sizes as display types. Character stroke weight that is more obvious, and serifs that tend to be longer than earlier designs, mark more current interpretations of this style.
2.3. Slab Serif
Slab serif typefaces became popular in the 19th century for advertising display. These typefaces have very heavy serifs with minimal or no bracketing. Generally, changes in stroke weight are imperceptible. To many readers, slab serif type styles look like sans serif designs with the simple addition of heavy (stroke weight) serifs.
2.4. Glyphic Serif
Typefaces in this category tend to emulate lapidary inscriptions rather than pen-drawn text. Contrast in stroke weight is usually at a minimum, and the axis of curved strokes tends to be vertical. The distinguishing feature of these typefaces is the triangular-shaped serif design, or a flaring of the character strokes where they terminate. In some type classification systems this category is sub-divided into two groups: “glyphic” and “latin.” “Latins” are faces with strictly triangular-shaped serifs.
2.5. Transitional Serif
Typefaces in this category represent the 18th century at a time of transition between old style and modern design. These typefaces symbolize the transition between old style and neoclassical designs, and incorporate some characteristics of each. Baskerville’s work with calendered paper and improved printing methods (both developed by him) allowed much finer character strokes to be reproduced and subtler character shapes to be maintained. English printer and typographer John Baskerville established this style in the mid 18th century. While the axis of curve strokes can be inclined in transitional designs, the strokes normally have a vertical stress. Weight contrast is more pronounced than in old style designs. Serifs are still bracketed and head serifs are oblique. They have the following characteristics: the axis of the curved strokes is barely inclined or more vertical than diagonal, there is more contrast between thick and thin strokes than in old style typefaces, and serifs are thinner, flat, and bracketed. The bridge for the gap between Old Style and Modern serifed typefaces, Transitional type has a more vertical axis and sharper serifs than humanist forms. Example: Baskerville.
2.6. Modern (Neoclassical & Didone Serif)
These typefaces formed within the late 18th century, or their direct descendants. It’s refined and more delicate style is characterized by high or dramatic contrast between the thick and thin strokes, curved strokes on a vertical axis, and horizontal serifs with little or no bracketing. Early on, however, it became apparent to printers that these were not updated versions of classic type styles, but altogether new designs. The work of Giambattista Bodoni epitomizes this style of type. The time of its first release, these typefaces were called “classical” designs. As a result their classification name was changed to “modern”. Since the mid 20th century, they have also been classified as neoclassical or didone. Contrast between thick and thin strokes is abrupt and dramatic. The axis of curved strokes is vertical, with little or no bracketing. In many cases, stroke terminals are “ball” shapes rather than an evocation of a broad pen effect. These tend to be highly mannered designs, with clearly constructed letters. Modern serifed typefaces developed in the late 18th and early 19th century and were a radical break from the traditional typography of the time with high contrast of strokes, straight serifs and a totally vertical axis. Example: Bodoni.
2.7. Egyptian Serif
Egyptian hieroglyphics were used for writing the Egyptian language from about 3000 BC until 400 AD. Egyptian hieroglyphs, a writing system with both logographic and alphabetic elements, were used by the ancient Egyptians for formal inscriptions. Symbols resembling hieroglyphs had been used by artisans in the region since 4000 BC. For everyday writing, the hieratic script was used instead. In Egyptian hieroglyphs, a hieroglyph in the context can be interpreted as a phonogram, logogram or as an ideogram. Creating and supporting OpenType fonts for the Universal Shaping Engine – Microsoft Typography, web page. Egyptian, or slab-serifed, typefaces have heavy serifs and were used for decorative purposes and headlines because the heavy serifs impeded legibility at small point sizes. Example: Rockwell.
3. Script Typeface
Script typefaces stand on the forms build with a flexible brush or pen and often have varied strokes reminiscent of handwriting. There are many diverse classifications together with Brush Script, English Roundhand and Rationalized Script. On the other hand, the broadest forms of classification are Formal Script and Casual Script.
3.1. Casual Script
More often than not, character strokes connect one letter to the next these typefaces are considered to advocate relaxed attitude, as if they were written hurriedly. Numerous times they come into view to have been drawn by means of a brush. Although diverse inconsistencies appear to have been a result of using a wet pen rather than a pen nib, Casual scripts invented in the 20th century as outcome of photo-typesetting.
3.2. Calligraphic Script
Calligraphy is a primordial writing method by means of flat edged pens to produce artistic lettering using thick and thin lines depending on the direction of the stroke. A lot of appear to have been written with a flat-tipped writing tool. Monks developed the narrow writing style called Gothic, allowing more words to fit on a single line of calligraphy and it reached its climax in the middle age. These scripts mimic calligraphic writing.
3.3. Formal Script
Majority of formal Scripts are based on the development and writings of 17th and 18th century handwriting masters such as George Bickham, George Shelley and George Snell from formal writing styles. Many characters have strokes that join them to other letters. The letters in their original form are generated by a quill or metal nib of a pen. Both are able to create fine and thick strokes.
3.4. Blackletter & Lombardic Script
These typefaces are patterned on manuscript lettering prior to the invention of movable type.
3.5. Handwriting Script
Handwriting typefaces are typographic interpretations of actual handwriting or hand printing. The stylistic range is extremely diverse and can be anything from a connected script or scrawl to a quirky, bouncy, irregular hand printing.
4. Decorative Typeface
Although serifed and sans-serif typefaces can repeatedly be used for text typesetting, there are a vast majority of fonts and typefaces whose legibility wanes when used in smaller point sizes. This is the widest kind and also the most varied typeface. Many such as Psychedelic font or Grunge font are out of trend. A number of decorative typefaces use unorthodox letter shapes and proportions to achieve distinguishing and impressive results while some even appear three-dimensional. These typefaces are time and again developed with an explicit use in mind and are designed for bigger point size use in headlines, posters and billboards. Decorative is less of a classification and can include a wide variety of typefaces underneath the umbrella of the term. Often used for lengthy blocks of text, decorative typefaces are well-liked for signage, headlines and similar situations were a strong typographic statement is desired. They recurrently echo a phase of culture such as tattoos or graffiti or evoke a particular situation of mind, instance, period or idea.
5. Pixel Typeface
Pixel fonts symbolize a remarkable period of type design. Pixel fonts developed from the invention of the computer and were foundation on the on-screen display format of pixels. They were invented out of requirement when low-res on-screen display were the only ones around, and have now become nostalgic retro style. They are based on an array of pixels, are often called Bitmap fonts and are often designed only for a specific point size. Several type foundries offer a range of bitmap fonts and some, like Fonts For Flash create only bitmap fonts. There are some and Stgotic is a pixelated black letter typeface designed for low resolution screen devices.
A good number are accessible in a digital format from a variety of type and can effortlessly be used and exploited, with present computer technology. It is vital to have proper knowledge of the basic styles of typefaces to help narrow down and examine to decide on the correct typeface.
120,794 total views, 4 views today
Art
Various Colour Models And Terminology-Part 2 of 2
This article is a continuation of part 1
Colour model is a mathematical representation unfolding how colours can symbolize by succession of numbers. These numbers are referenced to a definite colour space. There are many different colour spaces in use.
4. YUV colour model
The term YUV is usually used in the computer industry to explain file-formats that are encoded using YCbCr. The YUV model defines a colour space in terms of one luma (Y′) and two chrominance (UV) components. The Y′UV colour model is used in the PAL composite colour video (excluding PAL-N) standard. The YUV model defines a colour space in terms of one luma and two chrominance components and is similar to YPbPr and YCbCr. The YUV colour model is used in the PAL, NTSC, and SECAM composite colour video standards. YUV models human perception of colour more closely than the standard RGB model used in computer graphics hardware.
The YUV colour space stands for:
- Y, the luma component, or the brightness.
- Ranges from 0 to 100% in most applications.
- U and V are the chrominance components (blue-luminance and red-luminance differences components).
- Expressed as factors depending on the YUV version you want to use.
5. HSB colour model
The HSB colour model is also recognized as HSV (Hue, Saturation, Value) model. The HSV model was created in 1978 by Alvy Ray Smith. It is a nonlinear transformation of the RGB colour space. In other words, colour is not explained as a simple combination (addition/substraction) of primary colours but as a mathematical renovation.
HSB stands for Hue, Saturation and Brightness. According to this model, any colour is represented by 3 numbers.
- The first number is the hue, and its value ranges from 0 to 360 degrees. Each degree corresponds to a distinct colour.
- First there is the red colour (0 or 360 degrees) and then there are all other colours (for example yellow at 120 degrees, green at 180 degrees and blue at 240 degrees), up to the violet colour. All the rainbow’s colours are represented here.
- The second number is the saturation. It represents the amount of colour or, more exactly, its percentage. Its value ranges from 0 to 100, where 0 represents no colour, while 100 represents the full colour.
- Finally, the third number is the brightness. You can enhance the colour brightness adding the white colour, or you can reduce it adding the black colour. In this case 0 represents the white colour and 100 represent the black colour. The more this value tends to 0, the brighter the colour is. The more this value tends to 100 the darker the colour is.
Note: HSV and HSB are the same, but HSL is different.
The HSB (Hue, Saturation, Brightness) colour model defines a colour space in terms of three constituent components:
- Hue : the colour type (such as red, blue, or yellow).
- Ranges from 0 to 360° in most applications. (each value corresponds to one colour : 0 is red, 45 is a shade of orange and 55 is a shade of yellow).
- Saturation : the intensity of the colour.
- Ranges from 0 to 100% (0 means no colour, that is a shade of grey between black and white; 100 means intense colour).
- Also sometimes called the “purity” by analogy to the colourimetric quantities excitation purity.
- Brightness (or Value) : the brightness of the colour.
- Ranges from 0 to 100% (0 is always black; depending on the saturation, 100 may be white or a more or less saturated colour).
6. HSL colour model
HSL is parallel to HSB. The major dissimilarity is that HSL is symmetrical to lightness and darkness. This means that:
- In HSL, the Saturation element forever goes from completely saturated colour to the corresponding gray (in HSB, with B at highest, it goes on or after saturated colour to white).
- In HSL, the Lightness for all time spans the full range from black through the chosen hue to white (in HSB, the B element only goes partially that mode, from black to the chosen hue).
- In Photoshop and elsewhere you’ll see HSB (for Brightness which is in practice the same as HSV for Value) and HSI, which are both similar but not identical to HSL. More on those differences in this Wikipedia article.
The HSL colour space, also called HLS or HSI, stands for:
- Hue : the colour type (such as red, blue, or yellow).
- Ranges from 0 to 360° in most applications (each value corresponds to one colour : 0 is red, 45 is a shade of orange and 55 is a shade of yellow).
- Saturation : variation of the colour depending on the lightness.
- Ranges from 0 to 100% (from the center of the black & white axis).
- Lightness (also Luminance or Luminosity or Intensity).
- Ranges from 0 to 100% (from black to white).
Using HSL colour model
The most significant advantage of HSL is that it makes it easy to select a colour promptly or else, users would have to meticulously fine-tune and tweak RGB sliders until they discover the accurate colour. People habituated with image editing software may be more accustomed with.
Disadvantages of the HSL Colour model
Charles Poynton, a digital video expert, explained the problems quite well:
HSB and HLS were developed to identify numerical Hue, Saturation and Brightness (or Hue, Lightness and Saturation) in an era while users had to identify colours numerically. Now that user can prefer colours visually, or choose colours related to other media. The common formulations of HSB and HLS are flawed with respect to the properties of colour vision.
Even though the HSL system is handy to use, it isn’t particularly representative of how the human being eye actually views colour this means it doesn’t translate well into other systems that have more of a scientific basis.
157,398 total views, 4 views today
Art
Various Colour Models And Terminology-Part 1 of 2
A colour model is a system for creating a full range of colours from a small set of primary colours. It’s an abstract mathematical model describing the way colours can be represented as a data structure consisting of multiple parts of numbers, typically as three or four values or colour components.
1. RGB colour model or the additive colour mixing model
RGB stands for Red Green and Blue. This model corresponds to how your computer distinguishes colours. The RGB colour model is an additive colour model in which red, green and blue light are added together in a variety of ways to reproduce a wide array of colours. The RGB colour model is based on the theory that all visible colours can be created using the primary additive colours of red, green, and blue. According to the RGB model, each shade of each of the 3 colours (Red, Green and Blue) is represented by a number ranging from 0 to 255. For example, the black colour is represented by the ‘0 0 0’ RGB value (R=0, G=0 and B=0) while the white colour is represented by the ‘255 255 255’ RGB value (R=255 G=255 and B=255). These colours are known as ‘primary additives’ because when they are combined in equal amounts they produce white. In fact you have to know that each pixel in your screen can be ‘switched on’ like a little ‘light-bulb’ by means of a ‘light-ray’ produced by an electronic gun inside your monitor. This ray can be a shade of Red, a shade of Green or a shade of Blue. For this reason the pixel shot by the ray can assume a shade of red, a shade of green or a shade of blue. So the RGB model can represent more than 16 millions of colours. RGB is an additive model, because Red Green and Blue are additive colours. In further we can say when red, green and blue are mixed, they create white. Red + Green + Blue = White.
2. CMYK colour model or the subtractive colour mixing model
The CMYK colour model is used in printing. Designers must understand why it is used and how it relates to RGB to make certain true colours. CMYK stands for Cyan Yellow Magenta and Key (black). In other words these are the 4 coloured inks used inside of colour printers. CMYK is a subtractive model, in fact in theory, cyan, yellow and magenta should combine among themselves to absorb all colours and produce black and is also used to describe the printing process itself. But because of the small impurities found in all inks, they actually combine to form a muddy brown. This is one of the reasons for the black ink. Another reason is this: coloured inks are more expensive than black ink. Besides, 3 inks means 3 ink layers during printing. The “K” in CMYK stands for key because in four-colour printing, cyan, magenta, and yellow printing plates are carefully keyed, or aligned, with the key of the black key plate.
3. Lab colour model
LAB stands for Luminance (or lightness) and A and B (which are chromatic components). This is a way to plot a colour based on its Lightness, amount of green or magenta (a), and amount of blue or yellow (b), a model that closely approximates human vision. According to this model A ranges from green to red, and B ranges from blue to yellow. This model was designed to be device independent. With Lab, you can plot every single colour that’s possible in RGB and CMYK, so it’s useful as an intermediate step in converting digital graphics for print. In other words by means of this model you can handle colours regardless of specific devices (such as monitors, printers, or computers). The Luminance ranges from 0 to 100, the A component ranges from -120 to +120 (from green to red) and the B component ranges from -120 to +120 (from blue to yellow).
The Lab colour space exceeds the gamuts of the RGB and CMYK colour models (for example, ProPhoto RGB includes about 90% of all perceivable colours). One of the most important attributes of the Lab model is device independent.
On the next article I would be discussing about YUV colour model, HSB colour model and HSL colour model. Click here to read part 2
157,527 total views, 4 views today
-
Editor's Picks6 years ago
The Ontology of Designing Self
-
Science6 years ago
Human Cognition Processes And Types
-
Design8 years ago
Don Norman’s Principles of Design With Examples
-
Design8 years ago
Jakob Nielsen’s (Usability Heuristics): 10 Heuristic Principles With Examples
-
Design7 years ago
Gamification Explained And How to Gamify Your Daily Life Part 2 of 2
-
Editor's Picks7 years ago
Lost in the Woods
-
Design7 years ago
Human Factors, Ergonomics and Design
-
Art7 years ago
History of Typography-Part 3 of 3