Learn about tools that will help you create your unique style
Styling options that you can apply to objects 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 an object. A combination of styling options applied to an object 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 objects, except for technical ones (such as artboards, hotspots and slices). However, the only option applicable to group objects and components is the outer shadow.
In addition to the above, text objects 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 an object:
- Select the required object.
- Click the + button 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 object can have multiple styling options of the same type (except for blurs). For instance, you can apply an image fill to an object and a semi-transparent solid fill on top of it. Also, an object 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 in front of the row.
To delete a row of settings, select it and click the trash icon.
All these things are shown in the next demo. It presents an object 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 object 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 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.
- Color selection bar. Allows you to quickly navigate through colors.
- Opacity controls.
- The eyedropper tool. For details about using it, read here.
- The color code box. Displays the code of the currently selected color (HEX or RGB).
- 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 add the currently selected color to Global or Document presets.
- 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).
There are three major types of fills:
- Solid fills (default).
- Gradient fills that can be:
- Radial and
- 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 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.
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 object. 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 object. 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 object’s width.
- Fit. Adjusts the image size to fit the object’s height.
- Stretch. Stretches the image for it to fit the object’s height and width.
- Tile. Tiles the image to fit the object. 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 dropping an image from the Lunacy library or your desktop directly on to the object 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 below).
From top to bottom: outside, center, inside borders
Advanced border settings
The advanced border settings include:
- Caps. Applicable to open paths only. Use these controls to define the shape of endings of open paths: no endings, round or square (see the demo below).
- Folds. Use these controls to adjust the appearance of border or open path corners: square, rounded, beveled (see the demo below).
- Nozzles. Applicable to open paths only. Use this group of controls to set arrowheads.
- Dotted line. Use these controls to create dashed lines and borders. Define the length of dashes and gaps between them in respective text boxes. To restore a solid line/border, set all the values to 0.
You can apply both outer and inner shadows to objects. 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 object.
- Background - blurs the object underneath the selected object. To see the background blur effect, you should delete or hide the fill of the selected object 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 object.
To switch between blur types, click the down arrowhead next to a blur name and select the required option.
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 1,000.
Applying styling options to multiple objects
You can apply styling options to multiple selected objects at the same time. If you see the Click + to replace mixed content caption under any of the options, it means that the selected objects have different settings for this option. A click over the plus icon will replace current settings with new ones common for all selected objects. In the figure below, this caption appears under the Fills section.
Tints are a quick and easy way to apply a color to grouped objects and component instances. They are particularly useful when you need to adjust the color of a semi-filled object or a complex icon (see the demo below).
The Tints section appears in the Inspector only when you select a group object or a component.
Unlike other styling options, you can apply only one tint to an object.
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 that 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.