2

Im new to the most recent version of Photoshop, it has a cool feature I discovered where it takes the CSS of your design and copy's/paste's the thing into an editor.

Where would you arrange the HTML for it though? Whats the best way to quickly get around this? Are there tutorials?

4
  • 1
    I'd recommend taking a look at Brackets with the Extract plugin. it's not flawless, but it works pretty good.
    – PieBie
    Dec 24, 2015 at 10:55
  • I use brackets, but never dealt with plugins Dec 24, 2015 at 11:17
  • So Im guessing, thanks btw since I found the plugin, that Extract doesnt do all the magic for you? You have to do most of the HTML yourself but it helps with all the code and CSS there for your to see? Dec 24, 2015 at 11:21
  • I've never actually used it fully, so I couldn't tell you.
    – PieBie
    Dec 24, 2015 at 11:26

2 Answers 2

2

Photoshop does not pull any HTML, just the CSS. All it does is translate the properties it has for the object you have selected (colour, size, stroke, effects, position), to CSS. It cannot know how you want to structure your HTML or what that object is, so you will have to do that yourself.

I also wouldn't recommend using this feature, since despite it will most certainly not do things the right way. For example if you have a button that has to be 40px under a body of text, you would give it a top margin of 40px. All PS would be able to tell you if you copy the CSS is its absolute value (where it is in relation to the canvas), it cannot know how you have structured your document.

So tutorials on how to code properly would be a good place to start.

1

So here is how to get the css from photoshop just for the records of your post: https://helpx.adobe.com/photoshop/how-to/photoshop-copy-css.html

To get the HTML fast, I would recommend installing Sublime Text with the Package Manager. Open Sublime, then Package Manager with CTRL + SHIFT + P,

  • Typing "Package Control: Install Package", hit enter.
  • Typing one of the following package names, then reenter the procedure for the other two:

    • Emmet
    • Foundation Snippets
    • HTML Boilerplate

Install all three packages and write HTML with Zen Speed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.