前端PS切图
http://www.imooc.com/learn/506 慕课网地址
快捷键
l 移动工具 V
l 选取工具 M
l 套索工具 L
l 魔棒工具 W
l 裁剪工具 C
l 吸管工具 I
l 移动 Space + MouseMove
l 合并拷贝图层 Ctrl + Shift + C
l 快速选择相应区域并局部放大 H + MouseMove
l 隐藏所有参考线 Ctrl + H
l 合并图层 Ctrl + E
l 前景色填充 Alt + Delete
l 背景色填充 Ctrl + Delete
l 自由变换 Ctrl + T
l 取消选区 Ctrl + D
l 盖印所选图层 Ctrl + Alt + E
l 盖印所有可见图层 Ctrl + Alt + Shift + E
盖印就是在你将处理图片的时候将处理后的效果盖印到新的图层上,功能和合并图层差不多,不过比合并图层更好用!因为盖印是重新生成一个新的图层而一点都不会影响你之前所处理的图层,这样做的好处就是,如果你觉得之前处理的效果不太满意,你可以删除盖印图层,之前做效果的图层依然还在。极大程度上方便我们处理图片,也可以节省时间。
l 打开/关闭标尺 Ctrl+R
l 存储为Web所用格式 Ctrl + Alt + Shift + S
l 反选 Ctrl + Shift + I
Adobe Photoshop CC 2017 下载及破解
Adobe Photoshop CC 2017 破解器下载地址
- 进入Adobe Photoshop CC 2017下载地址并根据系统位数下载安装包
- 下载完后解压,点击Setup.exe,根据提示步骤进行安装
- 下载Adobe Photoshop CC 2017破解器并解压
- 打开amtemu.v0.9.2-painter.exe并选择相应版本,点击Install(如果选择Adobe Photoshop CC 2017不行,就选择Adobe Photoshop CC 2015.5再试一次)
- 选择安装目录,一般是C:\Program Files\Adobe\Adobe Photoshop CC 2017
- 选择目录下载的amtlib.dll,点击打开来进行安装破解。如下图提示安装成功即说明破解成功
Adobe Photoshop CC 2017
三种切图方法
图层切图
- 选中图层或组
- 然后右击图层,将图层转换为智能对象
PS切图
- 选择选框工具,将你要切的图层圈起来
PS切图
- 接着按Ctrl+C复制,再按Ctrl+N新建,注意背景颜色设置为透明
PS切图
- 点击确定,再按Ctrl + V粘贴,我们就得到要切的图层了
PS切图
- 再按Ctrl + Alt + Shift + S保存,记住背景图存为PNG24格式
PS切图
- 存储到我们要存的文件夹下,就大功告成了
切片切图
- 拉辅助线,如下
PS切图
- 选择切片工具,将我们要切的所有图片区域,用切片工具选中
PS切图
PS切图
- 按住Ctrl + Alt + Shift + S保存,保存的时候注意,保存为JPEG格式,选择为保存所有用户切片,这样子切出来的才是我们想要的图片
PS切图
- 保存之后就完工了,切片切图的方法很方便,但是注意它只能切出形状规则的图片
自动切图(CC版本的PS才支持)
- Ctrl+K出来首选项(编辑–>首选项),然后设置增效工具,勾选启用生成器
PS切图
- 再设置 文件–>生成–>图像资源。 (这个设置了下次才生效,设置不上就重启ps)
PS切图
- 在PSD内将图层或图层组的名称修改为.png或.jpg结尾,则在PSD文件同目录下的assets文件夹内自动生成导出图片(以图层名称及其约定的文件后缀名命名)
PS切图
PS切图
自动切图注意事项
l Retina优化:如果需要适配 retina 显示器,可以将图层命名为200% 图层名字 @2x.后缀名(注意需要添加空格,如:200% button @2x.jpg)自动导出的文件名不会出现200%的字样,但是文件尺寸变为2倍大小。
l 如果不想要导出的图片资源了,可以取消图层和图层组的文件后缀名,则导出的图片自动在assets文件夹内消失
l 还可以通过图层和图层组的文件后缀名来控制导出图片质量,例如xxx.jpg8则为导出品质为80%的jpg文件,如果不设置则默认为最佳品质
l SVG生成:改后缀名可自动生成SVG
l 复制CSS:鼠标右键图层–>复制CSS
前端PS切图的更多相关文章
- 学习笔记2:前端PS切图
前端PS切图 一.Photoshop的界面设置 二.Photoshop的基本操作 三.Photoshop的传统切图 四.Photoshop的精准切图 五.Photoshop的扩展知识 视频学习:htt ...
- 前端ps切图,图文教程,详细。
https://blog.csdn.net/OBKoro1/article/details/69817571 1.下载 我现在使用的版本号:PS-CS6,网上很多破解版本的自行搜索下载. 2.安装好P ...
- 前端PS切图技巧
先选择“编辑”-“首选项” 打开,找到“参考线” 设置一下每格网格 100像素 5个细块 确定后 ctrl+‘ 出现网格.(通过网格对齐切图比用参考线切图更好). 如果使用PS cc的软件的话, ...
- 做一个会PS切图的前端开发
系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...
- 前端技术-PS切图
页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...
- 前端菜鸟起飞之学会ps切图
由于之前只顾着追求效率,没有学习过PS,但其实这是前端开发人员需要学会的技能之一,曾经看过一个大佬的前端经验分享说他在招聘时遇到不会切图的会直接pass掉,可见前端开发人员学会切图是多么重要.通过观看 ...
- 页面制作部分之PS切图
页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...
- PS切图保存后的背景图为透明
1.若想PS切图保存后的背景图为透明,那么则需要在如下图中所示的修改即可,切图后[文件]——>[存储为web格式]——>[PNG-24]: 2.要想在css中的背景图片为相通,则先剪切一个 ...
- ps切图插件
ps切图工具插件 下载网址:http://www.cutterman.cn/zh/cutterman 安装完插件,关闭ps,重新打开,窗口- 扩展,即可使用
随机推荐
- span i s等行内元素标签之间出现奇怪空格符号
上述展开信息本来是这样写的,但是很奇怪windows下的测试环境支付时间前面莫名其妙多了个小方框 <p> <span><i>收货人:</i>{remar ...
- 函数语法:Js之on和addEventListener的使用与不同
一.addEventListener语法 DOM标准:elem.addEventListener("事件名",函数对象,是否在捕获阶段触发) ---是否在捕获阶段触发= true/ ...
- Kaldi的关键词搜索(Keyword Search,KWS)
本文简单地介绍了KWS的原理--为Lattice中每个词生成索引并进行搜索:介绍了如何处理OOV--替补(Proxy,词典内对OOV的替补)关键词技术:介绍了KWS的语料库格式:介绍了KWS在Kald ...
- Python转义字符&字符串运算符
Python转义字符 在需要在字符中使用特殊字符时,python用反斜杠(\)转义字符.如下表: 转义字符 描述 \(在行尾时) 续行符 \\ 反斜杠符号 \' 单引号 \" 双引号 \a ...
- 5-5 re模块 正则表达式
1,正则表达式 正则表达式,就是匹配字符串内容的一种规则. 官方定义:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字 ...
- vue学习之生命周期和钩子函数
参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...
- 第一章 Android系统的编译和移植实例
第一章 Android系统的编译和移植实例 这一章节主要介绍了Android系统的编译和移植技术,作为建立在Linux内核的基础上的Android操作系统,它的编译和移植不论在过程还是技术方面都和嵌入 ...
- Jquery中AJAX参数详细(1)-转
http://www.cnblogs.com/qiufuwu618/archive/2012/12/20/2826190.html Jquery中AJAX参数详细列表: 参数名 类型 描述 url S ...
- Fresco,Glide,Picasso
1.Picasso和Glide的with后面的参数不同 Picasso.with(这里只能传入上下文) . Glide.with,后面可以传入上下文,Application实例,Activit ...
- Android RecyclerView 瀑布流滑动到最后自动加载更多
mRecycleView.setOnScrollListener(new RecyclerView.OnScrollListener(){ //用来标记是否正在向最后一个滑动,既是否向下滑动 bool ...