Learn about tools that will help you create your unique style
Styling options that you can apply to layers in Lunacy include:
- Fills (solid, gradient and image fills)
- Outer shadows
- Inner shadows
- Blurs (Gaussian and background)
They appear in the Inspector when you select layer. A combination of styling options applied to a layer is called a layer style. You can save layer styles for further use (read here for details).
You can apply styling options to all types of layers, except for technical ones (such as artboards, hotspots and slices). However, the only option applicable to group layers and components is the outer shadow.
In addition to the above, text layers feature typography settings, such as font, font size, line spacing, etc. Combined with the common styling options (or without them) they make up text styles.
The details about using each of the options you will find in the sections below. But first of all let us review some common things.
Adding, deleting, and managing styling options
To apply a fill, border or any other styling to a layer:
- Select the required layer.
+next to the respective styling section in the Inspector. A row of controls appears.
- Use these controls to define the required styling parameters (see the demo below).
The things that you should know:
Each layer can have multiple styling options of the same type (except for blurs). For instance, you can apply an image fill to a layer and a semi-transparent solid fill on top of it. Also, a layer can have several borders or shadows. Just click the + icon to add another row of settings.
You can drag these rows of settings up and down to adjust the position of their instances on the canvas.
You can temporarily disable some of the settings, by clicking the eye icon.
To delete a row of settings, select it and click the trash icon.
All these things are shown in the next demo. It presents a layer with a single fill and three borders.
Color controls appear in all styling sections (except for blurs) and serve for defining the color of the selected layer or its borders or shadows.
- Click the color box and use the color picker.
- Manually enter or paste the HEX value of the required solid fill.
- Copy the HEX, RGBA, HSB, or HLS value of the current solid fill. For this, right-click over the text box and select the required option on the displayed menu as shown in the figure below.
The last two options do not apply to shadows as they don’t have the color text box.
To open the color picker, click the color box in the styling section you are working with.
The figure below shows a view of the color picker invoked from the fills section.
It features the following controls:
- Fill type buttons. Available on the fill and border color pickers only.
- Color selection box. That is where you will select colors.
- The eyedropper tool. For details about using it, read here.
- Color selection bar. Allows you to quickly navigate through colors.
- Opacity bar.
- The color code selector. Displays the code of the currently selected color:
- The color code entry field.
- The opacity entry field.
- This button invokes the color variable editing mode.
- The panel of preset colors. To speed up your work with colors, you can save them for further use and select them directly from this panel. There are two types of preset colors:
- Global colors appear on the color picker in all documents.
- Document colors belong only to the current document.
To switch between the panels of global and document colors click the panel name. To delete a preset, right-click over it, then select Remove on the displayed menu.
- Use this button to switch the panel of presets between the list and grid view. In the list view, you can give names to colors: right-click a color and select Rename on the displayed menu (see the demo below).
- Use this button to add the currently selected color to Global or Document presets.
In the Inspector, color variables appear as colored circles (), while regular fills, border and shadow colors appear as colored rectangles ().
To create a color variable:
- Select a layer.
- Invoke the Color Picker from the Inspector.
- Set the required color.
- Click Create Color Variable.
To apply an existing color variable, select a layer, click in the Inspector, then select the required color variable.
To edit a color variable, click over the colored circle in the Inspector, then click > Edit variable.
To detach a layer from a color variable, select the layer, then click in the Inspector.
There are three major types of fills:
- Solid fills (default).
- Gradient fills that can be:
- Image fills.
The figure below shows a view of settings in the Fills section.
The section features the following controls:
- The color control for setting fills.
- The opacity control.
- The blend mode control. Blend modes determine, in case of multiple fills, how the top fill blends with the fill underneath. Understanding blend modes is mainly a matter of practice and experimenting, but if you need some theory, you can read it here.
- This button opens the panel where you can select between the Non-Zero and Even-Odd options for filling overlapping paths.
- This button opens a list of color variables.
To define a solid fill:
Click the color box in the color control and use the color picker to define the required color.
Type or paste the HEX code of the required color in the edit field and press
Gradients are combinations of two or more colors blended into each other within the same fill layer.
To add a gradient fill:
- In the Fills section of the Inspector, click the color box. The color picker appears.
At the top of the color picker click one the following buttons (1) to select the gradient type:
- - linear
- - radial
- - angular
As you do it, the gradient bar (2) with two handles gets displayed in the color picker. Also, you will see a gradient control with two color points (3) over the layer. The appearance of the gradient control depends on the selected gradient type. The next figure shows a linear gradient (see also the demos below).
Use the gradient control and/or the gradient bar to get the desired effect. The handles on the gradient bar correspond to color points over the layer. Actions applicable to all types of gradients:
- To change the color of a color point click it (or its respective handle on the gradient bar), and select the required color in the color selection box (4).
- To add a color to a gradient, just click over the gradient bar or the gradient control. To adjust the color position move the handles or color points.
- To delete a color, point the cursor over the respective color point or handle and press
- (optional) To save a gradient to presets, select the preset type (Global or Document) and click the plus icon.
- (optional) To invert a gradient use the button (5) next to the gradient bar.
- Close the color picker when you are done.
The demo below shows what you can do when adding a linear gradient.
When you select the radial type, the gradient control becomes a radius of a circle. You can:
- Select the edge color point to change the size of the circle.
- Select the center color point and drag it to reposition the origin of the gradient.
- Drag the square handles on the edge of the circle to resize or reshape it into an ellipse.
When you select the angular type, the gradient control takes the form of a circle with color points sitting on its edge. Drag the points around the circle to get the desired gradient. Add some extra color points, if needed.
To create an image fill:
- Click the color box.
- In the top bar of the color picker, click .
- Click Choose image.
- In the displayed dialog box, select the required image on your computer and click Open. See also the tip below.
Use the drop-down list below the Choose image button to select the fill method:
- Fill. Adjusts the image size to the layer’s width.
- Fit. Adjusts the image size to fit the layer’s height.
- Stretch. Stretches the image for it to fit the layer’s height and width.
- Tile. Tiles the image to fit the layer. The size of tiles is adjustable (see the demo below).
- Close the color picker, when you are through.
Tip: You can also create an image fill by holding down Ctrl (⌘) and dropping an image from your desktop or from the Lunacy library on to the layer as shown in the demo below.
As a matter of fact, what the avatar tool does is that it creates rounded rectangles with image fills, where images are random photos of people.
For more tips and tricks, click here.
As the name of this styling section suggests, here you will manage the appearance of borders in shapes. But it is also the place where you will define the color, thickness and other parameters of lines, curves, arrows and other open paths.
The figure below shows a view of settings in the Borders section.
The section features the following controls:
- The color control for setting border colors. You can apply both solid and gradient fills to borders.
- The border position control. Available for closed paths (shapes) only. You can choose between the inside, outside or center (default) of the outline. The difference between these options is shown in the figure below. The only option available for open paths (lines, arrows, curves, etc.) is the center.
- The borders thickness control. Sets the thickness of a border or an open path in pixels.
- This icon opens the advanced border settings (see the next section).
From top to bottom: center, inside, and outside borders
Advanced border settings
The advanced border settings include:
- Caps. Use these controls to define the shape of endings of open paths: no endings, round or square (see the demo below). The settings are applicable to paths drawn with the Line, Arrow, and Vector tools.
- Folds. Use these controls to adjust the appearance of corners of paths drawn with the Vector tool. Also, they work with arrow heads and tails.
- Head and Tail. Use these controls to define the appearance of endings of open paths drawn with the Line, Arrow, and Vector tools.
- Dash and Gap. Use these controls to create dashed lines or borders. Define the length of dashes and gaps between them in respective edit boxes. To restore a solid line/border, set all the values to 0.
Use the Effects section of the Inspector when you want to add shadows or blurs:
+next to the section name.
- From the drop-down lost select the required effect.
- Click and set the required values.
For details about shadows and blurs, read below.
You can apply outer and inner shadows to layers. Both these types have the same controls that include color, X and Y offsets, blur and spread. There can be multiple shadows of the same type.
Lunacy provides two types of blurs:
- Gaussian - blurs the selected layer.
- Background - blurs the layer underneath the selected layer. To see the background blur effect, you should delete or hide the fill of the selected layer or set its fill opacity to less than 100%. When working with this type of blur, in addition to the blur value you can also adjust the saturation of the blurred layer.
In the demo below, we first applied a Gaussian blur to an image, removed it and then applied a background blur to a rectangle above the image.
Note: Blur is quite a demanding effect in terms of computing resources. Avoid excessive use of blurs within a document. For this reason, we limited the maximum blur value that you can set using the slider to 50. However, manually you can set values up to 10,000.
Applying styling options to multiple layers
You can apply styling options to multiple selected layers at the same time. If you see the Click + to replace mixed content caption under any of the options, it means that the selected layers have different settings for this option. A click over the plus icon will replace current settings with new ones common for all selected layers. In the figure below, this caption appears under the Fills section.
Tints are a quick and easy way to apply a color to grouped layers and component instances. They are particularly useful when you need to adjust the color of a semi-filled layer or a complex icon (see the demo below).
The Tints section appears in the Inspector only when you select a group layer or a component.
Unlike other styling options, you can apply only one tint to a layer.
Tint overrides can be handy, for instance, when you are designing tabs or panels with elements that can have different states expressed through different colors.
Note: Before using tint overrides you should add default tints.
The demo below shows three instances of the same component. We first applied a tint override to a nested element, then switched to the component edit mode and modified the default tint. In the latter case, the change applied only to the instances without the override.
When you apply an override, the reset button appears in the Tint section of the Inspector. Use this button to remove the override.
For details about overrides, read here.