Sketch 3

While writing my previous post it struck me that life is too short and $80 is too little to get worked up about, so I bought Sketch 3. As usual, I broke out my texture map file from iDraw, exported as SVG, and tried it out. Importing was good but flawed in exactly the same way as with Sketch 2 (and Affinity Designer, of which the less said the better). Having bought the new version, Sketch 3 has significant workflow advantages over its predecessor that are easily worth the price of admission. The core functionality hasn’t been improved much, but it’s wrapped in a more efficient user interface.

No Application is (or should be) an Island

The above file was exported as SVG and imported into Sketch 3. Everything looks perfect except for the fonts (which are easily fixed). But a lot of the effects have been rendered using bitmaps.
The above file was exported as SVG and imported into Sketch 3. Everything looks perfect except for the fonts (which are easily fixed). But a lot of the effects have been rendered using bitmaps.
Using Sketch 3's new shared styles, the results were quickly recreated and even improved upon.
Using Sketch 3’s new shared styles, the results were quickly recreated and even improved upon.
The new file was then exported from Sketch 3 as SVG and imported into iDraw and back into Sketch 3. In both cases the results are not good.
The new file was then exported from Sketch 3 as SVG and imported into iDraw and back into Sketch 3. In both cases the results are not good.

One of Sketch 2’s worst problems was that while it was just great at importing SVGs, you couldn’t get anything out of it except bitmaps. Among other things, for the first time this lets me give iDraw’s SVG import a proper workout. The good news is that iDraw is just as good at importing SVGs from Sketch 3 as Sketch 3 is at importing its own SVGs. The bad news is that Sketch 3 isn’t nearly as good at exporting stuff not supported by SVG as SVG (iDraw does a pretty great job of rendering effects that can’t be represented as SVG styles using judiciously generated bitmaps and SVG shapes on the way out — Sketch 3 just throws up its hands.)

So, the good news is you can now get your vector geometry out of Sketch 3. The bad news is that it does not do a good job of rendering the styles in a portable manner.

Symbols

Symbols in action. Four instances of the same symbol. Symbols can be independently rotated, but not resized, and they cannot be nested.
Symbols in action. Four instances of the same symbol. Symbols can be independently rotated, but not resized, and they cannot be nested.

Symbols are my number one reason for buying Sketch 3. They promise to make Sketch 3 into the Houdini of UI design tools. (Arguably, Illustrator and Photoshop already do all this, but bear with me.) The basic idea is you make something into a symbol, and then when you duplicate it the duplicates are all references to the original. Changing one, changes all. Symbols for the most part work very well, but there are some caveats. First of all, Sketch 3 doesn’t fully support the idea of a “transform” which in practice means that you can rotate a symbol without rotating every other instance but you cannot resize a symbol without resizing every instance. Next, you cannot nest symbols.

The way styles are implemented in Sketch 3 is a welcome surprise.
The way styles are implemented in Sketch 3 is a welcome surprise.

What I wasn’t expecting was how cleverly text and object styles have been implemented in Sketch 3. In fact, these styles are probably more generally useful across the board than Symbols. Combined with Symbols, it makes the lack of nesting much less painful. In both Sketch 2 and 3 the panel above consists of a rounded rectangle and four circles with styling applied, the difference with Sketch 3 is that one style is reused for all four circles, and another is used for the panel. This file was created by painstakingly copying styles around and maintaining them when a change was needed — all of this is now trivial to automate in Sketch 3.

User Interface Refinements

Sketch 3's interface is generally very refined and nearly modeless (thanks to the popout floating thingies it uses everywhere). Note the in-context gradient editor, automatically detected colors, and just how much freaking functionality is jammed into how small a space.
Sketch 3’s interface is generally very refined and nearly modeless (thanks to the popout floating thingies it uses everywhere). Note the in-context gradient editor, automatically detected colors, and just how much freaking functionality is jammed into how small a space.

Before finally paying my $80, I looked online for a proper review of Sketch 3, and found someone whose main complaint about Sketch 3 was that its UI looked dated because — rolls drums — it wasn’t dark like Adobe CS and Apple “Pro” apps. This is doubly funny because Apple is making the “dark UI” a system level feature in Yosemite, but in any event: really?

My main complaint with Sketch 3 after nearly a day of use is the interface. Sure the interface elements have been given a slight overhaul but the overall look is more or less the same. At this point (and after using Fonts by Bohemian Coding), I expected a lot more. Sketch is supposed to be a modern interface designing app so why should it lag behind other apps when it comes to the overall look?

From Sketch 3 — A Few Thoughts

This is why some people make fun of Mac users.

Most of the reviews of Sketch 3 are (rightly) pretty much gushing with praise. (Although many of them could equally be applied to Sketch 2, at least later versions.)

In any event, Sketch 3 has made a number of welcome enhancements, not the least of which (as of 3.1) is to make the file format a true binary (vs. an OSX style “bundle”) which makes for easer version control and DropBox (et al) syncing. As someone who uses Sketch in concert with Unity this last is a welcome change (since Sketch and Unity would step on each other constantly — Unity is prone to mucking around inside Sketch files’ directory structures, convincing Sketch 2 that changes have been made which really haven’t).

Booleans have been improved (they now behave like their product rather than a weird hybrid of their constituent pieces and their product, depending on Satan’s whims)

An absolute winner in the new Sketch is streamlined exporting. If you have something selected when you click the Export button you have the option of exporting the selection — a neat feature which will work better when Sketch 3 does a better job of calculating the bounding rectangle of the object in question. This doesn’t matter so much though because you can export anything instantly by dragging it from the sidebar into Finder (or wherever). You get exactly what you expect (and the bounds are correctly evaluated, so the code is in there somewhere guys!).

Bezier Strokes: Not Quite There Yet

Vectorizing strokes has improved (the self-intersections are no longer hollow, at least) but still needs work.
Vectorizing strokes has improved (the self-intersections are no longer hollow, at least) but still needs work.
Sketch 2 suffered from refresh problems (the pointy corner in the top-middle of the shape is still showing after I changed the corner-mode to rounded).
Sketch 2 suffered from refresh problems (the pointy corner in the top-middle of the shape is still showing after I changed the corner-mode to rounded).
Sketch 3 still lacks the ability to determine how acute an angle to render when a bezier is in corner mode.
Sketch 3 still lacks the ability to determine how acute an angle to render (the “miter limit”) when a bezier is in corner mode.

One of the claimed improvements in Sketch 3 is vectorizing strokes. It just so happens I ran into this problem in Sketch 2 the other day, so this excited me. Alas, it’s improved but not fully fixed yet. Still going to need to fix inside corners by hand. Similarly, Sketch 2 had redraw problems (usually caused by incorrectly calculating bounding rectangles) and these remain in Sketch 3 (with the same workaround — scroll the affected region out of sight and back again). Similarly, Sketch doesn’t center on the selection (or the mouse position) when zooming in and out which is a little disconcerting. One or the other would be nice. Finally, Sketch still doesn’t give you control over the mitering of bezier corners, instead cutting off miters arbitrarily and miscalculating the bounds of stroked shapes with gay abandon. (This is hardly a show stopper, if you’re trying to create a precise pointy bezier object, just use stroke inside.)

More Useful Enhancements

Sketch 3 adds noise fills, offering four different noise algorithms (a custom, rather attractive, algorithm, white, black, and color noise) — this turns out to be particularly useful in combination with new blur modes — in addition to its incredibly useful blur tools (I just realized that Sketch 3 (and 2) support motion and zoom blur (as well as “background” blur which imitates the kind of thing Apple loves to do these days with layered translucent interfaces — great stuff, although where’s radial blur?).

I should mention that I’m disappointed that the pattern fill feature hasn’t be extended to support symbols as fill patterns.

Summing Up

Sketch 3’s headline new features: “shared styles”, symbols, and improved export are great and work as advertised. Its UI is even more polished and streamlined than before. On the negative side, Sketch continues to have some minor issues with the way it handles bezier curves and screen refreshes.

Is Sketch 3 worth $80? Absolutely! Is it worth $80 if you already have Sketch 2? If the new styles and symbols features sound compelling to you, if you want Sketch to play nice with version control or Unity, or if you desperately need to export some SVG geometry from Sketch 2, then yes. Finally, I haven’t played with another new headline feature: scripting. You know who you are if you need this, and chances are if you need it than Sketch 3 is totally going to be worth it. (And chances are you’re a pro and $80 is peanuts for a professional tool.) Otherwise, Sketch 3 doesn’t offer much bottom line functionality that isn’t already in Sketch 2. It’s a fantastic program, but the improvements (thus far) are mainly in terms of workflow and productivity features that won’t do much for casual users.

Postscript: Resizing and Moving

The problem with instances having to be the same size turns out to be indicative of a larger and pervasive problem with resizing objects in Sketch — something I hope gets addressed in a free update. When you resize objects text and fills don’t get scaled in sync. Similarly, styles involving gradients don’t scale the gradients. This hugely reduces the usefulness of styles and instances, and also makes resizing anything with text a major pain in the ass.

Sketch has two serious bugs when it comes to moving bunches of stuff around. Smart guides in Sketch 2.0 simple didn’t work for multiple selections. Now they work — badly. The snapping is simply inaccurate and worse, the objects drift out of relative position (I’m not sure but this may be caused by progressive snapping — e.g. to pixel boundaries — aggregating over time rather than being applied to the original offsets).

The Race to Replace Illustrator: Affinity Designer

Just as Core Graphics created a race to replace Photoshop (at least for the great unwashed masses who don’t care about Color Spaces, CMYK, Lab Color, HDR, Stitching, Content-Aware Resizing and Deletion, seamless integration with other Adobe software, and so forth) there is now a race to replace Illustrator. Part of the problem is that the bewildering range of screen densities has made working primarily with bitmaps essentially a mug’s game (even Apple-targeted designers, used to supporting two resolutions, are suddenly faced with four (one of which is seriously weird).

You may recall some old stalwarts, such as Inkscape, Intaglio Designer, iDraw, Artboard, ZeusDraw, EasyDraw — of which I like iDraw — and Sketch; some of these are pretty credible Illustrator replacements (at least for casual users) but there are even more entrants in the field now, and they’re even more interesting:

Sketch 3 is the new version of Sketch — the vector-based, UI-focused drawing tool. It adds user interface refinements, symbols (“instances”), scripting via Javascript, automatic detection of colors used in a layout, and streamlined export functions. The fact that most of the new features are focused on workflow shows that BohemianCoding has been listening to professional users. I’ve not bought Sketch 3 yet because I’m a bit miffed that there’s no upgrade path for Sketch 2 owners (for which Apple is at least partially responsible) and — worse — that they pulled Sketch 2 from the App Store so I can’t conveniently reinstall the old version on my computers. Again, that might be Apple’s fault (i.e. perhaps they can’t set things up so that existing owners could continue to download and install it while taking it off the market).

Let me pause here to say this: I freaking love Sketch (2). I probably use it more than any other non-3d graphics program (I use it in preference to iDraw these days). I probably use it more than all other non-3d graphics software put together. Sketch is my go-to app for UI graphics and textures for (cartoony) 3d models.

Paintcode and Webcode are, like Sketch, focused on user interface design. The big difference between these tools and predecessors is that they’re focused on outputing your graphics as code that will recreate them at arbitrary resolutions (Paintcode will output Objective-C, Swift, or C# Xamarin, while Webcode will output SVG, Javascript (Canvas), and HTML+CSS. I’ve got a Paintcode 1.x license which seemed a bit limited (Paintcode 2 has beefed up its import and export functionality, as well as adding Swift support). Of the two, Webcode actually looks more compelling to me than Paintcode (and it doesn’t hurt that it’s much cheaper) — I’d probably pony up for Paintcode if it offered all of Webcode’s functionality, but it appears not to.

Finally, Affinity Designer comes from Serif, a company dedicated to competing with Adobe at the low-end in the Windows market, switching over to the Mac-only market with a bang. Their plan is to start with an Illustrator-killer, then proceed with Affinity Photo and Affinity Publisher. (Publisher? Really? Do they want to take on Pages and InDesign at once because that seems to me to be a losing proposition.) Of the three, Affinity Designer is clearly the most Illustrator-like, while Sketch 3 is kind of an Illustrator/Fireworks hybrid, and Paintcode/Webcode are simply unique.

iDraw is my current benchmark for wannabe Illustrator-replacements.
iDraw is my current benchmark for wannabe Illustrator-replacements.

Affinity Designer

I played with Affinity Designer briefly during the free beta, but it didn’t leave me with a strong impression. When they announced its release, I ponied up the (discounted) $40 (iDraw, my current favorite, is $25, but there’s been no significant improvements to it over the last year, and the things that annoy me about it still annoy me). The first thing I noticed when I launched Affinity Designer is that — like Illustrator — it defaults to print usage (CMYK, paper-oriented layout). It’s nice to discover that it also has web- and device-centric settings and defaults, and @2x retina support out of the box (but unlike Paintcode it hasn’t figured out what to do about the iPhone 6/Plus).

Screen Shot 2014-10-06 at 11.26.51 AM
I imported the SVG from iDraw into Affinity Designer. Everything looks great (and it even preserved layers) except for the fonts (which unfortunately are not easily fixed).

The first thing I did was take a pretty damn complicated SVG file (with layers and typography) and export it from iDraw and import it into Affinity Designer. Every font failed to import correctly (Helvetica Bold and DIN Condensed), but otherwise it seemed to do a pretty good job — overall, it did a better job than Sketch (2) at importing the same file. I think the problem lies with how SVG stores font information (Sketch had the same issue when importing the file; note that iDraw can import its own SVGs flawlessly.)

But here’s where things get ugly — when I tried to fix the font issues, I discovered that I can’t change the character style settings for more than one object at a time. (And this is not a problem in Sketch or iDraw.) As a workaround, I tried to create a style from one object and apply it to others but that didn’t work at all — styles seem to be limited to fill color and the like (and fill color doesn’t seem to be the same thing as text color). Bad start.

Time to look at the program in its own terms. One of the best things about Sketch relative to iDraw is its support for gaussian blur as a style. Affinity Designer has this and more (e.g. emboss, and a weird “3D” effect that I’m not sure what it’s supported to do). What it doesn’t do (and what Sketch and iDraw both do) is allow you to apply the same filters multiple times (e.g. much the same way you can stack box-shadow effects in CSS). Another annoyance with Affinity Designer’s effects is that important settings are buried in a modal dialog box (iDraw is annoying in a different way in that you need to disclose the settings with an extra double-click, but that’s a pretty minor annoyance). So far, I’d call this a mixed result.

Here’s an example of Affinity Designer at its worst. I draw a test bezier curve and then try to apply a stroke to it. So far so good. But it’s stroked in the center of the curve.

  • I almost always want to stroke inside the curve, and sometimes outside, but almost never centered on the curve. So I look at the stroke settings, and all that is exposed is color, opacity, and radius.
  • To access the extra properties I need to click on the little “gear” icon that lets you configure the other settings of a given filter.
  • As I’ve mentioned before, this dialog is modal; it also defaults to showing some random filter setting, not the one you were working on (which confused me a minute, since it was showing bevel/emboss options and not line options).
When I clicked the stroke "gear" I get deposited in a modal dialog with Bevel selected. WTF?
When I clicked the stroke “gear” I get deposited in a modal dialog with Bevel selected. WTF?

 

  • OK, so having switched over to the line settings, I discover that the options (inside, outside, centered) which — for some reason — is not the top setting (compositing mode is at the top).
To add injury to insult, the stroke settings don't actually work — note that I've chosen outside and it's displaying a centered stroke.
To add injury to insult, the stroke settings don’t actually work — note that I’ve chosen outside and it’s displaying a centered stroke.
  • Here’s the rub — the different options (a) don’t work and (b) appear to override and block the modeless setting (i.e. when I change radius in the modeless view, the setting no longer works. WTF?).
The basic selection / transformation affordances are nice.
The basic selection / transformation affordances are nice.

This is a freaking disaster. First of all, how can an Illustrator clone go out the door with broken strokes?

I do like the basic selection affordances. In particular rotation gets its own affordance (the little dot out on its own) rather than requiring mouse/keyboard chording. The basic Bezier drawing tools seem to be solid.

But there’s one more global observation I need to make before I move on: the tools all feel wrong. There’s a nuance to the rules that govern how 2d graphics tools, in drawing programs especially, behave. When they should be sticky vs. revert to a selection tool, and so forth. This stuff is so basic that it happens below the level of conscious decision-making. For better or (mostly) worse, a lot of us have Illustrator’s behavior in our muscle memory (where it displayed MacDraw, which was generally more intuitive).

In any event, just as iDraw and Sketch and many other Mac graphics programs get this somehow right, Affinity Designer gets this somehow wrong, and it bugs the hell out of me. If the program were in a more functional state, I might even spend the time to go figure out exactly what’s wrong and write some kind of detailed bug report for the development team, but I find the program, as a whole, to be so fractally unusable that I just can’t be bothered.

At this point, it’s not worth continuing the review. Affinity Designer is a promising and polished looking piece of software, but basic functionality is completely broken, and it has horrific workflow problems (styles don’t work with text formatting, you can’t edit multiple selections in a useful way, the wrong properties are disclosed in the modeless floater, and the modal dialog is both weird and buggy). So, in summary:

  • Some features that are lacking in iDraw (Gaussian Blur effect)
  • Single window UI (unlike iDraw which suffers from palette-itis)
  • Better SVG import than most rivals
  • Limited effects options (can’t apply multiple instances of a given effect to a single element)
  • Editing effects is clumsy (useful stuff is buried in modal dialog, which does not open on the right effect) and buggy (the settings don’t work properly).
  • Affinity Designer’s tools just feel wrong; they stick in modes when they shouldn’t (or I don’t expect them to) and it’s just infuriating.

Affinity Designer manages to be promising, attractive, and completely useless in its current form.

Note: I purchased Affinity Designer from the App Store after using the public beta a few times. I was so frustrated with the release version that I have requested a refund from Apple, and have deleted the app. (I think this is maybe the second time I have ever asked for an App purchase to be refunded.)

iDraw Review

iDraw showing texture map

A while back I reviewed Artboard — an inexpensive Illustrator-replacement-wannabe — fairly positively. I then discovered a bunch of limitations and bugs, and tried iDraw. (Note this is a review of the Mac version of iDraw. I haven’t tried the iPad version yet.)

Having used iDraw quite extensively for the last few months I can only say that, for my uses, iDraw pretty much kicks not only Artboard’s butt, it kicks Illustrator’s as well (until you get to Photoshop integration). The only application that holds a candle to it is Sketch (another excellent program I need to review).

The most challenging thing I’ve been doing with iDraw is texturing a 3d character. Normally I would do something like this in Photoshop or some other dedicated bitmap graphics program, but I wanted a simple, clean look, and ended up trying a wide variety of programs including Photoshop, Acorn, Pixelmator, Mischief, and Artboard — before settling on iDraw. For the kinds of things I was trying to do, iDraw was simply head-and-shoulders above the rest. Color me very impressed.

Now if only iDraw could include Sketch’s ability to set named export areas with specific objects included or excluded from export it would be awesome. But as it is, Sketch and Artboard can talk to each other via SVG so it’s no big deal.

(If you’re looking for a replacement for Fireworks, Sketch isn’t exactly that — but as a tool for creating pixel-perfect vector art, it’s probably better.)

Solid Drawing Tools

Screen Shot 2013-10-03 at 10.18.32 PM

iDraw’s drawing tools are solid and well-implemented (better than most — note the compound path support), with good snapping (both to grids and other objects). Indeed, unlike Sketch (which I also like a great deal) iDraw’s snapping works correctly when dragging multiple objects (no need to great groups just to make snapping work).

Powerful Styling

iDraw's style interface

Like any useful bezier drawing application, iDraw supports booleans. Unlike most of its rivals, iDraw provides an incredibly powerful and flexible set of tools for styling shapes. Again, Sketch comes close to iDraw in this regard, but iDraw lets you explicitly reorder the different effects whereas Sketch (as far as I can tell) does not.

Artboard's mystifying style palette
Artboard’s mystifying style palette

iDraw’s styling UI is not only better than Artboard’s (or Illustrator’s or Sketch’s for that matter), it has most of the precision controls you need — e.g. you can control whether a stroke runs inside, outside, or centered on a path — although you don’t have Sketch’s or Illustrator’s fine control over corners and caps. In comparison, Artboard’s styling controls are crude and in many cases simply mystifying.

 

Screen Shot 2013-10-03 at 8.43.19 AM

 

Here’s some detail from the texture map I was working on. Note there’s all kinds of subtle layered effects on the different components of the pupil.

Sketch pupil detail imported

 

Here’s the same pupil exported from iDraw as SVG and then imported into Sketch. (No, it didn’t get turned into a bitmap en route!)

Artboard imported pupil detail

 

And here’s the same pupil imported into Artboard. Also note the horribly rendered bezier handles on the selected object. Not a functional problem (they work just fine) but ugly.

Workflow

Clearly, iDraw can export SVGs that other programs can read, which is a great start. (Artboard can export to PDF but not, as far as I can tell, SVG, which is a huge black mark.)

iDraw's export dialogiDraw can in fact export to pretty much any file format you’d want (no EPS! — how times have changed) but it doesn’t have the export workflow niceties of Sketch (which lets you create named export regions and if necessary specify exactly which objects get rendered within each region, and then allows every region to be exported with one click).

Shortcomings

Probably the single biggest failing of iDraw is its weak typography. If you’re looking for  any typographic tools beyond pair kerning, look elsewhere. It is possible to get good type out of iDraw but it has a weird bug in the default style of text where text by default seems to have text, fill, and stroke styles (and looks awful). If you turn off everything except the fill style it looks fine. But there’s no real ability to deal with body type conveniently (or tables), so if you need to do anything more than a logo, you probably need a different program.

Unlike Artboard, iDraw allows you to use CMYK colors. If you’re working in print, you’ll still probably want Illustrator, but unlike Artboard or Sketch, it’s at least usable.

Aside from these two items, I’d like to see some more control over strokes (corners and caps), and there are a few fit and finish problems (e.g. the way styles are rendered in the style palette is a bit wonky, especially for text styles).

Conclusion

Overall, iDraw is my favorite vector drawing program right now, although for drawing UI components I’d give the edge to Sketch, which deserves its own review. There are some other programs I haven’t mentioned, such as Lineform, ZeusDraw, and Intaglio. These are all not bad — probably better than Artboard — but I prefer iDraw to all of them, and at $24.95 (in the App Store) I believe it’s cheaper than any of them.