本页主题: 如何利用photoshop设计web页面…… 打印 | 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题

ps设计

该用户目前不在线
级别: 论坛版主
精华: 1
发帖: 242
威望: 245 点
金钱: 2440 RMB
贡献值: 0 点
注册时间:2007-07-21
最后登录:2008-06-07

如何利用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 的格式。
顶端 Posted: 2007-07-26 11:58 | [楼 主]
ps设计

该用户目前不在线
级别: 论坛版主
精华: 1
发帖: 242
威望: 245 点
金钱: 2440 RMB
贡献值: 0 点
注册时间:2007-07-21
最后登录:2008-06-07

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

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



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

该用户目前不在线
级别: 论坛版主
精华: 1
发帖: 242
威望: 245 点
金钱: 2440 RMB
贡献值: 0 点
注册时间:2007-07-21
最后登录:2008-06-07

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

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

可以使用不同的方法创建切片:
自动切片是自动生成的。
用户切片是用切片工具创建的。
基于图层的切片是用“图层”调板创建的。
表切片是用 ImageReady 中的“Web 内容”调板创建的。
顶端 Posted: 2007-07-26 12:00 | 2 楼
ps设计

该用户目前不在线
级别: 论坛版主
精华: 1
发帖: 242
威望: 245 点
金钱: 2440 RMB
贡献值: 0 点
注册时间:2007-07-21
最后登录:2008-06-07

图片:


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

该用户目前不在线
级别: 论坛版主
精华: 1
发帖: 242
威望: 245 点
金钱: 2440 RMB
贡献值: 0 点
注册时间:2007-07-21
最后登录:2008-06-07

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

该用户目前不在线
级别: 论坛版主
精华: 1
发帖: 242
威望: 245 点
金钱: 2440 RMB
贡献值: 0 点
注册时间:2007-07-21
最后登录:2008-06-07

划分用户切片和自动切片

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

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

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

选择“纵向切片”或“横向切片”并为其输入一个值,以便将每个切片平均划分为指定数目的切片。
选择“每切片像素”并为其输入一个值,以便使用指定数目的像素创建切片。 如果按该像素数目无法平均地划分切片,则会将剩余部分划分为另一个切片。 例如,如果将 100 像素宽的切片划分为 3 个新的 30 像素宽的切片,则剩余的 10 像素宽的区域变成新的切片。
点按“确定”。
顶端 Posted: 2007-07-26 12:03 | 5 楼
开源嘛论坛 » Photoshop图片处理

Guest cache page, Update at 2008-12-04 16:12 桂ICP备07006725号
Powered by PHPWind v6.0 Certificate Code © 2003-07 PHPWind.com Corporation