05. Decorate styles and layers

We will see how to transform different layers using different visual techniques such as color, thickness, image, gradient, etc.

color fill

You can add color to the shape layer. You can use the checkbox to choose whether to show a color or not, and select a color to specify the color in detail. It can be specified using the commonly used HEX code, and transparency and blending mode can be set.

image fill

You can also fill the image. You can place an image saved on your local computer inside the shape. When you place an image, you can also specify how the image appears inside the shape by filling, aligning, stretching, or tiling.

gradient fill

You can also fill it with various gradients. The general gradient input method is the same, and can be filled with linear gradient, radial gradient, corner gradient, etc.

line

All layers except text layers can have as many borders as you want. You can set different thicknesses, colors and blend modes. The line can be placed inside, center, or outside the shape, but I usually set it inside for pixel perfection.

join with end

End allows you to set the end of the line or path.

• Butt cap: This is the default option and the end is not marked separately.
• Round cap: Displays a rounded end.
• Projecting cap: Marks the angled end.

You can set how the bending part of the line is displayed in Join.

• Miter join: Displays in an angled form as the default option.
• Round join: The border will have rounded corners. (radius is border thickness)
• Bevel join: A diagonal beveled edge appears on the edge of the border.

shadow

Shadows can appear both internal and external. You can set the X,Y position of the shadow and specify the radius and scattering range of the blur effect. You can also overlap multiple shadows and set blend modes.

blur

You can express blur in four ways.

• Gaussian Blur: A typical blur effect.
• Motion Blur: Blurs in only one direction and appears to be moving.
• Zoom Blur: Only certain points are blurred.
• Background Blur: Blurs all content that appears behind the layer. (You will need to adjust the opacity to see the background blur effect.)