A

Advertorial

The term advertorial is a portmanteau of the words “advertisement” and “editorial.”

It’s an article in a magazine, newspaper, or website, a TV, radio, or podcast segment providing information on a product, and a strategically placed CTA. The advertised brand usually pays the publisher for its content to be featured. The term was first coined in 1946, according to Merriam-Webster.

The purpose is to provide in-depth information about a product for a potential customer; the advertorial is generally more detailed than a general advertisement. Advertorials are usually written by an agency or by the client.

In most countries, magazines, TV, or radio stations are obliged by law to declare the advertorial as paid advertising.

Accessibility

Accessibility in Design means that it is accessible to all potential consumer groups. The emphasis is on making the design accessible to the target user, the non-target group, and users with disabilities such as visual, motor, cognitive, speech, or hearing impairments.

Accessibility laws ensure that content is accessible to all users with or without impairment; a designer’s role and responsibility is to implement these laws in everyday design.

The graphic and UI design must be easy to understand and navigate for the largest group of people.

The WCAG has defined four official principles for accessibility:

• perceivable
• operable
• understandable
• robust

Improving the accessibility of your design strengthens your brand and improves website ranking and SEO.

“Good [accessible] design happens when you view your [design] from many different perspectives or lenses.”   The Art of Game Design: A Book of Lenses.

AI (Artificial Intelligence)

Artificial Intelligence (AI) signifies the simulation of human intelligence in machines designed to think and act like humans. AI systems can perform tasks that usually require human intelligence. These tasks include speech recognition, visual perception, decision-making, and language translation. The development of AI is based on the idea that a machine can learn from experience and make decisions based on that learning rather than following a set of pre-determined rules. There are various types of AI, including narrow or weak AI, designed to perform specific tasks, and general or strong AI, which can perform any intellectual task that a human can. AI research aims to create systems that can execute tasks that demand human intelligence, such as making complex decisions and understanding natural language.

Alpha Channel

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 an entirely new color tforthe 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 ->

Align Options

‍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 ➞

Artboard

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 ➞

Ascender

An ascender in typography is the upward portion of a lowercase letter that extends beyond the main line and x-height of a typeface. These ascending extensions are also called arcs, stems, or hooks, depending on the shape of the shape they reflect. Typical letters that have ascenders are b, d, f, h, i, k, l, and t. The ascender level is the level reached by ascenders, and it is called the "Ascending Line." Uppercase letters do not have ascenders.

For most typefaces, the height of ascenders is a crucial element. In typography, ascenders improve legibility and make it easier for the reader to recognize and read letters.The ascenders of some fonts are long and extend beyond the centerline; in others, they are short and extend only slightly beyond. Short ascenders tend to make letters appear wider.

Some ascenders may be straight, while others are slanted. In cursive and calligraphy, swirls and loops are twisted and extend beyond other letters. These ascenders that extend beyond the x-height hinder the readability of the text.

Aspect Ratio

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 the ratio 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 ➞

Auto Trace

‍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

Bézier Curve‍

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:

1. Bézier Nodes (often called simply points)
   We refer to "nodes" as all the points that compose a path.
2. Curves
   Any curves can preferably be composed by a minimum of 2 nodes.
3. Handles
   The Handles are used to control the curve direction and will define the shape's path.
4. Lines
   Lines are the connection between 2 single points (without handles).

Read more: Creating curves with the Pen tool ➞

‍

Blue Hour (Photography)

Blue hour photography refers explicitly to the time window shortly before sunrise and immediately after sunset in the evening.

The blue hour is caused by the sun being enough below the horizon, which causes the blue wavelengths of light to dominate due to the Chappuis absorption caused by ozone.

Red light, with its longer wavelength, passes through space, while blue light, with its shorter wavelength, is scattered into the atmosphere, making it blue-colored.

In around 90 % of worldwide countries, the blue hour happens twice a day. The 10% of the remaining countries near the earth’s poles have a blue hour only once a day.

Photos taken during the blue hour have a distinct blue tone, indicating a cold Kelvin temperature.

The magic of shooting photos during the blue hour is that you can often capture stunning images of the blue sky contrasted against warm-toned artificial lighting, which projects a peaceful tranquility.

Boolean Operations

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.

At its core, “Boolean” is a logic term that can be either “true” or “false,” and is commonly used in computer programming. In terms of graphics design, the meaning is quite similar. We use “boolean” to describe how shapes are combined, using values such as “and”, “or,” “not,” or a combination of these. Getting too technical?

Simply put, Boolean operations are a very powerful tool for any product or graphic design project. A complicated-looking shape can be constructed in no time using the five Boolean operations present in Vectornator, namely Union, Subtract, Intersect, Difference, and Divide. You’ll find these operations at the top of the Path Tab.

Creating complex shapes is something you’ll inevitably come across in your design process, so let’s take a deeper look at how these 5 options works in a vector design software as Vectornator:

‍

Brand Guide/ Style Guide

The brand guide is a tool to collect and organize the style elements of the brand identity of a company, product, or institution. The brand guide is an orientation for freelancers and employees on representing the company and maintaining visual consistency.

Brand colors (usually cataloged with hex numbers, RGB values for screen display, and CMYK values for print) are essential aspects that will be defined. Additionally outlined are the color combination rules, the font type(s), formatting, capitalization, logo, layout, style, spacing, the tone of voice of the copy, and the guidelines for graphics, images, and videos.

Sometimes, the brand guide can contain additional technical, ethical, or legal specifications such as non-disclosure agreements. The brand or style guide makes your brand recognizable and identifiable, as the visual and legible representation follows rules that ensure visual consistency.

A brand guide is of utmost importance in establishing a brand or rebranding an existing company, product, or institution.

‍

Brush Tool

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?

C

Color Wheel

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 ->

Compound Path

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.

CTA (call to action)

A call to action is a short sentence to encourage the reader to buy or browse a specific product, subscribe to a newsletter, download an asset, visit a link or increase overall conversion rates. The sentence should be short and use strong verbs. The call of action is mainly included at the end of a landing page, general text body, or marketing post.

Customer Acquisition Cost (CAC)

Customer Acquisition Cost (CAC) is the cost incurred by a business to acquire a new customer. It represents the total monetary and time resources invested in attracting, converting, and retaining customers. This includes marketing campaigns, sales and customer service costs, salaries, and overhead. CAC is a key metric for businesses as it helps to measure the effectiveness and efficiency of their customer acquisition efforts. By knowing the CAC, companies can determine if their marketing and sales efforts generate a positive return on investment and make adjustments to improve the bottom line.

D

Descender

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 ->    

‍

DPI/PPI

PPI (pixels per inch) refers to the pixel density of a digital image. It signifies how many pixels are placed within a 1-inch line. The PPI metric is used with digital cameras, monitors, screens, scanners, displays, and projectors.

The following attributes define the PPI metric:

• The color value can range from 1-48 bit
• Fixed-size per pixel
• Every pixel is filled with a singular color

There’s no PPI set for vector images, as vectors do not consist of pixels but on a mathematical equation. Nevertheless, a target printing size (DPI) must be defined before printing the vector file.

DPI is an abbreviation for dots per inch. It’s a measurement used in video scanners, image scanners, or printing. It signifies  the number of dots placed in a line within an inch. DPI denotes the dot density of an image when it is reproduced in the physical world, as a printed paper f.e.x. It refers to the output resolution of a printer, video scanner, or image scanner.

You can calculate the DPI resolution with the following equation: DPI = dots/length (inch) = dots/in = dots * 25.4 mm/mm

‍

‍

E

Emboss/Deboss

The terms emboss or deboss originated from printing, where a protruding (emboss) or indented (deboss) pattern, shape, or letter is printed on paper. The technique is often used in marketing material to give it a luxurious and haptic feel. Thick materials are optimal in making the effect visible when printed.

In some cases, the embossing or debossing technique is called a 3D effect or a bevel effect if the design protrudes. In digital art and design, the embossing or debossing effect can be created on shapes or letters digitally by adding strategically placed shadows, highlights, or inner visual lines on shapes or letters.

Evergreen Content

The term evergreen content designates media content designed to be of long-standing or infinite relevancy after it has been published.

Below is an excerpt of the most common evergreen content types:

• FAQs (Frequently asked questions)
• How - to - guides
• Manuals
• Glossaries
• Product reviews
• Interviews
• Studies and statistics
• Comparison articles
• Listicles
• Tips
• Videos

As the content is intended to be long-standing, SEO, extensive keyword search volume research and excellent content quality are essential to driving continuous traffic to the created evergreen content.

‍

F

Frame Rate

Frame rate refers to the number of frames or still images that are displayed per second in a video or animation. It is measured in frames per second (fps). Frame rate is an essential factor in video and animation production, as it determines the smoothness and fluidity of motion in the final output. The higher the frame rate, the more fluid and lifelike the animation appears to the viewer.

For example, a video with a frame rate of 60 fps will seem smoother than one with a frame rate of 30 fps. The frame rate is also a critical factor in the perceived quality of video games, as a high frame rate is essential for smooth gameplay.

The frame rate can be adjusted depending on the requirements of the project. For instance, cinematic movies typically have a frame rate of 24 fps, while television broadcasts often use a frame rate of 30 fps. Video games may run at a frame rate of 60 fps or higher to provide smooth and responsive gameplay.

Freeform Paths

As the name suggests, freeform paths can be drawn freely without setting Anchor Points by clicking or tapping on the canvas, like when using the Pen Tool. The behavior of a freeform path can be compared to a pen or brush drawing freely on paper. Freeform paths can be drawn with variable widths. In Vectornator, you can draw freeform paths with the Pencil Tool or the Brush Tool.  The Bézier Curves of these paths can be edited by selecting the path and activating the Node Tool.

‍

‍

‍

Learn more about paths in Vectornator →

G

Golden Hour (Photography)

The term golden hour, sometimes called the magic hour, derives from photography and signifies the last hour before sunset and the first hour after sunrise.

The lighting during that timeframe creates a dreamy, gold-like glow. The lighting is very convenient for photographers, as it is difficult to overexpose or underexpose the light in a photographed image.

The three main benefits of photographing during the golden hour are:

Softer light
‍The sun's rays hit objects, not at a direct angle; the light is softer, more diffused, and rather flattering for the human skin tone.

Directional light
‍The directional light, created by the low angle of the sun rays, enables longer shadows and thus specific light effects such as backlighting, rim lights, side lighting  silhouettes, and lens flares.

Warm light
‍The kelvin color temperature during that time window is warm, displaying a sensual, rich, and warm color palette of  golden, yellow, orange, and red hues. Usually, the warm color palette is associated with warmth and happiness.

Golden Ratio

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 ➞

Gradient

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 ➞

H

Hero Image

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).

Hue

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

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.

Brightness

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 ➞

I

Inbetweens

Inbetweens (also known as "interpolations" or "tweening") are frames in an animation sequence that are drawn between two key poses to create the illusion of motion. In other words, inbetweens are the frames that fill in the gaps between the key poses in animation, creating a smooth transition from one pose to the next.

The process of creating inbetweens is an essential part of traditional hand-drawn animation, where animators draw each frame of animation by hand. The animator creates the key poses first and draws the inbetweens to create a fluid and natural movement. In modern computer animation software, inbetweens are generated automatically using software tools, but the principle isthe same - to create a seamless transition between key poses.

The quality of inbetweens is crucial to the overall quality of animation. Poorly drawn or poorly timed inbetweens can result in jerky, unnatural movement that detracts from the illusion of motion. On the other hand, well-drawn and well-timed inbetweens can create a smooth, lifelike animation that captures the essence of the character or object being animated.

In summary, inbetweens are the frames that are drawn between key poses to create a seamless transition in an animation. They are an essential element of traditional hand-drawn animation and modern computer animation alike, and their quality plays a significant role in the overall quality of animation.

‍

Isolate State

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 ➞

K

Kelvin Color Temperature

Kelvin color temperature is a measure of the hue of a light source. It is based on the principle that a body radiator emits light whose color is dependent on the radiator's temperature. The higher the temperature of the radiator, the bluer the light it emits. The lower the temperature, the redder the light.

The Kelvin scale describes the color of light sources, with low numbers corresponding to warm, yellow-orange light and high numbers corresponding to cool, blue-white light. For example, a light source with a color temperature of 2700K is warm and yellow-orange, while a color temperature of 6500K is cool and blue-white.

Kelvin color temperature is often used in lighting design and in the film and television industry to set the mood or tone of a scene. It is also used in photography to balance the color of the light in a scene with the color of the film or digital camera sensor.

‍

Kerning

The amount of space between two letters and the process of adjusting that space.

Read more: What is Kerning ➞

Keyframe

In animation and video production, a keyframe is a reference point used to define a specific point in time in an animation sequence or video. Keyframes are used to mark significant moments in theanimation, such as changes in position, size, color, or other properties of an object or character.

A keyframe represents a specific frame or moment in an animation where the animator sets the parameters for the position, rotation, size, or any other properties of the object or character being animated.

These parameters are then interpolated between keyframes to create the Illusion of motion. In computer animation software, keyframes are usually represented as diamond-shaped icons on a timeline.

The animator can add or remove keyframes, adjust their timing, and edit the properties of the object or character at each keyframe to create the desired animation.

3D Kitbashing

3D kitbashing is similar to traditional kitbashing, but instead of using physical model kits and parts, it involves using 3D modeling software and digital assets to create custom models. You can do this by combining and modifying pre-existing 3D models or by creating new models from scratch.

3D kitbashing is often used in 3D modeling and animation, where it can be used to quickly create custom models for use in movies, television shows, video games, and other forms of media.

It is a flexible and efficient way to create custom 3D models and can be used to create a wide variety of models, from characters and vehicles to environments and props.

L

Leading / Line Height

The spacing between the baselines of the typeface.

Read more: What is Leading ➞

Logomark/Logotype

The general term logo signifies all marks that represent a brand.

When designing a logo, one of the most important questions is if you want to design it as a logomark or logotype.

Pictorial Logomark

The difference between these two terms is that the logomark is a symbolic icon, a pictorial logo. Some of the most known examples are the Apple shape with the bite mark by Apple and the bluebird from Twitter.

‍

Logotype

A logotype, often called a wordmark or lettermark, is the logo in letter form.  Two well-known examples are Google and Coca-Cola.

Combination Logo

A combination logo is a logomark combined with a logomark. The pictorial logo is firmly implemented with the logotype, both elements are necessary to identify the company brand. An example of a combination logo is the Dove logo.

‍

‍

M

‍

Margin and Padding

The terms margin and padding are specific layout terms. The layout term margin signifies the empty space around an element. The layout term padding signifies the space between the element content and its child elements or inner borders.

The implementation of margin and padding in layouts assures the clear structure and readability of the content. The correct margin and padding placement prevent the UI from becoming too crowded or empty.

Read more: Layout Design

‍

Mask

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 ➞

‍

Mockup

A mockup is a presentation of a product that showcases it in action. Mockups are often used in presentations or design and product proposals. The purpose of a mockup is to communicate to team members, potential clients, or investors the final version of the product before starting the design and production process.

The main advantages of creating a mockup are:

• Inform and convince clients to purchase the product.
• Pitch your product to investors
• Communicate your product vision to team members for clarification
• Visualize the final version of your product
• Create a visual library for marketing assets.

These are the most predominantly used mockup types:

• Print mockups
• Device mockups
• Branding mockups
• Packaging mockups
• Product mockups
• Social media mockups

‍

iPad Multitasking

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 ->

N

Native Advertising

Native advertising is sponsored content that adapts to the platform it’s presented on. It functions similarly to an advertorial; the word native signifies the seamless blending of the advertising into the media type.  For potential consumers, it can be challenging to identify the presented content at first.

Contemporary platforms of native advertising are promoted articles, videos, commentary, music, and many more.

To prevent the potential consumer from being deceived, the content must be disclosed as such. Commonly used terms to identify the displayed content as a native advertisement are “Advertisement,” “Ad,” “Promoted,” “Sponsored,” “Featured Partner,” or “Suggested Post,” “Promoted by [brand],” “Sponsored by [brand],” or “Presented by [brand]” in the corner or bottom of ads or subtitles.

The currently most commonly used native advertising can be found in the in-feed of apps.

In-feed native advertising in apps. Due to the dramatic increase in native advertising on social media platforms and blogs, the Federal Trade Commission released specific Endorsement Guidelines in 2009 for consumers to identify native advertising.

Node Type

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 ➞

P

Padding

See term Margin ->

Path

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 ➞

Pen Tool

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 ➞

Pencil 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 ➞

Photobashing

Photobashing is a technique where you paint, blend and merge 3D assets and photos into a new composition.  Important are the correct alignment lines of the assets and photos and the angle of light incidence to create a convincing final artwork.

The 3D assets will be rendered and exported as images from the 3D software and will be imported and blended with imported photos into an image editing software.

Some commonly used software applications for photo bashing are Photoshop, Inkscape, GIMP, Krita, XPaint, and many more.

Photo bashing was developed by concept artists, matte painting artists, and game environment artists to speed up the creation of landscape or background visualizations significantly. The technique can create matte paintings much faster than classic ones painted from scratch.

The difference between photoshopping, digital art and photobashing is that photoshopping alters an image but keeps the underlying structure intact. Photobashing composes and merges several images of different origins, like photography and 3D. Digital art on the contrary is created from scratch without the addition of outside imported images.

‍Pivot Point

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.

Prompt (AI)

A prompt in AI refers to a set of instructions or questions provided to an AI system, usually a natural language processing (NLP) model, to generate a response or complete a task. The prompt sets the context for the AI system and guides its output by providing a clear objective. For example, a prompt for language generation may be "Generate a summary of this article" or "Write a story about a journey to space." The prompt is crucial in determining the type of response generated by the AI system, and the quality of the response often depends on the clarity and specificity of the prompt.

In image generation, a prompt is a set of instructions or descriptions provided to an AI system to generate an image. The prompt acts as a guide for the AI system, providing the context and objective for the image generation process.

In computer vision and AI, image generation is a task that involves creating new images based on input data. The input data can come in various forms, including textual descriptions, sketches, or existing images. The AI system then generates an image that corresponds to the input data.The quality of the generated image often depends on the clarity and specificity of the prompt. For example, a prompt such as "Generate an image of a cat" may result in various images, ranging from realistic to stylized depictions of cats. On the other hand, a prompt such as "Generate an image of a black and white cat with green eyes sitting on a windowsill" provides much more specific information and is likely to result in a more accurate and consistent image.

Prompts can be used in various image generation applications, such as creating custom artwork, generating new images for machine learning models, and improving the accuracy of existing AI systems. Overall, the prompt plays a crucial role in the image generation process, providing direction and context for the AI system to generate high-quality images.

‍

R

Rule of Thirds

The rule of thirds is a design rule for the composition of a frame in graphic design, UX/UI design, traditional painting, film, or photography. This design technique was first written down by John Thomas Smith in 1797.

The rule of thumb is to divide the frame into nine evenly spaced parts; the image is separated by two equally spaced horizontal lines and two evenly spaced vertical lines. It is proclaimed that arranging the visible objects within the frame along those vertical and horizontal lines creates a more visually appealing composition.

Read more about when to break and follow the rule of thirds‍

‍

S

Scissors Tool

The Scissor Tool can be used to split an existing shape or paths between two bézier nodes.

Read more: How to cut a vector path or split it into different parts in Vectornator?

Screen Calibration

Screen calibration is the process of adjusting the display of a computer or other device to ensure that the colors and other visual elements are displayed accurately.

This can be important for various reasons, including ensuring that the colors you see on the screen match the colors you expect, that the brightness and contrast are set correctly, and that the image is not distorted.There are several ways to calibrate a screen, including using specialized hardware and software tools.

Some computers and devices come with built-in calibration tools, while others may require you to use third-party software or hardware. It is generally recommended to calibrate your screen regularly, primarily if you use your device for tasks that require accurate color representation, such as photo editing or design work.

Shadow

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.

Shadow Color

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 →

Shadow Offset

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:

1. Distance from the shadow to the shadow-casting object
2. 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.

Shadow Opacity

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 ->

Shape Tool

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 ->

Skeuomorphism

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 ->

‍

T

Time-sensitive content (ephemeral content)

Time-sensitive content includes all media forms with a limited lifespan up to 24 hours.  The content triggers the FOMO (fear of missing out) of consumers.

Well-known examples of providers of time-sensitive content are Facebook Stories, Meerkat, Periscope, WhatsApp Status, and Snapchat.

Investing time and financial resources to produce content that will disappear within 24 hrs might sound counterproductive at first, but there are several benefits of creating time-sensitive content:

• Time-sensitive behind-the-scenes content humanizes your brand and lets the user bond as they witness real, in-the-moment content
• Forces your audience to take immediate action
• Creating time-sensitive content often needs less effort, as the content doesn't need to be overly polished.
• More engagement from users
• Less competition, as less time-sensitive content is being produced than evergreen content.
• Drives a significant amount of traffic to your website

Top of the Funnel (Tofu)

Tofu, “top of the funnel,” is a term used in marketing and customer acquisition to refer to the early stages of the marketing and sales process, where many potential customers are introduced to a product or service.

The term "tofu" symbolizes a raw and undifferentiated product, similar to the large, undefined group of potential customers at the top of the funnel.The top-of-the-funnel (TOFU) term signifies the first step in the customer journey, where a broad audience is aware of a product or service and begins learning about its features and benefits.

TOFU marketing aims to create awareness and interest among potential customers, intending to attract them to the next stage of the funnel, where they can be qualified and converted into paying customers.Marketing activities at the top of the funnel include content marketing, search engine optimization, social media, and advertising. These activities aim to attract a large audience and generate leads, intending to nurture those leads and guide them through the rest of the customer journey.

The top of the funnel is a crucial stage in customer acquisition, laying the foundation for the customer journey. A successful TOFU strategy can help a company generate a large pool of qualified leads and increase the likelihood of customer conversion.

Twinning

In animation, twinning refers to a phenomenon where two or more characters or objects in a scene have identical or nearly identical poses, movements, or designs. This can occur unintentionally, as a result of the animator copying and pasting elements or reusing animation cycles to save time, or it can be a deliberate stylistic choice.

Twinning can detract from the visual interest and believability of animation because it can create a repetitive, robotic look that feels unnatural. It can also make it more difficult for viewers to distinguish between different characters or objects in a scene. As a result, animators typically strive to avoid twinning as much as possible.

To avoid twinning, animators may use a variety of techniques, such as offsetting the timing or positioning of similar elements, adjusting the size or shape of objects, or changing the design of characters or objects slightly. By introducing subtle variations into the animation, animators can create a more exciting and dynamic scene that feels more natural and realistic.

In some cases, twinning can be a deliberate stylistic choice, especially in highly stylized or abstract animation. In these cases, twinning can be used as a design element to create patterns or symmetry within the animation or to emphasize the similarities or differences between characters or objects.

However, even in these cases, animators must be careful to balance the use of twinning with other elements of the animation to create a cohesive and visually attractive final product.

‍

V

Vector

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? ➞

‍

W

White Balance

White balance is a setting in a photo or video camera that determines the colors that will be captured in a photograph or on video footage. It is used to adjust the colors in an image or video so that white objects appear white, regardless of the light source's color. The human eye automatically adjusts for different lighting conditions, but cameras must be manually adjusted to ensure that the colors in the photograph are accurate. White balance is important because different types of light can cause colors to appear differently. For example, a tungsten light bulb, which produces a warm, yellow light, can make a white object appear yellow in a photograph if the camera's white balance is not correctly set. By adjusting the white balance, you can ensure that the colors in your photograph are accurate and look natural.

You have several options available to set a white balance in a photo or video camera:

1. Automatic white balance: Most modern cameras have an automatic white balance setting that adjusts the colors in an image based on the light conditions. This is a good option if you're unsure how to set the white balance manually or are in a hurry.
   ‍
2. Preset white balance: Many cameras have preset white balance options that are designed for specific lighting conditions, such as "cloudy," "tungsten," or "fluorescent." You can select the preset that best matches your scene's light conditions, and the camera will adjust the colors accordingly.
   ‍
3. Custom white balance: If you want more control over the white balance in your photographs, you can set a custom white balance. To do this, you'll need a neutral gray or white object in the scene. Point the camera at the object and set the white balance using the camera's menu. This will tell the camera to use the colors of the gray or white object as a reference, ensuring that the colors in the rest of the photograph are accurate.
   ‍
4. Post-processing: If you're not satisfied with the white balance in your photographs, you can also adjust it in post-processing using software like Adobe Photoshop or Lightroom.

‍

‍