大家好呀，懒懒今天来教你们一些实用的网页设计和切图技巧～之前有很多小伙伴问我：“为什么别人做的网页标注看起来贼专业，我做出来的就跟没睡醒似的？”
其实啊，做好网页设计规范，关键就在于这几点：
图层命名要有规律
英文+数字，比如
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+/
最后提醒大家一定要养成规范的设计习惯，不要觉得麻烦就偷懒。做好这些看似繁琐的工作，不仅让你的设计更专业，也能让开发小伙伴倍儿省心！
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
