恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!

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


工具软件PS大神

相对于设计和绘画,切图用到的ps并不多,摸索个几分钟基本也就了解大概。

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

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

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

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

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

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

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

放弃选区:Ctrl+D

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

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


功能页面归类

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

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

Image title


保存生成图片格式

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

2018PS可以单独的保存图片,点击文件右键导出为,会出现这样的对话框:

Image title

在画布大小的位置可以改需要的尺寸,同时可以处理多个文件,这样更方便快捷!



Image title


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

https://tinypng.com/

Image title


https://www.secaibi.com/tools/

Image title

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


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

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

Image title

Image title


图标统一大小处理

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

创建动作

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

记录动作

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

载入和播放动作 

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


标注Markman工具

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

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

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

http://www.getmarkman.com/

Image title


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

更新:2018-07-13

收藏

35人已收藏

fanfanfan9

生活有多平淡就有多美好 QQ:379301087

  • 78

    作品

  • 572

    粉丝

  • 28

    关注

  • 2023年终总结
  • 春夏秋冬母女亲子插画
  • 2022年终总结
  • 2023年大眼萌兔妹系列
相关标签
切图appui分享

    猜你喜欢

      2018-07-13 原创文章 经验/观点 举报 3944 35 19 2

      关于APP切图和标注

      0.0°

      你确定要举报关于APP切图和标注

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年07月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      19
      35
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录