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

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

前言:前端涉及到的 ps 操作不算复杂,基本上就是切图,本文总结了常用的几种切图技巧。

工具:photoshop cs6 、 photoshop cc

1. 传统切图 01

这是最笨的一种方法,核心就是用选区工具选中我们要的切图区域,复制到新文件,然后整个保存下来,这样的切图方法几乎没有可取之处,不过我最初确实就是这样干的。。。

2. 传统切图 02

这种效率要高一些,可以同时切多个图片,用切片工具选中多张我们需要的图片区域,点击文件-》保存为 web 所用格式,这种方法的缺点是默认会保存多张图片,即便我们没有选中那么多,而且图片的精度不够完美、没有去除背景(png格式下)。

3. 传统切图 03

使用切片工具,状态栏勾选自动选择、图层工具,点击我们需要的图层,图层栏自动定位到该图层位置,如果是在组里面的话,右键转化为智能对象,然后在图片选取上右键,编辑内容,这样会新打开一个窗口,只包含我们选中的区域,然后同样的,文件-》保存为 web 所用格式。

4. 参考线切图

ctrl + r 打开参考线,用横竖两种参考线把需区域包裹,看到顶部状态栏没,点击选中 基于“参考线的切片”,这时系统根据我们的参考线包裹,自动生成了切片,然后文件-》保存为 web 所用格式。

5. 批量精准切图

对于大量的切片来说,手工难免太慢了,这时可以用这种方法,文件-》导出-》将图层导出到文件,这种方法会把所有的图层文件都导出来到我们指定的一个文件夹里面,过程比较慢,但是也算方便。

6. 自动切图

这是 photoshop cc 的新功能,真正的解放双手,如果 ui 设计师合理的运用,可以在设计好图片的同时,就自动生成切片;

  • 操作一,选择菜单“编辑”->”首选项"->“增效工具”,弹出下面的窗口。勾选“启用生成器”。
  • 操作二,勾选“文件”->“生成”->“图像资源”菜单。
  • 然后,我们假设选中一个图层,需要把它保存为图片,直接在图层栏更改它的名字,加上 png、jpg、或者 svg 后缀,其它都不用做了,我们找到该 psd 文件的位置,会发现在同样位置出现了一个新的文件夹,里面就是我们保存的图片。。。直接用就好了。

参考链接

转载于:https://www.cnblogs.com/zhoumingjie/p/9066425.html

你可能感兴趣的文章
使用bootstrap制作网站导航
查看>>
新笔记
查看>>
windows环境下把Python代码打包成独立执行的exe可执行文件
查看>>
PHP底层的运行机制与原理
查看>>
2018.09.09 DL24 Day2总结
查看>>
SDOI2011 染色
查看>>
2017《面向对象程序设计》课程作业五
查看>>
从源码的角度分析Volley加载数据的过程
查看>>
LSI SAS3008 RAID配置方法
查看>>
DataGrid:Maintaining an Empty Row for the Entry of New Records
查看>>
activiti工作流的了解
查看>>
页面嵌入开发
查看>>
根据表内分数降序排列,显示用户名,大类,小类
查看>>
Ubuntu18.04下f.lux的替代品——RedShift
查看>>
使用Jquery查看对象注册事件
查看>>
Web Components 规范学习
查看>>
关于继承的prototype , _proto_, constructor
查看>>
第三模块-第一章笔记(组合篇)
查看>>
Phantom Burner Configuration
查看>>
新阶段——新工作
查看>>