网站建设中必备的两款工具:fontpair & coolors

准备好了域名,安装好了Wordpress之后,接下来就是定制网站,设计美观的版面,但是应该如何搭配字体和颜色?推荐两款工具,帮你搭配网站字体和颜色。

Fontpair是一款Google字体搭配工具,有三大类字体Cursive(草书)/Sans-Serif(无衬线)/Serif(衬线)。下面这张图可以对比下区别:

图片:maconprinting.com

打开fontpair.co,界面比较简洁,可以根据自己喜好点击导航栏,快速定位到指定板块,每一板块下有不同的字体组合,可以直观的看到展示的样式,点击下载之后会有一个zip文件包,里面是字体问题,如果你在使用AVADA可以上传字体文件然后在设置面板中自定义设置。

Coolors是一款颜色生成工具,按下空格键就能快速生成一套颜色搭配,有2种使用方式:随机生成和发现。

Generate-随机生成

点击导航栏的Generate,会跳转到一个新的页面,点击空格键就会立即生成一个新的搭配。以下一些设置解释:

  • 简短的教程,如何使用;
  • 设置颜色快之间是否隔离,单色,色号下方的次要信息;
  • 上传图片,识别添加到颜色面板;
  • 返回上一步
  • 重做
  • 色盲
  • 选择调整全部色号的深浅度
  • 色温饱和度等

色块可以拖拽排序,点击锁定之后,颜色会被保留下来,未锁定的色块会会从新生成。点击照相机按键,可以上传本地或网上图片识别添加到面板。

Explore-发现

如果你在自动生成的色号不满意,可以在Explore板块中查看其他设计设搭配好的方案,可以点击按照最新/精选/最好进行排序,点击查看可以进行下一步微调。

其他辅助工具

当你在浏览别的网站的时候,发现网站使用的字体很喜欢,想使用到自己网站的时候,你就可以使用这款WhatFont Chrome 扩展插件来识别字体名称和字体设置信息。安装地址:WhatFont.

点击图片跳转到Chrome webstore 下载安装

如果你使用的是Chrome浏览器,可以ctrl+shift+i使用chrome developer tools 查看使用元素。

ColorZilla同样是一个Chrome扩展插件,可以用来识别当前页面的颜色。
  • 吸管工具,点哪里吸哪里,自动复制色号到粘贴板供使用。
  • 页面颜色分析,可以看到页面中所有的颜色;
  • 生成渐变CSS代码;
使用的较多的还是吸管工具。
点击图片跳转到Chrome webstore 下载安装

同样你也可以ctrl+shift+i使用chrome developer tools 查看使用元素。如果你想要一个渐变的背景可以到www.colorzilla.com/gradient-editor/,设置好之后复制CSS代码,粘贴到网站中就可以,就像下面这个效果一样。

Ultimate CSS Gradient Generator

A powerful Photoshop-like CSS gradient editor from ColorZilla.

如果你有更好的工具推荐可以留言分享给我。

如果觉得文章对你有帮助,可以加入到邮件列表,文章不定期更新,邮件会第一时间通知你。

Leave a Comment