Yeah, it’s crazy. I’ve used it for photo retouching in the past, but didn’t consider it for UI design until recently. Such an awesome technique.

I think it can get crazier, too. I need to keep experimenting.

It wasn't immediately obvious to me where the Blend If stuff was hiding. Double click these little guys to get to those options.

This is really wild. Thanks for documenting this.

I don’t believe it can. I think the feature was added to Photoshop for photo retouching. It’s a bit strange to use it for UI design, but it is awesome.

Well, in many cases it would allow you to not even open up Illustrator at all... allowing you to build what you want right in what your are designing. Not only is it a more efficient use of your time, it also saves a little computer resources too.

I do use Illustrator and love it, but usually just for detailed vector work that would be hard in Photoshop.

Also, this technique doesn’t really have any equivalent in Illustrator (that I’m aware of).

And finally, Illustrator’s rendering quality isn’t as good as Photoshop, if your final result is saving PNGs (Illustrator has worse antialiasing, no gradient dithering and some other issues).

For this kind of work, Photoshop is pretty amazing, and if we’re being honest, nothing comes close in terms of abilities. I’m not saying other apps shouldn’t be used, but it’s a matter of the right tool for the job.

Exporting Illustrator vectors to multiple bitmap resolutions can be tricky with lots of blurry half pixels showing up even if you have "align to pixel grid"... in Photoshop what you see is what you get. Also there are more workflow tools for Photoshop (Bjango Actions, Slicy, PNG Express).

Yeah, it’s the kind of thing that you may not need every day, but when you do, it’s so good.

That’s done using mask feathering. Mask feathering is available in the properties panel when a shape layer is selected.

All worked ok?