前言:公司在前端组和视觉组交接设计稿切图的时候,总会因为视觉组同事们对前端的实现原理不清楚而出现各种问题,在用的时候还得再次返工,前端组同事们一致觉得应该出一份<设计稿切图通用性标准文件>,这里是我结合资料做出的一份总结. 1.切图资源尺寸必须为双数 2.LOGO类图片以方形切图输出    3.可点击部件要把相关状态都切图输出,比如正常状态.点击状态    4.同一类型图片保持同样大小尺寸输出切图 全屏切图类: 局部切图类: 空白页提示案例图:    5.有阴影背景的内容显示区域保持居中输出切…

APP UI设计及切图规范 1.概述 1.1 编写目的 该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档.部分内容来自网络收集修编,转载请注明由 嗡嗡(iwengweng.cn) 整理. 1.2 读者对象 项目实施工作组UI/UE设计人员. 2.色值规范 系统采用统一色彩标注值,超出的需要进行登记管理. 色彩范围值:以通用字号C开头标识,在Android开发中对应相应的配置文件 参考:Android开发设计规范 2.1 屏幕适配 Androi…

切图:即从设计稿里面切出网页素材 一.使用Photoshop工具 工具的使用: 1.将文字与标尺的单位的设置为像素 2.打开这五个窗口,关闭其它窗口,保存工作区方便以后使用 3.工作区弄乱时,可以使用上图中的复位,或者在下图中选择工作区: 4.切图常用工具 注意:在工具菜单栏中右击会出现同组备选工具: 5.放大缩小画布: 1).点击缩放工具 2).ctrl  + 加号/减号 3).alt  + 鼠标滚轮 6.辅助视图 标尺快捷键:ctrl + r 7.获取文字大小和行高 1).文字是单独图层,使…

本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 1. 问题的引出 最近阅读白树的博文<移动web资源整理>时,他在博文中有一段指出,如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10px} @media…

从网易与淘宝的font-size思考前端设计稿与工作流   阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7. 总结 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 1. 问题的引出 最近阅读白树的博文<移动web资源整理>时,他在博文中有一段…

UI基础教程 – 原生App切图的那些事儿 转发:http://www.shejidaren.com/app-ui-cut-and-slice.html 移动APP切图是UI设计必须学会的一项技能,切图虽然简单,但还是有很多地方需要注意的,下面由tgideas的 LV主唱大人 跟大家讲讲原生App切图的那些事儿,对UI入门或需了解APP切图的设计师来说会有帮助哦. 如何切图? 了解iphone界面的尺寸 最小的分辨率是320×480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所…

网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.PS首选项设置 编辑——>首选项——>单位与标尺,将标尺和文字的单位都改为像素. 默认"标尺"的单位是厘米,"文字"的单位是点. 2.面板 在…

如何切图? 了解iphone界面的尺寸 最小的分辨率是320x480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所用的图标定为1倍图(1x). 在实际设计过程中,为了降低设计成本,一般拿设备最高的分辨率作为设计稿的原始尺寸,拿iphone来说就是iphone5或5s的640x1136啦,当然也可以用iphone4或4s的640x960,因为宽度都是640px,他们切图的标准是一样的.显然,以1倍图的基准尺寸(宽320px)为相对的参考依据,宽640px的设计稿,以原始尺寸切出来…

切图是很多UI设计师的一项日常工作.平时做完设计图,要将设计稿切成便于制作成页面的图片,并标注好尺寸和间距,交付给前端来完成html+css布局的静态页面,有利于交互,形成良好的视觉感. 但有的认为前端自己会切图是最好,不建议把切图的事情丢给设计师做.这样中途会损耗结构讲解的开销(比如网页层级,细节重构方案等),毕竟最后css是前端去码,怎么切最合适要自己把捏的,否则又要引出一个新问题(设计师有必要掌握考虑重构实现的切图吗?). 总之,切图对于设计师设计创作.程序员写代码来说,其实不是件难事,但…

网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1.       有人说用sketch自动导出多套尺寸切图和SVG矢量格式,表示没钱买MAC 2.       有人说用切图神器cutman,表示用CC以上版本PS不支持 3.       另…不喜欢/用不惯/不会用ps自带切图工具的 目前iPhone有10种型号,5种屏幕尺寸,再加上6plus的“降采样”(Downsampling)…