前端切图学习--每个图层都能很精细的切出来

自从换了新工作,切图成了我的新问题。因为不是专业的美工, 对photoshop的操作也只限于基本操作, 以前虽然也有遇到不切图的UI, 但是以前做的都是电商扁平化网站, 图片都很简单,差不多都是方方正正,即使有一两个像素不对, 也没有问题,用css写对就行。 然后现在从事的是游戏公司的网站, 而且美术不负责切图, 就只能自己动手了, 第一次拿到多边形的时候,我傻眼了。不知道怎么下手。 第一次的时候还是找前同事的UI 帮忙的。但是不能每次都找别人帮忙啊, 第二次的时候就自己动手了。切图都花了1天多(惭愧,羞愧,懊恼。。。),因为这些, 没被产品少投诉。

言归正传, 由于被投诉效率低, 第一次项目完了之后, 我就开始找一些可以提高效率的方法。  首先,切图是最重要的第一步。 偶然在慕课网看到切图的工具, 真是及时雨呀, 于是我认认真真把视频看了两遍,还一边看一边操作,真是好用, 下面把详细步骤贴出来。(下面我拿御龙三国手游官网来进行步骤举例)

1. 下周photoshopCC 2014, 安装, 至于是否破解, 你自己决定。

2.打开文件-------> 脚本---------> 将图层导出到文件。

3. 设置下面的设置, 如图所示。 如果是想要jpg等其他文件, 可以在文件类型那里设计

4.点击运行。 大功告成。 完成的时间, 由文件里面的图层以及电脑的配置决定。 我的电脑装了固态硬盘, 内存8G, 导出一个非常多的图层的文件, 花了5-6个小时。 也许你会说这个效率还没有手工的高,是的,我也有同感,但是对于ps的小白, 这儿可以很精确的导出想要的图层文件, 真是太好了。 只要晚上把电脑开着, 就可以安心回家睡觉了, 早上来的时候, 一切都ok了。

5. 当然,这样子是不行的, 后来我想了几个办法。 把图层分组, 有些美工已经把这儿事情做了。 然后把哪些需要的Ctrl+E合并成一个图层,还有, 你想要的也合并为一个图层, 这样psd里的图层就减少了。这个方法非常有效, 我试了一下, 10几分钟就得到了那些我想要的图片。

7. 当然还有更好的方法。这也是在慕课网的视频上学的。 ctrl+K出来首选项(编辑-->首选项),然后设置增效文具。

8. 再设置 文件----->生成---->图像资源。 (这个设置了下次才生效,设置不上就重启ps)

9.设置psd里面图层文件名称。到psd痛目录下面,生成了一个 源文件-asset文件, 打开会有惊喜哟。 是不是分分钟解决了难题。

10.总结; 没事就到慕课网去看看, 怎么感觉像打广告呢。 算了, 总结就是没事的时候多在网上多逛逛, 就会发现我的这个经验。

11. 添加一个重要的线索。 因为手机上,如果原图大小,可能已经会出现锯齿, 所以最好的做一个2倍大小的文件。 表达式这样子写: 200% 源图层名称 @2x.jpg。

12.生成不同质量 源图层.jpg8 生成质量问80% 质量的jpg文件在assets

时间: 2024-10-11 13:50:31

前端切图学习--每个图层都能很精细的切出来的相关文章

泡沫学员CSS切图学习总结

刚接触xhtml和css时,脑子里真是 一团浆糊,乱成一团,不知道这些字母都是干嘛的(它认识我,我不认识它),慢慢地跟着老师做练习的过程,慢慢地对这些标签熟悉起来,在脑海中也渐渐形成了 些许认知和记忆.当你完成一个模块的时候,是一推代码组成达到的效果时,我第一次感觉到喜悦并带着点点的成就感,就是这样的感觉让我对学习网页设计产生了 兴趣和热忱. 我明白当你遇到困难的时候便是你成长和进步的过程,学习到切图课程时,一方面你觉得很有意思,因为切图验证了你的所学.一方面你也很困惑,因为你总是会遇 到这样那

Ps切图学习

1.切图的原文件格式为psd,用ps工具打开 2.鼠标点击需要切的图片,会自动选中图层: 3.选择需要切图的图层,右键复制图层 宽高必须为2的倍数 文件-存储为web和设备所用格式 预设选择为png-24 点击存储 切图选择所有用户切片,保存就OK了!

【学习笔记】前端开发调试工具与PS切图技巧

[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式 一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理.作为基础插件来管理其他的插件.安装成功之后在菜单栏Preferences下才会有Package Control. "Sublime Text 2 也拥有良好的扩展功能,这就是安装包(Package):通过 Sublime Package Control,安装.升级和卸载 Package 也变得轻松

做一个会PS切图的前端开发

系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图.所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图:现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高.另一方

前端PS常用切图技巧

前言:前端涉及到的 ps 操作不算复杂,基本上就是切图,本文总结了常用的几种切图技巧. 工具:photoshop cs6 . photoshop cc 1. 传统切图 01 这是最笨的一种方法,核心就是用选区工具选中我们要的切图区域,复制到新文件,然后整个保存下来,这样的切图方法几乎没有可取之处,不过我最初确实就是这样干的... 2. 传统切图 02 这种效率要高一些,可以同时切多个图片,用切片工具选中多张我们需要的图片区域,点击文件->保存为 web 所用格式,这种方法的缺点是默认会保存多张图

前端必备技能之Photosh切图

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

前端PS切图(笔记)

一 界面设置 预设WEB 1920*1080 自定义    *2000   72  RGB  背景:透明 自动选择图层  Ctrl+单击 视图>显示>智能参考线>标尺(Ctrl+R) 窗口   图层,历史记录,信息,字符 信息面板中  单位:像素    一.二颜色:RGB  文档尺寸 编辑>首选项>单位与标尺  单位:像素 保存  窗口>工作区>新建工作区>WEB切图 二 PS基本操作 1.简单工具 选区  单击选择   双选区,单击同时,shift加选区

CHUTTERAN对界面切图的好处和教程

在目前主流的界面设计切图工具中,ui设计师们都比较喜欢使用Cutterman工具进行切图,因为这款切图工具是国内研制的,一方面体现中国设计师的爱国,另一方面,这款切图工具自身的功能使用起来非常方便,并且有个平台的切图方式. 新版cutterman的插件新功能如下: IOS: 如果你是为Iphone界面设计,请使用ios标签,它能够为你生成符合ios系统的单/双倍图 Android: 如果你是为Android设计界面,请使用Android标签,它能够生成符合Android系统的各种DPI分辨率图片

转发-UI基础教程 – 原生App切图的那些事儿

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