How to get the transparent OS X cursor effect from a flat image?
July 4, 2010 1:55 PM Subscribe
The OS X cursor has a transparent shadow that multiplies the color under it. If I have an image of that cursor on top of, say, a pure red background in Photoshop, how do I extract the cursor image so that its transparent shadow will behave exactly the same way over all colors?
You'd be better off doing this with an image of the cursor over a white background, since alpha channels in Photoshop are grayscale channels with white indicating transparency and black indicating opacity. Just fill the cursor itself with black, invert the image, and you have an alpha channel for the cursor and its drop shadow.
posted by letourneau at 2:27 PM on July 4, 2010
posted by letourneau at 2:27 PM on July 4, 2010
I'm at home and my Photoshop is at work, but I am thinking (along the lines of letourneau's suggestion): create a new layer filled entirely with your red underneath your "cursor on red" layer, and set the cursor's layer blending mode to "difference"? And then that gives you your alpha channel?
posted by misterbrandt at 7:30 PM on July 4, 2010
posted by misterbrandt at 7:30 PM on July 4, 2010
I believe some people have made images of the OS X cursor (cursor files for PC) that you might be able to download, then import into Photoshop, to get this image.
posted by limeonaire at 9:13 PM on July 4, 2010
posted by limeonaire at 9:13 PM on July 4, 2010
I'm not sure how it handles the cursor, but you might take a look at Layers, a screen capture program for OSX that outputs layered PSD files instead of flat JPEGs or PNGs. Each window, etc is in its own separate layer and can be moved, etc.
posted by verb at 7:54 AM on July 5, 2010
posted by verb at 7:54 AM on July 5, 2010
Response by poster: My first try at this was actually to just find the cursor image online, but unfortunately I couldn't locate a pixel-perfect version, which is what I need for this little project of mine.
I've got the alpha channel set up, with the cursor all black, the drop shadow as various shades of grey, and the rest as white so that it will be transparent. Shouldn't I see the transparent checkerboard pattern everywhere where the alpha channel is white? Right now, the whole image remains opaque.
posted by invitapriore at 10:10 AM on July 5, 2010
I've got the alpha channel set up, with the cursor all black, the drop shadow as various shades of grey, and the rest as white so that it will be transparent. Shouldn't I see the transparent checkerboard pattern everywhere where the alpha channel is white? Right now, the whole image remains opaque.
posted by invitapriore at 10:10 AM on July 5, 2010
This was a lot harder than I thought it would be. That, or I'm a lot dumber than I thought I was. But here's my best go at extracting the cursor.
As far as I can tell it displays the same as the real cursor, although I don't think it's perfect. On some backgrounds, a few pixels appear to be off by one on one of the channels when compared to a screenshot of the actual cursor. Possibly when the cursor shadow is rendered it rounds the values differently on different colours, but I'm not sure. Hopefully it works well enough for your project.
posted by lucidium at 10:44 AM on July 8, 2010
As far as I can tell it displays the same as the real cursor, although I don't think it's perfect. On some backgrounds, a few pixels appear to be off by one on one of the channels when compared to a screenshot of the actual cursor. Possibly when the cursor shadow is rendered it rounds the values differently on different colours, but I'm not sure. Hopefully it works well enough for your project.
posted by lucidium at 10:44 AM on July 8, 2010
This thread is closed to new comments.
posted by pharm at 2:23 PM on July 4, 2010