超好用的网页栅格化工具: GridGuide
平面设计中使用栅格化设计是相当重要的,特别是网页和VI设计方面,在设计前都需要来好栅格,但是选择合适栅格和计算无疑是浪费了设计师不少的时间,然而当遇上今天的神器「GridGuide」在线工具,以后再也不怕Web网格布局问题了!
网站名称:GridGuide
工具地址:http://grid.guide/ (已加入至设计导航 -> 设计工具类目下)
使用教程
打网站后,用户可以自由设置最大宽度、列数以及留白边界即可生成栅格方案了。
这里说明下留白边界(Outer Gutter Ratio)是以倍率为单位,分别为0,0.5,1.0,1.5,2.0的倍率。
选择最佳栅格方案
GridGuide 可以很方便计算多1种栅格多种方案的布置。比如我设置了最大宽度:1240,列数:12,此时工具会自动生成5种最佳栅格方案给我们选择。
下图是以手机宽度375 PX来设置,列数是5列,留白边框是1.5倍
有了这个工具,我们在制作 WEB、响应式、H5网页、VI 等平面设计相关的栅格都会更容易,推荐大家收藏。
值得使用的三个理由
【1】使用简单,不需要设计师去算来算去
【2】一次性推荐多种最佳栅格布局,设计师可自由选择最合适的方案
【3】支持下载 PNG格式的栅格图像 www.0539G.com
超好用的网页栅格化工具: GridGuide的更多相关文章
- FROONT – 超棒的可视化响应式网页设计工具
FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...
- 巧用网页开发者工具F12 审查、修改元素、去除广告、屏蔽遮罩
巧用网页开发者工具F12 审查.修改元素.去除广告.屏蔽遮罩 每当打开一个网页的时候,是否为页面有很多广告而烦恼:是否为要操作页面(例如观看超清视频),请先注册登录等等事情而麻烦:是否对网页加锁的视频 ...
- node.js基础模块http、网页分析工具cherrio实现爬虫
node.js基础模块http.网页分析工具cherrio实现爬虫 一.前言 说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherri ...
- Brackets 1.8 开源+免费的Web前端网页文本编辑工具
Brackets 1.8 开源+免费的Web网页文本编辑工具 -------------->> ---------------------- A modern, open source ...
- 多功能网页刷新工具,刷pv工具
多功能网页刷新工具,刷pv工具,在线刷流量,刷PV,刷UV小牛刷新助手功能介绍:1.设置多个刷新网页地址.2.设置刷新时间3.开始工作4.其他操作:老板键:打开时自动刷新:置系统托盘5.可手动输入地址 ...
- 网页编程工具:EditPlus
字体:Consolas EditPlus,很土很简单很强大的网页编程工具 http://www.editplus.com/download.html 下载 http://www.cnblogs.co ...
- 【XPath Helper:chrome爬虫网页解析工具 Chrome插件】XPath Helper:chrome爬虫网页解析工具 Chrome插件下载_教程_安装 - 开发者插件 - Chrome插件网
[XPath Helper:chrome爬虫网页解析工具 Chrome插件]XPath Helper:chrome爬虫网页解析工具 Chrome插件下载_教程_安装 - 开发者插件 - Chrome插 ...
- 网页后门工具laudanum
网页后门工具laudanum laudanum是Kali Linux预先安装的Web Shell工具.它支持多种Web后台技术,如ASP.ASP.net .JSP.PHP.Coldfusion.它提 ...
- 网页截图工具CutyCapt
网页截图工具CutyCapt CuteCapt是Kali Linux提供的一款网页截图工具.该工具运行在命令行中,可以将WebKit引擎解析的网页保存为图片.它保存的文件支持矢量图和位图两大类型, ...
随机推荐
- Android adapter适配器的学习
学习Android有一点时间,说说自己的学习感悟. 首先呢,先说说适配器的作用,顾名思义,它就是把数据定义好一定的规则,使得我们可以用到ListView GridView等上面 所以说这玩意,还是得好 ...
- TableView 隐藏多余的分割线
- (void)setExtraCellLineHidden: (UITableView *)tableView { UIView *view = [UIView new]; view.backgro ...
- win7修改护眼色
一. 手动修改 记得qq管家有一个功能就是护眼模式 那如何不通过第三方软件修复系统护眼色呢.百度后我在此记录下: 1.在桌面右键单击,选择“个性化”,在下面找到如图所示,点击进去 2.高级外观设置 3 ...
- VS2015 自动添加头部注释
让VS自动生成类的头部注释,只需修改两个文集即可,一下两个路径下个有一个 Class.cs文件 D:\Program Files (x86)\Microsoft Visual Studio 14.0\ ...
- 【leetcode】Two Sum
题目简述: Given an array of integers, find two numbers such that they add up to a specific target number ...
- 移动WEB前端开发资源整合
meta篇 1.视窗宽度 <meta name="viewport" content="width=device-width,initial-scale=1.0,m ...
- Ubuntu菜鸟入门(三)—— 无用软件卸载,wps等常用软件安装
一 移除不需要的软件 sudo apt-get remove libreoffice-common sudo apt-get remove unity-webapps-common sudo apt ...
- hdu2196 树形dp
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2196 Problem Description A school bought the fi ...
- Linux之head、tail、grep、cut等命令详解
http://jingyan.baidu.com/article/5225f26b6ab230e6fa0908be.html
- to_string()的应用
作用是将数字转化为字符串 #include<iostream> #include<cmath> #include<algorithm> #include<cs ...