Exporting Assets: SVG & PNG

Topics covered in this Sketch tutorial:

Exporting artboards, Exporting for web as SVG & PNG, Exporting into folders

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to export SVG and PNG files for use in webpages.

Exporting Artboards

Before we export individual graphics, we often need to send the entire page design to a client (or developer). For that purpose we can export the entire artboard.

1. In Sketch, go to File > Open Local Document.
2. Navigate into Desktop > Class Files > Sketch Class > iTastify and double–click on iTastify Ready for Export SVG & PNG.sketch to open it.
3. In the Sidebar, click on the Desktop artboard to select it.
4. In the Inspector, click Make Exportable. If you don’t see it, scroll down to the bottom!

5. Make sure the export Format is set to PNG.

   PNG is a high quality format, so a client or developer will see the full quality of the design. If the PNG is too large to easily share, JPEG can be a good alternative.

6. In the Inspector, notice that some sections of the preview have a transparent background, indicated by the white and gray checkerboard:

   

7. In the Inspector, check on Background color. (Include in Export should also be checked.)
8. In the preview, notice that the transparent background has now changed to white, which is how our design is supposed to look.

9. Go to File > Export.

   NOTE: The name of the artboard will be used for the name of the file. The artboard is called Desktop, so the file will be named Desktop.png.

10. In the dialog that appears, click Export.
11. Make sure Save for web is checked. This sets the appropriate color space and doesn’t include any metadata that’s unnecessary for the web.
12. Navigate into Desktop > Class Files > Sketch Class > iTastify > assets-for-developer.

13. Click Save.

    The PNG file was created, which you could send to your client or developer.

Exporting for Web as SVG

Let’s export some of the graphics within the page, so we can send them to a web developer.

1. Click on a blank area of the canvas to deselect the artboard.
2. Select the iTastify logo on the top left of the artboard.

3. The layer’s name will be used as the file name. In the Sidebar, notice the layer is named iTastify Logo.

   In web graphics we can’t use spaces in filenames (we use an underscore or a dash instead). It’s also best to keep it lowercase, so we’ll have to rename the layer.

4. With the logo still selected, hit Cmd–R to rename the layer.
5. Type in itastify-logo and hit Return to apply it.
6. In the Inspector, click Make Exportable.

7. This is a vector graphic, so the best web format is SVG (Scalable Vector Graphics). Set the Format to SVG.

   Whenever possible, it’s better to use SVG (Scalable Vector Graphics) instead of PNG or JPEG (which are pixel-based). With SVG you get a single graphic file that looks great on hi-res and low-res screens, and it can be resized in the webpage with no loss of quality! It will always look crisp and clean.

8. Let’s make a few other things exportable. On the artboard, select the black App Store download button.
9. In the Sidebar, notice that the layer name is not ideal for web. Hit Cmd–R.
10. Type in download-app-button and hit Return to apply it.
11. On the artboard, select the iTastify app icon (the red rounded rectangle icon).
12. In the Sidebar, notice it’s appropriately named.
13. We want to make both icons exportable. With the iTastify app icon still selected, Shift–click on the App Store download button so both are selected.
14. In the Inspector, click Make Exportable to make them both exportable.
15. Set the Format to SVG.
16. Click on a blank area of the canvas to deselect both icons.
17. Go to File > Export.
18. In the dialog that appears we can choose what we want to export. We want to export everything, so check Export All.
19. Click Export.
20. Make sure you’re still in the assets-for-developer folder. If not, navigate into Desktop > Class Files > Sketch Class > iTastify > assets-for-developer.
21. Click Export once more.
22. Hide or minimize Sketch, so you can see the Desktop (Finder).
23. Navigate to Class Files > Sketch Class > iTastify > assets-for-developer.
24. You should see four files (and two folders that we created). To preview the files, select a file and hit Spacebar.

25. While the preview is open, switch between files using the Arrow keys.

    NOTE: When previewing SVG files in the Finder, you may notice extra whitespace. That’s only in the preview and is not actually in the SVG file.

26. To close the preview, hit the Spacebar again.

27. We’ll be coming back to this folder again in this exercise, so leave this Finder window open and switch back to Sketch.

Exporting for Web as PNG

The photo of the hand holding an iPhone requires a transparent background, so it can be composited onto the background pattern in the final webpage. JPEG is best for compressing photos, but it doesn’t support transparency. We’ll have to make this a PNG.

1. Hover over the photo of the hand holding the iPhone, but do not click.
2. Notice there is a blue outline surrounding the pattern filled gray rectangle, indicating it would be selected if we click. We only want to select the photo though.
3. Hold Cmd and hover over the photo of the hand.
4. Now only the hand part should have the blue outline, so click to select it!
5. In the Sidebar, notice the iphone-hand-mockup layer is selected. That name is good for exporting, so we don’t need to change it.
6. In the Inspector, click Make Exportable.
7. Set the Format to PNG.
8. PNG is a pixel-based format, so we need to create two sizes. One will be for low-res screens (called 1x) and one will be for hi-res or Retina screens (called 2x). In the Inspector’s Export section, to the far right of Presets click the plus button to add a new export size.
9. Notice the new export format is sized as 2x (200%), and the filename will automatically get an @2x added at the end. That’s perfect.

Exporting into Folders

1. Scroll down to see the three icons below the iTastify Helps You Remember heading.

2. Drag a selection box over the three icons:

   

3. In the Sidebar, notice the three highlighted layer groups start with feature- before their individual names.

   This would be fine for organizing in an alphabetical list of files, but we want a folder instead. If you name layers using the folderName/fileName convention, Sketch will create folders when exporting!

4. Let’s rename them to put all of these icons into a feature folder. Double–click feature-companions and rename to: feature/companions

5. For the other two feature layer names, change the - to a / so you end up with:

   • feature/photos
   • feature/notes
6. Make sure all three icons are selected before moving on.
7. In the Inspector, click Make Exportable.

8. Set the Format to SVG.

   As a reminder, with SVG, we don’t need to worry about 1x vs 2x. Web browsers will render the vector at full screen resolution.

9. Click on a blank area of the canvas to deselect.
10. Go to File > Export.
11. In the dialog that appears, check Export All.
12. Click Export.
13. Make sure you’re still in the assets-for-developer folder. If not, navigate into Desktop > Class Files > Sketch Class > iTastify > assets-for-developer.
14. Click Export.
15. Switch back to the Finder (your Desktop).
16. You should still have a window open for the assets-for-developer folder and the new assets have been added here. Notice the new feature folder was created and it contains the three SVG icons.

17. Feel free to preview any of the assets if you wish.

Optional Challenge: More Practice Exporting

Export the four rating icons as SVG (just the circle icons, not the text). Export just them into a rate folder (so you’ll have to rename the layers).