{"id":16471,"date":"2010-07-02T07:48:57","date_gmt":"2010-07-02T14:48:57","guid":{"rendered":"http:\/\/blogs.adobe.com\/jnack\/?p=2307"},"modified":"2010-07-02T07:48:57","modified_gmt":"2010-07-02T14:48:57","slug":"css-is-the-new-photoshop","status":"publish","type":"post","link":"http:\/\/jnack.com\/blog\/2010\/07\/02\/css-is-the-new-photoshop\/","title":{"rendered":"\u201cCSS is the new Photoshop\u201d (?)"},"content":{"rendered":"<p>Shawn Blanc hit on a great, if perhaps deliberately overstated, <a href=\"http:\/\/shawnblanc.net\/2010\/06\/css-iphone\/\">phrase<\/a> on Monday that pegs an important trend: Cascading Style Sheets can create a great deal of artwork now, without reliance on bitmap graphics. \u00a0He points to impressive\u00a0<a href=\"http:\/\/blog.graphicpeel.com\/post\/740928981\/ios-icons-made-in-pure-css\">iOS icons<\/a> from Louis Harboe\ufeff among other examples.<\/p>\n<p>He&#8217;s not alone:\u00a0H\u00e5kon Wium Lie from Opera predicts that <a href=\"http:\/\/www.youtube.com\/watch?v=Sqw3nrTV92c\">CSS3 could eliminate half the images<\/a> used on the Web. \u00a0You can use various graphical tools to generate things like\u00a0<a href=\"http:\/\/westciv.com\/tools\/radialgradients\/index.html\">CSS gradients<\/a> and\u00a0<a href=\"http:\/\/border-radius.com\/\">rounded corners<\/a>. \u00a0As people can do more and more in code, it makes sense to ask <a href=\"http:\/\/24ways.org\/2009\/make-your-mockup-in-markup\">whether even to use Photoshop<\/a> in designing Web content.<\/p>\n<p>I think Adobe should be freaking out a bit, but in a constructive way.<\/p>\n<p>HTML&#8217;s new graphical richness means great opportunities to generate efficient, visually expressive content. \u00a0&#8220;What is missing today,&#8221; says Michael Slade, &#8220;is the modern day <a href=\"http:\/\/adlibmedia.squarespace.com\/adlibmedia\/2010\/6\/28\/is-css-the-new-photoshop.html\">equivalent of Illustrator and PageMaker for CSS<\/a>, HTML5 and JavaScript.&#8221;<\/p>\n<p>Of course, this is far easier said than done. \u00a0As I <a href=\"http:\/\/blogs.adobe.com\/jnack\/2010\/06\/beautiful_html5_slides_on_web_design.html\">noted<\/a> the other day, &#8220;Almost no one would look inside, say, an EPS file and harrumph, &#8216;Well, that\u2019s not how <em>I\u2019d<\/em> write PostScript&#8217;\u2013but they absolutely do that with HTML.&#8221; \u00a0Over the last 15 years, innumerable smart people have tried and failed to make WYSIWYG HTML design tools whose output got respect.  And yet it strikes me as unreasonable to say, &#8220;Spend a bunch of time perfecting your design in PS\/AI, then <em>throw it all away<\/em> and start again!&#8221;<\/p>\n<p>As for Photoshop, we could either teach the app to speak HTML natively (via <a href=\"http:\/\/blogs.adobe.com\/jnack\/2010\/06\/feedback_please_html5_layers_in_photoshop.html\">live HTML layers<\/a>), or we could translate Photoshop-native artwork into HTML (e.g. &#8220;copy this button\/text as HTML\/CSS&#8221;). \u00a0It&#8217;s not yet clear to me, however, how such code would smoothly integrate into one&#8217;s projects.<\/p>\n<p>At the moment I have more questions than answers. \u00a0If you have ideas on the subject, please lay &#8217;em on us.<\/p>\n<p>[Note: Ideas need not include, &#8220;Put your heads in the sand and say that people simply have to switch from Photoshop\/Illustrator to Fireworks.&#8221; \u00a0FW is a great app, but that suggestion is a non-starter.]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Shawn Blanc hit on a great, if perhaps deliberately overstated, phrase on Monday that pegs an important trend: Cascading Style Sheets can create a great deal of artwork now, without reliance on bitmap graphics. \u00a0He points to impressive\u00a0iOS icons from Louis Harboe\ufeff among other examples. He&#8217;s not alone:\u00a0H\u00e5kon Wium Lie from Opera predicts that CSS3 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[34,1],"tags":[],"_links":{"self":[{"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts\/16471"}],"collection":[{"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/comments?post=16471"}],"version-history":[{"count":0,"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts\/16471\/revisions"}],"wp:attachment":[{"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/media?parent=16471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/categories?post=16471"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/tags?post=16471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}