美文网首页
PhotoShop切图

PhotoShop切图

作者: 朝曦 | 来源:发表于2018-03-13 09:59 被阅读0次

PhotoShop切图


1. 原始切图

(1)选择工具栏中的切片工具 image.png
(2)找到要切片的元素,在右侧的图层框中,使元素背景隐藏,然后用切片工具选择需要切片的元素 image.png
image.png
image.png

(3)导出为web常用格式,一般为png-24。


image.png
image.png
(4)切图结果
image.png

2. 基于参考线的切图

(1)设置显示参考线和标尺
视图->显示->参考线


image.png

视图->标尺


image.png
(2)画参考线
image.png
(3)选择切片工具,点击属性栏中的“基于参考线的切片”
image.png

(4)导出。


3. 自动切图

(1)选择文件->导出->将图层导出到文件。


image.png

(2)选择导出格式和其他配置项,运行。


image.png
(3)photoshop自动导出所有图层的切片,速度可能较慢。

相关文章

  • PhotoShop切图

    PhotoShop切图 1. 原始切图 (3)导出为web常用格式,一般为png-24。 2. 基于参考线的切图 ...

  • Photoshop快速切图工具

    1. 下载 Photoshop 切图动作格式文件 Photoshop 切图动作格式文件下载 提取码:sac3 2....

  • PhotoShop各种切图方法

    用PhotoShop切图是很常见的一个操作,其实PhotoShop有多种切图方法,现总结如下: 方案1:导出切片 ...

  • 烈风裘的前端技能

    切图Photoshop切图插件Cutterman标注插件Parker图片压缩ImageOptim/HummingB...

  • Web前端学习之资源汇总

    01.PS切图 《PhotoShop切图》 《切图规范及标注规则记录》 02.Sublime编辑器安装及调试 《如...

  • web汇总

    01.PS切图 《PhotoShop切图》 《切图规范及标注规则记录》 02.Sublime编辑器安装及调试 《如...

  • PhotoShop切图笔记

    界面快捷键 放大、缩小:alt+滚轮 or ctrl+"+/-"100%视图:ctrl+1标尺:ctrl+R参考线...

  • Photoshop 切图笔记

    参考慕课网视频 : http://www.imooc.com/view/506然后是实际操作最后做做笔记 界面设置...

  • Photoshop切图技巧

    photoshop界面设置 新建设置 高:1920像素 宽:2000像素 分辨率:72像素/英寸 颜色模式:RGB...

  • photoshop 切图技巧

    仅供学习,转载请注明出处 切图介绍 当在前端开发或者某些图片需要切下来的时候,可以使用photoshop的切图功能...

网友评论

      本文标题:PhotoShop切图

      本文链接:https://www.haomeiwen.com/subject/oebofftx.html