切图神器

解决问题: 
1. 解决ios的@2x.png的分辩率问题 
2. 解决android的多分辩率的问题 
3. 解决web下也需要导出图片的问题 
4. 自动切图 - 注意是切图,不是生成html。根据一些简单规则自动切好图片放到相应的文件夹里

三条规则,非常简单: 
1. 要输出图的单位以图层文件夹(组)为单位, 文件夹命名末尾加『@』为结束符。并且,自动切除边界外透明的像素。 
2. 以『#』名字命名的图层可以认为是选择图片输出的边界。例输出背景图:组命名为『[email protected]』,组里有两个图层,1是大背景;2是横向1个px形状图层,并且此图层命名为『#』。 
3. button是一种特殊的组。以『_BTN』结尾认为是按钮,有多种状态支持 
normal 
hover 
clicked / pressed 
selected 
disabled 
输出图片时也会自动按btn_xxx_normal/btn_xxx_hover命名,非常方便

http://www.cutandslice.me

时间: 2024-10-05 22:54:59

切图神器的相关文章

切图神器Assistor PS(PS外挂神器,亲证免费可用,下面是转载的使用方法)

基本介绍 与其他切图标记软件不同的是,Assistor PS 是完全独立于 PS 本身的,说是一个外挂更加合适,旨在提高切图标记的效率及速度.虽然不是一个插件,但是它与 PS 是连通的,当你在 PS 选择一个图层在后,即可使用它的功能.如果你肯花点时间下载是试用,相信不会让你失望,甚至能可能让你觉得相见恨晚. 主要功能如下: 轻松创建标记文档,一键导出图层 单位数值转换快速 快速创建参考线(类似 GuideGuide) 圆角矩形调整 按照固定的间隔复制图层 官方介绍视频(已 fanqiang 转

PS切图的一些效率工具

1.Slicy 必须是神器,但价格不菲,介绍可见这里. 简单来说把psd文件拖入到Slicy中,然后自动生成切图.前提是图层要规范命名,带png后缀. 感觉有一个问题,如果目标图层四周有透明部分,自动切出来的图会去掉四周透明部分,暂没找到解决方法. 2.Cut&Slice me 免费切图神器,可以输出3种格式,iOS.android.web都包了,介绍可见这里.缺点是它的使用规则有点小烦人. 3.PS自带的Export Layers to Files 搜索才发现有这个功能,不过感觉比较慢,在图层

Android App开之标注切图

身为一个android开发狗,真是艰辛啊,适配不好做,Rom特性不好搞,连切图有时候都得自己上啊,设计师MM都不敢去惹呢,新技能Get开始. 其实,都是小case了,我有度娘和谷哥! 因为,有了psd,只要设计的是按android标准,那都好说,有标注切图二合一免费神器pxcook: 教程在此:http://www.fancynode.com.cn/pxcook/tutorial 嗯,应该比以前的 Cut&Slice me 切图神器(PhotoShop强力割图插件)强大一些的. 说到标准,看一下

【切图】切图小知识

最近在学习前端,所以萌生了对切图的学习,接下来分享下我的学习历程吧~ 1.切图其实并不是直译的就是将图片切开那么简单,那么切图到底是什么意思呢? 切图概念:切图是指将设计稿切成便于制作成页面的图片,并完成html+css布局的静态页面,有利于交互,形成良好的视觉感.通俗来讲,把一张设计图利用到切片工具 把自己所需的切成一张张小图,然后用DIV+CSS完成静态页面书写,完成CSS布局. 2.切图工具:主流是dreamweaver.photoshop软件,还有sketch.firework等,低端Q

Assistor PS切图

下载.net framework PS外挂:Assistor PS 使用指南-软件介绍与下载 标注.切图.圆角.自定义参考线.单位换算N合1神器-Assistor PS 一款APP从设计稿到切图过程全方位揭秘 免费了!切图标记外挂神器ASSISTOR PS深入解读(上) APP切图实例操作 UI基础教程 – 原生App切图的那些事儿 Assistor PS切图标记工具的详细教程与汉化 android APP UI设计图标注.换算

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

纯干货!一款APP从设计稿到切图过程全方位揭秘 @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用.另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用~ 这里我们只说IOS系统下的设计,至于Android,因为尺寸

页面制作学习笔记:D2.Photoshop切图

一.什么是切图? 切图就是从网页设计稿中切出网页素材,比如一些小的按钮.小的图片.页面的LOGO.网页的背景图片等. 然后就是页面编码,引入图片资源 在HTML里通过 img 标签引入图片资源 <img src="images/avatar.jpg" alt="头像"> 在CSS里面通过background属性引入图片资源 .icon { background-image:url(../images/avtar.jpg); background-posi

切图 or 切片

一点题外话: 提到切图,让我想起曾经有好几个月的时间,我每天的主要工作就是切图,或者说切片了. 要制作语文课本中每篇课文的朗读卡拉OK效果,其中一道工序,就是要把文章中的每个字连同上面的拼音,切成单独的一张小图. 一张图上,文字数百上千,纯粹的体力活. 不过这是用fireworks切的片. 今天要说的是用photoshop来切片. 要做一个拼图的小游戏,需要用ps把原图切成长宽一致的15张小图. 1,用ps打开图片 2,在图片上点右键,调出菜单 3,设置水平划分为3,垂直划分为5,则自动划分为1

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

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