2、网页切片
定义:简单理解将网页图片切分为一些小碎片的过程,目的是为了提升网页浏览的流畅性。
切片创建非常简单,在裁剪工具箱中。
鼠标绘制矩形选框范围会成为“用户切片”,而范围外的会自动切分,成为“自动切片”
自动切片可以隐藏,也可以通过提升成为“用户切片”
其他内容与裁剪及选框工具差不多。
如果切片处于隐藏状态:视图-显示-切片,可以显示切片。
创建出的切片可以复制、组合、删除等操作,以便得到合适的切片。
复制:按住Alt键拖到切片;
组合:用切片选择工具选择多个切片(按住Shift),右键执行,组合切片。
删除:用切片选择工具选择切片后,鼠标右键删除切片,也可以用Delete或Backspace键来删除切片。删除切片后会重新自动生成切片以填充文档区域。
打开PS软件,点击“文件”—“打开”,打开要处理的图片。找到左侧菜单中的第五个图标,右键点击选择“切片工具”。把它当做小刀一样在图片上划,会自动生成一个矩形的'框。切好后,选择“文件”—“存储为web所用格式”。
清除全部切片:视图>清除切片。
1、首先在PS中打开一张需要进行切片操作的图片。2、然后右键点击左侧工具栏中的“裁剪”按钮,在打开的选项中点击“切片工具”。4、然后将图片切割成为需要的数量和大小。5、切割完毕后点击页面左上角的“文件”,在下拉框。
锁定切片:锁定后无法对切片移动、缩放或其他更改。执行:视图>锁定切片。
自动切片无法进行优化设置,所以我们有时候需要提升为用户切片。
切片的导出:执行“文件>导出>存储为Web所用格式(旧版)”,在弹出的窗口中设置“优化格式”为GIF,单击存储完成导出。
3、网页翻转按钮
网页上不同状态下,呈现出不同的颜色或者样式的按钮,方便用户了解当前操作状态,这就是翻转按钮。
要创建翻转按钮至少需要两个图像,一个是用于表示正常状态的图像,另一个则用于表示处于更改状态的图像。
01、打开PS软件,点击“文件”,再点击弹出的下拉菜单中的“打开”,打开想要切片的图片。02、找到左面的裁剪工具,右键后在弹出的工具里面点击切片工具。03、点击切片工具后会出现一把小刀,随意拉动会切割图片,每块被切除的。
举例:
素材1
实例33.1-右上角创建播放器翻转按钮效果
应用矩形工具+椭圆工具+钢笔工具,绘制模式为形状,创建视频播放器翻转按钮效果
1、首先在电脑上打开PS软件。2、首先打开PS软件并点击左上角的“文件”,在弹出的下拉菜单中的“打开”。3、打开需要调整的图片后,找到左面的裁剪工具,右键后在弹出的工具里面点击切片工具这个选项。4、然后点击切片工具后。
4、Web图形输出
重要内容:再重复一次
设置不同的存储格式
不同的格式的图像文件其质量与大小也不同。
可供选择的Web图像的优化格式包括:GIF、JPEG、PNG-8、PNG-24、WBMP
GIF:网页最常用的格式。可显示256种颜色,参数设置较多,重要的进行解释
颜色深度算法、颜色:可选择、数值越大,颜色越接近原图像
PS切片工具的使用方法:1、打开原本准备好的一张图片,可以把图片直接拉到PS中,也可以用菜单栏上的文件工具来打开文件。2、把图片缩放到合适的大小,然后选择左手边工具栏上的一把像小刀一样的工具,然后右击,出同三个选。
交错:正在下载文件时,在浏览器中显示图像的低分辨率版本。
损耗:通常设置5~10,可减少文件大小5~40%,大于10,图像的质量也会降低。
JPEG:是一种比较成熟的有压缩格式的图像格式之一,虽然会丢失部分数据,但人眼几乎无法分别差异。
压缩品质:越大,图像细节越丰富,但文件也越大。
模糊:数值越大,模糊效果越明显,但会减少图像的大小,最好不要超过0.5
杂边:为原始图像的透明像素设置一个填充颜色。
PNG-8:专门为Web开放的,支持244位图像并产生无锯齿状的透明背景。
WBMP:用于优化移动设备的标注格式,只支持1位颜色,只包含黑白像素。
5、导出为Zoomify
可能是要上传吧。未上传测试预览效果失败,可能是我的操作问题,有懂得的大神请指点下。
这章节内容都是干货,现在不是我的重点,后续从事时再单独研究。
感谢大家的关注及阅读。
下节学习3D立体效果,应该很有趣。