{"id":338,"date":"2013-03-10T21:03:34","date_gmt":"2013-03-10T21:03:34","guid":{"rendered":"http:\/\/blog.psd2htmlconverter.com\/en\/?p=338"},"modified":"2016-01-21T00:55:33","modified_gmt":"2016-01-21T00:55:33","slug":"non-destructive-merge-of-several-layers-into-one-tag-merge","status":"publish","type":"post","link":"https:\/\/blog.psd2htmlconverter.com\/en\/2013\/03\/10\/non-destructive-merge-of-several-layers-into-one-tag-merge\/","title":{"rendered":"Non-destructive merge of several Photoshop layers into one &#8211; tag #merge"},"content":{"rendered":"<p>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.<\/p>\n<p>Let&#8217;s see how automated Photoshop to html\/css conversion will work out in such case. <!--more-->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:<\/p>\n<ul>\n<li>a lot of images will be created,<\/li>\n<li>size of the web page will increase, and hence the loading time will also increase,<\/li>\n<li>html code will become less readable<\/li>\n<\/ul>\n<p>It&#8217;s very simple to deal with this problem, though. You can use one of two non-destructive techniques, described below:<\/p>\n<ol>\n<li>Create new Layer Group and put there all layers that correspond to the image. Mark that group with the <strong>#merge<\/strong> tag. In the process of automated <a href=\"\/\/psd2htmlconverter.com\/en\/convert-psd-to-html\/\">Photoshop to HTML conversion<\/a> this group will be merged into one layer.<\/li>\n<li>Another way is to convert these layers into a single Smart Object. Select desired layers in the Layers palette and launch &#8220;Layer&#8221; -&gt; &#8220;Smart Objects&#8221; -&gt; &#8220;Convert to Smart Object&#8221; command.<\/li>\n<\/ol>\n<p>Such approach will lead to the better quality of <a title=\"automated psd to html conversion\" href=\"http:\/\/psd2htmlconverter.com\/en\/\">automated psd to html conversion<\/a>. Moreover, you will find that structure of your PSD templates become much better, easy to understand and work with.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s see how automated Photoshop to html\/css conversion will work out in such case.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1,5],"tags":[],"class_list":["post-338","post","type-post","status-publish","format-standard","hentry","category-all","category-new"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts\/338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/comments?post=338"}],"version-history":[{"count":5,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts\/338\/revisions"}],"predecessor-version":[{"id":505,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts\/338\/revisions\/505"}],"wp:attachment":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/media?parent=338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/categories?post=338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/tags?post=338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}