在线配色网站+谷歌的免费MATERIAL风格图标

今天除了一个清新干净的在线配色网站,还有最近发现 Google 在自家的 Google Design 网页里收录整套的平面化设计图示 Material icons,如果你正好在开发网页,或者设计 iOS、Android 应用程序,这套图标是个可运用的高质量免费资源。

LOL Colors

LOL Colors 网站是一个很简单、设计可爱的在线配色工具,我曾经介绍过许许多多的选色服务,使用上都大同小异,没有太过突出的功能,当然这个 LOL Colors 也差不多,你可以在这里找到许多的色彩组合,将鼠标光标移动到颜色上方就会显示色码。

原以为 LOL Colors 是和「英雄联盟」有关的色彩工具,事实上 LOL 是国外常见网络用语,指的是大声笑(laughing out loud 或 laugh out loudly 缩写),LOL Colors 把一些配色以四个一组排列而成,而这一颗颗水滴状的色彩就像是眼泪,笑到飙泪。

特别的是 LOL Colors 由开发者 Mackenzie Child 独自开发,从设计、编写程序代码到网站上线只用了短短 24 小时!透过这个案例想告诉大家:凡事别拖延,给自己一个挑战期限,将手边工作完成吧!

STEP 1

开启 LOL Colors 网站后,可以找到最新加入的配色组合,每个组合下方爱心代表喜爱的人数,目前 LOL Colors 还没有自己喜爱颜色功能,也还无法自行加入配色,开发者表示这些功能都在计划中,日后也会陆续更新至网站。

STEP 2

将鼠标光标移动到色彩上方,右侧会显示色彩代码(Hex Code),你可以把色彩选取后复制代码,将颜色使用到你的设计项目上。

其实这些色彩服务都是一种刺激灵感的方式,尤其当你苦思要选择什么颜色时,或许从网站上的颜色搭配也能知道某些颜色组合起来可能会有意想不到的效果。

Google Design – Material icons

(小梯子访问)

Material icons 图示分门别类,有包含 Action、Alert、AV、Communication、Content、Device、Editor、File、Hardware、Image、Maps、Navigation、Notification、Social、Toggle 等主题类型,几乎所有用户需要的图示都能在这里找到。

这些图示的主要特色是辨识度极高,无论在何种大小显示下都能清楚阅读,此外,网站提供包括 SVG、PNGs 和 Icon Font 三种类型,18dp、24dp、36dp 和 48dp 四种尺寸。

Material icons 图示集没有使用限制,也能在产品内重制或再次分享这些素材,如果使用时欢迎在产品 About 页面标记图标来源(不是必须),唯一要求是不可转售这些图示。

STEP 1

开启 Materials icons 网站后,可从上面看到特色说明,这套图标集有提供图标字型(Icon Font),且托管于 Google Web Fonts,如果需要可以参考说明操作。

将网页往下拉,即可看到 Materials icons 提供的相关图示,可以发现这些图示设计都相当简洁,而且没有太多复杂变化,重要的是即使在小屏幕(如手机、平板计算机)显示,也能很清楚看到图标要传达的讯息。

STEP 2

点选任意图标后,下方会显示该图标在黑色或白色的呈现情形,右下角则有 SVG、PNGs 和 Icon Font 的下载链结(左边可以切换大小)。

如果你是使用 Icon Font 字型来带入图标的话,下方也会有详细的设定说明,简单来说,就是先把 Icon Font 内嵌网站,然后以 class 来调用图示即可。

值得一试的三个理由:

  1. 收录超过八百种设计精美的免费图示
  2. 提供 SVG、PNGs 和 Icon Font 三种格式
  3. 可自由使用于个人或商业项目,无须署名

free.com.tw

文章来源:优设

(0)

相关推荐

  • 前端设计师必备的配色网站(原创理论)

    引言:颜色本身就是一个难解的谜题.苏格拉底就曾经假设说「火」之源起,乃是因眼睛结合了对象本身的「白」所产生的颜色.那么一套有效快捷的色彩搭配方案显然是我们说需要的 颜色往往是页面传达给受众的第一印象, ...

  • photoshop Cs5教程:[11]在线配色工具集

    操作方法 01 简介: 在设计网页中其中一个重要的因素就是配色,一个网页设计的配色方案可以影响用户体验,通常网页的主配色不会超过三种颜色,这些可使得网页不会太多花哨感觉,对于新手来说配色确实是一个比较 ...

  • 这款超好用的在线抠图网站终于出软件版了

    本文介绍一种新的抠图方式,能更加快捷.方便地抠图. 但这个网站虽然注明是免费使用的,但是还是要注意免费方案使用的限制,如果用量较大,或是需要对高画质图片去除背景的,可能就必须要付费购买啦,具体的使用方 ...

  • 中国的在线视频网站有哪些:[1]

    不同的视频网站有不同的喜欢人群,也有不同的特色频道,现在中国有哪些做得很好的在线视频网站,这里我们全面的总结一下为我们所熟知的一些视频网站 操作方法 01 爱奇艺 02 优酷网 03 土豆网 04 乐 ...

  • 解析视频真实下载地址软件(所有在线视频网站)

    很多的时候,我们都需要来解析视频真是下载地址,我们今天就来了解下:解析视频真实下载地址软件(所有在线视频网站). 操作方法 01 打开浏览器,在浏览器上输入"在线视频解析器下载 v2.0 & ...

  • 圆润可爱MBEstyle!教你绘制MBE风格图标

    能修炼到自创一种风格的人绝不简单,Dribbble大神MBE就开创了一种新的视觉风格,大家于是把这种风格叫做MBE风格,用这种风格来创作图标或小型插画,看上去简洁.圆润.可爱.几乎是瞬间,这样的风格就 ...

  • 100个描边风格图标下载(PSD)

    小编:由云瑞分享的100个描边风格图标,不仅适合UI设计,更适合响应式网站.根据大小的不同.有做详细的删减.大图标的细节更多,小图标的细节要减少,但是表意还是清晰的. 这是一套完美适用于您的响应式网站 ...

  • 20个免费的动画图标素材

    交互动画将是2016年网页与 APPUI的设计趋势之一,其中常用的一种就是扁平化动画图标,所以多看看人家的动画运用,也许会给你带来灵感. 今天和大家分享一组免费的动画图标:Animaticons Es ...

  • 教你用AI制作萌萌哒的MBE风格图标(第二弹)【AI教程】

    Hey~ 大家好,今天是10月的最后一天,马上就要进入寒冷的11月了,双十一要来了呢~ 不知道大家的钱包准备好了没?反正我是准备好了!这个十月你努力了没有呢?抓住最后一天的小尾巴,跟着嘉儿来做一个MB ...