Webbsy Review – Instantly Convert PSD To HTML
If you are looking for a fast way of converting your Photoshop PSD files to HTML web pages, you might just want to take a look at Webbsy, a new Photoshop extension which speeds up the process.
Update September 2017
This product is no longer available.
For front-end web designers, the process of going from design to web page can take several routes.
If you use Photoshop for making up your site graphics and mockups, you are probably familiar with creating guides, using the Slice tool and then exporting your elements using Save for Web… From there you go to your text editor (or Dreamweaver etc) and use those graphics as you assemble your page and style it up with some CSS. There is an easier way…
I previously reviewed Slicy by MacRabbit, which lets you use naming conventions on your layers to export images, and Webbsy takes this on to another level. It is also available for Mac and Windows. You can download a 14 Day demo version here.
Like the SiteGrinder plugin, Webbsy lets you export your file as a complete web page, along with the graphics, css and other files which you can use. Your export includes .haml and .slim files for Ruby, .jade for JavaScript plus .less, .sass, .scss and .stylus files. You can export text and graphics as .png, .jpg or .gif files. If you use Google webfonts, these appear in your css too. Very handy!
Whilst SiteGrinder will set you back $347, (and the PSD2HTML service which is another option, but charges a monthly fee of £24.95 or roughly $40) Webbsy will only cost you $149. There are some big differences in the way they function – Webbsy is basically a script that you run, rather than a plugin with dialog boxes and options. However, it does a good job of building your page from your Photoshop layers, and you can control things like image file type and compression level by adding this to the layer name.
Using Webbsy
You give your layers or layer groups the # symbol, which tells Webbsy what IDs you are going to create in your HTML file, and if you leave spaces in layer names, the first word gets used for the ID. Once you are done with your file naming, go to the File menu > Scripts > Webbsy PSD to HTML Converter. This launches the single panel interface, where you can access the support docs or just press the big, blue Build button and sit back as your layers are converted. (The online support documentation and intro video are both excellent resources.) An Export file is created in the same location as your original file, containing a folder named after your Photoshop file, and inside that are all the files used to build your web page, ready for you to tweak. The file conversion builds a web page that is ready to use if you have no web design experience, but someone with a knowledge of HTML and CSS is going to want to make a lot of edits. Photoshop drop shadows and glows are rendered into the graphic, so they are no longer editable on export.*
The HTML file has the HTML 5 Doctype set, but you will need to add <meta charset=”utf-8″> etc manually. Everything is created as a div with an ID except text, which is all converted to paragraphs with classes such as p-1, p-2, which are used when text blocks appear inside a containing element. These containing divs are relatively positioned and may not appear in the order you would expect, which may be an issue if you are concerned with semantics:
In Summary
Webbsy is a very convenient way of converting your PSD files to HTML, and it does it quickly too. If you accept that the code will want editing and consider it as the perfect tool to rapidly build site templates, or even mockups that you want to show in a browser to your clients, it does an excellent job.
As of December 5 2013, Webbsy 1.1.0 has been released with some very welcome new features:
- A new Preview button allows you to auto slice and code a site – no need for layer naming conventions.
- You can set the build for browser compatibility – CSS3/IE8/IE9.
- A reference sheet can be exported. This is an HTML file with the information about your slices, sizes and CSS.
- You can now choose which additional export files to include.
Get Webbsy here: http://www.webbsy.com
*If you use Fireworks CS6 for building your site mockups, and exporting CSS, the CSS Professionalizr extension produces much cleaner code than Fireworks and converts button elements, gradients, shadows etc too.
Webbsy looks interesting indeed, was considering a service provider for our conversion requirements!
Nice post and shared a great thing that how one convert his psd file to html instantly with the help of webbsy.
I’ve been using webbsy in the past several times and nowadays I still use it sometimes. It is a great plugin but if you want your website to be SEO proof, you will need some HTML and CSS knowledge. The HTML/CSS that webbsy creates is nice to use as a basic foundation, but you will still need to run everything by hand to make sure all elements are positioned at the right place and that all text are actual texts and not images.
Personally I use Export Kit: http://exportkit.com. I build responsive websites all the time and export kit makes it easy to slice all your images for mobiles and create any screen layout you want. They even have a WordPress layout (if you use WordPress).
Problem is you will end up using export kit all the time, for every project you have.
There is also the new Extract option available through the Creative Cloud. All you need is a free account and you don’t need to go spending money on a third-party piece of kit.
I agree, all third-party plugins are a “piece of kit”. If you think the Extract option is good then use it – you may have minimal requirements. But if you want to build a responsive theme for 4 target screens pixel-perfect, or if you want to integrate Bootstrap 3 into your PSD design/output, or add custom CSS styles/themes – how can you achieve this with “the new Extract option in CC”?
This is default functionality in Export Kit – hey “don’t kit where you eat”!
P.S. if its “Free” its most likely “not what you want”, just “the price you want to pay”!
WEBBSY IS USELESS because the download is an issue and no matter how many emails you sent them (including a post on their website) no one bothers responding. As a result you have a plugin that you paid but virtually useless to you!
I bought Webbsy for my CS6 but could not even manage to download it because it was constantly given an error “The Exchange package is invalid. The exchange will not be installed”. When I wanted to take up it with Webbsy or Adobe, there was absolutely no help. SO far I sent 11 emails but not a single response!
Webbsy closed up and gone now.
Thanks for the update. What a shame.