首页 >> 前端开发 >> ps切图|ps网页切图|为什么要ps切图?
ps切图|ps网页切图|为什么要ps切图?
发布时间: 2018年7月4日 | 浏览:
| 分类:前端开发
1、什么是切图?
切图是指将设计稿切成便于制作成页面的图片,并完成html+css布局的静态页面,通俗来讲,把一张设计图 利用到切片工具 把自己所需的切成一张张小图,然后用DIV+CSS完成静态页面书写,完成CSS布局。
2、为什么要切图?
html: <img src="" alt="">
css: backgroud-img:url(../images/sprite.png)
3、如何切图?
使用 PS工具、使用背景图、图片合并方案、浏览器兼容
4、都需要切哪些图?
5、切出来的图片保存为哪种格式?
修饰性的保存为 png24(支持半透明),png8。内容性的保存为 jpg。
6、为什么要切图,而不是整张图都放到html去呢?
a、一次性加载一张大图,会比较慢,效果就是进去后看到一张图一点点加载
b、切图后,一些横向和竖向的重复性图案,只需要一个像素宽的源图就行,节省不少资源。如知乎头部和网易云音乐头部导航条,整个背景可以之用一个像素宽的竖条,然后css控制横向铺开就可以了,这里要用一个像素宽的竖条,而非用一个像素点切图是因为,有轻微纵向渐变。
c、对于一些设计稿中的元素,甚至不需要源图,只需要取色, 全部铺开就好了,那就更省了,如网易头部。
上一条:« 前端开发前后分离的优势
下一条:北京软件外包在线学习考试系统 »