Quite often web designers use several Photoshop layers to represent one entire image. However, web developer usually wants to represent this image with only one physical file.
Let’s see how automated Photoshop to html/css conversion will work out in such case. By default, separate image file will be created for each Photoshop image layer. Obviously, it will have a negative effect on the resulting html markup:
- a lot of images will be created,
- size of the web page will increase, and hence the loading time will also increase,
- html code will become less readable
It’s very simple to deal with this problem, though. You can use one of two non-destructive techniques, described below:
- Create new Layer Group and put there all layers that correspond to the image. Mark that group with the #merge tag. In the process of automated Photoshop to HTML conversion this group will be merged into one layer.
- Another way is to convert these layers into a single Smart Object. Select desired layers in the Layers palette and launch “Layer” -> “Smart Objects” -> “Convert to Smart Object” command.
Such approach will lead to the better quality of automated psd to html conversion. Moreover, you will find that structure of your PSD templates become much better, easy to understand and work with.
