工欲善其事必先利其器。
作为UI设计师，你的项目是需要随时预览的，以便及时发现设计问题，于是了PSplay，sketch mirror等工具，可以非常方便地在手机中预览APP设计稿，极大地提高了设计效率。
不过用sketch设计pc网页的时候该如何实时预览呢？
看完本文你将解决以下问题
使用sketch插件，一键预览网页设计稿
问题场景再现
A同学设计好了一个官网主页，1920px宽，自己电脑是1440px，预览的时候非常麻烦，先导出图片，然后鼠标拖动图片放大查看……关键没有真实浏览器里面看的感觉。比在sketch mirror里面预览手机界面体验差多了。
于是这个sketch插件应运而生，preview in browser ，一款可以实时预览网页设计的工具。
插件使用方法
下载地址点击下载密码: 5mks
在设计过程中，只要按快捷键shift+cmd+.运行插件，你的pc网页就会用默认浏览器打开，非常方便。
结语
需要注意的是，如果设计稿大于你的屏幕尺寸，比如设计图是1920，电脑是1440，那么浏览器打开后是偏移的。因为预览的html里面是img图片展示，而非background-image展示，导致屏幕容纳不下图片。
解决方案是，你的电脑尺寸是多少，设计图也需要是多少，这样预览出来就是100%还原了。效果和真实网页一模一样。
熟悉快捷键后，在平时设计网页时，会非常方便地实时预览网页界面。
更多UI设计干货文章请关注UI黑客
微信公众号 uihacker
UI黑客官网http://www.uihacker.com/
UI黑客论坛http://bbs.uihacker.com/
