这节分享一个photoshop cc 开始有的自动生成图标的方法

psd练习文件

http://pan.baidu.com/s/1pL2dwL1
  • 1

工具:我这里用的是photoshop cc 2015

没有photoshop,这里准备了photoshop cc 2015的安装包和破解工具,具体安装和破解方法可以百度一下

http://pan.baidu.com/s/1gfJUEzT
  • 1

开始

1.打开给大家准备的psd文件 

2.选择“编辑”=》“首选项”=》“增效工具” 

3.勾选“启用生成器”,选择“确定” 

4.重启一下photoshop

5.重启后,重新打开我们的文件,感觉参考线太碍事了,我们用快捷键“CTRL”+“;”把参考线隐藏了。

6.选择“文件”=》“生成”=》“图像资源” 

7.用之前一样的方法找到我们要的图标的图层 

8.我们需要的图标放在了icon这个分组中,现在我们将icon重命名为icon.png 

9.现在我们打开我们存放psd文件的文件夹中,可以发现现在多了一个文件夹 

10.打开这个多出来的文件夹就会看到我们的图标躺在那里了,是不是很激动!!! 

11.我们还可以继续把第二个图标重命名为icon.jpg 

12.然后会发现刚才那个文件夹中又多了一个icon.jpg文件 

13.现在把第三个图标改为icon.svg 

14.你应该已经猜到了,文件夹中又多了一个svg文件 

15.我们用编辑器打开这个svg文件,就可以看到svg的代码,这里设定了宽高,如果将width和height删除,就可以得到自适应的图标文件(可以任意缩放) 

16.如果不想要要这个图标,我们可以把文件的命名重新改回来 

17.然后看到文件夹中的svg文件没有了 


这个方法生成图标非常的方便,很适合我们生成svg图片,可以保存到fontello或者iconfont中,强烈建议!

photoshop cc 智能切图的更多相关文章

  1. photoshop CC智能切图

    网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.p ...

  2. Photoshop CC 智能切图功能介绍

    http://gdc.qq.com/ http://gdc.qq.com/?p=4445

  3. 《photoshop cc 新功能 生成图像资源》智能切图逆天啦!

    作为一个前端工程师切图这个步骤是必不可少的,方式多种多样,有和切图工具的,也有是把要切的图层元素或者组直接新建保存成文件的,现在photoshop cc2015,可以让你轻松切图,摆脱繁琐的切图步骤. ...

  4. 如何利用Photoshop进行快速切图

    在UI设计中我们常常使用Ai来进行矢量图的绘制,然后导入Ps中进行设计.排版和导出. 在以前的版本中,切图一直是个很麻烦的事情,要么依托于脚本,要么手动一张张导出,很不方便,这种窘况在Photosho ...

  5. photoshop如何快速切图

    作为业余爱好,之前都是用比较笨的方法切图,甚至用裁剪工具一张一张的切. 后来知道用切片工具,但也仅限于互不重叠的图片. 在工作中实际使用时才发现实在是太慢了,慢到上级自己说你不用做了,我来吧. 其实, ...

  6. App切图命名规范

    转自:http://www.uisdc.com/slice-rename-in-ui-design(略有修改) 关于切图命名的规范,我个人觉得关键是在于团队能够有一个统一的规则,所有成员严格遵守并且和 ...

  7. 学习笔记2:前端PS切图

    前端PS切图 一.Photoshop的界面设置 二.Photoshop的基本操作 三.Photoshop的传统切图 四.Photoshop的精准切图 五.Photoshop的扩展知识 视频学习:htt ...

  8. 前端PS切图技巧

    先选择“编辑”-“首选项” 打开,找到“参考线”    设置一下每格网格 100像素 5个细块 确定后 ctrl+‘ 出现网格.(通过网格对齐切图比用参考线切图更好). 如果使用PS cc的软件的话, ...

  9. ps photoshop cc 2015 Extract Assets(生成器)切图大法

    Extract Assets 是 Photoshop CC 2014 版本新增的一个特性,主要用来快速导出适用于 Web 和屏幕设计的资源,你可以用它导出 JPG.PNG.GIF,甚至是 SVG 图像 ...

随机推荐

  1. 经典模块化的前端框架:layer

    官网:http://layer.layui.com/ 官网论坛里有许多后台界面可参考下载.其中后台管理界面和弹窗功能都是比较常用的.

  2. Windows中的时间(SYSTEMTIME和FILETIME) (转载)

    转载:http://blog.csdn.net/bokee/article/details/5330791 两种时间系统之间没有本质区别(事实上CRT时间是用Windows时间实现的,当然这是说的VC ...

  3. 移动距离|2015年蓝桥杯B组题解析第八题-fishers

    移动距离 X星球居民小区的楼房全是一样的,并且按矩阵样式排列.其楼房的编号为1,2,3... 当排满一行时,从下一行相邻的楼往反方向排号. 比如:当小区排号宽度为6时,开始情形如下: 1 2 3 4 ...

  4. java.io.InvalidClassException

    java.io.InvalidClassException public class PetroleumCoke implements Serializable { private static fi ...

  5. Elasticsearch 原理

    Elasticsearch简介 Elasticsearch是一个基于Apache lucene的实时分布式搜索.具有以下优点: 1.实时处理大规模数据.2.全文检索,能够做到结构化检索和聚合分析.3. ...

  6. MVC ---- 增删改成 EF6

    1.MVC EF6的增删改成小练习 namespace T4Demo { public partial class Form1 : Form { NBEntities nb = new NBEntit ...

  7. Java中带标签的break,continue

    首先不带标签的break,continue 就不介绍了.大家平时用的最多的也就是这样的情况了. 首先Java中没有goto,但是可以利用带标签的break, continue来实现类似的跳转. 首先来 ...

  8. Linux 下的profile

    # /etc/profile # System wide environment and startup programs, for login setup# Functions and aliase ...

  9. 使用NativeExtension向AIR app 添加Activity和BroadCastReceiver(2)

    开发: Android项目 新建一个针对NativeExtension的Android项目,实现相应的FREContext,FREExtension和FREFunction等方法,同时新建一个Acti ...

  10. spring boot 启动报错(spring-boot-devtools热部署后):The elements [spring.resources.cache-period] were left unbound. Update your application's configuration

    详细错误代码: *************************** APPLICATION FAILED TO START *************************** Descript ...