So, where I work we design banners in Photoshop, and then use the elements of the design to make HTML5 banners. It’s a tedious process at times, redesigning everything in CSS to make it look as in Photoshop. In photoshop, I can use the x,y-values of some objects and use it in CSS for exact repurposing, but it still is more work than I prefer.
In photoshop, one can select a layer and klick “copy CSS” which copies the layout to clipboard. However, since we are using artboards, new feature for CC15, the ‘left’ and ‘top’ values are based on the entire document rather than to a specific artboard.
So if the banner format I’m working on is in the third artboard from the left, my ‘left:’ property for an object in that banner, would be say 600px instead of 20px due to the artboards location in the document.
Q1: I guess it is a very specific question, but I’m wondering if there is a way to copy CSS relative to an artboard?
Q2: If not, would it be an easy enough feature to implement? I’m an okay programmer, but I’ve never worked with PS plugins.
2
Answers
Try
css3ps
photoshop plugin, it should do the job for you. It will generate youtext layers
size
border radius
positions
stroke
gradient overlay
inner shadow
inner glow
outer glow
drop shadow
and much more based on selected layers in photoshop.You can export all artboards to different files by selecting "File -> Export -> Artboards to Files". Doing so will allow you to copy css relative to the artboard in newly created files.