Web : Write CSS with Photoshop and Illustrator

With Adobe's new Photoshop CC and Illustrator CC products, there are actually some really interesting HTML and CSS features being built into both of these applications. We're going to specifically focus on CSS this time around, but if you want more information on this type of stuff, I highly suggest.

In Photoshop, what you have to do is select the layer you want, and by the way you want to name the layer, in this case, the same thing you would want to name the div container that you would want to create here. Then from the layer panel menu choose Copy CSS. Then just paste it to text editor.And by the way, this will also pick up things like gradients and drop shadows as well and allow you to translate those into CSS really easily as well. photoshop css

As far as Illustrator is concerned, you have the CSS Properties panel, which you can get to by going to Windows > CSS Properties. You can also name item in a layer, like in the photoshop, for a div name. So in the CSS Properties panel is named like a div name. Then you can take all this information. Just click and drag across, and copy it. And then you can go into text edit and just paste it in, there it is, it's that same type of information that you had before.illustrator css

And I've also named this item here, box, in the Layers panel. Now I can double-click that, and re

name that something like box_large like we had before. And then when I do that, you'll see that the declaration here in the Properties panel changes to box_large. I can take all this information. Just click and drag across, and copy it. And then I can go into text edit and I can just paste it in, there it is, it's that same type of information that I had before.Scroll over, so you can actually see that information, minimize that down, there we go. You have a div name, background color, you've got a hex color and an rgba value, which might be a little bit more handy. RGBA, by the way, stands for red, green, blue, and alpha, so you can actually control opacity of the colors as well. You can also create gradients, add drop shadow (Effects > Stylize > Drop Shadow)illustrator css drop shadow

If you're not a web person but you'redoing some web design work, you could easily just take this information that you've created here and pass that along to your web developer. Making it easier for them to translate what you've created in Illustrator or Photoshop into actual workable HTML and CSS.

It's going to make the process a lot easier, it's going to bridge that gapbetween designer and developer, and make things run a whole lot more smoothly.