Ink blend modes - any easy tutorial?

[sritcp]

I see that the ink of an object defaults to srcCopy, but there seems to be a bunch of options, most of which are completely opaque to me.

Could someone point me to an accessible tutorial or two?

Thanks,
Sri.

[FourthWorld]

Blend modes can be difficult to describe. Probably the best way to explore them to see which one will fit what you're looking to do is to select the object you're considering changing, open the Inspector to the Blend pane, and arrow-key your way through the list to see how each affects your object.

Did you have a particular effect in mind?

[sritcp]

Oh, I was watching the iOS clock lessons on the "Create It With LiveCode" series, where Kevin Miller was matching the icon background with the rest of the background by changing the ink from srcCopy to srcAnd. It wasn't clear if the original icons had alpha areas which is why you had to use srcAnd (i.e., with srcCopy you won't see even what was behind transparent areas of an image?). I know my description is not clear or complete, but the Kevin Miller Express was speeding along , and this was what I could pick up!

It occurred to me if there was a tutorial (not necessarily in the LC world) which gave examples of each ink mode, with a few words on where they might find application, it would be a small first step in filling a huge hole in my knowledge of graphics. Given we are in the resolution independence era, use of LC graphics (limited as they are) would be a good way to pretty up the user interface. At least, that was the thinking.

Regards,
Sri.

[FourthWorld]

Trying out my own advice, I made a new stack and added an opaque graphic to it. I double-clicked the graphic to open the Inspector, chose the "Blending" pane in the Inspector, and selected the first line of the options in that list, with the intention of arrow keying my way down until I found something that looked like what you described.

It turns out that the first item there, blendClear, renders the area of the graphic completely clear, allowing me to see the underlying desktop.

Is that what you're looking for?

[sritcp]

No, that wasn't it.

When the clock icons were added to the navigation bar, there were white patches around each image (as you would expect), which stood out against the grey background (see the banding in the picture). As Kevin put it, one way is to use an image editor, add an alpha channel, and re-import the images. The other way is to go to the blend property of each image and change it from srcCopy to srcAnd. When he did that, the whites vanished and the entire background became uniformly grey (that of the background graphic rectangle). I was wondering what exactly does srcAnd do? How did it know to take the white out but leave the red image itself in? Unless I know what each blending does exactly, I wouldn't be able to employ it.

More generally, I thought it would be nice to go over a tutorial if one existed.

Regards,
Sri.

[FourthWorld]

The Dictionary entry for srcAnd may be of interest.

[Klaus]

I've never seen a satisfying tutorial about blendmodes, simply because that is pure mathematics in the end!

Take look here:
http://en.wikipedia.org/wiki/Blend_modes
http://photoblogstop.com/photoshop/phot ... -explained
http://www.slrlounge.com/school/photoshop-blend-modes/

Good luck and have fun!

[sritcp]

Thanks for the links, Klaus!

The dictionary entry under srcAnd gives this example:

backgroundComponent bitAnd objectComponent

The effect is that the lighter an object is, the more transparent it is. White parts of an object are completely transparent, and black parts are completely opaque.

For example, suppose an object's color is 45,0,255, and the color of the pixels under the object is 20,45,100. If the srcAnd transfer mode is used, the object's displayed color is 4,0,100 (the decimal equivalent).

The last two components are explained, but I simply don't understand how 45 and 20 became 4 !!!

Regards,
Sri.

[Klaus]

Hi Sri.

... but I simply don't understand how 45 and 20 became 4 !!!

welcome to the club, I have also no idea!


Best

Klaus

[sritcp]

Well, after tapping on my calculator a bit, I think it is a typo; it should be 40, I think, not 4.

0 is 100% opacity; 255 is 0% opacity.
45 is 82% opacity.
So, the blending is (0.82 x 45) + (0.18 x 20) = 40.5

Regards,
Sri.

[Dougy]

Hi Sri

If you don't have this attached example stack on Blend modes, here it is. Sorry, can't remember whose it is (big thanks to whoever it was!) - I found it very worthwhile.

Regards
Doug.

[sritcp]

Thanks, Doug!

Sri