Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#1

Post by alagu » Tue, Jul 24, 2012, 1:42 AM UTC

Show HN: Markupwand, magically convert your photoshop files to HTML & CSS
markupwand.com

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#2

Post by brettcvz » Tue, Jul 24, 2012, 1:58 AM UTC

This. is. awesome. Super cool

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#3

Post by cypherpunks01 » Tue, Jul 24, 2012, 2:03 AM UTC

This is a really great idea! I can imagine people in the future designing/coding/deploying simple webapps from a single photoshop-like interface.

How does it know to put clever class names like ".social-actions"? Is it gleaned from layer metadata or something?

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#4

Post by ananddass » Tue, Jul 24, 2012, 2:06 AM UTC

Good catch on how us designers hack websites together-"Positioning a gray colored copy of a layer just below the layer, to get shadow effect." Looks like you certainly solved this problem. Cool stuff!

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#5

Post by chetan51 » Tue, Jul 24, 2012, 2:06 AM UTC

How does it work?

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#6

Post by le_isms » Tue, Jul 24, 2012, 2:06 AM UTC

cypherpunks01 wrote: post #3

This is a really great idea! I can imagine people in the future designing/coding/deploying simple webapps from a single photoshop-like interface. How does it know to put clever class names like ".social-actions"? Is it gleaned from layer metadata or something?

It might be pulling data from the PSD such as names of layers and comments

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#7

Post by fredsters_s » Tue, Jul 24, 2012, 2:08 AM UTC

Love these guys

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#8

Post by sunsu » Tue, Jul 24, 2012, 2:09 AM UTC

I'm on a MBA and can't see the bottom of the tutorial images. My browser height isn't tall enough.

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#9

Post by alagu » Tue, Jul 24, 2012, 2:10 AM UTC

cypherpunks01 wrote: post #3

This is a really great idea! I can imagine people in the future designing/coding/deploying simple webapps from a single photoshop-like interface. How does it know to put clever class names like ".social-actions"? Is it gleaned from layer metadata or something?

It doesn't get class names from layers, yet. Because, most often people don't rename their layers (they are usually "Layer 1" and "Shape 1").

It has a editor which quickly allows you to name classes (Screenshot: http://cl.ly/image/0q2O0O0y2B1P)

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#10

Post by suren » Tue, Jul 24, 2012, 2:11 AM UTC

le_isms wrote: post #6

cypherpunks01 wrote: post #3

This is a really great idea! I can imagine people in the future designing/coding/deploying simple webapps from a single photoshop-like interface. How does it know to put clever class names like ".social-actions"? Is it gleaned from layer metadata or something?

It might be pulling data from the PSD such as names of layers and comments

This is a cool suggestion. We haven't done that yet though!