Layers, the foundational concept that underlies everything in graphic design. Layers can be thought of as layers of film. Each layer has transparency so you can see the layers behind it. You can create a new image by combining multiple images using layers.

time to take

• 30 minutes

After this class

• You will master the basics of graphic design: layers.
• You will be able to create simple shapes, resize and align them.

put layer

Click on the shape on the top toolbar, select the desired shape, and click-drag on the canvas to add the shape. You can add artboards, shapes, vectors, text, and more to your canvas in the same way.

• Choose a shape tool – keyboard R or Select the top Tools tab
• Create a shape layer – Click & Drag on Canvas
• Create proportionate layers – Shift + Click & Drag
• Create a layer based on the center – Option (Alt) + Click & Drag

layer selection

You can select it by clicking on the canvas or from the list of layers in the left panel.

• Select multiple layers – Shift + click
• Select a detail layer within a group layer – Command (Ctrl) + click
• Select the layer behind the overlapping layers – Right-click the overlapping area/select layer

Select elements within group layer – Command (Ctrl) + click

Select the layer behind the overlapping layer – Right-click the overlapping area/select layer

Moving and copying layers

Layers can be repositioned by clicking and dragging. When you release the click, the layer will move to that position. If there are other layers near where you move them, they will automatically guide the alignment.

• Move layer – Click and drag a layer
• Copy layer – Option (Alt) + Click and drag a layer
• Repeat previous copy – Command (Ctrl) + D

Change layer size

Select a layer to resize it. You can also make precise changes by inserting numbers on the right panel. The Scale tool allows you to resize while maintaining overall proportions.

• Change layer size – Vertex Point Click & Drag
• Change while maintaining the ratio – Shift + Vertex Point Click & Drag
• Change on a central basis – Option (Alt) + Vertex Point Click & Drag
• Change while maintaining the ratio of details – layer selection + keyboard K + Vertex Point Click & Drag

click+drag resize

scale function to keep proportions

Align the layers

Multiple layers can be aligned. You can sort by top, middle, or bottom, and set the number to be sorted.

You can specify a specific interval by adjusting the number.

Layer details

Selecting a layer displays detailed information in the right panel. This area is for controlling the detailed properties of the layer selected on the canvas or layer list. You can control the layer's position, size, color, line, shadow, etc. with detailed numerical control. Depending on the nature of the selected element, the displayed content differs, and the displayed content also differs when the status is different, such as when one element is selected, when multiple elements are selected, or when a group is selected.

The inspector is different for 1 layer selection, 2 selections, group layers, and frames.

group layer

Multiple layers can be grouped together. This is called a group layer. Grouping layers means you don't have to select individual layers all the time. Some functions are only available when grouped into layers. You can set a rule to fix the details when resizing the entire layer, and a rule to automatically create a blank when the size of the detail in the layer changes.
 
*The three below are advanced techniques and will not be used in this lecture. Just know what features it has.
 
 

Constraint

You can fix the ratio or position of the layer. It sets the rules for how the lower layer changes when the upper layer is selected and resized. You can set the ratio or position of the lower layer.

Auto Layout Auto Layout

Layer margins can be applied automatically. If the lower layer is a letter, the margin is automatically applied to the upper layer as much as you type the letter. Useful for making things like buttons.