Update changes to your template

当你在Adobe Photoshop中对你的网页设计模板做了适当的修改后，你应该 update those changes to your HTML documents. 首先，你必须知道一些关于切片在Adobe Photoshop的基础知识. Each slice in PSD file represents image or background in HTML document. Slices in PSD file marked by blue rectangles. 如果你不能看到切片，你应该选择 “View/Show/Slices…” from the top menu. 要管理切片，你应该使用工具面板(热键)中的切片工具 “K”). 实际上，这个工具集中有两个切片工具: “Slice Tool” and “Select Slice Tool”. Use “Shift+K” 热键在这些工具之间切换. 所有合适的切片都已放入 PSD file 包含在您的网页设计模板包. 所以你只需要选择切片工具. 在使用save for web更新图像之前，你应该确保你想要保存的切片不会与其他切片重叠. For example big background 图像切片可以包含较小的切片按钮图像. 所以在保存这片之前，你应该把它放在上面. 要做到这一点，你应该使用选择切片工具选择这个切片. 然后转到屏幕顶部的选项面板. 如果你因为任何原因看不到这个面板，你应该显示它正在选择 “Window/Options” from the top menu. 在面板的左侧，您将看到四个切片顺序按钮, Bring Forward, Send Backward and Send to Back. 单击“带到前面”按钮将该切片带到前面. If you’ll need to update 小的按钮图像切片在未来，你应该“发送”到“返回”这个大切片，以看到较小的切片.

Slice Order Buttons

如你所知，有些文本表示为纯文本 HTML，因此在保存包含此类文本的图像之前，您应该隐藏它. 要做到这一点，你应该选择包含该文本的图层. 最简单的方法-是控制点击它，只需点击这个图像 “Ctrl” button. 但是如果在这个图像层上存在一些透明层，你就会遇到一些麻烦. 顶部图层将被选中，而不是您的图像图层. 要检查当前选定图层的内容，请执行以下操作. Go to layers panel, choose “Window/Layers” if you cant see it for any reasons. 在图层列表中找到高亮的图层-这是当前选中的图层. 在图层名称的左边你可以看到 “eye” icon. Click it some times to “hide/unhide layer” 看看哪个文字在整个画面中消失了. 如果这是你想隐藏的文本-你是一个正确的方式. 如果选择错误，请使用其他方法选择合适图像的图层. Right click with mouse on image. List of layers will appear. 尝试从列表中选择不同的图层, 请注意，文本层的名称与其内容相同. 使用上面描述的步骤来确保你选择了正确的图层. 如果你选择了需要的类型图层，点击隐藏它 “eye” 图层列表中图层名称左侧的图标. Now it’s time to update 您的图像使用保存为Web过程. Choose “File/Save for Web…” from the top menu or use “Ctrl + Alt + Shift + s” hotkey. Save for web window will appear. 在此窗口中，您可以更改图像的优化选项. 实际上，我们的设计师已经为最佳质量/尺寸平衡设置了优化选项. 但是如果你想让你的网站加载更快，你可以降低图像质量. 使用选择切片工具选择切片. 在右侧，您将看到带有图像选项的面板. 您可以更改质量输入框的值 .Jpeg image or colors for .GIF and .PNG images. Now select slice that you want to update 用选择切片工具点击它. If you want to update 几片，你应该选择他们持有 “Shift” button.

Image Options

当你选择了所有你想要的切片 update click “Save” 按钮在保存为网页窗口的右上角. 将出现“另存优化为”窗口. Browse to the HTML 你的网页设计模板文件夹. 将文件类型选项改为“仅图像”，将切片选项改为“选定切片”. Other options may damage original HTML structure.

Save Optimized Window

如果一切顺利，你会知道的 pop-up 窗口要求更换图像确认. Confirm that request.

Replace Confirmation

如果这样的窗口没有出现，请确保您保存图像到适当的文件夹. 也检查切片名称通过双击它. 名称和图像类型必须与中的图像相同 HTML have. 现在是时候检查你所做的修改了. Go to the HTML 文件夹的网页设计模板和启动 HTML file to see changes. Note! Please, 确保你已经观看了这个视频教程，学习如何在Photoshop中使用“带到前面”功能.