#GRAVIT DESIGNER MAKE GUIDE FROM PATH UPDATE#
#GRAVIT DESIGNER MAKE GUIDE FROM PATH WINDOWS#

However, we want an outline instead of a solid fill, so we’ll need to bring the “Merge” function into play (also called Boolean operations in other applications, such as Sketch). Looks like a cloud already! Figure 2: The cloud consists of a rectangle with fully rounded corners and two circles.

#GRAVIT DESIGNER MAKE GUIDE FROM PATH WINDOWS#

Clone it with Shift + Command + D (or, on Windows and Linux, Shift + Control + D), resize it to 12 × 12 in the Inspector, and offset it 10 pixels to the right and 3 pixels to the bottom. Now add an ellipse ( E) above the rectangle that is 15 × 15 pixels in size, that is away 3 pixels from the left edge of the rectangle and that juts out 7 pixels at the top. That’s also the style you can use for the rectangle for now. This is important for when we add new shapes later: If another element is already selected, then all of its properties will be taken over if nothing is selected, then the new element will be drawn with a default gray fill and no border. Note: Before drawing the rectangle, make sure that the circle isn’t selected or else it will take over all of the properties, including the shared style. If you intend to zoom in with Command + + instead, then select the shape beforehand so that Gravit Designer takes it as a reference when zooming and zooms to its center. Before we continue, use the zoom function with Z to zoom into the rectangle so that it’s easier to work on the following steps. Because aligning the various parts of the icon to the grid wouldn’t make sense, switch it off for now with Alt + Command + G (on Windows and Linux, Alt + Control + G). Draw a rectangle ( R) with a size of 28 × 14 pixels, with fully rounded corners (“7” - drag the slider all the way to the right) inside the circle. It consists of various shapes combined into a single form, and a few paths (for the rays).įirst, the cloud (figure 2). Let’s turn to the icon itself now, a sun partly covered by a cloud. Create a “Shared Style” in the Inspector, so that you can bring over the styling to other elements. For the name, use “Icon outline.” Figure 1a: The base for the different weather conditions is a white circle with a border. To create a shared style, click on the dropdown field for “Style” in the Inspector that says “No shared style” and select “Create New Shared Style.” Now you can define which properties you want to take over - let’s keep everything checked.

#GRAVIT DESIGNER MAKE GUIDE FROM PATH UPDATE#

Move it to “32” (X) and “368” (Y) in the “Position” fields in the Inspector.īecause we want to reuse this style for other shapes, we will create a new “Shared Style.” This allows you to sync all styling properties between various layers and to update changes with a click. Start with a simple circle of 56 pixels in diameter (remember to hold Shift), with a white 2-pixel inside border, with no fill outside of the “Status bar” group (figure 1a).

Gravit designer make guide from path