切版网(2013~2023)

http://qieban.cn
做完设计,找切版网
QQ:6135833
微信:dingxiangming82

2017年06月14日

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

本文就“什么是切图?80%的人存在误解”展开讨论,作者切版网,发布于2017年06月14日 全文共646个字,预计阅读时长2分9秒

外人说:

切图就是把图片切碎

百度说:

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

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

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

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

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

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

知乎说:

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

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

新手说:

切图太简单,小儿科

老手说:

在零几年的时候我们把前端叫做切图。

文章为原创或者来自于互联网,转载请注明来源,如果文章有侵权请联系,我们会及时删除。

更多相关文章

未分类

网站切版的优化有哪些方法?

发布时间:2023年06月10日 标签:,

1. 利用CSS Sprites技术来减少HTTP请求的数量。 2. 对于能使用CSS实现的效果,尽量避免使用 […]

未分类, 本站动态

微信小程序切图echarts层级太高解决方案

发布时间:2022年08月27日 标签:

摘要:项目中因为需求,底部的导航栏是自己写的,在开发者工具中一切正常但是在真机上页面滑动时,的层级比高,调过两 […]

未分类, 本站动态

解决移动端 click 事件延迟300ms插件fastclick.js

发布时间:2022年04月14日

这是一款绿色的提高用户体验的js插件,可以放心使用。为什么使用?解决触发元素的 click 事件延迟300ms […]

未分类

跨屏是一种趋势,企业顺势才能赢得未来

发布时间:2021年12月6日 标签:, ,

根据艾瑞网的统计,早在2014年中国移动互联网市场规模为2134.8亿元,突破千亿元大关,同比增长115.5% […]

未分类

什么是跨屏版网站?它和电脑版网站有什么不同?

发布时间:2021年12月6日 标签:,

跨屏版网站有很多种说法,比如响应式网站、自适应网站等等,我们暂且叫“跨屏版”,是因为它和 电脑版,触屏版等有一 […]

未分类

为什么网站需要跨屏?

发布时间:2021年12月6日 标签:, , ,

跨屏网页设计是近几年来广为流行的方式,跨屏建站方案替代了传统的多屏建站方案,多屏建站即为不同的终端单独建立一个 […]

查看更多