Yes, my friends, it’s time for another relaxing frolic in the frothy foam of Martini Hour. Oh, I know, one doesn’t usually associate martinis with frothiness, but in this episode the lounge I dusted off my blender to whip up some Ramos Fizzes in homage to this week’s theme: Blend modes.
And while the drinks may be sweet and frothy, the discussion is crisp and clarifying as a classic olive-laden martini. Here’s what we whipped up for you:
The Photoshop Secret Handshake: Blend Modes
The aforementioned blend modes are a secret handshake if ever there was one. Listen as Deke implies he might have even coined the term “blend mode.” Although there are several blend modes to choose from, we take a particularly close look at the weirdest, the “contrast” modes: Overlay, Soft Light, Hard Light, Vivid Light, Linear Light, Pin Light, and Hard Mix. I also manage to remember a term from my undergraduate psychology degree when I’m referring to the efficient functioning of Deke’s brain.
This Weeks’ Question (from Joseph Francis on the Deke Hotline)
Joseph wants to know why Deke chooses to blend RGB channels with Screen instead of Add. Listen as Deke geeks out, and explains his rationale. And then I find a way to further show off my vast knowledge, this time in the field of mythology, as I compare Deke to the Greek hero Theseus. (Apparently, drinking Ramos Fizzes actually unlocks bits of vestigial liberal arts education.)
This Week’s Toast
It’s all about Budz, our groovemaster band leader and the guy who makes the lounge actually come to life. Cin cin (™Petra), Buddy. (And Dragan too!)
Interested? How can you resist. Here’s the regular-quality (192kbps) audio file. For best results, right-click and choose Download or Save.
Don’t want to miss a single episode of this singular treat for the ears and mind? Subscribe via iTunes. And don’t forget, this is a separate subscription from your regular dekePod podcast.
Got a question you’d like us to answer? Write us on the site, or even better, call 1-888-dekepod. (That’s 1-888-335-3763.) Practice, be charming, and ask us something really intriguing.
And also don’t forget to send in your Martini Hour visualizations. We’re running out of drink-coordinated colors for our logo and can’t wait to start using some of your lovely creations in our weekly posts that announce the newest episodes.
Cin Cin!
I can’t trademark “cin cin”, however, as it is a common Italian phrase, meaning “Cheers!”
I thought I’d provide a link to show that my usage of it is unoriginal, but then discovered that it actually has another meaning in another language:
http://www.kwintessential.co.uk/translation/articles/lost-translation.html
* An expat Brit had just moved to Japan and was at a welcome party held in their honour with their new Japanese colleagues. Having just come from Italy, when everyone raised their glasses for a toast he exclaimed “cin cin!” which means “cheers” in Italian. Unbeknown to the poor expat was that “cin cin” meant ‘small penis’ in Japanese.
I learn something new everyday, and now I know how to toast small penises in Japan. :-D
Petra, you’re the first documented use here on dekeWorld
So let the Italians have their “reality” credit, it’s our world that matters.
Question regarding png 24 browser support
Blending modes are wonderful ... as are web tranparancies ... (that’s my clumsy segway into a totally unrelated topic :-) I’ve been searching google to find out about png 24 browser issues, but most of the articles are outdated.
Awhile back I was doing some web design and had used a transparant png as a button roll over state. In Internet Exploer 7, The transparant pngs were not visible , just showed up as empty boxes and my browser gave me some warning about “possible malicious script” (not sure if this was IE 7 or by Norton which was also installed on my PC, but I think it was one of those Options bar messages from IE). I don’t know if this was caused by the png itself, or by the fact that it was being used within a button roll over state.
Often I need a very smooth transparant transitions in art images for web and gif or png8 don’t offer the needed quality. Can anyone give a definitive answer on png 24 use across browsers nowadays? Thx!
I’m no expert on browser support
I’m not sure anyone is.
But it you throw us a link, we can look at it and respond with the results that we see. Or email it to quiz@deke.com and ask Colleen to post it here for review. If it requires some supporting script, let us know that as well.
Very true
Reality is for people who can’t handle dekeWorld.
Dig it. :-)
Colleen invoked not just Theseus
but also the fearsome Minotaur and Ariadne, the latter of whom helped Theseus slay said creature. Which is so fitting, because after Theseus dumped Ariadne on Naxos, she is discovered by her future husband, Dionysus, a.k.a. Bacchus, the god of wine and a patron saint of Martini Hour. Here’s the story as told by Titian and annotated by me.
And to think I stumbled on this by mere chance in researching Raphael, who was originally commissioned to paint this piece. Only he couldn’t b/c he died. Classical Italy, land of opportunity.
PNG24…
...is a relatively well supported format on the web. I say relatively because all modern browsers support it, but you only need to look back as far as IE6 and you’ll have some issues with transparency.
That being said, your issue is more likely to be tied with the active content (probably JavaScript - rollover) being run from within your computer. Place the page online instead and IE gets happier.
-iVan
PNG 24 and 32 Formats
The W3C site keeps track of PNG support in browsers. There shouldn’t be any problem with PNG8, PNG24 or PNG32 with today’s browsers.
http://www.w3.org/Graphics/PNG/
As Ivan mentioned, the problem you described has to do with the JavaScript Rollover Behavior and Internet Explorer’s annoying warnings about JavaScript.
I put up a test page with a photo as GIF, JPEG, PNG 8, PNG 24 and PNG32. All seem to work fine. You mentioned PNG24. There is a PNG 32 standard. I would check to see if PNG32 works better for your needs. Here is my test page:
http://gallery.me.com/macintutor/100044
All these test files were exported from FireWorks, making use of the Optimize Panel (palette, whatever)
hope this helps,
Thomas
Thomas Benner
The Art Institute of Austin
Png 24
Thank you Deke and iVan and Thomas for your thorough replies. Yes, I think I was trying it offline, so maybe it would have viewed ok once it was online. I was testing the site in various browsers before launching. Firefox and Safari were fine, but these issues arose when I viewed in in IE7. I never heard of png 32 before. Just when you think you’ve wrapped your brain around a concept, they always spring new ones on you.
Another question re: Web Gallery from Bridge CS4
Another head scratcher. I see that when I create PDF thumbnail packages from Bridge, it automatically (and logically) appends the image title beneath the thumbnail. But when I create a Web Gallery from Bridge, although there are options to add Site Info, ie: gallery title, email address, copyright info, I don’t see anywhere to choose to display image title. Is it possible to add image title beneath the images in the web gallery ?
PNG32 is what you’re trying to make
A 24-bit full-color image with an 8-bit mask = PNG32.
Meanwhile, my thanks also to iVan and Thomas. This is why I love this site. Every time I don’t know or remember something, someone else comes to the rescue. That’s what I call @#$%& teamwork!
(Of course, @#$%& is pronounced atpounddollarpercentampersand.)
PNG 32
Admittedly, PNG format is not something I often have to use, and have very basic familiarity with it. It mostly comes down to me choosing PNG24 in Save for Web when I have transparency that has to be saved with it (image below).
But your post about PNG32 made me think, and I don’t like that. It puts a hurt on my pancreas.
Basically, how does one save image as PNG32, why is it better than PNG24 as they both support transparencies, and why is it that I can’t save a mask with PNG format when I try using regular “Save As” command?
All these questions - my pancreas (aaargh!)
PNG 32 Info
Ivan
Most of my web graphics have been PNG for the last three years (with the exception of animated GIFs and some photos) and I haven’t had any browser issues.
I use FireWorks (no surprise there as I am a known Fireworks-addict!) to generate PNG32 images by means of the Optimize panel which has offered the options PNG8 PNG24 and PNG32 for the last four versions (since FireWorks MX 2004). Just as .psd is the native format for Photoshop, Fireworks uses its own version of .png as its native file format. In my opinion, PNG is good for text, line art and general web graphics. It is also patent-free and a good replacement for anything that is a non-animated GIF. Unfortunately, it has been less reliable for displaying some photographs. Because it supports millions of colors as well as transparency, I generally use it whenever possible. Modern browsers all support PNG. See http://www.libpng.org/pub/png/pngstatus.html#browsers
WARNING! Major geek-speak ahead!
What are “PNG8” and “PNG24” and “PNG32”? (Here is a technical answer for you I found at http://www.libpng.org/pub/png/pngfaq.html )
A: PNG8 is shorthand for “8-bit PNG,” but more generally it refers to palette-based (colormapped) PNG images with 1-, 2-, 4- or 8-bit pixels. That is, each pixel value in the image itself is 8 (or fewer) bits deep, and it acts as an index to a particular 24-bit RGB color value in the palette. A 1-bit colormapped image can refer to no more than two colors; a 2-bit image can have no more than four; a 4-bit image can have no more than 16; and an 8-bit image can have up to 256 colors. (Note that, unlike GIF, PNG palettes can have any number of entries—at least, up to the maximum allowed by the bit depth—not just powers of two.)
PNG24, on the other hand, is shorthand for “24-bit PNG” and refers to truecolor or RGB (red/green/blue) images. Each pixel in such images is 24 bits (3 bytes) deep and directly specifies a color instead of acting as an index into a lookup table of colors (i.e., a palette). These images thus can contain up to 16.8 million colors, although typical ones tend to use no more than 50,000 or so.
Note that PNG supports a third basic image type, grayscale, which is usually limited to 8-bit (or smaller) depth but, like truecolor, requires no palette. Not all tools support writing true grayscale images but instead write colormapped PNGs with all-gray palettes. (This can sometimes be beneficial—if only a few, unevenly-spaced gray shades are used—but more often it simply adds 780 bytes to the image size for no good reason.)
Also note that both grayscale and RGB PNGs can have 16-bit samples—that is, 16-bit and 48-bit pixels, respectively—and both can also have an alpha channel for transparency information. Thus an 8-bit grayscale image or a 24-bit RGB image may contain an 8-bit alpha channel, for a total of 16 or 32 bits per pixel; while a 16-bit grayscale image or a 48-bit RGB image may contain a 16-bit alpha channel, for a total of 32 or 64 bits per pixel.
PNG32 However, when tools occasionally mention PNG32, they are invariably referring to 32-bit RGB+alpha (RGBA), not 32-bit gray+alpha. (Few tools support both reading and writing of images with 16-bit samples; such images are typically used only in science, medicine, and the film industry.)
Whew! Can you tell Deke didn’t write that? :•) Perhaps he will clarify. Anywayz, hope that helped and if you are at SXSW this week, I’ll buy you a drink.
Thomas
Thomas Benner
The Art Institute of Austin
So ...
...what you’re saying is that Photoshop + PNG32 = does not compute?
-flyboy
__________________________________________________
OK… a Simpler PNG Answer
Short Answer:
Apparently, there are two versions of the PNG format: PNG 8 and PNG 32 (which Photoshop confusingly calls PNG 24). Avoid the PNG 24 option in Fireworks as it does not preserve any transparency.
More Info Answer:
PNG 8 (in Fireworks) supports 1-bit transparency. PNG 32 (called PNG 32 in Fireworks and called PNG 24 in Photoshop) supports 8-bit transparency. PNG 24 (in Fireworks) supports no transparency.
So PNG 24 in Photoshop is apparently really PNG 32 and PNG 24 in Fireworks is PNG 32 minus the transparency.
See David Sawyer MacFarland’s web site:
www.creativepro.com/article/view-source-harnessing-power-pngs
Thomas
framing in photoshop
Deke (or any of Deke’s loyal followers):
I have a framing-in-photoshop question.
I like to take my photos and make several layers, using drop shadows and such to form a frame of sorts. The outermost layer has a color that complements the picture.
I often spend way too much time picking the color. Do you have a way to click on a color in the picture, then manipulate the color values in RGB or LAB to wind up with a good choice?
You can view an example here: http://photos.stevekalman.com/images/A_5/7/3/8/28375/Framed_Ponteveccio_d8011.jpg
color picker and HSB
Without going into a lot of color theory, I find it easiest to use the eyedropper tool to grab a color I like (even from a different photo or outside of Photoshop altogether). Then open the color picker and look at the first set of values, the H, S, and B. Assuming the Hue is agreeable, you just raise or lower the Saturation and Brightness to taste.
If you are looking for the polar opposite of the color you samples simply add (or subtract) 180 from the Hue to get to the opposite side of the color wheel. Smaller adjustments can be accomplished by nudging the Hue up or down as suits you.
Using the arrow keys (add shift to move by 10) and watching the the color panel, you see that the Saturation value moves from right-left or from neutral color to fully saturated. The Brightness value moves from bottom-top or from no luminance to as bright as can be displayed. A Saturation value of 0% delivers neutral color (ranging from white to black depending on Brightness) regardless of Hue. A Brightness value of 0% is always black (no luminance) regardless of Hue or Saturation.
I just find this easier to remember than trying to figure out which color I want to add or subtract in RGB or which way to move on the A & B axis in LAB.
Kuler Shakers
Adobe has a very cool free app called Kuler that will pull colour themes from any image. You can view customised colour themes that Kuler users have uploaded here: http://kuler.adobe.com/#themes/mostpopular?time=30
Or you can find out more about the app and how to use it here: http://www.adobe.com/products/kuler/
:-)
Can I just say?
How grateful I am that the site now runs itself automatically?
(Joke. Much more in the pipeline.)
But honestly, thanks for everyone’s contributions. As sappy as it might and does sound, I have to agree with Colleen: A real community spirit has grown up around dekeOnline. Go figure, given my caustic (and 51% false) dekePod personality.
We’re at 7202 members—up from 0 nine months ago—so something’s happening. My personal opinion: It’s all of us working together, asking questions and finding answers.
My thanks for your presence. For real.
Namaste, peace be with you, and shit like that there.
OMG, that’s the River Arno
I cannot resist Florence specifically and Italy at large. Second homeland(s), once upon a time. Many apologies UK, Up North, Deutschland, Holland, Sweden, Down Under, Philippines, Kiwi, Norway, and a list of others. I love you all as well. (And do not forget that!)
I think maybe there’s a simple solution to your problem. When you’re in the Color Picker dialog box (or whatever it’s called at any given moment in time), move your cursor out into the image window and click in the image. That lifts the color and its numerical values.
Did that help?
PickingColors
Deke,
Yes, that’s the River Arno in Florence (Firenze). We went to Italy last fall. Hard to come home from Rome, Florence, Venice, Tuscany without some nice pix. Pretty much point it in any direction and blast away.
I do use color picker. In fact, that frame came from the thin brown line at the top of the bridge. I zoomed to in way deep (to get the individual pixels) then chose one.
Jeremy10’s suggestion to manipulate HSB makes a lot of sense and is exactly what I was looking for. (Thanks Jeremy).
I think that the artistic choices involved make it unlikely that a formula (x% of value Y, while in LAB-Luminance) or some such is possible. I’m making a framing action, mostly as a learning experience using things like percentages rather than absolute inches or pixels (This is teaching me a lot about PS-CS4 aside from the usual make-it-look-good stuff). I might have to stop with the color picker open as a last step of action-1, then go into action-2 to till, flatten and save for web.
Thanks (all) for the assist.
Steve
Choice…
That’s the operative word there Steve… You don’t want someone else making it do you? Pick two colores, make a blend; mix it up… What does your eye see? That’s what you want!
framing action
As long as you set up your foreground and background colors (or colours outside the US) ahead of time, you should be able to construct an action to frame a photo by creating new layers, filling with the foreground or background, changing the blend mode, adding layer styles, etc. involving two colors at least.
Secret handshake that is no more
In the past, when I wanted to select something using lasso tool, I could press ALT to switch to a polygonal lasso if I wanted to (and still can), but the problem I’m having these days is that I can’t pan without zooming while I do this.
So normally I’ll grab a lasso tool, and then if I need to I’ll can hit ALT to switch to an angry lasso tool (Deke knows what tool I’m talking about). Then if I want to pan without discontinuing the use of angry lasso (or laying down a point), I’ll hold ALT, press spacebar (that’ll temporarily switch to a zoom-out tool), and then let go of ALT in order to switch to a hand tool (muffy?!). Then I should be able to drag the image. To get back to the angry lasso tool, I just have to reverse the keystrokes and my selection process continues uninterrupted.
But if I try to do that these days, I pan AND zoom out. Something got screwed up since CS3, and I have to say I was expecting to see a fix in CS4, but nada! The behavior is identical (I want my drag-while-using-on-the-fly-polygonal-lasso tool ability back, dagnabit!)
Is there a solution to this bug?
Also, I just noticed there is no reply box in the 6th Martini Hour post (gasp!).
-flyboy
__________________________________________________
Lemme answer that one
@ 1st I was ticked off when a student of mine (on a Mac) let me try this on her computer. Lo and behold, it worked fine. As if I wasn’t looking for an excuse to get a Mac in a first place.
But then I tried it on my other computer - the same one that had this issue before - that one worked too. So I thunk for a minute, and figured it out. It’s my wireless keyboard - it followed me from one machine to the next as I upgraded and I never realized Photoshop worked fine all along!
So I got to answer my own question. Talk about a self-maintaining site!
-flyboy
__________________________________________________
wireless keyboard
that figures… I gotta say, I love your approach to your challenge!
Like mom use to say “It’s not the Waffle Irons fault your waffles are burnt.”; or good ‘ol dad “Son, the hammer and nail didn’t break your finger.”; or the NRA “Guns don’t kill people… people kill people.” OK, I go to far… what ever.
Nice to see Brains at work!
Accidentally nuked a comment
We received our first spam posting (for Viagra, lovely). I blocked the poster/user, and it killed not only the spam but a response to the spam as well. Sorry ‘bout that. In fact, I was hoping to keep the spam—kind of like framing your first dollar bill, you know? Oh well.
Tips are worthy
I must say that the photoshop tricks are awesome.
Kuler and Color
Why does kuler say the opposite of yellow is purple?
Why do so many old color wheels back this up?
Isn’t the opposite of yellow blue?
When we say the paint primaries are RYB, don’t we mean MYC (ie: CMY) and we are just unwilling to bother the schoolkids with nuanced colors with funny names like magenta and cyan so we call them red and blue?
What, finally, is the deal? I thought I knew all this but kuler is throwing me off.