Using SVGs in asset catalogs
Jul 1, 2020, 8:00 PM
SVGs can now be used as assets for iOS, iPadOS, macOS, and watchOS apps. The most exciting part of this new feature is that there’s not much to say — it’s full SVG support, and it just works.
Xcode 12 is required, but deployment targets of...
My Illustrator snapping settings
May 21, 2020, 8:00 PM
I’m frequently asked about my Illustrator settings, specifically in relation to snapping and icon speedrunnning. Illustrator is a complex tool, and without the right settings, it’s impossible to work efficiently.
The Illustrator defaults...
Perfect loops in Processing
Aug 26, 2019, 8:00 PM
There are many possible ways to create looping animations in Processing, but my favourite uses the frameCount system variable. Starting from 0, frameCount increments after each frame is drawn. frameCount is global, and managed by...
Testing for wide gamut
Jul 14, 2019, 8:00 PM
Many new devices and displays support wide gamut colour spaces — colours can be purer and more vibrant than previously. The phrase “wide gamut”, is a comparison between a colour space that includes more of the visible spectrum than sRGB...
Improving asset catalogs
Apr 30, 2019, 8:00 PM
Conceptually, I like asset catalogs. It makes sense to group images and metadata together, with a visual way to edit it all in Xcode.
However, in practice asset catalogs have made common tasks slower and more difficult, reduced our ability...
Creating SVGs with Processing
Jan 23, 2019, 7:00 PM
I’ve been experimenting with creating SVGs programmatically, which opens up a world of possibilities. It allows patterns, shapes, and compositions that would not be easy or possible by hand. The results can then be imported into...
Colour management, part 3
Mar 14, 2018, 8:00 PM
I believe colour management is an essential feature for professional design tools — being able to rely on what you’re seeing when choosing colours, deciding on contrast, and assessing legibility is critical. The last two articles (part 1...
Colour management, part 2
Dec 18, 2017, 7:00 PM
Previously, we discussed how colour spaces are similar to units of measurement. While “50” has no absolute physical characteristic, “50cm” does. Combining a value and a unit of measurement gives it more meaning, and removes ambiguity....
Colour management, part 1
Oct 29, 2017, 8:00 PM
If someone asked you to build a coffee table and they specified the legs as a height of 50, what do you think that would mean? 50 kilometres? 50 feet? 50 inches? 50 millimetres? Probably 50 centimetres. You can’t know for sure, but you can...
Vector icon speedruns
May 18, 2017, 8:00 PM
It’s common to have to draw the same kinds of icons over and over — many different apps and websites use similar glyphs, but each instance typically needs to be tweaked for size and style, so they need to be redrawn.
Due to this...
My Mac app icon design workflow
Feb 1, 2017, 7:00 PM
My favourite Mac app icons are simple enough to be easily read in the Dock, yet they contain interesting details when viewed up close. They have large vibrant areas of colour, yet they contain enough contrast and shading to give them a...
Color Creator Templates
Jan 16, 2017, 7:00 PM
A set of Photoshop, Sketch and Affinity Designer documents that use base colors to generate larger palettes. It’s a bit like an advanced color picker, in the form of a document.
When we built Skala Color, the goal was to create a compact...
When two colours can be one
Dec 30, 2016, 7:00 PM
Many user interfaces have dark and light themes. Having a dark and light theme usually means defining a full set of colours, and switching them when the theme switches.
Sometimes you don’t need to switch all the colours though. With some...
Mac external displays for designers and developers
Dec 11, 2016, 7:00 PM
If you’re considering an external display for your Mac, there’s a few important decisions to make. Apple doesn’t sell external displays any more, so you can’t just default to their wisdom. That’s an issue, because not all displays are well...
Oct 2, 2016, 8:00 PM
I’ve been using a template as the starting point for icon, symbol, and glyph work for quite some time. The template is incredibly simple — Greyprint is just a bunch of white boxes and some pre-made styles to help speed up working.
Aug 28, 2016, 8:00 PM
Russell and Marc built an entire iPhone app in an hour, as part of /dev/world/2016. Here’s some links for things they mentioned.
Eggsacto project on GitHub
Bjango App Icon Templates and Photoshop Actions
My app design workflow
Jul 31, 2016, 8:00 PM
Exporting an identical image from different design tools results in different file sizes. Why? What can be done to optimise them to reduce downloading time and disk space?
To test, we can use an image that is a single pixel. A 1×1 white...
Batch processing with Generator
Jul 19, 2016, 8:00 PM
Photoshop is pretty good at batch processing images. Typically, the job is handled by creating an action that is played after opening files, using the batch command. Here’s another way to do it that’s often quicker and more...
Using blend if for masking
Jul 17, 2016, 8:00 PM
I’m a big fan of exceptionally clean production documents and exceptionally scrappy mockup documents (yes, I keep those tasks separate). Being scrappy frees you to use unconventional, but faster, methods.
Let’s say you’re working on a...
Apr 26, 2016, 8:00 PM
Developers typically split the task of finding issues from building a project for wider release. These modes are often called debug and release. I think designers should take a similar approach.
In debug mode, everything is optimised for...