如何利用photoshop设计web页面……

设计 Web 页
Photoshop 和 ImageReady 中的图形工具和功能简化了大多数 Web 设计任务。
页面设计

在 ImageReady 中，针对页面和横幅、网格、导向线和智能参考线的预设文档大小简化了页面版式。 在 Photoshop 和 ImageReady 中，都可以使用文本、绘图和绘画工具向版面中添加内容。 在 ImageReady 中，可以使用图层、图层组和编组的图层来排列和对齐内容。 要试验不同的页面编排或导出页面的不同形式，请使用“图层复合”调板。

切片
如果页面编排已准备就绪， 可以输出到 Web，您可以使用 Photoshop 和 ImageReady 中提供的切片工具，将页面版式或复杂图形划分为多个区域，并指定独立的压缩设置（从而获得较小的文件大小）。
翻转

可以使用 ImageReady 中的“Web 内容”调板来跟踪切片及其翻转状态。 例如，您可以针对某个 Web 页创建这样一个按钮：只要用户将指针放置在该按钮上，该按钮就会发光。并且，您可以管理按钮的状态以及这些状态中的活动。
动画

在 Photoshop 和 ImageReady 中，您都可以使用“动画”调板来创建简单的 Web 动画。 可以使用此调板来逐帧确定动画的外观。 您可以从 Photoshop 中将动画导出为动画 GIF，也可以从 ImageReady 中将动画导出为动画 GIF 或 SWF 文件。 在 ImageReady 中，您可以结合切片组、嵌套表、百分比宽度表以及远程翻转（将鼠标移到某幅图像上时，另一幅图像发生变化）来创建动画。
导出和图像优化

当页面或图形已准备就绪可用于最后的导出时，可以使用“存储为 Web 所用格式”对话框 (Photoshop) 和“优化”调板 (ImageReady) 来精确指定应如何导出页面或图形。
注释： 可以直接在 Photoshop 或 ImageReady 中 预览大多数 Web 效果。 但是，图像在 Web 上的外观取决于操作系统、颜色显示系统 以及用于显示图像的浏览器。 请务必在不同的操作系统上使用不同的浏览器，利用不同的颜色位深度预览图像。
在 Adobe GoLive 中进行准备

可以直接在 Adobe GoLive 中打开 Photoshop 和 ImageReady 文件。 在 GoLive 中，可以访问 Photoshop 文件中的切片、URL 和其他 Web 功能来进行管理和编辑。
工作流程自动化

Photoshop 和 ImageReady 提供了一种功能强大的系统，用于自动完成重复性任务。 例如，ImageReady 快捷批处理使设计人员能够快速将一批图像转换为可用于 Web 的格式。

将 Web 页切片
切片 是图像的一块矩形区域，您可以使用它在关联的 Web 页中创建链接、翻转和动画。 通过将图像划分为切片，您将能够更好地控制图像的功能和文件大小。

可以使用切片将源图像分成许多的功能区域。 在您存储图像和 HTML 文件时，每个切片都会作为独立文件存储，并具有其自己的设置和颜色调板，而且会保留正确的链接、翻转效果以及动画效果。
在处理包含不同类型数据的图像时，切片也非常有用。 例如，如果您希望为图像的某个区域加上动画效果（需要 GIF 格式），但想以 JPEG 格式优化图像的其余部分，则可以使用切片来隔离动画。



在处理切片时，请谨记以下基本要点：
可以通过使用切片工具或创建基于图层的切片来创建切片。
创建了切片后，您可以使用切片选择工具  将其选中，然后移动切片、调整切片大小或将它与其他切片对齐。
可以在“切片选项”对话框 (Photoshop) 或“切片”调板 (ImageReady) 中设置每个切片的选项，如内容类型、名称和 URL。

切片类型
切片按照其内容类型（自动、图像、无图像、表）以及创建方式（用户、基于图层）分类。
使用切片工具创建的切片称为用户 切片；基于图层内容的切片称为基于图层的切片。 当您创建新的用户切片或基于图层的切片时，将会生成附加自动切片来占据图像的其余区域。 换句话说，自动切片填充图像中用户切片或基于图层的切片未定义的空间。 每次添加或编辑用户切片或基于图层的切片时，都会重新生成自动切片。 可以将自动切片转换为用户切片。 表切片包含嵌套表。

用户切片、基于图层的切片和自动切片的外观不同 -- 用户切片和基于图层的切片由实线定义，而自动切片由虚线定义。 另外，每种类型的切片都显示不同的图标。 可以选取显示或隐藏自动切片，这使您更容易查看使用用户切片和基于图层的切片的作品。
子切片 是一种自动切片，它是在创建重叠切片时生成的。 子切片指示存储优化的文件时如何划分图像。 尽管子切片有编号并显示切片标记，但无法独立于底层切片选择或编辑子切片。 每次排列切片的堆叠顺序时都重新生成子切片。

可以使用不同的方法创建切片：
自动切片是自动生成的。
用户切片是用切片工具创建的。
基于图层的切片是用“图层”调板创建的。
表切片是用 ImageReady 中的“Web 内容”调板创建的。

基于图层的切片
从图层创建切片时，切片区域 将包含图层中的所有像素数据。 如果 移动该图层或编辑其内容， 切片区域将自动调整以包含新的像素。
基于图层的切片会在源图层发生修改时进行更新。
在处理翻转时，基于图层的切片特别有用。 如果将诸如投影或发光等效果应用于图层以创建翻转状态， 切片将自动调整以包含新的像素。 但是， 如果计划在动画期间在图像的一块很大区域上移动该图层，则不要使用基于图层的切片，因为切片尺寸可能会超出有用的大小。
基于图层的切片的灵活性较差，并且选项较少；但是，您可以随时将基于图层的切片或自动切片转换（“提升”）为用户切片。

选择一个或多个切片
执行下列操作之一：
选择切片选择工具 ，然后点按图像中的切片。 处理重叠切片时，点按底层切片的可见部分选择底层切片。
选择切片选择工具，然后按住 Shift 键点按，以便将切片添加到选区。
选择切片选择工具，然后在自动切片内或图像区域外点按，并在要选择的切片上拖移。 （在用户切片内点按并拖移可移动切片。）
(Photoshop) 选取“文件” >“存储为 Web 所用格式”。 在对话框中，使用切片工具选择一个切片。
(ImageReady) 在“Web 内容”调板中选择切片。 按住 Shift 键点按以选择其他的切片。
(ImageReady) 要选择文档中的所有用户切片，请选取“切片” >“选择所有用户切片”。 这样将会选择所有非自动切片，其中包括基于图层的切片。
在使用切片工具或切片选择工具时，通过按住 Ctrl 键 (Windows) 或 Command 键 (Mac OS)，您可以从一个工具切换到另一个工具。

划分用户切片和自动切片

使用“划分切片”对话框以便沿水平方向、垂直方向或同时沿这两个方向划分切片。 不论原切片是用户切片还是自动切片，划分后的切片总是用户切片。
注释： 不能划分基于图层的切片或嵌套表切片。
选择一个或多个切片。

执行下列操作之一：
(Photoshop) 选中切片选择工具后，在选项栏中点按“划分切片”。
(ImageReady) 选取“切片” >“划分切片”。
(ImageReady) 从“切片”调板菜单中选取“划分切片” 。

选择“划分切片”对话框中的“预览”以预览更改。
在“划分切片”对话框中，选择下列选项之一或全部：
水平划分为 在长度方向上划分切片。
垂直划分为 在宽度方向上划分切片。
定义要如何划分每个选定 切片：

选择“纵向切片”或“横向切片”并为其输入一个值，以便将每个切片平均划分为指定数目的切片。
选择“每切片像素”并为其输入一个值，以便使用指定数目的像素创建切片。 如果按该像素数目无法平均地划分切片，则会将剩余部分划分为另一个切片。 例如，如果将 100 像素宽的切片划分为 3 个新的 30 像素宽的切片，则剩余的 10 像素宽的区域变成新的切片。
点按“确定”。