[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

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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us