Switching from Photoshop to Sketch

I’ve been doing graphics the old school Kontakt way with raster images etc…I’m seriously considering moving over to Sketch for obvious vector and filesize benefits.

I was curious as to what your workflow is, for those who use Sketch:

  1. How do you easily extract the coordinates that Juce needs?
  2. What is the compatibility of the SVGs when brining in to Juce?
  3. How are you handling knob animations?

I use AffinityDesigner https://affinity.serif.com for all of my graphics work now. It is a great program but getting/viewing coordinates is a hassle because there is no panel that shows you the current location of the mouse and to see the size and location of an element you must select it. I have no problem using simple SVGs for buttons in JUCE. Anything that gets moved by the user like knobs and sliders I draw in code. It’s a big change from the days when I used to slice up images in photoshop or fireworks and if you have a photo-realistic GUI you may want to stick with the image based paradigm.

1 Like

Thanks for the update. I’m going to check out Affinity, but I’m starting to like Sketch a lot.

I use Illustrator for my knob graphics and icons. I’m still on the Abobe dark side at work, so the decision to use Illustrator over Sketch is purely one of familiarity.

Most vector graphic tools can be configured to use a pixel grid, which makes the translation from artwork to code easier.

For my typical knob the background is an SVG, but the arc around the knob and the indicator on the knob are drawn in code.

I also use SVG for any icons or logos in my GUI. One of the nice things about monocolour SVGs is that you can easily change their colour in code, which means that a single asset can be used for all your button states.

It’s going to be a lot of work for me. My graphics have a lot of lighting and shadowing. It’s possible, but won’t have the same luster.

I used Sketch a lot more in my latest UI…mostly for layout and design…because Photoshop really sucks at that stuff. I ended up taking the output from Sketch into Photoshop for some final tweaks…mostly Layer Adjustments, etc…

Now, if Sketch had Layer Adjustments…yeah, baby.

1 Like

Sketch is dirt easy for extracting x-y coordinates. There is also a plugin to be able to export your code as Swift or Objective-C.

I must confess I’m still using inkscape for my (basic) UI needs :slight_smile:
I just tried affinity for a few minutes and already like it a lot though.

I noticed you can have rulers (cmd+R) if that can help.

Affinity Photo and Designer for a long time personally, but I might try Sketch at some point. Inkscape or the Gimp are software made to give nightmares and headaches to designers, not something I would suggest any people to use for serious work.

1 Like

Man this Sketch seems like the one. If you have a Photoshop drawing with mostly shapes, there are plugins to convert them to complete vectors. You can even export the .sketch to Objective-C and Swift version 4. With a good extraction script, you can extract all of the coordinates and sizes. Not to mention all of the available plugins for it.

1 Like

Is there some ready-made plugin that can export coordinates, sizes, images and other settings of sketch layers? Preferrably in xml format.

No inkscape fans here? Personally my favourite piece of open-source software. :slight_smile:


My designer recently started using sketch. And I am searching for a way to improve our workflow. JUCE’s ability to display SVG files is a bit hit and miss, especially if the image is quite complex with things like gradients. I have no idea if it will take a month or several years for the JUCE team to address the bug/s, so I’ve been weighing up my options. PNG images are annoying to deal with, especially with so many different screen sizes and resolutions on mobile devices.

Regarding knob animations: I don’t do them at all. I prefer to think outside the box when it comes to UX.

@JussiNeuralDSP I just found a designer that says she can export coordinates, sizes, etc in XML format. There is this new framework out there called Avocode that can copy assets as well as a Sketch Plugin: https://github.com/legomushroom/copy-path-coordinates.

But for iOS and Mac, you can export the actual Swift or Objective-C using the Paintcode for Sketch plugin. The closest I’ve seen is an Android export to XML: https://medium.com/resoluut/sketch-to-android-xml-a-designers-journey-b7ca2322a933