 The Sketch Handbook

PREV NEXT
⏮ ⏭
Chapter 10: Design The Category Icons Chapter 12: Mini Projects
 

CHAPTER 11

Export The Category Icons

Now that we have finished all of the icons for the different categories of sights, we can shift our focus to something else: preparing them to be used in production. In an ideal world, you should always aim for SVG format, because it’s res‐
olution independent and only one size is needed. However, I still want to say a few words about PNG.

Border or No Border?
One thing we need to decide on before the icons can be exported is whether they should have a border. On the “Article” page, we’ve used a border so far, but there are occasions when no border would be appropriate; for example,
when putting an icon on a dark background or when setting the border directly in the CSS. In this case, we can leave everything as is.

However, to include the border in the exported icons (because they are used in the article), we have to prepare a few things (Fig. 11.1). First, remove the background color of the artboard, because it was just for presentational purposes
and doesn’t need to be in the final export: Select with a click the title on the canvas, and deselect Background Color in the inspector. Now, enlarge it by “8px” on each side. To do so, hold Shift to keep the ratio, as well as Alt to resize
from the center, and drag one of the corner handles until a size of “80 × 80” is shown in the tooltip.

Now, set the actual border of the icon: Select the white circle in the background with a Cmd-click, and add an Outside border with a thickness of “8px.” For the color, pick the same as the other elements in the icon. To get a transparent
background, you can also remove the white fill of the circle.

Fig. 11.1: The cityscape icon with the added border, so that it’s ready for the article.

Optimizations
Everything is set now, but one icon has a minor flaw. You may remember that we used a white background for the hills in the “countryside” icon, so that one covers the other. Unfortunately, this fill would also be exported and prevents a
fully transparent result. To remedy this, we need to make a few modifications. First, select the artboard and press Cmd + 2 to zoom all the way in. This gives us a better view of the work to be done.

Now, select the hill in the front, so that you can remove its fill with F. This reveals the overlapping lines that we want to hide. After that, jump to the other hill with Tab, and go into the vector point mode with Enter to add two points: one a
little to the left where the shape touches the edge of the white circle, and one at the intersection of the two ovals of the hills (Fig. 11.2).

Now you can use the Scissors tool from Layer → Paths in the menu bar: Cut away the superfluous parts on the left and right of these new points with a click, so that only the relevant part of the hill remains. This almost gives us the de‐
sired result. In case the line doesn’t fully touch the adjacent parts, change the border options with a click on the little gear icon in the Borders area of the inspector.

There, set the Ends to the third icon, which ensures that the ends of the line are extended by half of the border width. Finally, remove the fill of this segment.

Fig. 11.2: Add two points to the hill in the back, and cut the rest (marked with red) with the Scissors tool.

Export as PNG
You have 4 days le in your trial, Nicoladebenedetti. Subscribe today. See pricing options.
 Time to set the sizes for exporting. Suppose we want to use the icons not only at their original size, but also at half size in a different place on the website. Furthermore, they should be sharp on high-resolution displays, which requires us
to export at double size.

First, select all artboards at the same with Shift + Cmd + A, so that you don’t need to make the following settings individually. Now, click on Make Exportable at the bottom of the inspector. The original sizes for the export of the icons are
already handled this way. This also gives you a preview of the assets right above. In case you removed the white fill from the circles, transparent areas will be shown with a checkerboard pattern here.

For the halved size, click on the + icon. Select “0.5x” as the Size; for the Suffix, choose something appropriate, like “-sm.” It will automatically be added to the file name; in the case of the “seaside” icon, this would make “seaside-sm.p‐
ng.” Perform another click on + to define the last required size: the one for high-resolution variants. Without any modifications, this should give you a “2x” size and a “@2x” suffix (Fig 11.4).

A final click on Export Artboards lets you choose the directory to export the icons to. Alternatively, you would press Shift + Cmd + E to get a handy overview of all assets due to be exported (along with any elements you may have set up
this way earlier).

Export as SVG
Whenever you create an image with the intent to export it as an SVG later, use borders instead of shapes as often as possible. Borders are easier to draw in an SVG and, thus, drive the file size down. That’s exactly what we did for the
outer two skyscrapers in the “cityscape” icon and for the hills in “countryside.” However, there is still some potential for optimization with the waves in the “seaside” icon. They consist of shapes with a Boolean operation at the moment,
which we could use as a reference point to make a vector instead.

After you have clicked on the artboard of the icon in the layers list, press Cmd + 3 to center the canvas to it; you may also want to zoom in with Cmd + 2. Now, select the “Boat” group with a Cmd-click and hide it to get an unobstructed
view of the waves.

The first task is to draw the new vector. Press V for the respective tool, and make a first click at the left edge of the artboard, at about the height of the peaks of the waves. Hold Shift to get a straight line, and make another click at the
right edge of the artboard. Before you continue, change the border thickness to “2” so that you can better match the new wave line to the old. Now, add a point for every tip of the wave with a click at the relevant position. Don’t let the
line that extends from the end of the line to your cursor position distract you; it just allows you to continue the vector at a later time.

To form the actual waves, add points in between the peaks, but hold Cmd while you click in order to snap to the exact center. Select all four of these middle points with a Shift-click, and move them down with the down arrow key until
they are at about the same height as the lower parts of the old waves. Unfortunately, these new waves are a tad too angular, so we need to change their points from Straight to Mirrored with 2. Looks way better, but we want more. Jump
to the first of these lower points with Tab, and drag its vector point handles out to enlarge the curves, so that they have about the same form as the old wave line. Repeat that for the other three points.

Fig. 11.3: Create a vector with several points, and match it to the old wave line gradually. The marked icon in the inspector allows you to drag a selection while in vector point mode.

You may also need to move the peak points a little bit down to get the same shape as the old waves. Unfortunately, you can’t drag a selection to catch all of them in their current state, because this would extend the line instead. To do
this, you need to click on the icon next to the Round drop-down in the inspector (Fig. 11.3, red border). This allows you to drag a selection now.

After you have matched the wave line, make sure that all points of the wave are aligned to full pixels: Leave vector point mode and select Round to Pixel from Layer in the menu bar. Furthermore, the layer needs to be at an odd Y position
due to the Center position of the border. About “0” (X) and “45” (Y) should do the job. Finally, change the border to the main color of the icon.

The first wave line is finished. For the second line, you just need to make a duplicate and move it down by 12 pixels. Also, offset it to the left by 10 pixels.

Now you can match the names to the old shapes — “Waves top” and “Waves bottom” — and delete the old layer groups. The position should also be the same: in the “Icon” group, below the “Boat” group, which you can show again
now.

This optimization alone has brought the file size down by about 35%: a perfect opportunity to finally export the SVGs. As before, select all artboards with Shift + Cmd + A, but unlike for the PNGs, we only need one size now, so remove
the other ones with the x buttons on the right, and set up an SVG format instead. That’s all we need to do here — no sizes needed, no suffixes (Fig. 11.4).

With this last step, we have completed the main projects of this book. You’ve learned about most of the functions of Sketch and how to apply them. This knowledge should enable you to build anything you can imagine. In the next chap‐
ter, I will talk about some special use cases and how to employ the remaining features of Sketch, and we’ll revisit some important concepts via some unrelated mini projects.

Fig. 11.4: The final icons with borders and a transparent background, set for exporting. Please note that both PNG and SVG versions will be created.

Recommended / Playlists / History / Topics / Tutorials / Settings / Get the App / Sign Out
© 2018 Safari. Terms of Service / Privacy Policy
PREV NEXT
⏮ ⏭
Chapter 10: Design The Category Icons Chapter 12: Mini Projects

You have 4 days le in your trial, Nicoladebenedetti. Subscribe today. See pricing options.