Graphic Design Theorems and Terminology – Prerequisite Knowledge for Aspiring Designers


Most of the designers these days learn designing by studying online courses, ebooks and tutorials. The modern internet has made learning material of the highest quality, 100% free. But there are a few barriers. When we study those tutorials or F1 help, often it happens that we don’t know the terminology, hence we have a very hard time understanding even the very simple matters. This happens especially in the case of beginners.

So here in this article, you’ll find the basic terminology used in graphic designing and the essential prerequisite knowledge which is common in almost all of the famous designing applications and platforms.

This article targeted for the graphic design, desktop publishing and web design beginners.  I’ve incorporated a few bits related with the printing process as well. They could become quite handy once you get familiar with all of them.

We’ll keep it as squeezed as it is humanly possible, so you might not find all the details; but no necessary parts should be missing. This post is not meant to provide technical details, rather a subjective approach towards the terminology.

If you are a seasoned designer, you may feel that some particular definitions are not the same as in the books, and that is exactly what we want, to define the use of the term, not the technical background.

So let’s start with the 4 very basic theorems, and then we’ll move on towards the essential glossary.

Vector Graphics vs. Raster (Bitmap) Graphics

Image courtesy EZ-Net University

Vector Graphics are “resolution independent” while Raster Graphics are “resolution dependent”. Resolution independent vector graphics can be expanded into a larger size without any kind of loss in quality.

But that’s not the case in raster graphics. In simple English, a raster graphic is a bitmap, or as we call it an image, and you would already know that if we try to enlarge an image in any application software, it loses its quality. Famous software for vector designing is for example:

  1. Adobe Illustrator
  2. Adobe FreeHand (formerly Macromedia FreeHand. It has been discontinued after Adobe and Macromedia merger)
  3. CorelDRAW

Raster Graphics industry is dominated by one software only, and that is Adobe Photoshop.

RGB vs. CMYK colors

RGB stands for Red, Green and Blue, while CMYK means Cyan, Magenta, Yellow and Key (Black). These are two basic color standards every designer works on. Without going deep in technicalities, let’s just say that RGB colors are for Display Screens (i.e. monitors, TVs etc.) and CMYK colors are the inks that are printed in press.

Why is it so? The bottom line is that if you are designing something which is only going to be viewed on a computer, such as a website, you should design your graphics in RGB mode. On the other hand, use CMYK for desktop publishing (there are some printing machines that print through RGB colors, but they are rare and expensive).

How to switch between the two colors, well you’ll just have to look it up in the Help of your software, it’s not something difficult though.

Color Systems Implementation

rgb vs cmyk

Have you ever seen a printing machine in work? There are only four color inks in a printing press which form all the colors. If it’s not clear enough, here’s an example:

  1. Pick two crayons, one cyan (blue) and one yellow
  2. Draw a small circle with yellow and fill it with the same yellow crayon.
  3. Now rub the blue crayon over that circle

It turns Green. Is it magic? Not really.

That is how ink based color system works. These four colors (CMYK) form all of the colors you see in print media. If a printing press needs to print Green color, they first print a Yellow and then over it, they print Cyan. RGB colors are also formed in the same manner, except that instead of inks, lights are used here.

By pointing these three colors at the same place and manipulating their ratio, a monitor screen displays the full range of colors. And to show black color, it just does not point any light at that area. That is the reason why every monitor screen is black when its switched off.

Pixels and Resolution

As you might already know, a pixel is the name of the element that makes up a bitmap. Thousands of pixels together form an image through excellent coordination and teamwork.

Pixel is not a defined size. It is basically just a dot on your monitor screen. Based on the belief that you already know how the resolution of your monitor screen works, let’s move further.

A monitor resolution is 72 pixels, while a printout of a portrait must comprise a resolution of at least 300 DPI (Dots per Inch).

Let’s see an example; you see an image at screen which looks to be 4 inches wide. But if you print it with 4 inches in width, the image will be hugely disrupted in the printout.

Let’s define it in another way; you have a picture of 800px X 600px, so if print it at a 300 DPI resolution, it will become (800/300) and (600/300) inches, or in simple English 2.6×2 inches.

Retina Display

The 72 PPI display fatigues our eyes even though we don’t realize it. What happens is that our eyes have to keep focusing and refocusing when we are watching the computer/mobile screen.

For this reason, Steve Jobs invented a new technology called Retina. In Apple products, Steve Jobs introduced print-like resolutions in mobile screens and laptops. So these days, there are some devices that show graphics on print-like resolutions. You have to check your device whether it is powered with a retina display or not.

Basic Glossary

Here’s a brief list of essential glossary that could become quite handy. It’s in alphabetical order.

Acquire: In almost every scanning application, Acquire is the tool which snaps the image from the image scanner.  This application software usually comes free with the scanner device.

Canvas: Even the digital images are painted on a digital canvas. So if you ever need to add some vacant space at the edge of the picture, enhance the canvas size.

Color Palette: In almost every designing and publishing application, there’s a bar containing colors. This is called the Color Palette.

DPI/PPI: DPI is “Dots per Inch” and PPI is “Pixels per inch”. Printing standard is DPI, while PPI is for virtual publishing, such as websites.

Gamut: This is the range of colors that is available to a particular output device or a given color space, for instance a laser printer. If the color range is too wide for that specific device, you will receive an error ‘out of gamut’.

Gradient: Type of a color fill in which one color takes a smooth transition into another.

Gutter: Refers to the spacing between two columns in desktop publishing.

Hue: One of the three basic colors. A hue is actually a range of colors, such as, red, blue green or yellow, and this works as a wheel. Using hue command, you can change the color tilt of an image.

Kerning: The spacing between letters in a line of text.

Master Page: In desktop publishing, a master page is where you design the basic layout of the page which stays the same at every page. For example when publishing a book, you might put the name of the book at the bottom edge of every page.

Typeface: it means font style, in some pieces of software, it’s also called Face.

Web-Safe Color: this is also a color table but it contains 216 out of a possible 256 colors. These 216 are the colors which are displayed alike in all web browsers.

WYSIWYG: “What you see is what you get”. This term is usually used in web designing. When you are designing a site, you don’t have to save the web page coding and open it in a browser, rather the designing application provides you with a live preview.

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved