《Photoshop CC 》电子课件
Photoshop CC 电子课件,Photoshop CC ,Photoshop,CC,电子课件,Photoshop,电子,课件
第14章Web图形处理与切片 本章学习要点:认识 Web 安全色 掌握切片工具的使用方法 掌握创建、编辑切片的方法 掌握 Web 图形的优化和输出第14章 Web图形处理与切片 14.1了解Web安全色将非安全色转化为安全色在“拾色器”中选择颜色时,若在所选颜色右侧出现 警告图标,则说明当前选择的颜色不是 Web 安全色。单击该图标,即可将当前颜色替换为与其最接近的 Web 安全色。第14章 Web图形处理与切片 在安全色状态下工作(1)在“拾色器”中选择颜色时,可以选中底部的“只有 Web 颜色”复选框,选中之后可以始终在 Web 安全色下工作。第14章 Web图形处理与切片 (2)在使用“颜色”面板设置颜色时,可以在其菜单中选择“Web 颜色滑块”命令。“颜色”面板会自动切换为“Web 颜色滑块”模式,并且可选颜色数量明显减少。(3)也可以在其菜单中选择“建立 Web 安全曲线”命令。之后能够发现底部的四色曲线图出现明显的“阶梯”效果,并且可选颜色数量同样减少了很多。第14章 Web图形处理与切片 14.2切片的创建与编辑为了使网页浏览更加流畅,在网页制作中往往不会直接使用整张大尺寸的图像。通常情况下都会将整张图像“分割”为多个部分,这就需要使用到切片技术。切片技术就是将一整张图像“切割”成若干小块,并以表格的形式加以定位和保存。第14章 Web图形处理与切片 什么是切片在 Photoshop 中存在两种切片:用户切片和基于图层的切片。用户切片是使用“切片工具”创建的切片,而基于图层的切片是通过图层创建的切片。创建新的切片时会生成附加的自动切片来占据图像的区域,自动切片可以填充图像中用户切片或基于图层的切片未定义的空间。每一次添加或编辑切片时,都会重新生成自动切片。用户切片和基于图层切片由实线定义,而自动切片则由虚线定义。第14章 Web图形处理与切片 详解“切片工具”使用“切片工具”创建切片时,可以在其选项栏中设置切片的创建样式。正常:可以通过拖拽鼠标来确定切片的大小。固定长宽比:可以在“宽度”和“高度”文本框中设置切片的宽高比。固定大小:可以在“宽度”和“高度”文本框中设置切片的固定大小。基于参考线的切片:创建参考线以后,单击该按钮可以从参考线创建切片。第14章 Web图形处理与切片 详解“切片选择工具”使用“切片选择工具”可以对切片进行选择、调整堆叠顺序、对齐与分布等操作,在工具箱中单击“切片选择工具”按钮。设置切片选项切片选项主要包括对切片名称、尺寸、URL、目标等属性的设置。在使用“切片工具”状态下双击某一切片或选择某一切片并在选项栏中单击“为当前切片设置选项”按钮可以打开“切片选项”对话框。第14章 Web图形处理与切片 利用切片工具创建切片选择“切片工具”,然后在选项栏中设置“样式”为“正常”,与绘制选区的方法相似,在图像中单击并拖拽鼠标创建一个矩形选框。释放鼠标就可以创建一个用户切片,而用户切片以外的部分将生成自动切片。第14章 Web图形处理与切片 基于参考线创建切片在包含参考线的文件中可以创建基于参考线的切片。按 Ctrl+R 组合键显示出标尺,然后分别从水平标尺和垂直标尺上拖拽出参考线,以定义切片的范围。单击工具箱中的“切片工具”按钮,然后在选项栏中单击“基于参考线的切片”按钮,即可基于参考线的划分方式创建出切片。第14章 Web图形处理与切片 基于图层创建切片选择图层,执行“图层 新建基于图层的切片”命令,就可以创建包含该层所有像素的切片。基于图层创建切片以后,当对图层进行移动、缩放、变形等操作时,切片会跟随该图层进行自动调整。第14章 Web图形处理与切片 选择、移动与调整切片创建用户切片,单击工具箱中的“切片选择工具”按钮,在图像中单击选中一个切片。按住 Shift 键的同时单击其他切片进行加选。第14章 Web图形处理与切片 如果要移动切片,可以先选择切片,然后拖拽鼠标即可。如果要调整切片的大小,可以拖拽切片定界点进行调整。第14章 Web图形处理与切片 复制和粘贴切片如果要复制切片,可以在使用“切片选择工具”状态下按住 Alt 键,待光标变为 时单击并拖动即可复制出新的切片。第14章 Web图形处理与切片 删除切片1、使用“切片选择工具”选择一个或多个切片以后,按 Delete 键或 Backspace 键可以删除切片。2、执行“视图 清除切片”命令,可以删除所有的用户切片和基于图层的切片。3、选择切片以后,单击鼠标右键,在弹出的菜单中选择“删除切片”命令,也可以删除切片。第14章 Web图形处理与切片 锁定切片1、执行“视图 锁定切片”命令,可以锁定所有的用户切片和基于图层的切片。2、锁定切片以后,将无法对切片进行移动、缩放或其他更改。在切片上进行操作时会弹出对话框,提示无法移动。想 要 解 除 锁 定 切 片,可 以 再 次 执 行“视图 锁定切片”命令。将自动切片转换为用户切片要为自动切片设置不同的优化设置,必须将其转换为用户切片。使用“切片选择工具”选择一个或多个要转换的自动切片。在选项栏中单击“提升”按钮,即可将所选的自动切片或图层切片提升为用户切片,第14章 Web图形处理与切片 划分切片“划分切片”命令可以将自动切片沿水平、垂直或同时沿这两个方向划分出用户切片。使用“切片选择工具”选中某一切片。在选项栏中单击“划分”按钮,打开“划分切片”对话框。第14章 Web图形处理与切片 组合切片使用“组合切片”命令,Photoshop 会通过连接组合切片的外边缘创建的矩形来确定所生成切片的尺寸和位置,将多个切片组合成一个单独的切片。使用“切片选择工具”选择多个切片,单击鼠标右键,然后在弹出的菜单中选择“组合切片”命令,所选的切片即可组合为一个切片。使用“切片选择工具”同时选中这两个切片(按住Shift 键可以加选),接着单击鼠标右键,选择“组合切片”命令,此时这两个切片会组合成一个单独的切片。第14章 Web图形处理与切片 导出切片使用“存储为 Web 所用格式”命令可以导出和优化切片图像。该命令会将每个切片存储为单独的文件并生成显示切片所需的 HTML 或 CSS 代码。执行“文件 存储为Web 所用格式”命令,设置参数并单击“存储”按钮。选择存储位置及类型。第14章 Web图形处理与切片 14.3网页翻转按钮在网页中按钮的使用很常见,并且按钮“按下”、“弹起”或将光标放在按钮上都会出现不同的效果,这就是翻转。要创建翻转,至少需要两个图像,一个用于表示处于正常状态的图像和一个用于表示处于更改状态的图像。第14章 Web图形处理与切片 14.4Web图形输出详解“存储为Web所用格式”命令创建切片后对图像进行优化可以减小图像的大小,而较小的图像可以使 Web 服务器更加高效地存储、传输和下载图像。执行“文件 存储为 Web 所用格式”命令,可以打开“存储为 Web 所用格式”对话框,在该对话框中可以对图像进行优化和输出。第14章 Web图形处理与切片 Web图形优化格式详解不同格式的图像文件其质量与大小也不同,合理选择优化格式,可以有效地控制图形的质量。可供选择的 Web 图形的优化格式包括 GIF、JPEG、PNG-8、PNG-24 和 WBMP 格式。优化为GIF格式GIF 是用于压缩具有单调颜色和清晰细节的图像的标准格式,它是一种无损压缩格式。GIF 文件支持 8 位颜色,因此它可以显示多达 256 种颜色。优化为JPEG格式JPEG 格式是用于压缩连续色调图像的标准格式。将图像优化为 JPEG 格式的过程中,会丢失图像的一些数据。第14章 Web图形处理与切片 优化为PNG-8格式PNG-8 格式与 GIF 格式一样,可以有效地压缩纯色区域,同时保留清晰的细节。PNG-8 格式也支持 8 位颜色,因此它可以显示多达256 种颜色。优化为PNG-24格式PNG-24 格式可以在图像中保留多达 256 个透明度级别,适合于压缩连续色调图像,但该格式的文件比 JPEG 格式的文件要大得多。第14章 Web图形处理与切片 优化为WBMP格式WBMP 格式是用于优化移动设备图像的标准格式。WBMP 格式只支持 1 位颜色,即WBMP 图像只包含黑色和白色像素。Web图形输出设置在“存储为 Web 所用格式”对话框右上角的优化菜单中选择“编辑输出设置”命令,可以打开“输出设置”对话框,在这里可以对 Web 图形进行输出设置。直接在“输出设置”对话框中单击“确定”按钮即可使用默认的输出设置,也可以选择其他预设进行输出。第14章 Web图形处理与切片 14.5导出到ZoomifyPhotoshop 可以导出高分辨的 JPEG 和 HTML 文件,然后可以将这些文件上载到 Web 服务器上,以便查看者平移和缩放该图像的更多细节。执行“文件 导出 Zoomify”命令,可以打开“Zoomif TM导出”对话框,在该对话框中可以设置导出图像和文件的相关选项。第14章 Web图形处理与切片 课后练习1、为网页划分切片2、创建网页翻转按钮
收藏
编号:48761393
类型:共享资源
大小:159.42MB
格式:ZIP
上传时间:2022-01-14
30
积分
- 关 键 词:
-
Photoshop CC
《Photoshop
CC
》电子课件
Photoshop
电子
课件
- 资源描述:
-
《Photoshop CC 》电子课件,Photoshop CC ,《Photoshop,CC,》电子课件,Photoshop,电子,课件
展开阅读全文
- 温馨提示:
1: 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2: 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
3.本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 装配图网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
装配图网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。