[CS2] Text Layer
A text layer lets you add text to your design. This page describes the properties that you can set for a text layer.
Images In Text
You can include images inline with your text using the Inline Icons feature.
Position and Size
Sets the position and size of the layer.
| Name | Description | Example | Default |
|---|---|---|---|
| Left (x) | The horizontal (X) co-ordinate of the upper left hand corner of the layer. | 80 | {{ design.safe.left }} |
| Top (Y) | The vertical (Y) co-ordinate of the upper left hand corner of the layer. | 100 | {{ design.safe.top }} |
| Width | The width of the layer. | 500 | {{ design.safe.width }} |
| Height | The height of the layer. | 200 | {{ design.safe.height }} |
| Width Boundary | When the actual width used to render the text is less than the layer's defined width, this property determines what value is used as the width for outlining the text layer and for the layer function values. Set it to "Width Actually Used" ("used") to use the actual width used as the layer's width. Set it to "Defined Width" ("defined)" to use the layer's defined width as its width. |
used | defined |
| Height Boundary | When the actual height used to render the text is less than the layer's defined height, this property determines what value is used as the height for outlining the text layer and for the layer function values. Set it to "Height Actually Used" ("used") to use the actual height used as the layer's height. Set it to "Defined Height" ("defined") to use the layer's defined height as its height. When the actual rendered height is greater than the defined height of the text layer (and Hide overflow? is "false"), the actual render height is always used as the layer's height regardless of the value of this property. |
defined | used |
| Rotate | The number of degrees to the right that the layer is rotated. | 45 | 0 |
| Show outline? | Set to "true" if you want to render the outline of the text layer. This also shows a dot in the center of the layer. | true | false |
| Hide overflow? | Set to "true" to not render anything outside the bounds of the layer. | true | false |
| Render this layer? | Set to "false" to not render this layer. | false | true |
| Z-Index Enabled? | Set to "true" to enable the use of the Z-Index in positioning layers. | true | false |
| Z-Index | The Z-Index of the layer. When the Z-Index is enabled, layers with a lower Z-Index are rendered behind those with a higher Z-Index. Layers with the same Z-Index are rendered in normal layer order (either top-to-bottom or bottom-to-top based on Preferences). | 500 | 1000 |
The Position and Size section also contains the following buttons for use with the Drag and Drop features of Component Studio 2.
Text
Contains the text to be displayed.
| Name | Description | Example | Default |
|---|---|---|---|
| Text | The text to be rendered on the text layer. This can include styles and inline icons. | Text with an icon: <icon/> | This <b>is</b> some <i>text</i>! |
Text Formatting
Sets the formatting applied to the rendered text.
| Name | Description | Example | Default |
|---|---|---|---|
| Default Style | The default style for the text. | title | body |
| Fit to size? | Set to "true" if you want text that is too big for the layer to be shrunk in size to fit. | true | false |
| Horizontal Alignment | How the text is aligned horizontally: left, center, right, or justify. | justify | left |
| Vertical Alignment | How the text is aligned vertically: top, middle, or bottom. | middle | top |
| Line Spacing | Adjusts the number of pixels between lines for the rendered text. Positive values increase the spacing. Negative values decrease the spacing. | -2 | 0 |
| Letter Spacing | Adjusts the number of pixels between letters for the rendered text. Positive values increase the spacing. Negative values decrease the spacing. |
1 | 0 |
| Icon Scale | Set the size of inline icons relative to the surrounding text. | 100 | 80 |
| Curve this Text? | Set to "true" to enable rendering the text on a curve. | true | false |
| Radius | Adjusts the amount of curve for the rendered text by defining the radius of curve in pixels. | 300 | 120 |
| Invert Curve | Determines if the text will be rendered concave or convex. | true | false |
Effects
Sets the effects to apply to the layer.
Adjust Color
| Name | Description | Example | Default |
|---|---|---|---|
| Enable color adjustments? | Set to "true" to enable color adjustments. | true | false |
| Adjust Red | Adjusts the amount of red in the layer's colors. | 75 | 100 |
| Adjust Green | Adjusts the amount of green in the layer's colors. | 50 | 100 |
| Adjust Blue | Adjusts the amount of blue in the layer's colors. | 67 | 100 |
| Adjust Gamma | Adjusts the gamma of the layer's colors. | 25 | 100 |
| Adjust Saturation | Adjusts the saturation of the layer's colors. | 90 | 100 |
| Adjust Contrast | Adjusts the contrast of the layer's colors. | 80 | 100 |
| Adjust Brightness | Adjusts the brightness of the layer's colors. | 85 | 100 |
Blending
| Name | Description | Example | Default |
|---|---|---|---|
| Opacity | Opacity of the layer (as a percentage). | 75 |
100 |
| Blend Mode | Blend mode for the layer: normal, add, multiply, or screen. Normal mode: The background has no effect on how this layer looks. Add mode (also known as Linear Dodge mode): Brightens this layer based on the background. A black background has no effect. Multiply mode: Darkens this layer based on the background. A white background has no effect. Screen mode. Brightens this layer (to a less degree than Add) based on the background. A black background has no effect. |
multiply | normal |
Blur
| Name | Description | Example | Default |
|---|---|---|---|
| Enable blur? | Set to "true" if you want to blur the layer. | true | false |
| Blur Amount | The amount of blur added to the layer. This is essentially the size of the blur. The bigger this value, the lighter the blurred layer becomes. | 10 | 1 |
| Blur Quality | The fuzziness of the blur. As this increases, the recognizability of the layer decreases. | 75 | 100 |
Color Overlay
| Name | Description | Example | Default |
| Enable color overlay? | Set to "true" to overlay the layer with a specified color. | true | false |
| Overlay Color | The color to overlay the layer with. | #ffffff | #0000ff |
| Overlay Opacity | The opacity of the overlaid color | 75 | 100 |
Drop Shadow
| Name | Description | Example | Default |
|---|---|---|---|
| Enable drop shadow? | Set to "true" to add a drop shadow to the layer. | true | false |
| Drop Shadow Distance | The number of pixels away from the layer that the shadow should cast. | 3 | 5 |
| Drop Shadow Color | The color the shadow should cast. | #00ff00 | #00000 |
| Drop Shadow Angle | The angle of the drop shadow from 0 to 359 degrees. | 30 | 45 |
| Drop Shadow Blur | The number of pixels of blurriness that should be created. More pixels is more blurry. | 3 | 100 |
Glow
| Name | Description | Example | Default |
| Enable glow? | Set to "true" to add a glow effect to the rendered text. | true | false |
| Glow Distance | The size of the glow effect in pixels. | 20 | 10 |
| Glow Color | The color of the glow effect. | #ff0000 | #ffffff |
| Glow Inner Strength | The inner strength of the glow effect. It determines how much of the glow effect is inside the layer. | 2 | 0 |
| Glow Outer Strength | The outer strength of the glow effect. It determines how much of the glow effect is outside the layer. | 3 | 4 |
Outline
| Name | Description | Example | Default |
| Enable outline? | Set to "true" to add an outline (stroke) around the layer. | true | false |
| Outline Width | The width in pixels of the outline (stroke). | 3 | 1 |
| Outline Color | The color of the outline (stroke). | #0000ff | #000000 |