[thesunny]

Full disclosure, my company just released a Photoshop plugin that converts Photoshop images into web sites.

First of all, I think the idea behind Macaw is great. A lot of the people at my company really admire their work and there is a solid target market that would want to use Macaw.

One of the things to keep in mind is that the target market is, likely, primarily designers and not developers. Important to keep in mind so we don't have a skewed developer perspective. Hand coding is a poor medium for prototyping or doing design mock ups, but can be quite fast if you know exactly what you are doing and you already have image assets.

Another under served market are designers that love using Photoshop, especially to do mock ups and prototypes, but cringe when it comes to turning those mock ups into actual web sites. Unfortunately, Photoshop has basically the worst tools, if you can call them that, for turning Photoshop images into a websites.

Our response is a tool we call Webbsy.

Basically, you just name any layer or layer group like a CSS selector like #header or .header. Run Webbsy, and it slices all the images and generates the HTML and CSS using the names you gave it.

Like Macaw, it generates clean HTML using static positioning and floats and divs with clear. It respects layer groupings as well so if your #logo layer is inside your #header layer, the HTML/CSS will do the same. It uses static positioning by default, but allows the use of absolute positioning as well. Actually, until I saw the Macaw video, I thought we were the only ones who had an algorithm for making code that doesn't use absolute positioning.

This is really important because in a real website, the lines of text may render shorter or longer depending on the font rendering engine. This can cause unsightly overlaps or too much white space.

Webbsy also allows slicing, linking, it automatically makes Google fonts work, converts rectangles into divs, text is preserved as text, etc.

We also are just about to release our reference sheet feature. If you are a coder but just don't want to spend all the time doing rote monkey work like copying over fonts, spacings, colors, etc. then use the reference sheet. It generates all the CSS styling (but not positioning/layout) and shows you thumbnails of all the assets. You then write all the layout and HTML by hand but still save hours on transposing code.

Our next feature, coming soon, is auto export so you don't have to do any renaming of layers. This has less control and selectors are generated automatically but is perfect for showing clients a work in progress without having to ship JPEG or PNG images through email. This also means you get real previews so your fonts look like they would in a website. One problem with mockups is that your 9px font looks fine using Photoshop's font rendering engine, but looks really bad in a browser rendering of a font. When a client asks for a few changes, you can make them in minutes and just re-build the site in Webbsy instead of wasting time trying to figure out how to modify the HTML/CSS.

Finally, we will be coming out with more modes and features that help designers that use Photoshop make conversions the way they want to. One of the things we recognize is that designers work in different ways. Some need to write all the code by hand (which is what our reference sheet is for) and others don't mind how the code looks as long as the web page looks right.

You can find us at www.webbsy.com

Sunny

[proexploit]

With the increased growth of mobile devices and massive numbers of screen sizes in existence, how do you plan to handle those issues? What I've seen of Macaw looks like it gives you the ability to write clean, maintainable code that works in many devices and handles media-queries etc. From your examples I looked at, they might as well be absolutely positioned because you're not gaining anything by floating every element and giving it a fixed width and height.

[thesunny]

Hi Proexploit,

That's a good question. And I'll address it but first I'd like to make a clarification.

You mention that if all the floating elements have fixed width and height, then what benefit is there versus simply using absolute positioning.

So, for clarity, if we did give widths and heights to all elements, then yes, apart from perhaps some code readability, there wouldn't be many other benefits; however, we don't actually give heights to text elements. This allows the browser to flow the text dynamically and because of this, it is possible that text will render shorter or longer than in the original Photoshop file because of where the text breaks at the end of the line. This can be exasperated when certain fonts like Arial may display as Helvetica and visa versa depending on the operating system.

Elements that are under the text will either pull up or push down as the text gets shorter or longer. There is also another benefit in that if you tie the code into something like a CMS where the images or text are editable, then the layout will reflow in the way you would expect.

The question was: How do we handle mobile devices or devices with different screen sizes?

There are actually ways that we can support this in the future and it might even take just a few days to write it. We currently have a full generated internal DOM that we convert to HTML and CSS. We also export to other formats. For example, I forgot to mention this earlier, but we also automatically export in LESS, HAML, Slim, Jade, Less, SASS, SCSS and Stylus.

I haven't thought this all the way through, but I don't think it will be difficult for us to export all of the elements so that they are always stacked for use in mobile devices and resize images to fit better. We can probably share the HTML code and then provide a different version of the CSS for mobile. There are some more details than that I can think of already, but they can probably all be overcome.

I would like to address that this isn't the typical use case if you are designing your website in Photoshop. In such a case where you wish to use identical code to support multiple screen sizes, you would probably hand write code with a grid to achieve this. Even in this scenario, however, our software can help you slice images, generate HTML and CSS styling code and put it in a reference page to make it much easier for you to code the final page. This will still massively accelerate your web page development, of course under the assumption you are using Photoshop. If you don't care to use Photoshop, and if you are more of a developer than a designer than there may not be much benefit in doing your prototyping this way, then our software is not a good choice for you.

Again, we think Macaw is cool, but you aren't, at this point anyways, going to get anything near the depth, maturity, familiarity and available knowledge on the web for an image editor as Photoshop. For designers, it is probably appealing to use a tool that they already know well and is very good at what it does. I don't think Macaw is trying to compete as an image editor though. So you'd probably build your image assets in something like Photoshop and then import and layout in Macaw. For some, they may prefer everything in a single tool.