I noticed that my iOS development workflow is a little bit slow when it comes to adopt existing UI designs from Photoshop or Illustrator or even from Sketch, whichever tool you are familiar with or like. The problem is, you have your code ready, everything is done and you need to add all the custom colors for different labels and views. It’s a pain and it takes a lot of time…
What I usually do is go to Photoshop open my design file, pick the color of the label I want to customize in my code than either remember the RGB values or write it down into a piece of paper or with some text editor program. None of them is really professional, and takes a lot of time.
I recently bumped into THE solution to my issue, it is called FrankDeLoupe and it is really as it says – My new color-picking friend on my Mac – cause it is that awesome. But let’s look at why it is great.
First of all what is this FrankDeLoup tool?
It’s actually a simple Eyedropper tool, similar to the DigitalColor Meter on Mac OS, but way better. You just hit your custom keyboard shortcut and you get a nice eyedropper tool zoomed in a lot, so you can really see those 1 pixel tall separator color lines. Click on your mouse one and the app creates an output with the color that you selected in a format that you defined in the settings.
How do I use it?
I use the clipboard function together with a little macro that I wrote to ease my life in Xcode. Since “FrankDeLoupe” a.k.a Frank gives me the values in this format: rgb(5, 63, 82) I can just use this value as it is when I need to define a color to my label and done.
The macro awesomeness:
#define rgb(r, g, b) [UIColor colorWithRed:(CGFloat)(r/255.0) green:(CGFloat)(g/255.0) blue:(CGFloat)(b/255.0) alpha:1.0]
Super simple, super fast. So for example I have a label called: titleLabel and I want to set the textColor of it, I just simply say:
[self.titleLabel setTextColor:rgb(5, 63, 82)];
And I’m done. Of course you would want to put all these colors into a UIColor category so it’s easier to change them later, but you get the idea.
Other possibility with Frank is to remotely connect it with Photoshop so whenever you select a color in your mac with Frank it will be automatically assigned to the foreground color in Photoshop. So if you see an awesome color somewhere on the web and want to use it in your next iOS app, just open Frank – I use the default shortcut which is Crtl+Alt+Cmd+C – and it is there.
Also an awesome feature is that you can move Frank around with your keyboard arrow keys.. How awesome is that? I struggled a lot with eyedroppers before when I only needed to go 1 pixel up or down but it jumped 2 or 3..argh.. With Frank it is simple, just go to the label or whatever you want to grab the color from open Frank and use the arrow keys to position it and after it is in the right place just hit the Spacebar or click. That’s simple.
Awesome tool for a lot of money, right?
NOPE. It is the cheapest piece of software I bought I think, it only cost 0.89€ ($0.99) which is nothing really for this awesomeness. (My favorite word is awesome if you haven’t figured it out until now)
So I definitely recommend that you buy and try it for yourself, for me it is a life changer, speeded up my workflow a lot and I’m thankful for that.
You can get it from their website:
Or directly from Apple:
What do you guys think? Do you have a better solution to export quickly color values from Photoshop? Let me know in the comments below.