关于APP切图和标注

   切图是一件比较单调枯燥的工作,但又需要比较强的耐心和细心,用户手中看到的产品界面,并非设计师的最终效果图,而是一个个单独的切图经由开发技术实现。切图作为设计师与开发者之间的桥梁,它的作用很关键,合适的切图、精准的位置可以最大限度的还原效果图的设计,精妙的切图更会有事半功倍的效果。 这个切图教程开始是写给我们实习的小美女的,但她现在又上学了,切图就分担成每个设计师的必备工作,切图技巧也因人而异,需要各位亲自己去发现总结适合自己的技巧。这里给大家介绍我自己的切图和标注小技巧,可以更快,更好的方便工作。

  工具软件PS大神

  相对于设计和绘画,切图用到的ps并不多,摸索个几分钟基本也就了解大概。说到这个,产品组的几个小美女应该很兴奋,哈哈!

  先简单的介绍几个PS经常使用的快捷键:

  切片工具:点击C进入切片模式

  自由的浏览图片:按住空格后,鼠标拖动

  自由的缩放图片:按住alt+滚轮

  通过画面上点选一个图层:Alt + 鼠标右键

  在画面上拖动一个图层:V 切换到移动模式 鼠标拖动

  画一个选区:点击M进入选区模式 , 鼠标拖画

  放弃选区:Ctrl+D

  吸管工具:点击I进入吸管模式,点选画面颜色

  感兴趣的小伙伴可以推荐这个网址去看比较全的快捷键: http://www.douban.com.zcool.cn.zcool.cn.zcool.cn.zcool.cn/note/164279285/

  功能页面归类

  如果是一个新项目,按功能模块切图会更好服务开发,现在开发都是迭代式展开,这样会让开发工作更有效率,更有目的性。

  但如果是单个页面的切图,就不需要考虑这么多,注意一些现有的设计规范就可以。


  保存生成图片格式

  按PS快捷键 CTRL+'显示网格,这样的切图会比较精确点,把页面需要的图标切好生成图片,图片格式可以保存为JPG和PNG, 色彩众多的图片jpg优先,色彩简单,需求透明的png优先。切片在储存的时候,可以点选每个切片对其设定不同的图片格式,保存的时候可以选择保存选择的切片而不是全部。


  有时候我们切好的图片尺寸还是很大,就需要二次加工,这里给大家提供几个压缩图片尺寸的好工具:

  http://www.atool.org/pngcompression.php


  http://www.secaibi.com/tools/


  注意事项:千万不要对jpg进行二次处理:jpg就算质量100%也是有损格式,保存的时候尽量为PNG,用上两个工具都可以进行二次处理哦!

  点九图片的使用(安卓需要使用,IOS不需要)

  “点九”是Android平台处理图片的一种特殊的形式,由于文件的扩展名为:“.9.png”,所以被称为“点九”。它可以将图片横向和纵向随意进行拉伸,而保留像素精细度、渐变质感和圆角的原大小,实现多分辨率下的完美显示效果,同时减少不必要的图片资源。


  图标统一大小处理

  切图的时候图标或者广告图片都会有几像素的误差,保存图片的统一性,可以在图片切好以后统一处理,这个就可以使用到PS里面的动作路径,很简单的小动作,但可以省掉很多时间。

  创建动作

  使用动作之前先要创建和记录动作,Photoshop已经定义了一些动作和动作组(动作组是动作的集合),可以直接载入使用。

  记录动作

  在“动作”面板中,单击一个组或组中的一个项目为当前组或项目,或者建立一个新动作组。

  载入和播放动作

  Photoshop将多个命令组合为单个动作,通过载入并播放动作可以使任务执行自动化。

  标注Markman工具

  该工具可以对效果图中的长度、坐标、颜色、文字、矩形进行标记。

  便于客户端开发人员对应用的每个控件在页面中的位置进行精确控制,以确保效果图和成品的高度契合。

  网站有很详情的介绍哦!不在这里给大家介绍功能的使用。


  很多时候在提供设计规范后愁苦实现效果不尽如人意的同时,可以尽可能的利用一些切图手段,对切图的小伙伴表示感谢,帮助设计达到零差别的呈现,同时对开发也减少了很多不必要的开发负担,让切图和开发成为更贴心更默契的合作伙伴吧!为了更完美的展示效果!

时间: 2024-09-16 19:34:55

关于APP切图和标注的相关文章

Photoshop软件APP切图和标注教程分享

给各位Photoshop软件的使用者们来分享一下APP切图和标注教程. 教程分享: 先简单的介绍几个PS经常使用的快捷键: 切片工具:点击C进入切片模式 自由的浏览图片:按住空格后,鼠标拖动 自由的缩放图片:按住alt+滚轮 通过画面上点选一个图层:Alt + 鼠标右键 在画面上拖动一个图层:V 切换到移动模式 鼠标拖动 画一个选区:点击M进入选区模式 , 鼠标拖画 放弃选区:Ctrl+D 吸管工具:点击I进入吸管模式,点选画面颜色 感兴趣的小伙伴可以推荐这个网址去看比较全的快捷键:http:/

聊聊原生APP切图那些事儿

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

Android启动icon切图大小

我们在给app切图的时候不知道告诉ui启动图标切多大,其实你新建一个android项目就知道应该切多大了.新建一个项目会产生几种大小的启动图标. 我把各个文件夹下的ic_launcher.png文件都查看了下大小,得出如下值: 1.drawable-hdpi  72*72 2.drawable-mdpi  48*48 3.drawable-xhdpi 96*96 4.drawable-xxhdpi 144*144 看到上面的参数我相信大家都知道启动icon切多大了.

一款APP从设计稿到切图过程全方位揭秘

  我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用.另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用~ 这里我们只说IOS系统下的设计,至于Android,因为尺寸太多,涉及的东西比较乱,我整理好以后再说吧. 页面篇幅比较长,

帮你轻松高效输出标注切图的PXCOOK!

  PxCook的优点在于将标注.切图这两项设计完稿后最棘手的两个工作集成在一个软件内完成,流程很顺畅,而且支持Windows和Mac双平台. 标注功能相当完善丰富,支持长度,颜色,区域,文字注释.其中比较有特色的是: 1.长度标注针对移动端设计,支持px与dp直接的单位转换 2.注释的文字字体样式可以自定义 3.自带实时放大镜,省却了反复放大的操作. 4.长度标注的数字可以自己手动改,设计时可以小小的偷个懒~ 5.标注的各种颜色可以自定义,灵活性不错. 另外切图功能和标注功能结合的也不错,事先

PS切图不得不说的技巧

  从基础说起的切图小知识,基本上涉及的都是网页切图,APP以此类推;都是干货说实在有一点太干了,大家多多包涵. 文章有点长,把结构列在这儿:输出格式--代码基础--什么图需要切--切图分辨率--命名--标注--方法      分类: PS入门教程

超全面的切图规范指南

设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言.合适.精准的切图可以最大限度的还原设计图,起到事半功倍的效果. 如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力. 设计切图的原则 设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中,首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求. 其次,切图输出应该尽可能降低工程师的开发工作量,避免因切图输出而导致不必要的工作量. 最后,输出的切

省时省力的切图神器SLICY

  如何使用 Slicy 切图? 1. PS 图层依规则命名. 2. 把档案丢进 Slicy 里. 3. 好了. 够简单无脑了吧? 图层命名方式 为了要无脑切图,得稍微记一下 slicy 图层命名的格式,官网提供的 Examples 里面有 5 个文件夹. Basic Tagging 基本标签 图层或组名的字尾打上.png就好了. Explicit Sizing 设定切图尺寸 如果切图为特定尺寸,可以用这3种方式设定: 1. 使用矩型工具(形状图层)画出欲裁切的尺寸,将图层名称设为「@bound

iPhone 6 plus 适配切图方法分享

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