Service of automated psd to html conversion is complemented with new (free!) tool to slice Photoshop template to images. Because of this, we are going to tell what should be taken into account when PSD slicing is performed and why it is not so trivial as may look like at first glance.
Things to consider when slicing PSD file to images
- First, you should choose quality level for exported graphics. There should be a default quality level and possibility to override it for every layer of PSD template.
- It should be possible to choose which images should be extracted in JPG format. Those layers, which do not contain transparent pixels, are extracted as JPG image automatically. Layers with transparent pixels by default are extracted in PNG format. Any layer which is tagged as #jpg will be sliced as JPG image.
- Graphics should be optimized for WEB as much as it can be. For example, PNG images should be compressed both lossless and lossy (so called PNG image quantization in 8-bit format). That should be done to decrease total size of graphics and improve SEO. Both types of compression are recommended by Google Pagespeed service.
JPEG images should also be optimized. - Text layers, which use standard web fonts (including Google fonts) and those layers styles for which there is exist a corresponding CSS style, should be converted as text in HTML markup. Other text layers should be converted as images.
- Image layers which can be represented as CSS3 code should not be extracted from PSD file at all. They should be converted as CSS code.
- Layer’s width and height should be as minimal as possible. That means that sliced images should not have empty transparent areas at the borders.
- It should be taken into account that layers may use not ‘normal’ blending mode. In this case layers cannot be extracted ‘as is’. It should include influence of layers which are located beneath.
- Layer effects should be applied to layers.
- Layer group effects should be applied to every layer inside that group.
- Sometimes it is needed to export whole layer group as image (for example, logo). If such group is tagged as #merge then it will be done automatically by the service.
- Images slicing should be performed quite quickly. It should take minutes, not hours.
Automated quick extraction of images from Photoshop template
All the aforementioned requirements are implemented in the automated PSD slicing tool. You should just upload PSD template, wait about a minute and download sliced images. That’s absolutely free.
If you have any ideas regarding psd slicing tool improvements – don’t hesitate to add comments to this post or add ideas via feedback tool or write us via the contact form.
To accelerate PSD to HTML conversion process you also can also use automated PSD to HTML/CSS conversion tool.
