一、传统切图

使用切片工具一个个切
使用参考线一键切

存储为WEB所用格式，选择PNG-24

二、精准切图

2.1 一键全切

文件>导出>将图层导出到文件
选择PNG-24，并勾选所有选项，就会按照图层一个个导出，并且保留阴影

2.2 单张切图

编辑>首选项>增效工具，勾选“启用生成器”
文件>生成>勾选图像资源
直接选择想要的图片所在图层，双击加上想要生成的格式后缀，例如“.jpg/.jpg8/.png/.svg”，即自动生成。
注：
如需要做图片优化，也是直接修改名字
例如“200% imgName @2x”

2.3 抽出资源

选择一个图层，点击文件>导出>导出为

2.4 复制CSS

选中图层，点击“图层”>点击“复制CSS”>粘贴到对应代码块中
生成的CSS代码自动将图层名作为类名。

三、图片在线处理网站

图片压缩：https://tinypng.com/

PSCC2014前端切图小方法（不断补充）相关推荐

前端切图之svg图标的复用基于defs和use 亲测有用
切图网长期致力于web前端开发外包服务,而我们也关注到现在图标很多时候采用svg更多一点,然后图标字体文件已经提供了很多种类的图标,不过采用svg图标可以自行选择更符合.更好看的图标,相比于字体图标更 ...
前端切图案例课程一则-姜威-专题视频课程
前端切图案例课程一则-201人已学习课程介绍本课程以一套响应式网站设计图,进行切图为案例,还原老司机整个切图过程.本课程属于初级的前端工程师系列课程中案例课程的第一套课程,本课程需 ...
5款前端切图工具大比拼：谁是最强切图神器
前端切图是前端工程师们还原设计稿的过程中必不可缺的一环.不过,切图工作究竟谁来做?这个问题我们在各大论坛也屡见不鲜:前端工程师认为设计师出了设计稿,那么相应的切图也应该一并交付:设计师则认为前端工程师 ...
前端切图神器avocode
前端切图神器avocode 安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能.杀敌要有趁手的兵器,而前端一般都是用photoshop,但是这个兵器 ...
介绍一个前端切图神器avocode
2019独角兽企业重金招聘Python工程师标准>>> 安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能.杀敌要有趁手的兵器,而 ...
给前端工程师的快速切图小技巧 (切出jpg图标或png透明图)
部分看了文章的设计师,来找我说怎么切图.sorry?在我的理解,这就是切图啊,但是他们所指的"切图"是,怎么把设计图制作成html页面. 这就说明,现在人们对于前端都是有误区的.认 ...
Photoshop——切图小技巧
准备工作把Photoshop功能面板设置成我们前端常用的并保存下来,这样就不用我们每次使用的时候都要花时间再去设置一次了. 1.设置标尺单位 --CSS里面用的最多的单位是像素(px),测量和读取的 ...
涨姿势！摹客切图小技巧
设计师在将设计稿交付给前端工程师之前必定会用到切图功能,但有时生成的切图却不符合前端的要求,怎么办呢? 今天就给大家分享关于切图的一些小技巧.切图往往存在两种形式:素材填满整个切图或者素材周围带空白区 ...
超全面的前端切图技巧，读这篇就够了
工欲善其事,必先利其器! 相信每个前端都经历过用PS手动切图的原始手法,有时候偷懒,还会直接用QQ截图,现在想想真是初生牛犊不怕虎,怎么方便怎么来~ 当时就在想,如果能有一款神器,帮我解放切图这种&q ...
在线ps html源码,PSD to HTML5 - 专业前端切图（PSDoHTML.com）
+ 核心服务将提供的PSD.AI等设计稿转化为html5网页代码,包括常规切图.自适应切图.手机网站切图.微信H5动画(邀请函等)等.不提供设计与修改设计稿服务. PC 前端:常规.动效.管理后台. ...

PSCC2014前端切图小方法（不断补充）

文章目录

一、传统切图

二、精准切图

2.1 一键全切

2.2 单张切图

2.3 抽出资源

2.4 复制CSS

三、图片在线处理网站

PSCC2014前端切图小方法（不断补充）相关推荐

最新文章

热门文章