9 ms·
Show HN: Markupwand, magically convert your photoshop files to HTML & CSS
- brettcvz 14y agoThis. is. awesome. Super cool
- cypherpunks01 14y agoThis 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?
- le_isms 14y agoIt might be pulling data from the PSD such as names of layers and comments
- suren 14y agoThis is a cool suggestion. We haven't done that yet though!
- alagu 14y agoIt 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 http://cl.ly/image/0q2O0O0y2B1P)
- reustle 14y agoThat was the only piece I couldn't understand. This is fantastic, great work!
- ananddass 14y agoGood 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!
- chetan51 14y agoHow does it work?
- bherms 14y agoAgreed... Is this an automatic thing or are we looking at a psd2html.com type thing?
- eurodance 14y agohttp://en.wikipedia.org/wiki/Optical_character_recognition http://en.wikipedia.org/wiki/Optical_character_recognition
- Danieru 14y agoPSD does not rasterize text by default. Besides getting the text is far from the most difficult task that they need to handle.
- alagu 14y agoHi bherms, this is totally automatic. You'd have to edit the class names as of now.
- fredsters_s 14y agoLove these guys
- sunsu 14y agoI'm on a MBA and can't see the bottom of the tutorial images. My browser height isn't tall enough.
- alagu 14y agoHi 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 http://www.markupwand.com/assets/illustration-break-page.png
- callmevlad 14y agoI had the same issue. In Chrome, if you go full screen, it lets you use the trackpad to scroll around.
- jenntoda 14y agoAwesomeness! 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 14y agoThanks 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 :)
- codegeek 14y agoJust 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 14y agoThere is no manual work involved. After generation, you would have to edit the class names and you should be done.
- danso 14y agoI 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 14y agoAlmost 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 14y agoAs 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.
- dmix 14y agoI remember years ago when I had the revelation I was wasting time designing so much of the site in photoshop and that I could design much more usable and "organic" sites in HTML. I became adamantly HTML/CSS-first, using photoshop only for graphics. These days I tend to do more of a mix, I like the expressive freedom of photoshop and the rigid grid structures and typography of HTML. But I almost always start in photoshop after mocking. Probably from habit.
- brianfryer 14y ago@dmix: Totally feel you on "organic HTML". Yes, Photoshop is a fabulous tool for making graphics, and playing with ideas... but something about handwritten code feels really good.
- jontas 14y ago
- brianfryer 14y agoAs 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.
- crazygringo 14y agoHow on earth are div's non-semantic? Most things on a page are just "boxes" -- not lists or links or images or paragraphs, just boxes. And div's are the correct thing to use in this case. Also, "class soup" is a proper CSS programming practice in many people's opinion -- many CSS style guides explicitly state that it's preferable to use descriptive class names in CSS rules, rathen than element names. Mainly because, as a site evolves, changing a single element name might break your entire CSS rule structure, while basing your CSS on class names makes everything much more robust and maintainable.
- brianfryer 14y ago> How on earth are div's non-semantic? Most things on a page are just "boxes" -- not lists or links or images or paragraphs, just boxes. And div's are the correct thing to use in this case. Because most things on a page are not "just boxes". <header>, <article>, and <footer> are not "boxes" -- they have semantic meaning. > Also, "class soup" is a proper CSS programming practice in many people's opinion -- many CSS style guides explicitly state that it's preferable to use descriptive class names in CSS rules, rathen than element names. Everyone is welcome to their own opinion, but I'm of the persuasion that the fewer CSS rules the better. Not only does fewer CSS rules mean that there are fewer things to remember when styling a page, it also means a smaller file is requested. It's better to use HTML like this... <article> <hgroup> <h1>Page title</h1> <h4>Written by so-and-so in such-and-such categories.</h4> </hgroup> <p>This is a paragraph.</p> </article> ... than like this ... <div class="content"> <h1 class="page-title">Page title</h1> <div class="meta-data">Written by so-and-so in such-and-such categories.</div> <p>This is a paragraph.</p> </div> There is so much more semantic meaning in the former bit, than the latter. Too, semantic HTML can help with SEO. > Mainly because, as a site evolves, changing a single element name might break your entire CSS rule structure, while basing your CSS on class names makes everything much more robust and maintainable. No need to argue with that. Building web apps is a whole other animal, and (having used Bootstrap) I can see why using lots of classes could be beneficial in certain situations. However, I am still of the opinion that semantic HTML > "class soup". Edit: I accidentally a word.
- crazygringo 14y agoHow 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 14y agoI'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 14y agoSorry 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 14y agoDon'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 !
- kirillzubovsky 14y agoI 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 14y agoI 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.
- alexlande 14y agoThis 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 14y agoAgreed. We haven't worked on optimizing the no. of css rules yet. This is an early working prototype.
- coryl 14y agoThe "r" in "Jack Dorsey" renders funny in Chrome AND in my Firefox. Just me?
- suren 14y agoNot just you. We see that too. Not sure why though!
- 10char 14y agoLooks like it has "letter-spacing: -1px" applied
- magic_haze 14y agoProbably 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)
- theatraine 14y agoI 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!
- massarog 14y agoIs this any different than csshat?
- damian2000 14y agoAnd so begins PSDD (Photoshop Driven Development).
- bluetidepro 14y agoThis is exactly what I'm afraid of, when I see products like this. Ugh.
- kevinbluer 14y agoAwesome! 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 http://www.adobe.com/products/muse.html) fit into the picture?
- lincolnq 14y agoWow, nice work. This looks great.
- rikacomet 14y agois there a offline version available ?
- alagu 14y agoWe don't have a offline version.
- deleted 14y ago[deleted]
- mehuln 14y agoThis 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!
- alagu 14y agoHey guys, our queue is growing pretty long. We are scaling it up, meanwhile you might face delays.
- bosky101 14y agocongrats 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 14y agohey bosky101, That is exactly what we plan to do. This is just the starting point :)
- ianstormtaylor 14y agoAre 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 14y agoWe 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.
- ing33k 14y agoVery 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 ?
- jabo 14y agoWhen 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 14y agoNo, it shouldn't be. Could you please try in incognito window?
- jabo 14y agoIt 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 14y agoAh, ok. When we are signed in into multiple accounts, it allows us to select a specific account to sign in with.
- grigy 14y agoHow about PNG? Is it just me here using Fireworks for web design?
- alagu 14y agoWe have plans to do Fireworks as well, but the usage numbers are too low.
- ricardobeat 14y agoFireworks 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.
- nimbix 14y agoDoes 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 14y agoEasy, they just used a pirated version that has no such restrictions!
- QuantumDoja 14y agoAs 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
- alanbyrne 14y agoGreat post! P.S I have used (ie paid for) PSD2HMTL and the folks did a magic job. I recommend them to all.
- ricardobeat 14y agoThe folks or the machines?
- leejw00t354 14y agoThe service provided by http://www.psd2html.com/ http://www.psd2html.com/ seems to be done by humans. "100% human-coded. 370+ professionals"
- vially 14y agoI think the grandparent was talking about http://www.psd2html.co.uk/ http://www.psd2html.co.uk/
- moconnor 14y agoYou might want to check the image magnify links on your home page, Chris: http://www.psd2html.co.uk/screenshots/3.png http://www.psd2html.co.uk/screenshots/3.png goes to a css-free html page instead of an image, for example. Edit: also, the unthemed "Error - Login - Paypal" link from your "Free 3-Day Trial" button probably doesn't convert very well...
- splatcollision 14y agoThe 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/ http://www.edit-room.com/ (my project, friendly critiques welcome) [2] http://beta.typecastapp.com/ http://beta.typecastapp.com/
- splatcollision 14y agoJust 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 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 14y agoWhat 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.
- splatcollision 14y ago
- tambourine_man 14y agoDrag and drop to upload doesn't work in Safari. Nor does the progress bar, or selecting multiple files.