Feb. 16, 2017 | Learn Sketch: The Basics (Lesson 4)

Now that the design is finished, if I want to share this with a client I may want to create a PDF file and Sketch gives an easy way to take all of the artboards and do that. I did this by simply going up to the File menu, and choosing “Export Artbards to PDF” which then brings up a Save As dialogue box.

Now if I wanted to export a single artboard as a PDF I would simply selected the one artboard in the Layers panel (the 600 artboard in this example). After I selected the artboard I would go to the Inspector panel on the right-hand side and at the bottom I would click on the plus sign to the right of “Make Exportable.” Once I clicked on that some parameters will pop up that would give me options to set for my artobard. I made sure that the artboard would save as a jpeg and then typed in a suffix of “_small” before clicking on “Export 600” and “Save” in the save as dialogue box.

Next, I’m going to export individual assets from my artboards into individual files that I can use on the final website. So I’ll come over to the Desktop and create a new folder called “assets” and this is where I saved all my contents.

Back in the Sketch app, I targeted the featured image on the 1200 pixel artboard. Now in my images, it shows that I clicked on the the featured image itself. That’s actually wrong. I should have clicked on the folder that holds both the featured image and the Mask. I went back and changed this, but treat these images as if I made all these changes to the folder and not just the image.

I renamed the featured image folder to “banner_large.” After I renamed and still have that layer group selected, I went to the Inspector panel and clicked on the plus sign next to “Make Exportable”. In the parameters I left the image size at “1x” its original size, I left the prefix/suffix box blank and chose JPG for the file format. I want to also make a double size of this image, so to do that I clicked on the plus sign. All I had to do was change the fill format to JPG and leave the image size alone since it already assumed that I wanted “2x.” Under suffix you see the “@2x” so that both these will save under different names.

After I’ve finished setting up the images, I clicked on “Export banner_large” and before saving these in the “assets” folder, I change the JPG Quality from 90% to 72%.

I then used the same process for the 768 artboard, except that I named the file “banner_medium.” And for the 600 artboard I named it “banner_small”, and finally the 320 was “banner_xsmall.”

Then I went back to the large screen artobard to export the beginning quote from the pull quote box in the how-to section. After selecting the quotation mark I renamed this to “beginning_quote” in the layers panel. In the “Make Exportable” box I’ll changed the size to “200w” and I’m going to leave the file format a PNG.

The last thing I want to do is export a whole series of artwork from Sketch, so I set up my export options of each of the photographs.

I started with the lounge image in the atmosphere section. With the “lounge” folder selected I went to the Inspector pane and clicked on “Make Exportable” I made to export options for this graphic with the size of “1x” and another one with “2x” both in a JPG format.

I then did the same for the lighting and seating images in the how-to section.

After I had finished, I went to the File menu and clicked on “Export…” which brought up the Export dialogue box with thumbnails of all the graphics it’s going to create. Once I clicked on Export, in the next dialog box I left the JPG Quality at 72% and then clicked on the check box next to “Save for Web” and then click Export one more time.

Next I wanted to export some artwork in the SVG format, and I did this to the logo in the header. First I went to the large screen and opened up the header section in the Layers panel. I renamed “Everyday Things” to “logo”before going to Make Exportable and chose SVG format.

Now I had to create a different version of this logo for the smallest screen-size, so I went to the 320 artboard and created and SVG export for that logo as well. First I renamed the logo to “logo_small” before going to Make Exportable and chasing the format to SVG.

I also did the same for the mobile menu icon and the star, marker and gear icons before bringing up the export dialog box up with command+shift+E and exporting these.

Now to show how this can effect images, I opened up the SVG file of the large logo in Dreamweaver and changed the Fill color from “#FFFFFF” to “#C00” to changed the logo from white to red.