{"id":1682,"date":"2010-11-15T10:24:58","date_gmt":"2010-11-15T10:24:58","guid":{"rendered":"http:\/\/mts-help.nick.php.dev\/after_sale_support\/working_with_photoshop\/Basic\/article13.html"},"modified":"2020-02-06T09:21:47","modified_gmt":"2020-02-06T14:21:47","slug":"update-changes-your-template","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/update-changes-your-template.html","title":{"rendered":"Update changes to your template"},"content":{"rendered":"After you’ve done all appropriate changes to your web design template in Adobe Photoshop you should update those changes to your HTML documents.\r\n\r\nFirst of all you must know some basics about slices in Adobe Photoshop. Each slice in PSD file represents image or background in HTML document. Slices in PSD file marked by blue rectangles. If you can’t see slices for any reasons you should choose “View\/Show\/Slices…”<\/span> from the top menu. To manage slices you should use slice tool from the tools panel (hotkey “K”<\/span>). Actually there is two slice tools in this toolset: “Slice Tool”<\/span> and “Select<\/span> Slice Tool”<\/span>. Use “Shift+K”<\/span> hotkey to switch between those tools. All appropriate slices already placed in PSD file included in your web design template package. So you’ll need only Select Slice Tool.\r\n\r\nBefore updating images using save for web you should make sure that slices you want to save don’t overlapping with other slices. For example big background image slice can contain smaller slice for button image. So before saving this slice you should bring it on top. To do it you should\u00a0\u00a0 select this slice using Select Slice Tool. Then go to the options panel at the top of the screen. If you can’t see this panel for any reason you should show it selecting “Window\/Options”<\/span> from the top menu. At the left of the panel you’ll see four slice order buttons: Bring to Front, Bring Forward, Send Backward and Send to Back. Click Bring to Front button to bring this slice to front. If you’ll need to update small button image slice in future you should \u201cSend\u201d to \u201cBack\u201d this big slice to see that smaller slice.\r\n

<\/p>\r\n

Slice Order Buttons<\/p>\r\n\r\nAs you know some of text represented as plain text in HTML, so before saving images containing such text you should hide it. To do it you should select layer containing that text.\r\n\r\nThe easiest way to do that – is to control click it, just click on this image holding “Ctrl”<\/span> button. But if some transparent layers exist over this image layer you’ll have some troubles with it. Top layer will be selected instead of your image layer.\r\n\r\nTo check content of current selected layer do the following. Go to layers panel, choose “Window\/Layers”<\/span> if you cant see it for any reasons. Find out highlighted layer in layer list – this is the current selected layer. At the left of the layer name you can see “eye”<\/span> icon. Click it some times to “hide\/unhide layer”<\/span> and see which text disappears in whole picture. If this is text you want to hide – you are one the right way. If selection is wrong use alternative way to select layer with appropriate image.\r\n\r\nRight click with mouse on image. List of layers will appear. Try to choose different layers from that list, note that text layers have same name that it’s content. Use procedure described above to make sure that you have selected right layer.\r\n\r\nIf you’ve selected needed type layer hide it by clicking “eye”<\/span> icon at the left of layer name in layers list.\r\n\r\nNow it’s time to update your images using Save For Web procedure.\r\n\r\nChoose “File\/Save for Web…”<\/span> from the top menu or use “Ctrl + Alt + Shift + s”<\/span> hotkey. Save for web window will appear.\r\n\r\nIn this window you can change optimization options of images. Actually our designer already set optimization options for best quality\/size balance. But if you want your site to load faster you can decrease image quality. Select slice using select slice tool. At the right you’ll see panel with image options. You can change value of quality input box for .Jpeg image or colors for .GIF and .PNG images.\r\n\r\nNow select slice that you want to update by clicking on it with Select Slice Tool. If you want to update several slices at once you should select them holding “Shift”<\/span> button.\r\n

<\/p>\r\n

Image Options<\/p>\r\nWhen you have selected all slices you want to update click \u201cSave\u201d<\/span> button at the right top corner of save for web window. Save Optimized As window will appear.\r\n\r\nBrowse to the HTML folder of your web design template. Change File Type option to Images only and Slices option to Selected Slices. Other options may damage original HTML structure.\r\n

<\/p>\r\n

Save Optimized Window<\/p>\r\nIf everything goes in right way you’ll see pop-up window asking for image replacement confirmation. Confirm that request.\r\n

<\/p>\r\n

Replace Confirmation<\/p>\r\n\r\nIf such window doesn’t appear make sure that you’re saving images to appropriate folder. Also check slice name by double clicking on it. Name and image type must be same as image in HTML have.\r\n\r\nNow it’s time to check modifications you’ve made. Go to the HTML folder of your web design template and launch HTML file to see changes.\r\n\r\nNote!<\/span> Please, make sure you have watched this video tutorial on how to use “bring to front” feature in Photoshop.","protected":false},"excerpt":{"rendered":"

After you’ve done all appropriate changes to your web design template in Adobe Photoshop you should update those changes to your HTML documents. First of all you must know some basics about slices in Adobe Photoshop. Each slice in PSD file represents image or background in HTML document. Slices in PSD file marked by blue […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[355,250],"tags":[564],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1682"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=1682"}],"version-history":[{"count":11,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1682\/revisions"}],"predecessor-version":[{"id":86401,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1682\/revisions\/86401"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}