Takes a Photoshop image and creates a web page coded using best practices that works in all major browsers.
Webbsy saves you hours of work by doing the tedious and repetitive parts of the conversion.
Name Layers and groups to export with a #
Run Webbsy and click the "Build" Button
View your created web page ready for final tweaking
Sites are outputted for different devices including desktops, smartphones and tablets.
Automatically export your PSD without any layer name markup. Webbsy will automatically create names for your layers for you. This is a great way to get a live preview on a browser.
Webbsy exports all of your elements using CSS3, which is supported in all major modern browsers. It’s also compatible with IE 7 and 8.
Webbsy optionally exports a handy Reference Sheet that gives you the details of your CSS and HTML elements.
Webbsy converts everything it can into native HTML and CSS like a designer would. If something can't be converted into native HTML (e.g. some Photoshop effects aren't supported in browsers), then Webbsy will export those layers as images. This ensures that your code is always clean and professional as it can be, but also ensures that your website looks the same as your original Photoshop image in every browser.
Webbsy creates clean professional HTML and CSS code, just like you would create yourself. All code is properly indented and follows best practices for HTML and CSS.
Webbsy takes a Photoshop image then creates all parts of the web page for you.
By default, when Webbsy automatically slices layers, it exports them as PNG images. But, you can easily tell Webbsy which format you prefer.
Just add a file extension to the layer name.
In the example above, the "phone" graphic is exported as a PNG image, while the "temple_ceiling" photo is exported as a JPEG image.
You can use either .jpg or .jpeg to export an image as a JPEG.
Normally, Webbsy exports JPEG images at a quality of 60.
This is a good compromise between file size and image quality.
If you need a higher or lower quality setting, you can manually specify the image quality by adding a quality attribute to the layer's name
with a value between 0 and 100.
Create a link from any layer or layer group. Just add an "href" attribute to the layer name.
Webbsy supports all 629 Google Fonts. Just use any Google Font in your Photoshop image and Webbsy automatically includes the code to make it work with your website.
If you work with a CSS preprocessor like LESS, SASS, SCSS or Stylus, Webbsy automatically exports in those formats for you.
If you work in an HTML templating language like HAML, Slim or Jade, or work with designers that do, Webbsy automatically exports in those formats for you.
