介绍

我是一名前端开发工程师，随着工作环境的改变，遇到过公司没有ui设计师，或者ui设计师只为我提供psd设计稿，并没有切好图。由此可以看出会一些切图技巧对我们开发效率还是起着至关重要的作用。
下边分享一下这方面我的经验，希望帮助到你。

普通切片切图

首先打卡ps软件 ctrl+p调出标尺，单位选择像素，红色区域分别是垂直和水平的参考线，直接拉动几根将我们需要切的图包裹住。

2.打开切片工具，沿着参考线选取我们想要的切片，同养的操作我们可以选择多张切片。

3.接下来就是保存我们所要的切图了，旧版本的ps点击文件存储为web所用格式，新版本的要选择导出，然后选择存储为web所用格式。

4.接下来选择png-24，透明，选择保存选中的切片到对应的路径就行了

选择图层切图

1.新建一个空的文件（背景最好选择透明）
2.右键psd文件查看对应的图层，然后拖拽到新建的文件中

3.接下来要选择导出，导出路径格式，运行即可

接下来是强烈推荐的上传蓝湖切图方式

使用蓝湖必须要用较新版本的ps软件，还有对应的蓝湖插件，网上可以搜索到教程，就不详细说明啦。
鼠标左键选择对应的图层，按住ctrl键可以选择多张，然后标记为切图

3.选择web格式，对应尺寸，然后上传psd文件到你的蓝湖目录下面即可

4.登录蓝湖查看，下载我们标记好的切图文件。

小结

编辑不易，转载请注明出处。感谢赏阅，期待你的建议，点赞和关注。

ps切图详解以及上传至蓝湖相关推荐

PS把PSD上传到蓝湖
安装photoshop 略!!网络上有很多资源可以下载,版本要求:安装 CC2015以上版本. 安装蓝湖下载地址:https://lanhuapp.com/ps 下载完成后,进行傻瓜式安装,然后重启 ...
关于ps图标上传到蓝湖，蓝湖下载svg格式图标空白解决办法
平常我们从阿里矢量图或者其他矢量图下载下来的图标放到ps以后,都会自动栅格化或者生成智能对象, 但是这并不是我们想要的,我们明明下载的矢量图,为啥就变成智能对象或者栅格化了呢?因为ps不支持处理矢量图 ...
蓝湖切图后如何做成html,如何使用蓝湖 sketch for Mac设置切图？
https://mac.orsoon.com/Mac/172336.html 蓝湖 sketch for Mac是一款适用于sketch的高效切图插件.本次为您带来了如何使用蓝湖 sketch for ...
将figma的设计图上传到蓝湖
前言: 将figma的设计图上传到蓝湖. 实现步骤: 1.把文件保存到本地 ,拿到一个 .fig的文件 2.打开一个在线的 ui编辑软件:MasterGo 注:该软件跟figma一样,都可以在线编辑, ...
android 截图模糊,Adobe XD导出图片模糊？设置错误啦（切图详解）
Adobe XD CC是一款矢量设计软件,支持导出PNG.SVG.PDF.JPG四种格式,XD中文网(https://xd.94xy.com)的数万用户群和学员中,有非常多的童鞋表示Adobe XD ...
Struts文件上传与下载详解 _上传多个文件
在上一篇中给大家列出的单个文件的上传,那么这一篇咱们讲讲上传多个文件改怎么作呢?由于过程和上传单个文件的类似,所以在这里不细说,相信大家都能看懂,看不懂的可以在评论区留言,我看到之后会及时回复的!! ...
html %3ca%3e可以传参吗,跨站脚本执行漏洞详解-恶魔上传
区域,你就允许JavaScript执行.一般来说,前者的安全级别都要高于后者.这样,一般情况下别人无法通过执行恶意JavaScript脚本对你进行攻击,但是如果与你处于相同内网的服务器存在跨站脚本执行 ...
ps切图后 JAVA开发_2018年设计师都在用的PS切图插件--摹客
终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...
2018年设计师都在用的PS切图插件--摹客
终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...

ps切图详解以及上传至蓝湖

ps切图详解以及上传至蓝湖

介绍

普通切片切图

选择图层切图

接下来是强烈推荐的上传蓝湖切图方式

小结

ps切图详解以及上传至蓝湖相关推荐

最新文章

热门文章