当设计师把网页设计稿交给前端开发人员写代码后,页面往往与原稿有些偏着。前端人员写完页面后,还需要截图叠加到设计稿上,去看看偏差比率,这是很麻烦的事情。为了解决这个问题,建议设计师和前端人员看看今天分享的 Graaf 栅格样式工具。

Graaf

Graaf 可以直接在页面上显示栅格线,而且可以自定义栅格结构,大大减少前端或设计师检测页面的烦恼。

产品特色:

1. 直接在WEB页面上显示栅格,方便前端人员实时调整(赞赞赞)
2. 栅格样式支持多个流行布局,如:Bootstrap, BBC News, Dribbble, Github, Medium…
3. 支持定制栅格样式(赞赞赞)

直接在页面上显示栅格线

只需要引入CSS 文件就能直接在页面上显示栅格线,这些既方便查看页面错位,又可以实时刷新调整,再也不用一个个截图到设计稿了。

<link rel="stylesheet" target="_blank" href="https://grids.graaf.space/WIDTH/COLUMNS/GUTTER.css">

自带多个栅格样式

目前自带了有10多个流行的栅格样式,只需要替换对应样式表名称就行,如下图,如果你需要 Bootstrap 的栅格,就点击 bootstrap.css 就能看到样式表链接,然后直接嵌入网页即可。

自定义栅格样式(赞)

如果没有你需要的栅格系统,那么可以简单修改 CSS 链接就可以自定义栅格线了,比如这个链接:

https://grids.graaf.space/793/10/16.css

793/10/16分别是宽度、列数、间隔,你只需要修改对应数值就会即时生效,比如设置为宽度:1200px,列数:3列,间距:30 px,那么链接就这样改动:

https://grids.graaf.space/1200/3/30.css

Taiwan Scenery Gallery

(搭梯子访问)

而且今天重点介绍 Taiwan Scenery Gallery 这个图库资源,特色在于图库里的所有图像均来自台湾,所以设计师们如果想找免费的台湾照片,这是一个很好的资源。

据 FLiPER 报道这是由 2 个广告系台湾本土女生创办,她们时常思考身在台湾,有没有可能为台湾做点什么,为台湾留下美的记录?

水稻 | 摄影:裴

最后她们想到了分享免费图像的行动,因为喜欢照相的台湾人很多,而需要照片的人也很多,特别是设计师们,这个行动不仅可以帮到需要图片的人,同时也在向世界传播着台湾的美。

池上乡,台东县 | 摄影:Eting

这个照片资源全部均为台湾人提供,但…报道前还有100多张,而现在小编看了下,只有44张,也许被购买版权了吧。免费分享的同时,摄影师也能获得额外收入,这也是不错的。

台南海安路(已删)

桃源谷 | 摄影:Eting

澎湖西嶼(已删)

澎湖湖西

新竹柿饼 | 摄影:范育銓

虽然目前只是很少的相片,但我们报道后,也会有不少人的参与进来,未来她会继续成长,敬请关注。

「优设最新神器推荐

  1. 《这款图标神器,让你体验用完即走的畅快感》
  2. 《超过5万张!免费高清可商用图库ZOOMMY 3.0重磅来袭!》
  3. 《超好用的PS字体管理插件FONTAGS(附安装方法)》

原文地址:shejidaren

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

点赞
收藏

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
相关推荐
评论 收藏