![]() Switch to the Line tool with L and draw a vertical one 3 pixels in length above the circle. This time, however, we need a centered border (you will see why later). With the cloud still selected, this will take over the styling. Create another circle with a 12-pixel diameter outside of the other big circle. (Click to play video)Ĭomplete the cloud by giving it a proper name. After you have “merged” the shapes of the cloud, apply a white border. Figure 3: The “Merge” function combines multiple elements into a single shape but still allows you to modify them individually. Remember that you can alter the position of the border in the “Advanced stroke settings.” Now it will become immediately apparent what the Merge function has done to the shapes. With the “Compound Shape” group selected, change from a fill to a white inside border with 1.5 pixel thickness. The lesser used types here are “Intersect” and “Difference,” which just show the part where the shapes overlay or the exact opposite, respectively. Have a look at “Boolean” in the Inspector to perform this change. It’s even possible to adapt the type of merge function - for example, if you want to cut the right-most circle from the other shapes (“Subtract,” the third option). The advantage here is that you can expand the “Compound Shape” group in the Layers panel and still move the elements individually. Select the three shapes and click on “Merge” in the toolbar this will combine everything into a single form and allow us to assign a border in its entirety later on (figure 3). 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. 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. ![]() 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).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |