Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

markupwand.com

Post reply on HN
Print view View original

31–40 of 129 posts

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

#31

Post by 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!

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

#32

Post by 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;

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

#33

Post by Danieru »

eurodance wrote: post #17
bherms wrote: post #15

Earlier quoted context omitted.

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

http://en.wikipedia.org/wiki/Optical_character_recognition

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

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

#35

Post by vhf »

crazygringo wrote: post #25

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...

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.

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

#36

Post by 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!

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

#37

Post by alexlande »

brianfryer wrote: post #28
crazygringo wrote: post #23

Earlier quoted context omitted.

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. 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,…

> 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". , , and 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 stat…

You're right that a bunch of divs like this is non-semantic. Anyone who thinks otherwise is crazy.

As far as the classes goes though, I would recommend that you check out a style like OOCSS or SMACSS (which I prefer) and give it a shot on a project. I style almost everything with classes currently, and I've found it much easier to maintain and extend than the style that you're describing.

It's a personal choice obviously, but I think you should definitely give it a shot and see what you think.

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

#38

Post by alagu »

theatraine wrote: post #36

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!

Apologies. Once we heard from 2-3 users, we immediately disabled the download link. We are working on a fix now.

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

#40

Post by brianfryer »

nnash wrote: post #29
brianfryer wrote: post #21

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 teach…

>divs are not semantic HTML This is very wrong, divs are as semantic as you want them to be. If you have an element that looks like this: Hello World Then yeah sure it's not semantic because you have two unnecessary divs holding a paragraph, but if it was just the one div holding a paragraph tag it would be perfectly acceptable in HTML 4.x onwards. The only cases I can see a div being non semantic are the silly examp…

> divs are as semantic as you want them to be.

Then they are not semantic at all.

, , all have semantic CSS class names. But they are not semantic HTML names. Remove the CSS, and all you have is , , and . This makes it difficult for screen readers (and web surfers who don't use CSS (are these people even real?)) to understand what the page is saying.

However , , and all have semantic meaning that can be discerned whether or not CSS is used.

Also: Whether or not something validates is not a good indicator of it being "semantic".

Post reply on HN