北京中科白颠疯曝光 http://www.0594ptaf.com/用sketch完成一个响应式网页设计
最近优狐哥收到一私信，希望提供一份网页的sketch教程。时间点上可能晚了大半天，请….见….亮….！但请这位兄弟收下这篇文章。
上面是最终实现的效果图。
本次教程是专门找了响应式WEB设计。优狐哥的想法是移动UI，网页WEB都兼顾，看完的同学都会跨平台设计了。
资源列表
老外比较讲究，列出使用到的素材版权。我也啰嗦一下，方便各位同学下载做练习：
图片素材来自unsplash（下载地址）
Merriweather来自谷歌的字体
Montserrat来自谷歌的字体
图标来自TheNounProject
facebook的标志
twitter标志
Instagram的标志
google+标识
扯点设计思路
在设计之前，我建议大家去更深入的分析市场或调查客户需求，促进效果图得到市场认可—设计本身就是来自生活，服务生活。来自生活设计灵感，作品的灵*和表现才更具有时代性，可用性。。。
字体选择
好的设计作品，往往从选择字体开始。好的字体，不仅能传达信息，更能传达界面需要流露出的感情和情绪。
作品选择了MERRIWEATHER为正文大标题，这种衬线字体的灵感来自旧的书面。对于讲故事的类型，较为贴切。这种字体在高分辨率显示器显示下给人一种印刷杂志般的真实感。
另一方面，对于常见的UI元素，如按钮和标签等感觉现代的东西，设计中选择了蒙特塞拉特岛字体--一种干净、简单的无衬线字体。
字体大小与排版
字体与布局的比例关系，很多时候决定了画面的感觉。这种感觉，国内的设计师很少说的清—至少理论上，缺乏一个系统体系。Adobetypekit的设计经理提姆布朗给出了一套规范比例体系。这套字体能够较好的相应不同屏幕，完美的接近*金比例。
依靠这套体系，设计师可以轻松的控制好信息展现层次和布局的美观度。
下面，开始正式的设计~
一创建文档1.1)、创建画板
我们打开sketch后，点击插入按钮，再点击画板（快捷键A）菜单，创建画板
TIPS：移动画板的时，选中画板才能拖拽；否则，拖拽的就是画布元素而非画板
根据经验，建议大家选择iphone6尺寸.因为sketch有个mirror功能，可以将效果图同步到手机，实时预览效果图。
要激活此功能，您将需要从AppStore下载的sketchmirrorapp。之后，点击sketch中的mirror图标就可以了（请确保你的手机在同一局域网或已通过USB电缆连接）。
此应用是收费的，如果想免费，请看优狐哥最近分享的skala免费阅览
电脑网页视图的画板，我选中了px宽。
提示：画板设定好，和ps一样，也可以再重新修改设定画布的长宽。
1.2)创建辅助线
为了更好的去快速设计，我们需要设置一些辅助线。步骤是依次点击视图显示标尺（
