XHTML+CSS布局下PS切图教程

"xhtml+css时代ps中怎么切图" 在网页设计中，XHTML与CSS的使用成为了主流，告别了传统的表格布局。在这样的背景下，如何高效地从Photoshop（PS）中进行切图变得至关重要。这篇文章由作者逸乡浪子分享了他的切图技巧，特别强调了使用选区而非切片的方法。 首先，了解必要的知识点是关键。这包括： 1. **参考线和标尺**：在PS中，参考线和标尺是辅助设计者精确切割图像的重要工具，它们可以帮助确保元素被准确地对齐和分割。 2. **图层基础知识**：图层管理在PS中至关重要，不同的设计元素通常会被放在不同的图层上，便于管理和编辑。 3. **PS的两个拷贝命令**：通常我们使用的“拷贝”(Ctrl+C)只是复制当前选区或当前图层的内容，而“合并拷贝”(Ctrl+Shift+C)则会复制选区内的所有可见图层的内容，这对于切图尤其有用。 文章的核心在于分析和实施切图的思路： **分析步骤**： 1. **识别独立图片**：像Logo和Banner这样的元素通常需要作为独立的图片导出。 2. **识别需平铺的图片**：如导航栏的背景可能需要平铺，需要按照特定尺寸切出。 3. **识别精灵图需求**：一些小图标可以合并到一个大的精灵图中，减少HTTP请求，提高页面加载速度。 **实现方法**： 1. 使用矩形选框工具，根据参考线创建选区，例如选取Banner部分。 2. 使用“合并拷贝”命令复制选区内容到剪贴板。 3. 创建新文件，大小自动适应剪贴板内容，然后粘贴（Ctrl+V）内容。 这个过程不仅展示了切图的基本步骤，还强调了理解网页布局和优化性能的重要性。对于初学者和经验丰富的设计师来说，这些技巧都是提高工作效率和精准度的宝贵指南。然而，值得注意的是，每个人的工作流程可能略有不同，读者可以根据自己的需求和习惯进行调整。文章最后，作者也鼓励读者提出批评和建议，体现了开放的学习态度。