
Show HN: Markupwand, magically convert your photoshop files to HTML & CSS - alagu
http://www.markupwand.com/
======
QuantumDoja
As the developer of www.psd2html.co.uk I can honestly say I am very happy that
someone else out there is doing something similar to me...you might ask why?

When I launched Psd2Html in late 2010, I was unable to get on the front page
of HackerNews, or any other website for that matter, I was down-voted to
oblivion. I had insulting, slanderous comments posted on the Mac App Store
which were untrue.

I was ridiculed by "hand coding only" services like www.psd2html.com, the
employee lots of people and don't want to make people redundant, but the
problem with this approach is that they will never move forward.

I was certain, and I'm still certain hand-coding will go the way of the Dodo.

So Markupwand, thanks for re-validating the idea, and I'm glad I'm not the
only one who thought the idea was worthwhile.

I can see that I need to enhance my service/business model/add relative CSS
positioning as an option.

I hope we'll be good competition for each other.

Thanks

Chris

~~~
crazygringo
Hand-coding isn't going to go the way of the dodo, because in practice, web
pages are vastly more complex than Photoshop or Word documents.

They need to respond dynamically to window resizing, have rules about which
directions text boxes expand in when they overflow with text, how the page
operates when a whole section is missing, etc.

Any tool that appropriately allows for all this complexity to be specified,
has already become as complex as CSS itself, thus defeating the purpose.

And in my personal front-end experience, 95% of my time is spent on these
harder details. Throwing together the basic HTML/CSS skeleton of a page is
trivial, and so fast I don't really need a tool to speed it up, especially
when that tool is always bound to get _something_ wrong.

~~~
sic1
You sir, are spot on. You put it perfectly here:

> Any tool that appropriately allows for all this complexity to be specified,
> has already become as complex as CSS itself, thus defeating the purpose.

This was my immediate issue with CSS Hat. The designers are not trained to set
up their photoshop files to be properly evaluated in CSS. They do not know
CSS, or how it works. They get their pixels "perfect" (or way off most of the
time when doing real math with css), but the fact is to use tools like this
they have to get on board 100%. For some designers, this is easier than
others.

Don't get me wrong, I'm still interested in trying out the tool. Maybe it is
magic...

------
crazygringo
How on earth does this not use absolute positioning, but actually figuring out
the full width of text boxes, whether they are expandable vertically or not,
etc.?

I'd love some insight into the technique.

I mean, I work with designers who often don't even know what their intention
was in the first place, what should happen if a line of text turns into two...

~~~
vhf
I've just seen that some of the technique/some of your questions are answered
after sign up! I'll c/c here for your convenience (without the explainations
and examples available on sign up)

Five tips given on the website to get good results (I have not tested myself)
:

\- _Break your page into smaller pieces_ (header = 1 .psd, same for body,
footer, sidebar, etc)

\- _Use one text layer for each logical piece of text_

\- _Each icon or image should be a single layer or a smart object_

\- _Want CSS buttons? Use shapes; not images._

[edit] I know there's only four. Fifth being _avoid any hacks_ , it's probably
not understandable by someone not really very familiar with Photoshop. Or I
just couldn't figure out what _photoshop-design-hacks_ are used by actual
webdesigners.

~~~
haxplorer
Sorry about the fifth point not being clear. Will try to make it clear.

Some designers produce effects using indirect methods instead of using the
photoshop effects. These should be avoided as much as possible, for the code
to be clean.

~~~
vhf
Don't worry, I was only quoting the titles of the tips.

The explaination and screenshots on your website made this fifth tip very
clear to me !

------
danso
I don't have much experience with prototyping-with-PSD...how standardized is
that process among designers? This is a neat tool but it seems like it might
be very dependent on good practices by designers, and seeing how adherence to
best practices -- in naming conventions, file types, layer arrangement, etc --
can be highly variable among coders, I can only imagine what it's like among
pure visual designers.

~~~
dmix
Almost every designer I know implements in photoshop.

For prototyping, its either gomockingbird, balsamiq or some quick HTML (plus
the odd photoshoping) to simulate interaction.

~~~
brianfryer
As a designer, I've never "implemented" in Photoshop. Ever. Illustrator, yes
(a _long_ time ago), but there's nothin' like coding your own design.

In fact, I design entirely with HTML/CSS (using the Live CSS Editor feature of
the Web Developer add-on for FireFox) and use Illustrator to mix and pick
colors.

~~~
jontas
I cannot tell you how much I wish all designers worked this way. I spend more
time cutting PSDs than I do building the backend of the site (which is what I
am actually hired to do).

~~~
davedx
Yep, every web development job I've ever had has required me to get Photoshop
installed, usually sooner rather than later. Then the company moans and drags
their feet about licensing costs etc. My current Mac has one old cracked
version of Photoshop, one version with an expired trial, and the Gimp...

------
brianfryer
As a visual designer who has learned to code, I feel that this is not a good
idea for the simple fact that it outputs non-semantic HTML (divs are not
semantic HTML) and CSS "class soup".

I am all for getting more designers to output code (thus saving a lot of
developer time), but these sorts of things not only reinforce non-semantic (&
unmanageable) coding practices, but also handicaps those who use them by not
teaching them how the web works.

~~~
alagu
We do worry about semantic HTML. We are working on a editor which would allow
users to modify tags as well.

~~~
brianfryer
This makes me happy!

Back when I was learning how to code my own HTML/CSS, I really could've used
something like this to help understand how HTML/CSS works together.

Being able to edit tags is a great feature :-)

------
jenntoda
Awesomeness!

Now how about hire a little army to manually split my page to pieces, make it
compatible to get markupwand to work, then give me back the whole page as if
you did it all by magic. Imagine the premium I'd pay for that!

~~~
alagu
Thanks Jenn!

Splitting page into pieces is only a temporary fix. We are working on getting
the entire page work (automatically), it will be out pretty soon :)

------
cypherpunks01
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?

~~~
alagu
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>)

~~~
reustle
That was the only piece I couldn't understand. This is fantastic, great work!

------
nimbix
Does Markupwand use scripted Photoshop instances in the background? And if so,
how did you manage to work around the fact that the standard Photoshop license
does not permit such use?

~~~
StavrosK
Easy, they just used a pirated version that has no such restrictions!

------
ananddass
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!

------
splatcollision
The problem with this and other photoshop > CSS tools, is that you're still
stuck with Photoshop. We should be elevating design by designing web native
and making it beautiful, not using the same old fixed desktop beasts. Edit
Room [1] and the like (typecast [2], etc.) will be the wave of the future.
Great web design requires great human communication, which means great
typography. You can't get close to the real web type display with Photoshop,
and this tool won't help there.

Unlike Edit Room, using Photoshop + Markupwand generates all units in pixels -
not too useful for real multi-device prototyping. Others have mentioned the
tag soup. It's fine for those who can't move on from Photoshop, but more and
more folks are interested in trying something new.

[1] <http://www.edit-room.com/> (my project, friendly critiques welcome) [2]
<http://beta.typecastapp.com/>

~~~
splatcollision
Just to prove a point, I roughly re-created the sample PSD on the markupwand
page in my tool, Edit Room:

<http://www.edit-room.com/review/RnNDyuCX>

It's not pixel-perfect, but it is flexible and responsive, and should work
decently well across different screens for 5 minutes of work.

(I don't support images yet, so you won't see icons or an avatar, but the type
and grid and color and shape and all those important things about design are
well-represented)

~~~
DeepDuh
What you show in the video looks pretty good. A few things that caught my eye:

The signup form is unconventional. that in itself is ok. but the cleartext
password text field is a really bad practice. Also the whole thing just looks
very hand-stricken, you know what I mean? I'm not that much of a designer
myself, maybe others have a different taste.

I really hope you succeed, overall I think it's a very good idea. I like the
abundance of CSS options and the format pasting you show in the video very
much. The video makes me want to use it right away.

~~~
shock3naw
Why are cleartext password fields bad practice? How many accounts are actually
compromised via shoulder surfing? They're especially annoying on mobile
phones.

edit: Since there are password fields, I guess the question should have been
"How many accounts _would_ be compromised by shoulder surfing?" I bet it's a
truly insignificant number.

~~~
DeepDuh
1) As OP has pointed out, security is not just about effective security, it's
also about the perceived one. Cleartext passwords are so unusual it makes me
question as a user, how things are handled in the backend.

2) I don't see the problem on mobiles. Not sure about Android or WP but at
least on iOS I always see the last character that is entered. Still vulnerable
to shoulder peeking but not as bad as cleartext.

------
ianstormtaylor
Are you guys looking into methods that don't apply widths and pixel-perfect
margin/padding to everything? Obviously much harder, but until these
converters can do that they just aren't substitutes for handwritten CSS.

I almost never define a fixed width for elements. Here every single element
has a fixed width.

~~~
alagu
We have few approximations to do simple versions of this, but not perfect yet.
Yes, it is harder to guess that an element should be of fluid width.

------
alagu
Hey guys, our queue is growing pretty long. We are scaling it up, meanwhile
you might face delays.

~~~
alagu
Queue is back up normal now.

But a few photoshop files failed, since Markupwand isn't yet capable of
handling full pages and a few complicated cases.

~~~
swamy_g
Super Machi, good job on the app.

~~~
alagu
Thanks machi.

------
kirillzubovsky
I can see this as a great product for designers who would like to code, but
don't have the time to learn. Now they can take this instant output and simply
tweak it, which is a lot simpler than to learn from scratch. Great job guys!

~~~
brianfryer
I can totally see something like this being used as a tool to teach designers
how to code.

Design something > run it through some secret sauce > output HTML/CSS +
provide explanations/advice/best-practices/etc.

------
damian2000
And so begins PSDD (Photoshop Driven Development).

~~~
bluetidepro
This is exactly what I'm afraid of, when I see products like this. Ugh.

------
alexlande
This is really impressive, but I'm very hesitant. Obviously this html output
won't be useful until you can modify tags, and as far as the CSS goes, this is
not really ok:

    
    
        margin-top: 14px;
        padding-top: 15px;
        margin-left: 44px;
        padding-left: 11px;
        padding-bottom: 11px;
        padding-right: 348px;

~~~
alagu
Agreed. We haven't worked on optimizing the no. of css rules yet. This is an
early working prototype.

------
kevinbluer
Awesome! Really psyched to try it out...I was about to go down the path of
trying CSS Hat but I'll give this a shot first.

Any thoughts on where tools like Adobe Muse
(<http://www.adobe.com/products/muse.html>) fit into the picture?

------
mehuln
This is definitely a problem worth solving, and I am glad these guys are doing
it. I've worked with designers who hated doing, and developers are not fond of
it too. As it improves, it has lots of potential.

Great start guys!

------
theatraine
I just tried it out with a .psd, the downloaded zip contained what appeared to
be other users projects. This may be disconcerting to some, and will hopefully
be quickly addressed.

The tool, however, is very impressive. I'll try to respond with a list of bugs
I notice once I figure out how to fix them through hand-coding. Good work!

~~~
suren
The issue has been fixed now. Really sorry for this bug though. You could
check now and let us know!

------
ing33k
Very impressive ! and I am sure many people will use this service ..

About the quality of code that it generates : I don't mind setting some on in
my team to work on optimizing the generated code , but having some base
html/css to work on is definitely a plus point.

Oh, BTW, You wont share my PSD with any one else right ?

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

~~~
alagu
Hi Sunsu, sorry for that. We are fixing it right now. Meanwhile, here is the
image url - <http://www.markupwand.com/assets/illustration-break-page.png>

------
grigy
How about PNG? Is it just me here using Fireworks for web design?

~~~
ricardobeat
Fireworks has it's own "export to tables + image slices" thing. The end result
is not too different, tag soup and fixed dimensions for everything. Next step
up is hand-coding. Or really smart robots.

------
bosky101
congrats guys, two Q's

have you thought about maybe options to split html into ejs/jade/other
templates as well

you could in theory be able to do the reverse (html to image ) as well ?

~~~
suren
hey bosky101, That is exactly what we plan to do. This is just the starting
point :)

------
codegeek
Just tried it using the provided PSD. I am supposed to get an email with
results. Is there any manual work involved in getting the HTML/CSS ?

~~~
alagu
There is no manual work involved. After generation, you would have to edit the
class names and you should be done.

------
jabo
When I click on "Try now" I get a "Bad Request Error 400". Could it be because
of me being signed into multiple google accounts?

~~~
alagu
No, it shouldn't be. Could you please try in incognito window?

~~~
jabo
It works in incognito window. It does look like it's an issue with multiple
account signed in. Yours is not the first site on which Google auth is failing
for me when I'm signed into multiple accounts.

~~~
alagu
Ah, ok. When we are signed in into multiple accounts, it allows us to select a
specific account to sign in with.

------
fredsters_s
Love these guys

------
massarog
Is this any different than csshat?

------
lincolnq
Wow, nice work. This looks great.

------
tambourine_man
Drag and drop to upload doesn't work in Safari.

Nor does the progress bar, or selecting multiple files.

------
brettcvz
This. is. awesome. Super cool

------
coryl
The "r" in "Jack Dorsey" renders funny in Chrome AND in my Firefox. Just me?

~~~
suren
Not just you. We see that too. Not sure why though!

~~~
magic_haze
Probably because chrome (and/or ff) doesn't handle decimal point sizes well
(18px =~ 13.5pt) 13pt works fine though, as does 14pt (after adjusting the
word break)

------
chetan51
How does it work?

~~~
bherms
Agreed... Is this an automatic thing or are we looking at a psd2html.com type
thing?

~~~
eurodance
<http://en.wikipedia.org/wiki/Optical_character_recognition>

~~~
Danieru
PSD does not rasterize text by default. Besides getting the text is far from
the most difficult task that they need to handle.

------
rikacomet
is there a offline version available ?

~~~
alagu
We don't have a offline version.

~~~
RageKit
will there be one ? what about opensourcing ?

~~~
ebr4him
everything doesn't have to be open source.

~~~
RageKit
no, and i never implied that if you read carrefully. Still, that doesn't
answer my question.

