Re: [css-compositing]new Editor's draft posted

For tutorials how you can use each blend mode see:

   - http://photoblogstop.com/photoshop/photoshop-blend-modes-explained
   - http://www.photoshopessentials.com/photo-editing/layer-blend-modes/
   -
   http://designshack.net/articles/graphics/photoshop-blending-modes-beginners-tips-and-tricks/

These are all photoshop tutorials but apply the same to CSS.
Blending modes are part of the basic toolbox of any graphics designer. They
can be used to pick up underlying textures, enhance the contrast of image,
do lighting effect, text knockouts, etc.

>From http://www.myprovence.fr/en#p_home, notice the pulldown tab that says
"An event MP2013".
The designer had to rasterize this to an image because there's no way to
draw this with CSS. If he had blending, he could have drawn the text as a
black div with white glyphs and apply a 'darken' blend mode. This blend
mode would pick the darkest color, which in this case would be the clouds
and the sky of the backdrop.

http://www.hardlycode.com/pages/barracuda-tacos
Notice how the text inherits the texture (probably an overlay blend mode).
To get this effect people have to rasterize text in photoshop and place it
precisely.

https://developer.apple.com/wwdc/
This is again an image, but it could be implemented as a bunch of rotated
div's with rounded corners, filled with different colors (gradients?) and a
multiply blend.

http://www.chipotle.com/en-US/Default.aspx?type=default
There are many subtle blend modes on this page.
I'll pick out the most obvious on. Pull on the tab and hover over the flash
animation. The rays of the sun are using a 'screen' animation. (opacity
would darken the rays)

I'm sure I can get more use cases from designers.

On Wed, May 22, 2013 at 7:35 PM, Robert O'Callahan <robert@ocallahan.org>wrote:

> On Thu, May 23, 2013 at 2:52 AM, Rik Cabanier <cabanier@gmail.com> wrote:
>
>> Thanks Jeremie!
>>
>> I don't have a list, but here are some examples from a Seattle artist:
>>
>>    - http://www.hardlycode.com/pages/barracuda-tacos (see how the text
>>    inherits the texture)
>>    - http://www.hardlycode.com/pages/dylan-priest-photography/
>>    http://dylanpriest.com/ (multiple examples. Look at the rollover on
>>    the left)
>>    - http://www.hardlycode.com/products/seattle-by-rick-murphy (he
>>    couldn't use blending for the spinning circles on the right so had to use
>>    opacity)
>>
>>
>> More examples:
>>
>>    - https://developer.apple.com/wwdc/ (could be done in CSS)
>>    - http://www.chipotle.com/en-US/Default.aspx?type=default (many
>>    examples. prerendered + flash)
>>    - http://www.boat-studio.com/ (had to use opacity so blue is dark.
>>    You can find many examples of this)
>>    - http://www.myprovence.fr/en#p_home (You can use blending to 'punch'
>>    out text ie the pulldown)
>>
>>
> It would be helpful to describe the use-cases explicitly so we don't all
> have to try to reverse-engineer them from the sites. Maybe it's obvious to
> a graphic designer, but I'm not one.
>
>
>>
>> Tutorial on how to create blended textures:
>>
>> http://psd.fanextra.com/tutorials/design-a-cool-textured-portfolio-website/
>>
>
> This is a lot more helpful, thanks.
>
> Rob
> --
> q“qIqfq qyqoquq qlqoqvqeq qtqhqoqsqeq qwqhqoq qlqoqvqeq qyqoquq,q
> qwqhqaqtq qcqrqeqdqiqtq qiqsq qtqhqaqtq qtqoq qyqoquq?q qEqvqeqnq
> qsqiqnqnqeqrqsq qlqoqvqeq qtqhqoqsqeq qwqhqoq qlqoqvqeq qtqhqeqmq.q qAqnqdq
> qiqfq qyqoquq qdqoq qgqoqoqdq qtqoq qtqhqoqsqeq qwqhqoq qaqrqeq qgqoqoqdq
> qtqoq qyqoquq,q qwqhqaqtq qcqrqeqdqiqtq qiqsq qtqhqaqtq qtqoq qyqoquq?q
> qEqvqeqnq qsqiqnqnqeqrqsq qdqoq qtqhqaqtq.q"
>