今天来给小伙伴们讲一个超级实用的技能 - 网页设计切图。不知道你们有没有遇到过这样的烦恼：明明设计稿超好看，可是一到不同设备上显示就变形、模糊，甚至直接裂开！今天莹颖颖就教你们几招，让设计稿在各种设备上都能完美展现！ 第一招：设计稿尺寸这样定
设计网页之前，咱们得先把尺寸定好。我建议大家用1920×1080px作为桌面端的标准尺寸，因为这个尺寸是目前最主流的。对于移动端，用750px的宽度就很合适啦！
小贴士：记得把分辨率设置为72ppi，这是网页设计的标配哦！
第二招：图层收纳有妙招
很多小伙伴的图层面板跟杂货铺似的，找个图层找半天。来，跟我这样做：
相关的图层打包成组（快捷键Ctrl+G） 给组起个好记的名字（双击重命名） 按照页面结构命名：header、banner、content... 记得加上“切图”标记，比如“header_切图”
第三招：完美切图大法
这个是重点哦！切图要做到完美适配，关键在于：
- 选择合适的导出方式
* 位图用 `存储为Web所用格式`（快捷键Alt+Shift+Ctrl+S）
* 图标最好用SVG格式，确保各种尺寸下都清晰
- 不同设备适配
* 普通图片导2倍图就够啦
* 图标类的导1倍、2倍、3倍图，文件名加上@2x、@3x
- 格式选择
* 照片用JPG，压缩率设在60-80之间
* 带透明效果的用PNG-24
* 纯色图形用PNG-8
第四招：响应式切图神器
来来来，这招贼好使！
- 使用参考线
* 按Alt拖动参考线到关键位置
* 设置常用断点：1920px、1440px、768px、375px
- 切图小技巧
* 背景图要预留出足够空间，两边至少200px
* Banner图最好做成居中对称的
* 导航栏记得给icon留出足够间距
终极大招：智能切图
这个是我最近发现的神器方法！
打开 导出>导出所有切片选择 资源生成器设置不同尺寸和格式 一键导出所有规格！
注意事项
切图前记得把“单位与标尺”改成像素 存储路径要规范，最好按模块分类 图片命名要规范，建议“模块名_功能_尺寸” 一定要检查切出来的图是否完整，有没有糊边
小伙伴们，记住一点：切图不是简单的导出，而是要考虑到实际应用场景。特别是做响应式网页的时候，一定要预留出足够的可伸缩空间。
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專屬顧問
