What do you all use to use to create your custom UI elements (buttons, graphics, icons, etc.)?
I’ve been using PaintCode 2 for a couple of years, and I really like the graphics that it can produce, and how easy it is to create @1x, @2x and @3x versions for HiDPI support. Unfortunately the version that I purchased is completely broken in Big Sur, and they’ve moved to a $200/year subscription model, which for a small-time developer like me, seems kinda pricey.
It looks as if Apple has standardized (at least internally) on Sketch, since lots of their developer resources are downloadable as Sketch files. I’ve downloaded and am using the 30-day free trial, and it seems comparable to PaintCode, for much less $.
Of course, any of these tools require a steep learning curve, and having a fairly significant PaintCode graphics library already, I’m less excited to make the transition. So, back to my original question, what do you all use to build your graphics resources? Also, what about the Xojo IDE itself? I’ll admit to blatantly “borrowing” one or two of the resources out of there as placeholders for my own development efforts. What do you all use to create some of those slick graphics elements (e.g. the On/Off switch used in various places in the Inspector)?
I’m not the best graphics artist in the world (actually I’m probably not even the best graphics artist in my own house - now that my son is doing his college courses remotely), but I truly appreciate good looking and easy to use UI design, and would like to see more of it in our apps. Thoughts?
Hi William!
When dealing with images, I use either Photoshop or GIMP, depending on what I’m doing at the time. That said, most of my UIs are completely built using the Canvas class, as you can see in my GraffitiSuite products. It takes some work but is well worth it.
FWIW, I switched away from Photoshop to Sketch a few years ago and haven’t looked back. In addition to the macOS and IOS resources there are lots of templates for other platforms and a thriving plugin community as well.
If you wanted to rasterize the graphics (for Windows/Linux/Android) that possible too, 1x, 2x, 3x, 4x you name the scale, it can do it. Export as multiple file formats or use a single compressed TIFF containing all the reps you could want.
+1 for Affinity Designer. I liked Sketch but I have a serious issue with their licensing model. I’m OK with the annual cost but really dislike the per device requirement. I have my laptop and had a Mac Mini and the only user so no way I’m paying twice. Sorry.
So Greg, are you the one who did the graphic resources for the Xojo IDE, or do you have a dedicated graphic artist in house to do those things?
Sam is (partially) right, it would be nice to see more examples on how to build more complex and interesting UI in apps (think resizable and scrolling panels, differently sized built-in and custom controls, etc.), it would be nice to see those examples utilize CG on macOS, but you’re right, that’s only a portion of the target audience (both developers and app users).
It’s a mixture. The majority of the icons in the IDE are from a 3rd party designer. Thom McGrath did the graphics for the Xojo IDE in 2012-2013 and almost everything since then has been mine, with a few exceptions here and there.
I also use Pixelmator and Affinity Designer for general purpose drawing and image editing, but I was hoping for tools specifically designed for application developers (e.g. ones that have templates for platform specific icon sizes and layouts, etc. and can automatically save at multiple resolutions). It sounds like Sketch is the way to go, at least on macOS, I’ll just need to devote some time to learning how to use it more effectively.
I use EasyDraw and Omnigraffle. Have used Sketch a little in the past and you can produce some very nice GUIs with it. Logoist seems nice and is quite low cost. Their FamilyTree software is quite amazing - hopefully they used their own tools to do the icons.(A relative of mine used it and loved the look and feel.)
If you are doing minimalist “flat” icons and interfaces you could use generative code as suggested.
You could also build a full-size car out of Lego but why would you?
Seriously though - I’ve done this for some embedded GUI control panels, and it was fairly tedious.
I’m a big fan of the Affinity products myself. I had used Sketch previously, but have settled on Affinity Designer for image assets and Balsamiq for wireframing design.
For quick icon creation and other elements, some iOS developers use the web application https://shape.so. They had a long running launch promotion of 50% off lifetime access. I would imagine that will come back as a sale at some point.
I’m adding https://www.canva.com/ to the list. There is a free version and a subscription model too. I’m quite skilled in Photoshop and I like Affinity product line as well, but none of these tools gives me the “inspiration” of what I really want to do - especially if you are under time pressure ;-). I like Canva, as you can do multiple things with it. Be it banners for social media, icons, or whatsoever and that I don’t have to care about licensing challenges.
The only downside I have seen (using them almost from the beginning on) is that there is no easy way to search for “similar” elements, means elements from the same designer. I find nothing more disturbing in an app, if your icons look like having been designed by x different creators ;-).
