Vector Gradients from Comp 1 to the Browser
By Tack Trudell
A few days before the official launch of Internet Explorer 9 I decided to take a look at the Traction website in the most recent IE9 release candidate.
While we were developing the site it was still beta and CSS3 background gradients weren't supported. We were supporting them in IE7 and 8 via CSS3PIE but that didn't support 9. I decided to kick the can down the road and wait till the last minute just in case gradients magically became supported.
No dice apparently. IE9 still doesn't support background gradients. Some of our pages looked less than functional and I needed to fix that before the browser was released. The way I would have done it in the past (well, before the power and glory that is CSS3PIE) would be to use a gradient filter . But that's gone in IE9 as far as I know (correct me if I'm wrong). Luckily I found this technique. You basically use an SVG gradient as a background image. It worked like a charm.
The SVG color and stop values reminded me of CSS3.
This got me thinking. What if I got the SVG of the gradient as part of the comps when they moved from design to dev? The SVG could be a smart object in Photoshop in the comps. When I get the SVG, I can take the color stop values, plug them into the CSS and get them exactly as the client saw them in the comps.
Currently a common way to work with gradients in Photoshop CS4 is to use a vector object then use a layer effect to add a gradient overlay. It's very simple to resize that box and not have to keep recreating gradients every time. Then the people building the thing reverse engineer the gradient stops and do some math to get percentage values. But that can take a while to get right and usually there's some trial and error to be done.
If you make these gradients this way you can make it a smart object but it's a different file format and when you double click to edit you don't get SVG in the export settings. And you can't just import an SVG, make it a smart object and save it later. In fact, you can't even open an SVG in Photoshop CS4.
What you can do is copy the vector path of a gradient in Illustrator, paste it in Photoshop and use that as a smart object.
To resize your gradient in Photoshop just select the layer the vector smart object is in and use the free transform tool.
If you want to change the gradient stops or color values, double click the layer and it will take you to Illustrator. Save your changes in Illustrator and when you go back to Photoshop the changes will take effect.
You still get the ability to edit gradients as vector objects just as if you had made a rectangle in a layer and used the gradient overlay layer effect. But now, when your design is "Final-esque" you double click the smart object and when it takes you to Illustrator you can save it out (Save As) as an SVG.
That SVG doesn't look like what we need. For one we don't have percentage sizes which we need for it to scale to CSS box sizes and those matrices look like a ton of fun. So we edit it to get what we need.
So, now we have our SVG file, our CSS and our PIE:
All of it is derived from the exact values that created the gradient in the comps. No guestimating. Designers still get the convenience of vector gradients. Developers get code out of a comp they can hack on instead of having to divine the one true gradient. And our gradients stay vectors from creative round one all the way to the users's screen. No banded or dithered raster gradients needed.
I am an integrator of things. I look beyond front end, back end and the object to see where art and tech can manifest the whole.
Pretending that our boss was an evil tyrant, we xeroxed photos of Adam and took turns defacing enhancing them with a variety of mediums such as ink, pencil, and collage.
Sunday, I'll be moderating a "core conversation" at the SXSW Conference in Austin, TX.
I’ve done a lot of projects using WordPress, and early on I realized the benefits of keeping my project files in a version control system like Subversion.