Available since Photoshop 4 dated 1996.
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.
Good to have it though ability to create proper masks with layers is long due.
There is one more interesting use for this technique. I might through an article together someday soon.
Marc, Thanks for the share. I had no clue of this. Will certainly put it to use.
My mind is blown. This is incredibly clever.
I think it can get crazier, too. I need to keep experimenting.
This technique is bonkers. It has completely changed how I use Photoshop.
It wasn't immediately obvious to me where the Blend If stuff was hiding. Double click these little guys to get to those options.
Yes! I've been wondering forever what those little squares meant! Thank you.
This is really wild. Thanks for documenting this.
Not a problem. More coming! :)
I wonder whether Sketch 3 can do this. Though I never needed to do it.
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.
Indeed. Might try it some day. I've got CC subscription but seldom use it since Photoshop is sorta complex for UI design as a "photo editor".
This would've saved me so much time in the past. Thanks for digging it up!
How do you create the "blurry circle"? It's still a shape but it's blurred! I'm losing my mind
That’s done using mask feathering. Mask feathering is available in the properties panel when a shape layer is selected.
Ah INTERESTING! Thank you much
Mask feathering is great, even without blend if. Be a little careful though — mask feathering doesn’t scale with the document.
But, some scripts to scale mask feathering can be found here: https://github.com/bjango/bjango-actions/
this is so cool!!! I've just tried it!
All worked ok?
played around with several round shapes and got inspired by guggenheim haha
There are so many hidden features in Photoshop. Great tip! It gonna save a lot of time.
Yeah, it’s the kind of thing that you may not need every day, but when you do, it’s so good.
I'll have to test this as soon as I get home. :D
Blend if is also really useful for photo manipulation, when you have to make difficult selections (hair?). But I never thought about using it this way. Thanksies!
Hey I didn't know this feature, thanks for sharing. The thing is for me when I see those kind of photoshop tricks I always think why not just use illustrator ?
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.
I wondered for the longest time (reading previous banjo articles) thank you ! (and yes for this technique there is no real equivalent in illustrator)
One way to do something similar in Illustrator is to apply Mask to a solid square in Transparency panel. But again, it's not worth it considering lack of usability and poor rendering quality.
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).
Really interesting, thanks