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.” (https://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 yellow, blue and red are 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 (21 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 (28 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): raster graphics format, only works in RGB color system, from 1 to 24 bit all color information can be stored in it. ● TIFF: raster graphics format, allows us to use 1, 8, 24 and 32 bit color depth ● GIF: raster graphics format, color depth is maximized at 8 bit, although it can also store animated images ● JPEG: raster graphics format, digital cameras mostly save the images in this format, supports 24 and 32 bit too ● PNG: raster 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: vector graphics format, maybe the most common image type used in the printing industry, all the vector graphics softwares can export and import it ● SVG: vector graphics format, files mostly used on web developing ● PDF: vector 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. It can transfer facts and ideas more profoundly than other communicational means. The static verbal notion can come to life with the help of the dynamic pictorial language." (Kepes, 1979, 6. old.) (https://hu.wikipedia.org/wiki/Vizualit%C3%A1s)
http://getbycreative.blogspot.com/p/blog-page_4536.html?m=1
Gestalt theory According to the Gestalt theory, the whole is more than the sum of the parts, so the sight is more than its parts.
“The Gestalt psychology (Gestalt [German]: form, shape) was developed from the psychology of perception, it started in the beginning of the 20th century in Germany. Its main interest is in vision, visual perception, the basics of visual communication are mostly rooted in this branch of psychology. It typically observes and explains the phenomena of perception through images.” (Kardos 1974; Atkinson 2005:31; Gestalt psychology) http://www.szinkommunikacio.hu/21_04.htm
Properties: - Emergence - first we see a bunch of dots but then we perceive the dog under the tree - Multistability - we can decide which direction the cube is facing and we can see two faces or a cup - Reification - our brain completes the empty spaces, creates the shape even without a contour - Invariance - even though it’s rotated and distorted, we still recognize that it’s the same image - Closure - The brain recognizes regular shapes even if they are incomplete - Similarity - we perceive the similar elements as a group - Proximity - we perceive the elements close to each other as a group - Continuity - the brain perceives the lines below as two distinct shapes, even though they could meet anyhow - Symmetry - symmetric shapes are perceived as one unit (no image)
http://braungardt.trialectics.com/sciences/psychology/gestalt-psychology-2/
This way of seeing helps us create and interpret compositions on which we will work based on structure, hierarchy and the relation of the part to the whole.
For designers: https://www.creativebloq.com/graphic-design/gestalt-theory-10134960
Composition The origin of composition is the latin word compositio, meaning: assembly, compilation. Composition helps us express something in an artwork, in any branch of art. It’s equally important in photos, drawings, paintings, or music.
The creator wants to make a certain effect, and orders the content consciously in order to achieve this goal. It’s also a composition if we don’t make any changes in what we have made.
In order to make the desired impact on the viewer, we have to arrange the elements of our picture consciously.
It’s important to be aware of the basics of Gestalt theory when we want to compose a picture.
Tools, basic notions: ● lines – the elements leading or limiting the movement of the eye ● shapes – domains, forms, designed by different delimiters ● light values – contrast, brightness ● textures – the quality of the surface material ● colors – shade, intensity ● directions – vertical, horizontal, or diagonal ● sizes – the size of the elements compared to each other ● perspective - the position of the elements in relation to each other ● lines or arrows that lead the eye ● position - where the shapes are
These all define the impact the image has on the viewer.
The rules of composition 1. Focus point We must lead the sight to a specified point 2. Simplifying Less is more. If there are more elements in the picture, you don’t know where to focus. 3. Rule of odds An odd number of subjects in an image is more interesting/natural than an even number. 4. Rule of thirds Arranging the important features of an image on the horizontal and vertical lines that would divide the image into thirds is visually pleasing. 5. Creating movement It is more pleasing to the viewer if the image encourages the eye to move around the image. 6. Don’t cut into two In case you use horizon line, it shouldn't cut the picture into half. 7. We love triangles It helps us to organize the picture which would feel more breezy and easier to overview. 8. Rule of space It helps us to organize the picture which would feel more breezy and easier to overview.
Introduction https://www.photopea.com/learn/
Photopea is an advanced image editor program that can be used to create either raster or vector graphics. The application doesn’t have to be downloaded, it works from a browser, even without signing up. It can be used from a desktop computer, a laptop, a tablet or a smartphone. When the page is loaded, it’s not necessary to keep up the internet connection, the application also works offline. For the moment it works in RGB color mode, we can create graphics with 8 bit depth.
Interface
Tool bar The tool bar is on the left side, we can only use one at a time, the one we clicked on. There are some tools that offer several similar options if we click on it. Each tool has a keyboard shortcut, too. If we hold the mouse over a tool, it displays the name of it and the shortcut.
Moving tool (V)
Rectangle select / Ellipse select (M)
Lasso free selection / Polygonal lasso / Magnetic Lasso (L)
Quick Selection / Magnetic Wand (W)
Crop (C)
Pipette / Ruler (I)
Spot healing brush / Healing brush / Patch tool (J)
Brush / Pencil (B)
Stamp (S)
Eraser
Gradient / Paint bucket (G)
Blur / Sharpen / Smudge
Dodge / Burn / Sponge (O)
Text (T)
Pen / Free pen (P)
Path select / Direct select (A)
Rectangle / Ellipse / Line / Polygon / Custom shape (U)
Hand (H)
Zoom (Z)
Foreground and background color (D - reset to default)
If we click on a tool, the horizontal top bar changes and specific control items appear on it for the selected tool.
Sidebar Different windows can be opened in the sidebar, i.e. handling layers, history, text.
Layers The images edited with Photopea consist of multiple layers, the layers allow the components to be edited separately, which makes it easier to edit them later. When we work with one layer, we don’t change anything in the others, so each layer can be edited separately (e.g. we can resize, rotate, or recolor them).
Selection Selection enables that certain actions should be applied to a specific area of the image only on the selected layer. The selected area is highlighted with broken line.
Brush tool Usually this is the tool we use for drawing. There are numerous parameters we can set, including size, density, even the brush’s size, dynamic, etc.
Text Text will be shown as a separate text layer. We can create one line of text and paragraphs too. The text editing procedure should always be applied (click OK)!
Vector graphics In certain sizes, we can create vector graphics inside Photopea. They will be placed on a new layer, can be modified by points, just like in vector graphic softwares.
Additional information Detailed description: https://www.photopea.com/learn/ Tutorials: https://www.photopea.com/tuts/