什么是切图?80%的人存在误解

CSS/设计
353
0
0
2022-06-20

什么是切图?80%的人存在误解

外人说:

切图就是把图片切碎

百度说:

切图是指将设计稿切成便于制作成页面的图片,并完成html+css布局的静态页面。

通俗来讲,把一张设计图 利用到切片工具 把自己所需的切成一张张小图,然后用DIV+CSS完成静态页面书写,完成CSS布局。

切图大家都有个误区,觉得切图就是把图片切出来,其实并不完全是这样,把图片切出来这个过程是叫切片。

切图的目的:第一个是让网页稿有了交互性,实现你平时看到的各种各样的功能。

第二个是体积,所以切图时候一定注意少用图片工具:主流是dreamweaver,也有公司自己开发平台进行制作的。

采用div+css布局更能减小网页体积 是表现与内容分离。

知乎说:

我理解的网页设计中的切图,有三个境界:

  1. 能把所有设计稿里出现的图形元素按照基础要求切出来交给前端工程师。
  2. 对所有切图进行优化,有针对图片输出体积的优化、有利用 CSS Sprite 减少请求的优化、也有针对减少自己后期网站改版升级时候工作量的优化。这部分已经需要很多前段方面的知识了。要让切图也「语义化」必须得和前段配合得很好。
  3. 从超出「图片」的角度思考并且实现更高阶的效果,比如现在做网页经常需要考虑桌面和移动平台的不同分辨率,使用 Responsive 的布局的话切图应该怎么切,是不是需要切两套;遇到 iPad 或者 rMBP 的高清屏怎么处理网页中的图片以及背景;是否可以应用一些新的技术比如 Web Font、Font Icon、CSS 3 里的新特性来减少网页里的图片等等