当前位置:首页>ps入门教程>ps基础教程>工具教程>教程内容

切图教程,关于APP切图和标注

来源:站酷 作者:fanfanfan9 学习:6448人次

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

工具软件PS大神

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

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

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

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

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

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

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

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

放弃选区:Ctrl+D

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

感兴趣的小伙伴可以推荐这个网址去看比较全的快捷键:http://www.16xx8.com/tags/28218/

 

功能页面归类

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

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

切图教程,关于APP切图和标注_www.16xx8.com

保存生成图片格式

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

切图教程,关于APP切图和标注_www.16xx8.com

切图教程,关于APP切图和标注_www.16xx8.com

 

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

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

切图教程,关于APP切图和标注_www.16xx8.com

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

切图教程,关于APP切图和标注_www.16xx8.com

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

 

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

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

切图教程,关于APP切图和标注_www.16xx8.com切图教程,关于APP切图和标注_www.16xx8.com

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
R神罚D紫云2019-03-22 06:43
很不错

关注大神微博加入>>

网友求助,请回答!