无废话网页重构系列——(4)切图与标注
本篇讲从设计稿中提取基础资源和信息:切图与标注。
合格的设计师,会使每个元素组基于矩形层,形成一个个单元,并做好图层分类及命名,不在‘组’上使用蒙版,按照栅格化模块化设计,考虑各组件的复用性、扩展性和兼容性。
遇到不合格的设计师,那就把设计稿退回去,深入交流沟通。
不建议设计师切图,因为要考虑到图形压缩格式、编码实现方式及图形替代方案。
不要直接用Adobe Photoshop/Fireworks划切片范围导出切片。
采用lower_snake_case
命名规则修改要导出的组或图层名称,命名方式为模块/组件_用途_状态
,绝不用表象的具体词汇,如大小尺寸、颜色、形状、新旧之类。推荐Renamy进行批量命名。
输出切片方式有很多,目前最新版CC非常便捷,选择要导出的组和图层,鼠标右键导出为
,进行“缩放设置、文件格式、图像大小、画布大小”配置后导出即可,并且还可以复制图层CSS样式;也可以选择切图插件,如Cutterman。
图标不建议做 Sprite 图,而是采用Web Font,推荐Iconfont。
方便接下来编码读取页面元素信息(尺寸、文字、色彩、间距、位置、属性),强烈建议“标注”,推荐Parker、Ink、PxCook。
也可以使用Zeplin、蓝湖等在线产品设计协作平台,它们提供了标注切图、页面逻辑、批注讨论、原型演示、版本管理等丰富的功能。
各种列表配图、焦点轮播图、详情页用图、Banner,产品设计阶段应已按宽高比指定了多种尺寸,推荐用Placeholder、temp.im占位。
从设计稿提取了基础资源,接下来可以搭建工程目录了。
(本篇结束)
许可协议:自由转载-保持署名-非商业性使用-禁止演绎 (CC BY-NC-ND 4.0)
By 小可 from https://xinlu.ink/tech/pro-web-reconstruction-4-generate-assets.html
转载于:https://www.cnblogs.com/daxiang/p/4645059.html
无废话网页重构系列——(4)切图与标注相关推荐
- 无废话网页重构系列——(2)来套Web重构装备
本篇主要从语言入门.规范.工具.构建.库.框架.版本控制等各方面展开,篇幅会有点长,涉及到的工具类,会另开博文详细介绍. 另外说明Web重构是Web前端的开始,主要侧重Web页面,如实现布局与兼容,符 ...
- 无废话网页重构系列——(1)为什么要写这个系列
出于兴趣,选择从事Web重构工作,也非常幸运,能够将兴趣与工作结合在一起,既保证了公司和个人的收入,又能倒腾爱好. 到目前为止,一直就职于中小型互联网公司从事Web重构开发,在项目与技术结合方面,比较 ...
- 无废话网页重构系列——(3)Web重构前的分析
本篇讲重构前的分析.从"工作状态.工作环境和工作角色"和具体重构工作两方面分析. 凡是经过考验的朋友,就应该把他们紧紧地团结在你的周围 比较理想的工作状态:制定了各种设计和开发规范 ...
- 教我网页设计中的“切图”
"切图"是网页设计中的一个重要概念,它指的是将网页设计中的图片和其他图像分割成合适的尺寸和形状,以便在网页中使用. 切图的过程通常包括使用图像编辑软件(如 Adobe Photos ...
- APP视觉稿该怎么切图和标注
本篇教程跟大家分享UI设计的一些知识,就是APP怎么切图和标注,还不懂的同学,赶紧了解一下. 首先:哪些东西要切出来? 简单来说就是代码不好实现的东西就直接切成一张图放到软件里面展示,例如图片,小图标 ...
- ui标注android ios,IOS+ANDROID的UI切图与标注方法
之前的知识科普说了好些基础的概念,本篇将会结合之前我们讲到的数个概念来谈谈图为什么要这样切,标注为什么要这样做. iOS 的切图与标注 跑 iOS 的设备主要两种,iPhone 和 iPad.(iPo ...
- HTML-图片热点、网页内嵌、网页拼接、快速切图
图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果.与图片链接不同,热点是图片上的某一个区域或多个区域. 我们用魔兽世界图片来做一个图片热点,点击logo.区域和不 ...
- PS切图和标注的一些效率工具
2019独角兽企业重金招聘Python工程师标准>>> 1.Slicy 必须是神器,Mac用户专享,但价格不菲,介绍可见这里. 简单来说把psd文件拖入到Slicy中,然后自动生成切 ...
- CSS布局基础(网页图片 切图)
网页图片 网页图片 图片格式 切图 直接从 psd 图层导出 切片工具切图 插件切图 其他设计工具 网页图片 图片格式 jpg/jpeg 高清图 gif 小动画,支持透明背景 png 结合jpg 和 ...
最新文章
- iOS 最新发布App Store流程
- 基于c#的相关性分析_基于数字高程模型的城市地貌与地名相关性分析——以兰州市为例...
- U3D assetbundle打包
- WordPress Kyma plugin检测kyma连接状态的逻辑
- 对promise.all底层的实现的研究
- 链表之单链表约瑟夫问题(二)
- “约见”面试官系列之常见面试题第四十三篇之页面输入url之后发生了什么?(建议收藏)
- Struts2 文件上传
- 第五课 机器学习中的特征工程
- 数加:从数据工程师到CDO的七次升职路
- 操作系统实战45讲01:运行HelloOS
- Audio之音频帧周期(四十三)
- opencontrail-vrouter命令
- 【开源】.net微服务开发引擎Anno 让复杂的事简单点- 日志、链路追踪一目了然 (上)
- 论文解读-通过建模时空动态生成活动轨迹
- 盘点 Java 线程池配置的常见误区
- Google公布软件网络负载均衡器Maglev
- 1700人参加的钢铁行业盛会,下面是你必须知道的!
- 10个不得不买的高科技智能机器人
- 特斯拉“踩坑”分时Linux?丰田/Mobileye选择“迎难而上”