xHtml+CSS布局中高效切图技巧解析

"怎么切图.pdf" 本文是一篇关于在xHtml+CSS布局时代如何高效切图的教程，适合初学者和美工人员阅读。主要内容包括使用Photoshop（PS）进行切图的基本技巧和方法，强调了在CSS布局中避免使用切片而采用选区的重要性。 首先，文章指出在Web2.0背景下，xHtml+CSS布局已经成为网页设计的标准，而从设计稿到实际网页的转换过程中，切图是关键步骤。作者提倡使用选区而非切片，以提高工作效率和灵活性。 文章列出了三个需要掌握的关键知识点： 1. **PS中的参考线和标尺**：这些工具帮助设计师精确地划分和对齐元素，确保切出的图片能够准确地与网页元素匹配。 2. **图层基础**：理解图层的概念和操作，有助于管理和编辑不同部分的图像，使得切图过程更为有序。 3. **【合并拷贝】命令**：这个不常用的快捷键（Ctrl+Shift+C）能将当前选区内的所有可见图层内容复制到剪贴板，对于包含多个图层的复杂设计尤其有用。 接着，作者提出了切图时应进行的思路分析： 1. **识别独立图片**：如logo和banner等，它们通常是单独的图片文件。 2. **平铺背景图片**：如导航条背景，需要考虑重复和无缝拼接。 3. **精灵图（Sprite）**：对于一些小图标，使用精灵图可以减少HTTP请求，提升网页加载速度。 教程详细介绍了具体的切图步骤： 1. 使用**矩形选框工具**围绕目标区域绘制选区，例如banner。 2. 执行**【合并拷贝】**命令，将选区内的所有可见图层内容复制。 3. 新建一个文件，大小不用预先设定，因为PS会自动根据剪贴板内容调整。 4. 粘贴（Ctrl+V）选区内容到新文件，完成切图。 文章还配有一些示意图，以图2为例，展示了如何使用矩形选框工具选取banner区域，以及图3展示了新建文件后粘贴选区的过程。 在文章最后，提到了几个相关的交流群，可能是为了方便读者进一步学习和讨论相关话题。 通过这篇教程，读者可以了解到在CSS布局中如何有效地进行切图，掌握基本的PS切图技巧，并理解为什么在某些情况下使用选区而非切片更优。同时，了解如何分析设计稿并规划切图策略，有助于提高整体的工作效率。