Updating changes to your template in Photoshop...

[djbosak]

After you have finished all of the 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 the PSD file represents an image or a background in the HTML document. Slices in the PSD file are marked by blue rectangles. If you can not see these slices for any reason you should choose View/Show/Slices... from the top menu. To manage the slices you should use the slice tool from the tools panel (hotkey "K"). Actually there are two slice tools in this toolset: Slice Tool and Select Slice Tool . Use "Shift+K" hotkey to switch between these tools. All of the appropriate slices are already placed in the PSD file included in your web design template package. So you will only need the "Select Slice Tool".

Before updating images using the save for web function you should make sure that the slices you want to save do not overlap with other slices. For example, a large background image slice can contain a smaller slice for a button image. So before saving this slice you should move it on top. To do this you should select this slice using Select Slice Tool. Then go to the options panel at the top of the screen. If you can not see this panel for any reason you can show it by selecting Window/Options from the top menu. At the left of the panel you will see four slice order buttons: Bring to Front, Bring Forward, Send Backward and Send to Back. Click the Bring to Front button to bring this slice to front. If you need to update the small button image slice in the future you should use the Send to Back function for the large main background slice to see the smaller button slice.

Fig 8.8 Slice Order Buttons

As you know some of the text is represented as plain text in HTML, so before saving images containing such text you should hide it. To do it you should select the layer containing that text.

The easiest way to do that - is to control click it, just click on this image while pressing the "Ctrl" button. But if some transparent layers exist over this image layer you will have troubles with it. The top layer will be selected instead of your image layer.

To check the content of the current selected layer do the following. Go to the layers panel and choose Window/Layers. Find the highlighted layer in layer list - this is the current selected layer. At the left of the layer name you can see the "eye" icon. Click it to hide/unhide the layer and see which text disappears in whole picture. If this is text you want to hide - you are one the right track. If the selection is the wrong one you can use this alternative method to select the layer with the appropriate image.

Right click with your mouse on image. A list of layers will appear. Try to choose different layers from that list, note that text layers have the same name as the content. Use the procedure described above to make sure that you have selected the right layer.

If you have selected a needed type layer you can hide it by clicking the "eye" icon at the left of layer name in layers list.

Now it's time to update your images using the Save For Web function.

Go to File/Save For Web... from the top menu or use "Ctrl+Alt+Shift+S" hotkey. The save for web window will appear.

In this window you can change the optimization options for your images. Actually our designer has already set the optimization options for best quality/size balance. But if you want your site to load faster you can decrease image quality. Select the slice using the "select slice tool". At the right you will see a panel with image options. You can change the value of quality input box for JPEG image or colors for GIF and PNG images.
Now select the slice that you want to update by clicking on it with Select Slice Tool. If you want to update several slices at once you can select them by holding the "Shift" key.

Fig 8.9 Image Options

When you have selected all of the slices that you want to update, click the Save button at the right top corner of save for web window. The Save Optimized As window will appear.

Browse to the HTML folder of your web design template. Change the File Type option to Images Only and the Slices option to Selected Slices. Other options may play havoc with the original HTML structure.

Fig 8.10 Save Optimized Window

If everything goes right way you will see the pop-up window asking for image replacement confirmation. Confirm that request.

Fig 8.11 Replace Confirmation

If this window does not appear, make sure that you are saving the images to the right folder. Also check the slice name by double clicking on it. The name and image type must be same as the image in HTML.
Now it's time to check the modifications you have made. Go to the HTML folder of your web design template and launch the HTML file to see changes.