Sketching Symbols for PaintCode
Keep Creating Where Comfortable
A First Project With PaintCode
& the story of Look Up’s arrow
- Part 1 -
The arrow featured above wasn’t used within Look Up in its basic version. Using PaintCode’s smart symbols it’s used within the logo (pictured in a notification below). Additionally Look Up’s arrow appears in many other forms, within of buttons and animated.
PaintCode also allowed us to attach variables to the arrow, making it dynamic within buttons and animatable. It’s this ability, as much as the resolution benefits, that makes creating basic elements in PaintCode worthwhile.
The Big Picture:
Concept to Prototype
In the previous section it was said:
“…makes creating basic elements in PaintCode worthwhile.”
This was a slip, it should read:
“…make importing basic elements into PaintCode worthwhile.”
If you watched the intro animation on the previous page (shown again below) the fact that the arrow is imported was hinted at. The arrow first appeared in not a PaintCode window, but Sketch…
That wasn’t a mistake, but diving into PaintCode head first could be…
PaintCode is very much a disruptive application. The good news is it doesn’t have to be disruptive to your favorite design software. PaintCode’s not an end all solution. My first mistake was thinking it was and thinking I’d be saying goodbye to Sketch. If your current design software exports elements to SVG, like Sketch does, keep creating where you’re most comfortable.
To put it simply this is what the primary files for Look Up look like in Sketch and PaintCode:
Sketch builds the concept, lays out the big picture view, and actual views of the app.
PaintCode is for going to production, creating final assets and elements.
Keeping It Clean
After importing a Sketch generated SVG into PaintCode, a few quick fixes are often necessary:
- Clipping masks will need to be reset from within the Group options, which are in the bottom right corner of the below GIF. Due to PaintCode’s method of handling clipping masks each group can have only one clipping mask. If you need another clipping mask an additional nested group will be necessary.
- Get rid of extra groups. Sketch’s SVG’s include all the nested groups and the canvas of an element, even if you’re just exporting the final group.
- Rename objects descriptively. If this is a first project with PaintCode it’s time to get in the habit of camelCasing object names. This will make it easier when dealing with variables in PaintCode. More importantly, descriptive names help when deleting a variable/color and knowing layers/variables need to be unlinked first. Names like smallTimerCell are much easier to find than rectangle or rectangle 2.
- Clean up the colors. Even if white is already in the existing palette PaintCode creates a new color when importing an SVG. If you don’t keep your colors organized you could end up with a tangled web of colors. Simply deleting color 11 without assigning a new color to the associated paths first is not a good option. This would result in paths that appear to be transparent with no fill color.
If you’re an optimist this next part might be a bonus, since the previous post mentioned PaintCode creating empathy between designers and developers. That empathy will come from coming to understand refactoring. You’ll come to know the joys of refactoring and empathize with developers if you don’t keep your PaintCode clean.
Canvas Options?
The last step before handing off the StyleKit to an engineer is setting the canvas to Drawing & Image Method. Setting it to both methods allows the engineer freedom to use the canvas how they see fit.
Sidenote: Canvases that are only used as symbols within other PaintCode canvases should immediately be set to ‘None’. This would be the case with Look Up’s arrow. This keeps the StyleKit clean and is especially helpful for Xcode’s auto-complete feature.
Before release it’s a good idea to come back through and clean up the methods used. Work with the developer using the StyleKit to set canvases to only the method(s) necessary.
PaintCode has now output all the code that is shown below. It’s now time to pass from designer to developer…
Where The Magic Happens:
Once PaintCode’s exported StyleKit is linked to the Xcode project (see how to do this down in the Nitty Gritty section), it is laughably easy to use it. PaintCode provides a simple API to access any canvas that has the Image Method selected within PaintCode:
+ (NSImage *)imageOfArrow;This then returns an image that can be passed to our menu item…
NSImage *image = [StyleKit imageOfRestIcon];[self.restAndWorkMenuItem setImage:image];
and the image is implemented!
Taking it one step further, to make images ready for OS X’s new “dark mode”, we use the simple setTemplate: method on NSImage.
[image setTemplate:YES]; // NSImageThe code to draw the arrow in these steps is 11KB, whereas the regular size image, the @2x and the @3x would be 71KB. It may not sound like a lot, but it adds up, especially in more complicate images and when trying to make an app downloadable over the air.
Sidenote: Look Up’s final StyleKit files were just over 250KB total.
I also used PaintCode’s export as PNG’s to check the size if the images had been created as canvases and it was 2.4MB total.
That’s 10x the size, nearly doubling the size of the app, which is just 3.1MB.
As you’ve have probably noticed, another nice thing about using StyleKit is everything is dealt with via code. No referencing images. You notice this more as the number of graphics increases. Instead of having to deal with a whole new category of resources (images), you are just using another class.
Nitty Gritty Notes:
Keeping The Subtle Details of Strokes
Can you spot what changed when importing this circle into PaintCode?
The border in Sketch is outside of the path, whereas in PaintCode the border is centered. There aren’t border alignment options in PaintCode, due to how Xcode draws borders. Keep strokes consistent when importing to PaintCode by Vectorizing Strokes before exporting SVG’s in Sketch…
Setting up StyleKit
PaintCode has a feature called “StyleKit” which is a way to organize the code exported into a single API. As a developer this is convenient because you just deal with one file. You include it as any other source file in your repository and it becomes very easy to see what is updated and when.
The first time you get this StyleKit from PaintCode, just drag the two files into Xcode. From there, any time you want to use a resource from PaintCode, you #import the StyleKit into your class and you are good to go.
Supporting Files:
If you want to follow along, or are want to poke around in the referenced PaintCode files they can be downloaded from Look Up’s website
Also get more than just the story, and get the app that these posts are based on off the Mac App Store now.
Why go through all of this though for a symbol, when PDF’s are readily available now and easily implemented? Because PDF’s can’t be animated like the code can in the next post…
~ our “advertizement” ~
Want to learn more about the Mac app that this is all based on?
See the animated comic explanation on Look Up’s site
