skip to Main Content

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


  1. Try css3ps photoshop plugin, it should do the job for you. It will generate you text 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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search