这节分享一个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. sqlite3 的一些整理和补充

    一,sqlite3数据库打开时的返回值及其所代表的含义 返回值 描述 返回值 描述 SQLITE_OK=0 返回成功 SQLITE_FULL=13 数据库满,插入失败 SQLITE_ERROR=1 S ...

  2. Python3基础 os.path.splitext 处理文件名,得到文件名+扩展名

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  3. 用GDB调试Segmentation 段错误【转】

    本文转载自:http://blog.csdn.net/learnhard/article/details/4879834 调试Linux程序的时候,出现Segmentation Fault是最郁闷的事 ...

  4. 将Sublime Text 添加到鼠标右键菜单的教程方法

    安装notepad++软件,在菜单右键自动会添加“edit with notepad++"的选项,那么怎么将Sublime Text 添加到鼠标右键菜单呢?下面是我的操作过程,希望有帮助! ...

  5. 支持github的chrome插件octotree

    1.这款插件有何作用? 方便浏览github上的源码 2.安装方法 通过以下链接进行安装: https://chrome.google.com/webstore

  6. P3901 数列找不同

    P3901 数列找不同 题目描述 现有数列 \(A_1,A_2,\cdots,A_N\) ,Q 个询问 \((L_i,R_i)\) , \(A_{Li} ,A_{Li+1},\cdots,A_{Ri} ...

  7. [SpringBoot] - 一份笔记

    一. Spring Boot 入门 1. Spring Boot 简介 简化Spring应用开发的一个框架; 整个Spring技术栈的一个大整合; J2EE开发的一站式解决方案; 2. 微服务 201 ...

  8. MariaDB学习记录

    MariaDB的学习 MariaDB的学习 关于MariaDB的历史,不再概述 下面是mariadb的官网:https://mariadb.com/ 同样的,MariaDB一样有连接java的jar包 ...

  9. Java自学入门新的体会0.2

    Java 基本数据类型 变量就是申请内存来存储值,也就是说,当创建变量的时候,需要在内存中申请空间. 内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用来存储该类型数据. 因此,通过定义不 ...

  10. Unity3D学习笔记(十九):UGUI、Image、Text、Button

    UGUI:Unity官方最新,与NGUI同源 UI:User Interface(用户的操作界面),图片+文字 UGUI的组件: 1.创建UGUI组件时,会默认创建Canvas(画布)和EventSy ...