切图

一、Photoshop Adobe Photoshop 是设计师的必备，所以也是前端切图仔的必备工具。 Photoshop CC 2015 墙裂推荐安装2015版，有诸多改进，不少新功能是与我们切图仔息息相关的。 工作区 常用快捷键 辅助App和扩展 设计社区 工作区 推荐选择“排版规则”，比较适合我们切图仔。主界面右侧有很多和网页排版相关的工具和信息展示。 如果你是在狭小的显示器里工作，你也可以选择收起最右侧的面板组。 设置 性能方面，设计师童鞋普遍用的糕富帅版本的电脑，做出来的稿子有时候块头都好大，让我们这些切图仔的电脑鸭梨山大。 我们只好给我们的PS多喂些奶咯。 打开首选项［Cmd+k］，选择性能面板 1. 给PS分配更多的可用内存； 2. 勾选“使用图形处理器”； 网页设计方面通常用像素作为长度的度量单位，我们需要和设计师保持一致，所以设置单位与标尺的单位为“像素”； 再唠叨几句：P 像素完美，这应该是值得每一个设计师（我厂的制图员）去努力追求的。 当你拿制图员给你的设计稿时，请先花个两三分钟扫一遍稿子。看是否有明显的像素不完美的情况，这样减少不必要的返工。 常用快捷键 以下黄色高亮的功能都是PS CC 2015新增的 存储为Web所用格式：Shift+Cmd+Option+s 图像大小：Option+Cmd+i 画布大小：Option+Cmd+c 合并拷贝：Shift

浅谈下PNG8和PNG24的区别： 1.png8 和 png24 的根本区别，不是颜色位的区别，而是存储方式不同。 2.png8 有 1 位的布尔透明通道（要么完全透明，要么完全不透明）， png24 则有 8 位（ 256 阶）的布尔透明通道（所谓半透明）。 png-8 和 gif 有一些相似之处，模式都是索引颜色，只支持像素级的纯透明，不支持 alpha 透明。 我们通常说的“ IE6 不支持 PNG 透明”，是指不支持 PNG-24 的透明。但是 IE6 支持 PNG-8 的透明，就像支持 gif 的透明一样。 3.在ps里看图像---模式，png8当然只有8位/通道了。 4.当打开png8的图片时，ps会默认给它的图片标题上加上“索引”两字，png24的则没有。 PS: 如果我们想在PS中改变PNG图片的颜色，在PS图像---模式中 把索引颜色改为其他颜色（如：RGB颜色）即可修改。 5.查看文件属性详细信息。 这样我们在工作中就有了方向： 1. 色彩丰富的、大的图片切成 jpg 的； 2. 尺寸小的，色彩不丰富的和背景透明的切成 gif 或者 png8 的； 3. 半透明的切成 png24 。 来源： oschina 链接： https://my.oschina.net/u/1403236/blog/185802

1.选择自动选择工具，选择对应的图层 2.点击眼睛关闭不要的图层即可 3.ctrl+c ... 来源： https://www.cnblogs.com/ipoodle/p/11834822.html

前端切图工具 作为一个前端切图仔总是避免不了切图的痛苦 强大的PxCook PxCook 不得不说这个工具强大，不仅由MAC版也有Windows，也不收费。 具体看官网的安装和教程就好了，真的强大 分享一下photoshop mac Photoshop 2018 谷歌网盘地址 mac Photoshop windows Photoshop 2018 谷歌网盘地址 windows Photoshop Sketch Sketch 也是非常好用的一个软件，感觉学习成本有点高，目前也是刚开始用，不过网上很多教程视频。Photoshop基本已经够用的，这个软件收费而且没有windows版本。 来源： https://www.cnblogs.com/qianduanwriter/p/11804570.html

想要改变图标的位置？ 新功能，加个图标？ 画布太大，文件空白太多？ 图标多余，要删除？ 要继续放更多的图片？ 更改画布大小 移动图片 　 　・ 若图标破为独立图层，则用移动工具拖动即可 　　・ 若图标为非独立图层 　　　　・ 用选区工具选中图标区域 　　　　・ 用移动工具拖动图标 修改与维护 三 要减小画布到指定区域 　　・ 选定选区 　　　　画布要稍微大于我们图像区域 修改PNG8的图片 默认是索引颜色 ，如果我们想要在这些图片里面更改一些颜色的话 ，索引颜色会丢失一些颜色 所以这里我们要换成 RGB颜色 图片合并时保留空隙： 　　对于具体要保留多大的空隙，并没没有一个明确的数值，遵循一个宗旨就是空隙足够后期维护就可以了 　　如果是小图标，留的空隙可适当小一些，一般20像素，如果大图标，就要留大一些，因为大图标在调整的时候，影响的 　　空间也会比较大。 图片分类合并有哪些方式？ 图片分类方式： 1、按照同属于一个模块进行分类； 2、按照图片大小相近进行分类； 3、按照色彩相近进行分类； 4、按照有状态的图片进行分类（状态：指当同一图标，普通样式、hover样式、active样式等）； 在实际开发过程中，通常几种分类方式根据情况综合使用。 比如：同一页面的图标，按照不同的功能及状态合并成多张图片；多个模块、多个页面通用图标合并成一张图片等。 图片合并注意事项： 1、图标合理布局

保存 　　 存储所需要内容 　　　　如果是独立的图层 ，我们采用移动工具 把我们需要的内容拖到新文件中 　　　　如果是已经合并在一起的图层，我们可以采取： 　　第二种： 　（ Alt + Shift + Ctrl + S ) 保存为哪种类型呢？ 保存类型一 　　　 　当图片色彩丰富且无透明要求时 保存类型二 当图片色彩不太丰富时 无论有无透明度要求 操作步骤 ：选择好图片--- 请保存为PNG8格式 这里可以保存设置 以后就可以直接用 当图片有半透明要求 请保存PNG24格式 操作步骤 ：选择好图片--- 为保证图片质量 保留一份PSD，在PSD上进行修改 为什么要这样做呢？ 一是因为PSD文件是可以保留原图层的，对于我们后期维护是相当方便的 另外PNG8会对图片进行压缩的，如果我们在PNG8文件中修改再进行保存，那就等于压缩了两次 ，会导致像素点的丢失 原文：https://www.cnblogs.com/hzaixt/p/9275836.html

什么是切图 ？ 从设计稿切除网页素材 为什么要切图？ 给网页提供图片素材 　　　　　　　　　　　　　　　　background - image: url(../images/sprite.png); 　　　　　　　　　　　　　　　　background - position:0 0; 　　　　　　　　　　　　　} 如何切图？ 课程内容： ps 首选项设置 面板 在“窗口"菜单下开启： ・ 工具 ・ 选项 ・ 信息（F8) ` 图层 (F7) ` 历史纪录 窗口 > 工作区 > 新建工作区 > 保存工作区 工具 切图常用工具： 　　・ 移动工具 　　・ 矩形选框工具 　　・ 魔棒工具 　　・ 裁剪工具 + 切片工具 　　・ 缩放工具　　 辅助视图 在“视图”菜单下开启： 　　` 对齐 　　・ 标尺 Ctrl + R 　　` 显示 > 参考线 Ctrl + ； 　　(需要勾选显示额外内容) 　　 原文：https://www.cnblogs.com/hzaixt/p/9274225.html

蓝湖 sketch for Mac 是一款适用于sketch的高效切图插件。本次为您带来了如何使用蓝湖 sketch for Mac设置切图的教程，想知道如何使用的小伙伴千万不要错过教程哦，快来看看吧！ 使用蓝湖 sketch for Mac设置切图 方法一. 选中图标后 点击 右下角Make Exportable 点击完成后 文件夹列表图标上 会有个切刀 这就算切图完成了。之后上传该画板 切图会跟随画板一起上传 此类切图导出后 不包含透明边距 推荐使用第二种方法 方法二. 开始和第一布相同 点击 右下角Make Exportable ,然后点击上面的切刀按钮 此时会在页面上生成一个 切图区域 这个切图区域也可以自定义调整大小，切图区域的大小 就是最后导出时图标的大小 方法三. 可以在工具栏内找到 切图 工具 快捷键 s 选择后 可以在页面内随意拖拽 创建和 方法二一致的切图范围 设置好切图后 不需再次导出，然后打开蓝湖插件 上传设计稿 切图会跟随画板一起上传。 如果切图下载下来有背景色，如何去掉背景色？ 把你的图标和切图 成组 成组后右侧把Export group contents only 勾上，再从新上传到蓝湖，下载切图就不带背景色了 来源：51CTO 作者： tyyyyyy1114 链接：https://blog.csdn.net/tyyyyyy1114/article

在开发小程序的过程中，我遇到一个比较尴尬的问题。就是使用远程调试和预览打包小程序代码时，显示文件过大请删除文件。刚开始还以为是在后台删除缓存就行，然而不是，清理了缓存也不行。 后来发现，是images文件过大，居然是2m~。此处截图没有，因为我是解决完问题才跑来写博客的 解决方案就是优化图片了，优化的主要过程和目的是减小图片的大小。 　　1、去掉小图标的切图图片，改用iconfont字体图标 　　2、尽量避免使用png格式的图片，使用jpg格式 　　3、设计稿上图片是x2倍大小，切图导出时使用正常大小，不要使用x2大小的图片 　　4、视情况压缩图片质量，在导出选项内有 　　如果不是自己切图的，可以提醒ui切图注意以上几点 原大小：（x2倍）、png格式、196kb 修改为使用的正常大小，压缩图片质量，修改为jpg格式、5kb大小 活生生从2M压成了980kb 文章来源: 小程序打包代码包过大的解决方法

设计师在将设计稿交付给前端工程师之前必定会用到切图功能，但有时生成的切图却不符合前端的要求，怎么办呢？ 今天就给大家分享关于切图的一些小技巧。切图往往存在两种形式：素材填满整个切图或者素材周围带空白区域。一起来看看具体用法吧！ 关键信息： 素材填满整个切图 素材周围带空白区域 如果切图下方是有背景的，如何让背景透明？ 在iDoc中快速生成带空白区域的切图（强烈推荐） 素材填满整个切图： 在Sketch中选中需要切图的图层或编组； 点击右下角的Make Exportable，上传至iDoc即可。（如何上传至iDoc？） 无需再设置多种切图倍率，iDoc将自动生成不同倍率的切图。 素材周围带空白区域： 在Sketch中选中需要切图的图层或编组，点击右下角的Make Exportable； 再点击“切刀” 工具，对外框大小进行调整即可。（快捷键是S，按住S直接绘制外框。 如果切图下方是有背景的，如何让背景透明？方案如下： 将切片图层 和需要切图的图层编组，选中切图图层； 勾选右侧属性面板上的Export group contents only。 通过上述操作可以保证切片在有背景的情况下也是透明的。 除了在Sketch中绘制外框外，在iDoc中也可以快速生成带空白区域的切图。（强烈推荐） 在Sketch中点击右下角的Make Exportable后，直接上传至iDoc；