una / slides-ps-is-dead

Photoshop Blend Modes and Filters in the Browser!

PS is Dead

Outline

00 -- Intro

• Play video
• Reasons why PS is 😢
  • takes 5evr to load
  • couldn't log in bc wifi issues
  • expensive
  • can't make text accesible
  • can't try out responsive designs

--- Things that PS can do that Browsers can ALSO do ---

01 -- CSS Filters

• Intro to Webkit Filters
• Overview of all the filters
• Safari got some moves, too: Backdrop filters!
• Backdrop Filter: http://iamvdo.me/en/blog/advanced-css-filters/?utm_source=codrops

02 -- Mix Blend Modes

• Intro to Blend Modes
• Live Code Example of mixing the two images

03 -- Background Blend Modes (Comining things)

• Remember when Photoshop Filters and Actions were a thing?
• Pick out a set
• Puttin git all together
• Recreating Raging Mist (Blossom): Filters
• Recreating Raging Mist (Blossom): Mix-Blend Mode (warmth)
• Recreating Raging Mist (Blossom): Background-Blend Mode (washout/vintage effect)

04 -- CSS Gradients

• Intro to CSS Gradients
• Playing with Gradients and Blend Modes
• Negev Example with Background Changing (spinning in circle)
• Negev Example of the Various Blend Modes
• Spotlight image example
• multiple spotlights?

05 -- Clipping Paths

06 -- CSS Shapes (Shape Outside)

--- Things Photoshop Can't Do ---

07 -- CSS Animation

08 -- Dynamic Art

09 -- Accesible Content (meme example)

Conclusion

• these are the broken capabilities right now but look where video games started vs. now

Further Ideas

• making a meme on the spot that requires clipping (like Martha Stewart riding on things)
• might have to skip the open type features and such for now

** caniuse in command line