美文网首页
切图工的修养:切图方法、切图工具经验谈。

切图工的修养:切图方法、切图工具经验谈。

作者: 林喵miao | 来源:发表于2019-12-15 13:14 被阅读0次

Foreword:


作为一个职业的切图工,如何切好图,把图切快,是切图工的工匠精神体现。

切图规范:


*游戏切图和应用切图要求不同
*也许适合大部分游戏

1)单位:游戏切图主要用px(像素)切图,看具体情况用不同的切图方法。
2)通常情况下,游戏要比应用需要更多考虑美术资源的复用,特别是手游。
3)手机游戏的切图,最佳显示尺寸通常用1334 x 750 px,即iPhone 6的分辨率。
*每个公司/组可能不同,分辨率要多和程序那边沟通。
*可以了解Unity拼界面原理,方便对切图有更好的理解

字体需要标注大小、颜色,其中颜色需要用HEX模式标注,方便程序拼界面。
*有些公司要美术自己拼界面,所以具体怎么标,可以多和对接的同事沟通。

一、切图方法


1)整个切

按标准界面显示的大小整个切出png,这样拼界面导入png就不用调尺寸。
多适合 非对称图形/图案 、渐变的切图。
*渐变资源也可切九宫格,但要到Unity里拉伸实际看一下效果。

2)九宫格切图

适合对称图形的切图。把png资源体积缩小,unity里面可以实现九宫格拉伸。Unity九宫格拉伸原理,可以看:https://blog.csdn.net/andyhebear/article/details/50476802

3)绝对位置正确切图

适合美术字的切图方式,png尺寸,以及字体中心坐标必须一致,方便前端程序的对齐。

4)放大了切

为了更追求更好的美术效果。和放大1~2倍制作资源的方法类似,考虑到png在界面中的可能最大表现尺寸,按照这个尺寸来输出png资源。

二、标注、切图工具


这一部分主要写的是插件,虽然可以用PS手动标注、切图,但这样效率太低了,作为一个职业的切图仔,一天下来不可能只是切那么几张图,有时候是很多图堆到一起切了,插件比手动的快多了且不易出错,是标注和切图的更有效率的方式。

1)PS手动标注、切图。

查看属性

查看图层属性,看到宽x高了吗?然后用文字写到合适位置,标注给程序。

PS手动切图:
将要切的图层或组,转换智能对象后,再转换成一次智能对象,这样就转换了两次,从原图层进入第一个智能对象内,ctrl+左键选中智能对象,按下c 裁剪,这时ps会自动定位到要切的部分,通常不会把阴影等样式切没了,这时既可以手动调整切图大小,也可以直接导出成png。
如果遇到固定尺寸大小的切图,需要新建一个psd,把需要切的图放到里面,然后导出。多个图需要一样的固定尺寸可以使用同图层。

2)Cutterman+Parker

Cutterman是一个很好用,很强大的工具。
控制尺寸方面做的不错,缺点是一键切图的png文件名会比较麻烦,还有覆盖同名png的问题,但这个覆盖可以设置。

Parker 能一键快速生成标注。
缺点是Parker试用太短,且付费价格不便宜,要60RMB。作为一个对技术不了解的用户,有时候会担心购买后换机不能用的问题。

3)Assitor PS

完全免费。除了字体的字号切不准,偶尔颜色失误外。
其他方面很好很强大。对元素的尺寸标注是准确的。
也可以切图,但是Assitor PS在切图控制,和速度上来说,比不上cutter man。

4)PxCook等工具

PxCook像素大厨标注还算智能方便,标注也会跟着原psd修改而变化,而且免费。

缺点是导入较慢,还有psd修改后更新问题,标注图也只能导出png一种格式。
还有是一旦原psd重命名后,标注层就作废了。

相关文章

  • 切图工的修养:切图方法、切图工具经验谈。

    Foreword: 作为一个职业的切图工,如何切好图,把图切快,是切图工的工匠精神体现。 切图规范: *游戏切图和...

  • 「前端眼中的PS」切图

    如何开始切图 切图 切片工具 隐藏文字 可平铺背景的切图方法 PNG24切图方法 PNG8带背景切图方法 切图 如...

  • UI实战教程之切图标注篇(UI小白必备)

    一. 切图工具和标注工具 学会使用工具可以起到事半功倍的效果。在这里为大家推荐我常用的切图和标注工具。 1.切图工...

  • 安利两款快速切图的插件

    在之前,我曾介绍过利用ps---快速切图的方法。 里面使用的是动作切图和切片工具切图,以及一些个人认为方便的方法。...

  • 几种ps切图的方法

    ps切图分为传统切图,一般切图,自动切图 这个链接很好的介绍了一些切图的方法gaea2.github.io/201...

  • 关于ui界面切图

    前言 很多圈友最近围在一圈讨论一个话题——切图。那什么是切图?切图对美术和程序有什么关系?怎么切图?切图有哪些方法...

  • Sketch切图怎么保证尺寸一致,背景透明

    1、选中你需要切图的icon,点击右下角的“+” 2、按住快捷键“S”或者点击切图工具-切刀icon,然后画出切图...

  • 001-BFC实现常见的oa后台页面布局

    作为一个高级切图仔,在日常工作中,我们的任务是什么?切图!切图!切图!······ 没错,除了切图,还会接受来自产...

  • 2019-06-24 用ps切图的步骤

    用PhotoShop和pxCook切图的步骤 1、安装一个切图的工具PxCook。 2、用PS打开需要切的psd ...

  • 切图

    图片切图命名 图性质_ 功能相关描述_ 图片描述(可无)_ 状态说明(可无)@2X.png 例如:bg_book...

网友评论

      本文标题:切图工的修养:切图方法、切图工具经验谈。

      本文链接:https://www.haomeiwen.com/subject/hwqimctx.html