This is a glossary about the most common design terms we are using so that we are on the same page.
The Alpha Channel indicates the transparency of an image or video footage. It is also used in 3D graphics to create additional textures for the reflectivity, bump,
displacement, or visibility properties influencing the rendered texture of a 3D model. The Alpha Channel contains no color information, only transparency information. It is visualized in the channel as a black and white image.
The value of Alpha can be measured as a real value, a percentage, or an integer: The full transparency is defined as 0.0 ; 0% or 0, visualized in the Alpha Channel as pure black, the full opacity is defined as 1.0, 100%, or 255, visualized in the Alpha Channel as pure white.
If you for example reduce the opacity of the overlying layer to alpha = 60%, the color of the underlying layer will become visible at 40% opacity in the areas where both layers overlap.The resulting color-blending effect will create the illusion of a completely new color to the viewer.
The image formats that contain the Alpha Channel are generally composed of the following components:
R = Red Channel
G = Green Channel
B = Blue Channel
A = Alpha Channel
Read more: What is the Alpha Channel ->
A tool found inside the Arrange Tab. It allows you to line up two or more layers against each other, or line up layers to the edges of an Artboard or group.
Read more: How to align objects in Vectornator ➞
Anchor Point (or Bèzier Node)
Points that connect paths on a vector tool.
Read more: Editing Bèzier Nodes ➞
Artboards are a layer type that displays different pages of your design in a fixed frame on the canvas. You don’t need to switch documents if you want to view different pages of your designs. This function is handy for many design projects, especially web design and designing business cards.
Read more: Using Artboards in design ➞
The Aspect Ratio of an image is the ratio of its width to its height, it can be displayed as a ratio or as a decimal number. It is expressed with two numbers separated by a colon, such as 16:9, sixteen-to-nine.
The Aspect Ratio in a broader sense means the ratio of at least two sides of a polygon or a two-dimensional surface. Most often, it is used to indicate the ratio of the width of a rectangle to its height. For the x:y Aspect Ratio, the image is x units wide and y units high.
Aspect Ratio width = x Aspect Ratio height = y
The Aspect Ratio width to height is specified in the format x: y, but in cinema y: x, i.e. height to width. The Aspect Ratio is frequently defined for screens as a fraction x:y (e.g.16:9), generally this fraction is also normalized to 1 and rounded if necessary (e.g. 1.78:1).
Frequently occurring ratios are 1.85:1 and 2.39:1 in cinematography, 4:3 and 16:9 in television photography, and 3:2 in still photography. A square has an Aspect Ratio of 1:1.
Display Aspect Ratio
The Display Aspect Ratio (DAR) initially only indicates the ratio of the width to the height (in length units, such as cm) of the image on the output medium. However, it is typically also used to refer to theratio of the width to the height of the part of the output medium on which an image is to be displayed (undistorted) (correctly called Original Aspect Ratio or OAR).
Pixel Aspect Ratio
Pixel Aspect Ratio (PAR) is the ratio of the width of a pixel (usually abbreviated to x) to its height (usually abbreviated to y). The Pixel Aspect Ratio can be determined from the ratio of the display of an image DAR (DisplayAspect Ratio) (e.g. 16:9) and the ratio of the image resolution SAR(Storage Aspect Ratio) (e.g. 1440:1080).
Read more: What is the Aspect Ratio ➞
Turning an image into vectors with just one tap. The Auto Trace feature enables you to convert any raster image (JPEG or PNG) into vector artwork.
With this feature, you can create a completely new image based on an existing piece of artwork or a reference photo without having to draw the vector shapes by hand. You can trace a sketch that you have drawn on paper into vector artwork.
Read more: How to vectorize an image ➞
Bézier Curves is the mathematical name used to create curves in almost all graphic design software and that can be defined by the the "Start" and "End" point, and the type of Handles of each Bézier Node.
Each Path goes from the "Start" point to the "End" point while the Node Handles define its curvature, giving it the name of "Curves".
Most design tools allow you to draw Bézier curves thanks to the Pen Tool and let you define those 4 parameters:
- Bézier Nodes (often called simply points)
We refer to "nodes" as all the points that compose a path.
Any curves can preferably be composed by a minimum of 2 nodes.
The Handles are used to control the curve direction and will define the shape's path.
Lines are the connection between 2 single points (without handles).
Read more: Creating curves with the Pen tool ➞
They allow you to create new paths and complex shapes. The term “boolean” describes how shapes are combined, using values such as “and”, “or,” “not,” or a combination of these.
A tool used for drawing freeform paths with variable widths, also known as tapered paths. You can find it inside the Toolbar (left side, sixt icon from the top) or by pressing the ~key~ B ~key~ keyboard shortcut.
Read more: How can I draw Brush Strokes?
The color wheel was created by Newton so that relationships between colors were easier to define and identify. He decided to display the color spectrum in a circle because he felt that indigo (the last color in the color wheel) was similar to the first color, red.
This wheel is comprised of three main color categories:
- Primary colors: red, yellow, and blue
- Secondary colors: orange, green, and violet
- Tertiary colors: red-orange, yellow-orange, yellow-green, blue-green, blue-violet, and red-violet
Read more: Using the Color Wheel to Create Designs ->
A compound path consists of two or more paths that are connected. Compound paths are used when you need to show a part of an underlying object through a hole or intersection in another shape; for example, you have created a complex shape using Boolean Operations.
For example, when you perform the Boolean Operation Subtract ~ic-boolean-subtract~~ic-boolean-subtract~, you create a new compound path consisting of the upper and the underlying shape, removing the intersecting path area of the underlying shape from the newly created compound path.
All the paths included in the compound path will behave as a unit. For example, you can combine paths that will then automatically share their color properties. All components in the compound path take on the properties of the bottom-most object in the stacking order.
To create a compound path in Vectornator, tap/click the button Combine Path~ic-combine-path~~ic-combine-path~ located in the Inspector (on the right side of your screen). When you select the compound path, the whole compound path will be selected, as you cannot view individual components of the compound path in the Layers Tab. However, you can select and move the path components if you tap/click directly on a single path (not on the fill) and even edit its shape using the Node Tool.
To split a compound path into its original separate paths, you can use the button Separate Path ~ic-separate-path~~ic-separate-path~ in the Paths section of the Inspector in Vectornator.
A descender is the portion of a letter that descends below the baseline.
Read more: What is a Descender ➞
Decay & Radius (Spiral)
A spiral or helical line is a curve that circles a point or axis and moves away from or closer to that center, depending on the viewer's perspective.It is a curve that emits from a central point, moving further away as it rotates around the central point. The Spiral is circling in a continuous and gradually widening (or tightening) curve, either around a central point on a flat plane or around a vertical or horizontal axis. A spiral can rotate clockwise or counterclockwise. The spiral curve can be found frequently in nature.
A spiral can be either two-dimensional or be three-dimensional. The three-dimensional variation of the spiral is called the Helix. (The Double-Helix Structure of DNA is an example of a three-dimensional spiral.)
The amount of the progressive widening (or tightening) of the curve is called decay. The decay indicates how fast the spiral tapers to its rotation point. The larger the amount of decay, the faster the spiral is tapered to the central point and vice versa. If a spiral has an initial radius, it signifies that the starting point of the tapering rotation does not begin at the central point. The delayed rotation in the center of the shape creates an inner emptiness radius that is defined as the initial radius.
If you want to know more about spirals in Vectornator, you can read more here ->
The Golden Ratio is a mathematical formula that yields the number 1.618. When used effectively, it creates designs that can achieve a balance of beauty whether you're designing typography, UI/UX, or a logo.
Read more: What is the Golden Ratio ➞
A gradient consists of an interpolated range of mixed colors (two or more) to make design elements visually more striking. You can create a visual emphasis with gradients and subtly beautify an interface. Gradients are an ideal way to add depth and dimension to your design.
There are different types of Gradients; the most commonly known are the Linear Gradient, the Radial Gradient, and the Angle (Cone) Gradient.
In a Linear Gradient, the colors flow in a single direction, from left to right or top to bottom. In digital graphics, the Radial Gradient creates a gradient that emanates from the center of a circle. This gradient type is optimal to use for round or circular shapes.
With a conic gradient, the colors transition as if spun around the center of a circle, starting at the top. In a Radial Gradient, the colors emanate from the center outward in all directions.
Read more: Gradients in Vectornator ➞
The Hero image is the first image or banner that greets you when you visit a website landing page. The image is commonly placed at the front and center of the website landing page. It generally covers the complete width of a webpage and leaves only space for navigation bars and CTAs.
The Hero image can consist of an image with added text or can be dynamic ( carousel images, f.ex.) or static. This is the image that every visitor sees before he starts scrolling down the landing page or visiting site menu links. It’s the business card of the website of your company. The placement of Hero images gives you the advantages of visual appeal, readability, interactivity, and storytelling.
Every company only has a few seconds to leave a positive impression or spark the visitor's interest with a presumably short attention span; that’s why a hero image's resolution and overall aesthetic quality need to be outstanding. A compelling Hero image lets people remain on your site and possibly turn them into future customers.
HSB (hue, saturation, brightness)
HSB stands for hue, saturation, and brightness in color theory and graphic design. In some cases, it is HSV (hue, saturation, and value) or HSL (hue, saturation, and lightness).
The hue is the main property of color, a number between 0 and 360. Hue is the color it most resembles on the color wheel, from 0° to 360°. As an agreement, the hue for red is set to 0° for most color spaces with a hue. The hue is measured in degrees on the color wheel. In painting, the hue is the pure color pigment without added white or black pigment.
Saturation is the richness and intensity of a color. The saturation of a colorcan be measured with a number between 0 and 100. 100% is the richest, most saturated version of a color, 0% will be a light gray for light colors and a dark gray for dark colors.
The brightness of color can be measured with a number between 0 and 100. 0% brightness is defined as pure black, 100% brightness is defined as pure white.
In graphic design programs, the HSB values are generally organized with three sliders:
In Vectornator, you can access the HSB values (B) by clicking directly on a Color Well and pick the Color Slider (A).
Read more: Adjusting the HSB values in Vectornator ➞
The Isolation State is used to edit objects or paths within a mask, compound path, or group. When you enter the Isolate State, anything not within the isolated object will appear dimmed out. To enter Isolate State you can simply double-tap / click the object you want to edit. Then, repeat the action to exit.
Read more: Editing masks in Isolate State ➞
The amount of space between two letters and the process of adjusting that space.
Read more: What is Kerning ➞
Leading / Line Height
The spacing between the baselines of the typeface.
Read more: What is Leading ➞
Masks are used to define which parts of a shape are visible. The overlying Clipping Mask shape defines the visibility of the underlying shape.
Read more: Masking Objects in Vectornator ➞
While using the iPad, you can work on more than one app or document simultaneously. With iPadOS, you have three following Multitasking Modes available:
1. The Split View
The Split View Button
The apps are arranged side-by-side on your screen, and you can drag the slider, the so-called app divider, that appears between the app windows to the left or to the right, to adjust the screen view.
In Vectornator, you can use the Split view to import an image via drag & drop, visualize two documents at the same time, or even drag and drop color palettes from Procreate.
Read more in our Learning Hub on how you can import an image into Vectornator via Split Screen view.
This feature is also very useful if you want to drag & drop color palettes directly from Procreate into the Color Palettes Menu of Vectornator.
2. The Slide Over View
The Slider Over Button:
One app or several apps appear in a smaller floating window on the screen. If you have multiple apps opened, you can use your finger to swipe and bring a specific window to the top of the window stack.
3. The Center Over View
The Center Over Button:
The Center Over View displays a selected element in the center of your screen. The Center Over View view is only applicable with apps that support this feature. In Vectornator, for example, it’s used when you tap on Learning Content. You can start Multitasking on your iPad by using the Multitasking Menu, the Dock, or the Spotlight.
Read more about the steps on how to activate the different Multitasking Modi in the Apple documentation ->
Node Types are created by handles that extend from a Bézier Node when set as either Single, Mirrored, Asymmetric or Disconnected
If you activate the Bézier Curve function, your Node converts into a Bézier Node. Once the Node has been converted into a Bézier Node, you can choose between four different Bézier Node Types: The Single Node, the Mirrored Node, the Asymmetric Node, and the Disconnected Node. These Node Types are created by the handles that extend from the Bézier Node and their orientation and behaviour.
Read more: Changing Node Types ➞
The outline of a vector shape between two vector points. Paths are vector lines made of a minimum of two points connected by a straight line segment.
- They can be created by using the Line Tool or tapping anywhere on the canvas with the Pen Tool to create connected anchor points.
- You select paths for editing with the Selection Tool in the Toolbar or by pressing <key>P<key>. A bounding box will appear around the entire path, and this will also activate the Quick Actions menus (available only on iPad or iPhone).
- The Direct Selection (also called the Node Tool) can also be used to select instead the Bézier Nodes that compose your path.
- We often refer to `paths` as any line (straight or curved) that links two nodes.
Read more: Vector Paths ➞
A tool used for creating custom paths. You can find it inside the Toolbar (left side, fifth icon from the top) or by pressing the ~key~ P ~key~ keyboard shortcut.
The Pen Tool allows you to create Bézier curves (also known as vector paths) that you can draw, curve, edit, and close. Their direction and angle are determined by the position of the node handles.
Read more: What is the Pen Tool ➞
A tool used to create freehand paths. You can find it inside the Toolbar (left side, fifth icon from the top) or by pressing the ~key~ W ~key~ keyboard shortcut.
The Pencil Tool works like a freehand tool and allows you to create a vector path that follows the path of your hand. It can follow it precisely, or follow it with a more consistent line, depending on the Smoothness you set.
Read more: Drawing vector paths with the Pencil Tool ➞
The Pivot Point is the center of rotation of an object.
This can be compared to a wheel that rotates around its own axis, the axis here is the Pivot Point of the wheel.
In graphical programs, the Pivot Point is generally located in the center of the object by default. This can be seen when an object or a shape is selected and the transform functions are activated. The bounding box will be automatically displayed with a small circle in the middle. The circle indicates the Pivot Point of the object or shape.
In most graphics programs, the pivot can be shifted from the center of the bounding box to any place in the document. It is normally sufficient to simply select the Pivot Point and then tap/click onto a new position. The object will now rotate around the newly positioned Pivot Point.
Watch the video: How to Rotate Shapes in Vectornator changing the Pivot Point.
The Scissor Tool can be used to split an existing shape or paths between two bézier nodes.
A shadow is a dark area where light emitted from a light source is blocked by an opaque object.
Shadows are shaped because light cannot transit through the opaque object. The object blocks the light and forces it to move past the blocking object and onto the next surface. The resulting shadow is a two-dimensional shape or a reverse projection of the object blocking the light. The size of a shadow depends on the distance between the light source and the object blocking it. The closer the item is to the light source, the more it obstructs the light, resulting in a bigger, softer shadow. If the object is more distant, the shadow becomes sharper and smaller.
Natural Shadows: They are created by sunlight. The angle of the sunshine supply determines the length of the shadow. At sunrise and sunset, the low angle of the sun makes the longest shadows. The shortest shadows area is unit shaped at high noon, once the sun is highest within the sky.
Artificial Shadows: This includes all shadows that are created by an artificial light source.
Not all shadows are black. This attribute sets the color of your shadow, it will change what color the shadow is (in case you don't want to use the default grayish color). In Vectornator, as with any other design software, you can set the color of your shadow. Read more about it in our Learning Hub →
The Shadow Offset value changes the location of the shadow in relation to the element's frame.
You can offset the shadow to change the direction the shadow is cast - how far from the shadow-casting layer and in which direction. That means we have two controllable Offset properties:
- Distance from the shadow to the shadow-casting object
- Direction of the shadow to the shadow-casting object.
In most programming languages, there are two values to set the shadow offset. <offset-x> generally specifies the horizontal distance, <offset-y> generally specifies the vertical distance.
In Vectornator you can adjust the distance of the shadow to the shadow-casting object with the Offset Slider, the direction of the Shadow Offset can be adjusted with the Shadow Rotation Wheel.
The shadow opacity will define how opaque the shadow is.
The Shadow Opacity can be adjusted in Vectornator by clicking on the Shadow Color Well and then moving the Transparency Slider.
Read more: How to add Shadows in Vectornator ->
The Shape Tool allows you to create pre-made geometric shapes, such as rectangles, circles, polygons, or straight lines, but also stars and spirals.
Read more: How to create pre-made shapes ->
In digital design, a style that mimics materials and dimensionality to create a connection to real life objects. It can guide customers to follow intended actions and imply usage through familiarity. For example, some desktop operating systems use a trash can or recycle bin icon to represent the deletion of files. Or, Skeuomorphic Icons (also called 3D icons) are designed to imitate their real-life counterparts.
Skeuomorphism started receding in popularity after Apple introduced a flat redesign of their mobile operating system in iOS 7.
Read more: Skeuomorphism in Icon Design ->
A type of image made up of points connected by paths. Can scale to any size without losing quality. They can be open or closed: Shapes are vector elements made of closed paths, meaning all the anchor points on the path are connected to each other.
Shapes can be created using the Shape, Pencil, Pen, and Brush Tools.
Read more: What is a vector? ➞