前端PS常用切图技巧
2024-08-27 08:02:37
前言:前端涉及到的 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 文件的位置,会发现在同样位置出现了一个新的文件夹,里面就是我们保存的图片。。。直接用就好了。
参考链接
前端开发人员也要会的切图技巧
前端工程师必备的PS技能——切图篇
做一个会PS切图的前端开发
最新文章
- 标签q
- 类库,委托,is和as运算符,泛型集合
- submit
- mysqli常用错误处理函数
- Windows下绘制数学函数图像的方法
- jquery+thinkphp实现跨域抓取数据的方法
- php 使用pathinfo(), parse_url(), basename()解析URL
- 【英语】Bingo口语笔记(42) - Got系列
- cocos2d-x中CCCallFunc CCCallFuncN CCCallFuncND的区别和使用示例
- 配置文件struts2Struts2配置文件模块化包含(include)与action总结
- 查看wtmp文件内容
- zen-Coding的使用
- JavaEE(15) - JPA实体继承
- YII相关资料(干货)
- TCP connect EADDRNOTAVAIL(99)错误原因分析
- 绿色版Tomcat 启动 + 停止 + 随系统自动启动 - - 博客频道 - CSDN.NET
- SparkMLlib回归算法之决策树
- git 从分支上创建一个分支
- IntelliJ IDEA 通过GsonFormat插件将JSONObject格式的String 解析成实体
- 天猫魔盒1代TMB100E刷机, 以及右声道无声的问题
热门文章
- hdu5389 Zero Escape
- [TypeScript] Using ES6 and ESNext with TypeScript
- js如何实现点击显示和隐藏表格
- java 替换json字符串中间的引号保留两边的引号,避免json校验失败
- WPF应用最小化至系统托盘运行
- POJ 1985 - 树的直径
- 【p094】道路游戏
- springboot启动tomcat报错java.lang.NoClassDefFoundError: javax/el/ELManager仅记录
- matlab 高级函数 —— colfilt/blockproc (图像)矩阵的分块处理
- Method and apparatus for encoding data to be self-describing by storing tag records describing said data terminated by a self-referential record