大家好呀，懒懒今天来教你们一些实用的网页设计和切图技巧～之前有很多小伙伴问我：“为什么别人做的网页标注看起来贼专业，我做出来的就跟没睡醒似的？”
其实啊，做好网页设计规范，关键就在于这几点：
图层命名要有规律
英文+数字，比如
banner_01相似的元素用命名前缀，比如 btn_login、btn_register多图层打包记得加后缀，比如
header_pack图层分组整理
按照页面结构分组：
header、main、footer相似元素放一组：比如所有按钮放 buttons组- 记得给每个组加上醒目的颜色标记
尺寸标注
按住Alt，点击两个图层就能显示间距啦
重要的间距要标注，比如 header高度、主导航间距字号、行高这些一定要标！
颜色标注
文字颜色用16进制，比如
#333333背景色透明度要写，比如 rgba(0，0，0，0.5)渐变色要标注角度和颜色值
懒懒教你们一个超级实用的技巧：
快速切图三步走：
Ctrl+单击图层缩略图选中内容Ctrl+C复制， Ctrl+N新建Ctrl+V粘贴，Ctrl+S保存为png切图要注意：
小图标记得开启
PNG-8保存时开启 存储为Web所用格式像素要对齐网格，避免模糊
推荐使用标注工具的小技巧：
蓝湖/PxCook
直接导出切图标注，省时又省力
自动生成标注文档，开发一看就懂 支持团队实时协作，再也不怕文件传来传去
PS内置标注
用参考线做网格系统
利用 注释工具标注重要信息善用 组件功能，提高复用率
设计稿尺寸选择
PC端用1920x1080
移动端用750px宽度 记得设置2倍图，适配高清屏
字体设置
中文字体写
微软雅黑数字字体用 Arial特殊字体要标注
font-family图层处理
合并图层按
Ctrl+E显示/隐藏按 Ctrl+，锁定图层按 Ctrl+/
最后提醒大家一定要养成规范的设计习惯，不要觉得麻烦就偷懒。做好这些看似繁琐的工作，不仅让你的设计更专业，也能让开发小伙伴倍儿省心！
優(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)：
專屬顧問
