Introduction, color theory Who is a designer? What do they do? “Computer graphic design is everywhere in the modern world. You see it on street signs and in restaurants, television programs and magazines. You're seeing it right now as you read this. Computer graphic designers use technology to manipulate and combine words, images, color, typography and sound in order to elicit emotions and deliver messages to viewers.” (h​ttps://learn.org/articles/What_is_Computer_Graphic_Design.html)​ A special version for this is a w​ eb designer.​ (S)he decides how images, logos, websites, animations and many other things we see on the internet should look like and designs them. Color theory “Color is life: for a world without color appears to us as dead. Colors are primordial ideas. The children of light.” – Johannes Itten, 1970 Color is an attribute of an object that we can perceive with our vision. The color of the objects depend on how they absorb or reflect light. Human vision uses these reflections to see colors. Color is the visible part of the light, or we can call it wavelength. The eye is limited in this case because it can’t perceive every wavelength, and there are people who can’t even see colors, or can’t distinguish between colors (color blinds). Animals see colors in different extent. In the past many people involved in structuring colors. One of the founders of today’s color theory is Johannes Itten, a swiss painter and art teacher. He created the basics of color theory, the 12-grade color wheel. He said that y​ellow, blue a​nd r​ed a​re the primary (basic) colors and we can mix every color using them. Secondary colors come out of the mixture of two primary colors: green, orange, violet. On the outer circle you can see the tertiary colors that we can get from the previous colors. You can find from the illustration above all the complementary color pairs too. Mixing these colors will give us back the colorless (achromatic) feeling. These are the Itten’s color contrasts. The most well-known contrasts: yellow-violet, red-green, blue-orange. This color wheel is mostly used in offline techniques (drawing, painting) but the computer colors are created in a similar way using some basic colors. We will explain this now. Color mixing techniques 1. Additive mixing - RGB 2. Subtractive mixing - CMYK Additive mixing - RGB The light waves of different colours, emitted by the source of light add up and create the desired colour this way. This procedure is used in monitors and televisions. Based on the abbreviation of the three often used primary colours, the method is also called RGB colour mixing. Examples for RGB colour mixing: red + green= yellow green + blue = cyan blue + red = magenta red + green + blue = white Subtractive mixing - CMYK In this case, the white light is led through three filters that sufficiently decrease the amount of red, green, and blue light in it. The procedure got its name from the fact that the filters retain certain colours, so they subtract them from the white light containing all colours and in the end we only see the remainder. This method is used to mix paints to a desired colour, and colour printers also use this technique. In the present method the three primary colours differ from the previously presented RGB colours, they are cyan, magenta, and yellow. Since the colour black cannot be perfectly mixed using these colours, it’s common to add it as a fourth primary colour. The other name for this colour mixing technique is CMYK. Examples for CMYK mixing: yellow + magenta = red magenta + cyan = blue cyan + yellow = green yellow + magenta + cyan = black (or gray) The basic properties of a color include hue, saturation, and brightness. Color depth The number of colors that can be displayed on one pixel is called color depth: ● pixel: the smallest part of the picture in digital image processing ● resolution: the whole image consists of more and more pixels, the greater the resolution is, the more pixels make up the picture Each pixel stores the information related to the colour of the pixel. The amount of this information depends on the graphics driver of the computer, it can be 1, 2, 4, 8, 16, or 32 bits. As the memory of the graphic card is finite, colour depth and resolution are closely related to each other. In our case this means that increasing the resolution goes together with decreasing the number of colours we can use: ● 1-bit (2​1 n​ umber of colors): the pixel can have only two states, to appear (white) or not (black). So in case of 1-bit, the display can be only black and white. ● 8-bit (2​8 n​ umber of colors): we have already 256 possibilities to store color (shades of the color of grey) ● Between 24-bit (16 million colors) and 32-bit (4 trillion colors) can’t make a difference. When we design an image that will be used on the internet, notice that increasing the color depth will increase the used storage for that image as well. This can cause increasing loading time for the image, or even for the whole webpage. But it is still important to make the image look great. Color models Colors are assembled in different color models. The most important property of these models is the color range that can be reproduced by them. It can happen that a color can be displayed in a color model but when it’s converted to another one, we get a completely different colour. RGB and CMYK are good examples for this color models. Anything we design on the monitor will be seen in RGB model, although when we print it, it will be into the CMYK model, so it might happen that the graphic designer creates something spectacular on the screen, then after printing it becomes totally different. Some more color models: ● RYB: red (R), yellow (Y) and blue (B) are the basic colors, subtractive color models, we can’t mix a perfect black color ● YUV: luminance (Y - brightness) and chrominance (UV) model, used in televisions, adapts to the human eye ● HBS: colors created with hue, brightness and saturation Effects and meaning of colors Many experiments prove that colors have a big effect on the mood. It matters what colors we use in graphics because we can get different reactions with them. Meaning of colors: ● Red: passion, energy, danger, warm ● Orange: renewable, modern, youth, availability ● Yellow: sunny, friendly, appetizing ● Green: natural, etic, growth, freshness ● Blue: professionalism, calmness, honesty, success ● Purple: wisdom, dignity, richness, luxury ● Black: sophistication, evil, death, courage ● White: purity, simpliness, naivety, purity ● Brown: masculine, rural, practical, outdoor ● Pink: fun, cute, flirtatious, feminist ● Grey: predictable, trusting It also matters how we mix these colors. If we use only one color, then it has a clear message but mixing it will also mix the effects of messages. Computer graphics Vector graphics Vector graphics software use simple shapes creating images (square, ellipse, polygons, etc.) and so-called Bézier-curves (curves and touching straight lines between multiple control points). Vector graphics have many advantages but limitations, too. One of the advantages is that you can create as large or small image as you want (scalable), it won’t have any effects on the quality. Because of this we use vector graphics technique for creating logos and icons. Its disadvantage is that you can’t easily dim a picture, you have to convert it first to a raster image. This way the image will lose its scalability but sometimes we need this modification. Raster graphics Raster (or pixel) graphics softwares use dots (pixels) to create images that are organized to matrices. The bitmap (or raster) graphics defines an image as colorful dots (so called pixels) placed on a square grid. The structure of these images also called bitmap. One of the most important attributions of a raster graphics image is its resolution. The quality of an image is based on multiple resolution-types. Our digital images are using raster graphics, too. Frequent image files: ● BMP (bitmap): r​aster graphics ​format, only works in RGB color system, from 1 to 24 bit all color information can be stored in it. ● TIFF: r​aster graphics ​format, allows us to use 1, 8, 24 and 32 bit color depth ● GIF: r​aster graphics ​format, color depth is maximized at 8 bit, although it can also store animated images ● JPEG: r​aster graphics ​format, digital cameras mostly save the images in this format, supports 24 and 32 bit too ● PNG: r​aster graphics ​format, maybe the most common image type in the internet now, can handle transparent backgrounds and a minimum of 8 bit color depth. ● EPS: v​ector graphics ​format, maybe the most common image type used in the printing industry, all the vector graphics softwares can export and import it ● SVG: v​ector graphics ​format, files mostly used on web developing ● PDF: v​ector graphics ​format, platform independent file, used in a wide range with limited editing opportunities Visuality Visual thinking Visual thinking is a dimension of visuality (visual display of objects, notions, etc.). Other dimensions are visual memory, visual cognition, visual communication, visual education. Its essential is pictorial vision which includes a more complex form of cognition besides senses. “The visual language can transfer knowledge more efficiently than any other communicational tool. It helps people express and pass on their experiences in material form. Visual communication is universal and international: it doesn’t know the limits of language, vocabulary, or grammar; educated and illiterate people can equally access it.