这节分享一个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. VC++ 删除一个文件目录下的所有文件以及目录

    BOOL DoRemoveDirectory(CString chrDirName); BOOL ReleaseDirectory(CString chrDirName) { BOOL bRemove ...

  2. Java序列化流-ObjectOutputStream、ObjectInputStream

    Java对象流的基本概念: 实例代码: 实体类User: import java.io.Serializable; /** * @author zsh * @company wlgzs * @crea ...

  3. C# 获取当前IIS请求地址

    using System;using System.Collections.Generic;using System.Linq;using System.Web; /// <summary> ...

  4. CF873B Balanced Substring

    1到n内0,1个数相同的个数的最长字串 \(i>=j\) \[1的个数=0的个数\] \[sum[i]-sum[j-1]=i-(j-1) - (sum[i]-sum[j-1])\] 这里把\(( ...

  5. 分布式系统一致性协议--Paxos算法

    Paxos: Paxos算法背景介绍: Paxos算法是分布式技术大师Lamport提出的,主要目的是通过这个算法,让参与分布式处理的每个参与者逐步达成一致意见.用好理解的方式来说,就是在一个选举过程 ...

  6. Java中++,--,前缀后缀表达值的不同,与^的值计算

    package 习题1; /** * ++ -- 与 ^ 的一些计算 * @author SeeClanUkyo * */ public class Test4 { public static voi ...

  7. PYTHON HTML.PARSER库学习小结--转载

    前段时间,一朋友让我做个小脚本,抓一下某C2C商城上竞争对手的销售/价格数据,好让他可以实时调整自己的营销策略.自己之前也有过写爬虫抓某宝数据的经历,实现的问题不大,于是就答应了.初步想法是利用pyh ...

  8. An error occurred during installation: No such plugin: cloudbees-folder

    解决办法:下载cloudbees-folder.hpi放在目录/usr/local/tomcat/webapps/jenkins/WEB-INF/detached-plugins/下,重启tomcat ...

  9. java 基本数据类型及自动类型提升

    1.Java的8种基本数据类型及其所占空间大小: boolean  8bit/1byte       byte      8bit/1byte       char      16bit/2byte ...

  10. Thunder团队Final版爱阅app发布视频

    视频链接:https://www.bilibili.com/video/av17008792/ 视频简介:首先出现的是我们团队的logo,接着是Final版爱阅app的功能展示,紧接着是我们团队的开发 ...