Favorite Tools Today
09/22/16 04:46 PM
Just a quick note on a set of tools that worked well for me today! Maybe these will help you tackle coding or design problems you’re facing as well.
Today was “update the icon” day for my new app. iTunes Connect wouldn’t let me submit to TestFlight without having full icon info, so it was time to put a bit more effort in to get a consistent set of images.
First, let me just say that there are Way Too Many forms of icons. This new app is a Messages app, which brings along a whole new set of sizes. I’ve also been working on an app that has a Watch extension, so there’s a third set of new sizes and shapes to deal with.
I had to use Adobe Illustrator to open some stock image files that I had downloaded long ago. I signed up for the free trial, and off I went. Man, is Illustrator complicated. Just to be able to inspect the properties of a given layer (after I had somehow managed to select it) was a challenge. I couldn’t export to SVG fast enough and move everything over to Sketch. That process did not go that smoothly - not sure if it is Illustrator’s fault for exporting bad SVG code, or Sketch’s problem in reading it. Nothing that can’t be fixed by hand though.
I learned an important lesson about drop shadows. All of the shadows in the Illustrator file looked great, no matter the background, but when exported to PNG, or even SVG, they had an annoying white halo around the shadow. It turns out they were getting a translucent drop shadow by using the Multiply mode on the layer. This is awesome if you stay in Illustrator, or can export to a fixed background. Not great if you want an alpha-enabled PNG file that can go over any background. That was a few hours of my life wasted. I was super impressed by the amount of configurability in Illustrator - you could make some really awesome and detailed gradients there. It was harder to reproduce them in Sketch that I had anticipated. I first went with a Gaussian-blurred background layer, before watching this cool video from Invision and realizing that “Outer Shadow” was a much better option (head smacking moment, there).
So, day two of icon fun, and things went more smoothly. I wanted to add some of my own artwork, so I photographed some potatoes (it IS Little Potato Software, after all!) on a white background, and used Acorn’s Instant Alpha tool to magically whisk away the background. I had just upgraded to Acorn with their current sale, and I can say I am super impressed. It feels really fast and responsive, and its online help (including videos!) is great. Anything I wanted to try, there was an easy, and obvious way, to make it work. Even though I haven’t used Acorn for probably years, it felt incredibly natural and easy. Score another one for the non-Adobe software camp.
Back into Sketch I went, and I finally got to try out the Runner plug-in. I feel like I’m just scratching the surface with this tool, which lets you do almost everything in Sketch from the keyboard, but it was great at quickly centering objects on artboards.
And last, but not least, if you’re looking to make sure you’ve got all of your icon bases covered, I’ve enjoyed using this template from Savvy Apps. It uses symbols and artboards in a clever way. I had to update it for Messages icons, but it felt like I was following a good process, not just hacking them together on my own. For Messages (and iOS in general) icon sizes, Apple supplies a nice set of templates (for Photoshop only). I also tried using this template for Messages icons, which worked well. However, since you need to have the full set of icons for the regular app as well, it made sense to keep everything in one template file.
Once I get back to coding the app, I going to try this cool Sketch Messages app template. I probably will tomorrow as I attempt to design more UI, and want to make sure it all fits!
I almost forgot to mention the Sketch Measure plugin! [https://github.com/utom/sketch-measure] Remember to hold down option when trying the various features, but it did exactly what I wanted - showed me the distance between the edges of an artboard and an object, either as pixels or *percentages*. I love the fantastic plugin community building up around Sketch.
Just a happy developer — all opinions are my own and I wasn’t paid/asked to write any of this :)
Today was “update the icon” day for my new app. iTunes Connect wouldn’t let me submit to TestFlight without having full icon info, so it was time to put a bit more effort in to get a consistent set of images.
First, let me just say that there are Way Too Many forms of icons. This new app is a Messages app, which brings along a whole new set of sizes. I’ve also been working on an app that has a Watch extension, so there’s a third set of new sizes and shapes to deal with.
I had to use Adobe Illustrator to open some stock image files that I had downloaded long ago. I signed up for the free trial, and off I went. Man, is Illustrator complicated. Just to be able to inspect the properties of a given layer (after I had somehow managed to select it) was a challenge. I couldn’t export to SVG fast enough and move everything over to Sketch. That process did not go that smoothly - not sure if it is Illustrator’s fault for exporting bad SVG code, or Sketch’s problem in reading it. Nothing that can’t be fixed by hand though.
I learned an important lesson about drop shadows. All of the shadows in the Illustrator file looked great, no matter the background, but when exported to PNG, or even SVG, they had an annoying white halo around the shadow. It turns out they were getting a translucent drop shadow by using the Multiply mode on the layer. This is awesome if you stay in Illustrator, or can export to a fixed background. Not great if you want an alpha-enabled PNG file that can go over any background. That was a few hours of my life wasted. I was super impressed by the amount of configurability in Illustrator - you could make some really awesome and detailed gradients there. It was harder to reproduce them in Sketch that I had anticipated. I first went with a Gaussian-blurred background layer, before watching this cool video from Invision and realizing that “Outer Shadow” was a much better option (head smacking moment, there).
So, day two of icon fun, and things went more smoothly. I wanted to add some of my own artwork, so I photographed some potatoes (it IS Little Potato Software, after all!) on a white background, and used Acorn’s Instant Alpha tool to magically whisk away the background. I had just upgraded to Acorn with their current sale, and I can say I am super impressed. It feels really fast and responsive, and its online help (including videos!) is great. Anything I wanted to try, there was an easy, and obvious way, to make it work. Even though I haven’t used Acorn for probably years, it felt incredibly natural and easy. Score another one for the non-Adobe software camp.
Back into Sketch I went, and I finally got to try out the Runner plug-in. I feel like I’m just scratching the surface with this tool, which lets you do almost everything in Sketch from the keyboard, but it was great at quickly centering objects on artboards.
And last, but not least, if you’re looking to make sure you’ve got all of your icon bases covered, I’ve enjoyed using this template from Savvy Apps. It uses symbols and artboards in a clever way. I had to update it for Messages icons, but it felt like I was following a good process, not just hacking them together on my own. For Messages (and iOS in general) icon sizes, Apple supplies a nice set of templates (for Photoshop only). I also tried using this template for Messages icons, which worked well. However, since you need to have the full set of icons for the regular app as well, it made sense to keep everything in one template file.
Once I get back to coding the app, I going to try this cool Sketch Messages app template. I probably will tomorrow as I attempt to design more UI, and want to make sure it all fits!
I almost forgot to mention the Sketch Measure plugin! [https://github.com/utom/sketch-measure] Remember to hold down option when trying the various features, but it did exactly what I wanted - showed me the distance between the edges of an artboard and an object, either as pixels or *percentages*. I love the fantastic plugin community building up around Sketch.
Just a happy developer — all opinions are my own and I wasn’t paid/asked to write any of this :)
