博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端PS切图技巧(二)
阅读量:5863 次
发布时间:2019-06-19

本文共 792 字,大约阅读时间需要 2 分钟。

之前介绍了传统的切图技巧,主要用于切多张图片的时候,但很多时候我们可能只需要切一两张图标,如果还用传统的方法就会很繁琐,所以这次分享一种导出单个图标的方法。

没有psd文件的,我这里准备了一份,需要的可以去下载

psd练习文件 (和之前的一样)

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

工具:一、二是用photoshop cs6演示的,三是用photoshop cc 2015演示的,一二中的方法两个版本的软件都可以实现,三中的方法cc才能实现,所以建议大家下载photoshop cc 2015

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

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

切单个图标的方法

1.还是之前的文件,这次我们就切一个图标 

这里写图片描述

2.选择移动工具,并在选项中选中“自动选择”和“图层” 

这里写图片描述

3.点击我们要切的图标,这里是点击中间的笔,然后右边的图层面板就会自动聚焦到对应的图层,通过点击左边的小眼睛来确定是不是我们想要的图层。 

这里写图片描述

4.这里我们找到了我们需要的图标有两部分组成,里面的笔和外面的圆,两个图层被放在了一个组里面 

这里写图片描述

5.在icon文件上右键,选择“转换为智能对象” 

这里写图片描述

6.然后,我们会发现,两个图层合并为了一个图层,这个就是我们需要的图标 

这里写图片描述

7.在icon图层上右键,选择“编辑内容”,出现提示框的话直接点击“确定”即可 

这里写图片描述

8.然后,我们的图标就被单独提取出来了 

这里写图片描述

9.选择“文件”=》“存储为”,将我们的图标保存为PNG格式就大功告成了! 

这里写图片描述

这里写图片描述

这里写图片描述


photoshop cc之后添加了很多高级的切图方法,下一节给大家分享几个和前端相关的自动化切图方式

 

转载于:https://www.cnblogs.com/CaseyWei/p/9383203.html

你可能感兴趣的文章
揭开.NET 2.0配置之谜(三)
查看>>
安装及管理程序
查看>>
云主机迁移脚本
查看>>
安装Zabbix客户端
查看>>
查看子进程CPU及内存使用率
查看>>
查询优化器内核剖析第四篇:从一个实例看执行计划
查看>>
SuSE Linux上搭建apache+php+mysql环境
查看>>
折腾VMWare Workstation 9在虚拟机中安装Hyper-V服务器
查看>>
SQL Server 2012新增和改动DMV
查看>>
九款即时通讯软件大盘点
查看>>
SQL Server2005数据同步
查看>>
在苹果MAC OS X Lion系统上访问Windows共享文件夹
查看>>
sudo授权的配置以及bash编程之数组和关联数组。
查看>>
[Unity3d]Shader 着色器 学习前了解知识
查看>>
python模块:smtplib模块
查看>>
某商场内无线配置方案
查看>>
XQuery:连通SQL与NoSQL的良好桥梁
查看>>
对话深度学习大神Yoshua Bengio:蒙特利尔何以成为AI圣地?
查看>>
XNA游戏:横竖屏设置
查看>>
机房日常技术总结——Windows篇
查看>>