[CS2] Image Layer

An image layer lets you add an image to your design. This page describes the properties you can set for an image layer.

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 }}
Maintain Aspect Ratio	Determines how the image is fit within the Width and Height specified for the layer. There are three possible values: Stretch to Fit, Proportional to Height, and Proportional to Width.. The Default is Proportional to Height. Stretch to Fit (stretch): adjusts the image to have the same height and width as the layer itself. Proportional to Height (height): adjust the image have a height equal to the layer height and a proportional width based on the image's aspect ratio. Proportional to Width (width): adjusts the image to have a width equal to the layer width and a proportional height based on the image's aspect ratio. Note: When this is set to Proportional to Height or Proportional to Width, the field for the opposite dimension is hidden.	width	stretch
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 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.

Image

Specifies the image to be rendered.

Name	Description	Example	Default
Image	The image to be rendered.	{{ images.pic.url }}	https://component.studio/cs2/ images/favicon/600x600.png
Tint	The tint to apply to the image.	#ff0000	#ffffff

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