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.
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.
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:
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.
Photoshop CSS, HTML5, Photoshop, Website designer