手揣网教程:绿色安全纯净官方版,体验当今速度最快的浏览器!

前端之Photoshop切片

时间:2023/1/22作者:未知来源:手揣网教程人气:

[摘要]什么是切片 ? (Photoshop中的切片)切片:将图片切成几部分,一片一片往上传,这样上传的速度比较快。每个切片作为一个独立的文件传输,文件中包含切片自己的设置、颜色调板、链接、翻转效果...
什么是切片 ? (Photoshop中的切片)

切片:将图片切成几部分,一片一片往上传,这样上传的速度比较快。每个切片作为一个独立的文件传输,文件中包含切片自己的设置、颜色调板、链接、翻转效果及动画效果。

切片工具:主要是用来将大图片分解为几张小图片,这个功能用在网页中较多,因为现在的网页中图文并茂,也正因如此所须的时间就比较长,为了不让浏览网页的人等待时间太长,所以他们将图片切成几个小的来组成。

切片是网页制作过程中非常重要的一个步骤,往往切片的正确与否会影响着网页的后期制作。一般是用Ps或者Fw对网页的效果图或者大幅度的图片进行切割。重要的正确的切片会给网站带来一非常正面的影响。比如:减少网页加载时间、制作动态效果、优化图像、链接等。

一、网页切片的制作

1、 减少网页加载时间

有时候网页上可能需要大的banner图片,那么浏览器下载这个图片就要花费很长的时间,这是很不利于用户体验的。而网页切片的出现就很好的解决了这个问题。切片的使用使整个大的图片分为不同的很多的小图片,浏览器也会对这些小图片进行下载,这样浏览器下载图片的时间就大大的缩短了,节约了很多时间。

2、 优化图像

一般说一个完整的图像只能是一种格式,jpg、gif、png、psd、dpf或者其他,一种格式那么我们就只能采取一种优化方式。而网页切片可以把这张分割成很多小图片,并且可以保存成其他格式,可以分别对其优化。这样就能保证图片质量高等的情况下还能减少图片的内存,也提高网页的加载速度。

切片前的准备:另存网页PSD文件,整合ps的图片

切片的具体准备:分割切片、切片的类型(用户切片、非用户切片)

切片的基本要点:

1、根据颜色范围来切;

2、切片大小:把网页的切片切的越小越好;

3、切片区域为完整性:保证完整的一部分在一个切片内,例如某区域的标题文字,以后修改时方便;

4、导出类型:颜色单一过渡少,应该导出GIF,颜色过渡比较多,颜色丰富的应该导出JPG,有动画的部分应该导出为GIF动画;

5、保留文件:即使页面好了,也要保留带切片层的源文件,说不上哪天要改某个部分,例如文字什么的,直接修改单独到处所用的切片就可以了。

切片的图层显示和隐藏:背景图片的切片;不规则图片的切片。

切片的编辑:大小、调整、删除、清除切片(可一个个选中右击删除,也可视图所有都删除)、保存切片(存储为web所用格式)

删除切片

编辑切片选项:切片类型、名称:自动生成的,一般采用英文命名,网页代码中运用英文比较友好、URL:是链接地址、目标、ALT标记:通过可以搜索优化图片、 尺寸W H X Y、切片背景:一般默认无

划分切片:水平划分、垂直划分 组合划分

保存切片(存储为web所用格式)ctrl+shift+alt+s:一般常用格式为jif、png—24支持背景透明(透明度勾选支持背景透明)、jpeg(图片品质一般80以上)。 然后点击保存,保存格式,格式有极限图像,设置为默认设置,切片(所有切片:不管是用户切片还是非用户切片都会导出来、所有用户切片:只会导出 切到的切片、选中切片:只会导出在选中的切片),会自动生成一个文件夹(images)

切片的格式:

1、三种切片格式的介绍:颜色范围比较鲜艳的使用jpg格式、png支持网页透明、jif支持颜色范围比较单一。

2、三种切片格式的比较(适用范围):jpg网页中都支持这种格式;png支持透明和背景无关;jif动画可以发表情。

3、三种切片的适用范围及优缺点:png:IE6不支持图片透明;gif动画导出的颜色单一,当颜色鲜艳时会出现锯齿状。

切片的保存及重命名:

1、切片的导出保存

2、切片的重命名,名称最好是英文的,也不要以特殊的符号开头

切片的技巧(渐变、阴影、不规则) :

渐变:可以单独拉一个切片

阴影:网页中如何实现,css3也可以实现阴影但是ie6、ie8不支持,可以单独为阴影做一个切片,让背景关掉保存为png-24格式

不规则:背景隐藏掉,保存png格式

网页切片实战练习

有的颜色可以自己表示、挂件制作(整个切)、视频播放按钮

步骤:整理图层、另存一下(为图片做备份)、尽可能的做精确点、画布多的话可以新建一个然后复制到新的画布

切片如何快速插入:超链接或者添加为背景链接

总结 切片的知识点及要点:切片的概念、作用、格式选择

更多前端之Photoshop切片相关文章请关注PHP中文网!


Photoshop默认保存的文件格式,可以保留所有有图层、色版、通道、蒙版、路径、未栅格化文字以及图层样式等。



关键词:前端之Photoshop切片




Copyright © 2012-2018 手揣网教程(http://www.shouchuai.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版