酷站两连发!在线配色网站+谷歌的免费Material风格图标 - 优设-UISDC

酷站两连发!在线配色网站+谷歌的免费Material风格图标

2016/02/27 15123评论区

lol-colors-material-icons-1

今天除了一个清新干净的在线配色网站,还有最近发现 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 还没有收藏自己喜爱颜色功能,也还无法自行加入配色,开发者表示这些功能都在计划中,日后也会陆续更新至网站。

LOL Colors

STEP 2

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

LOL Colors

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

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 提供的相关图示,可以发现这些图示设计都相当简洁,而且没有太多复杂变化,重要的是即使在小屏幕(如手机、平板计算机)显示,也能很清楚看到图标要传达的讯息。

Google 提供免费 Material icons 向量图示集,可自由用于个人或商业项目

STEP 2

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

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

Google 提供免费 Material icons 向量图示集,可自由用于个人或商业项目

值得一试的三个理由:

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

【优设酷站22连发!】

  1. 免费图库+导航收集站:《酷站两连发!高品质免费图库站+专注WEB/APP导航收集站》
  2. 音乐站+字体搜索:《酷站两连发!帮你专心工作的音乐站+谷歌字体在线搜索神器》
  3. 渐变色+代码比较:《酷站两连发!渐变色方案全聚合网站+在线代码比较神器》
  4. 配色+占位图:《酷站两连发!在线色彩搭配工具+快速生成占位图片器》
  5. LOGO下载+字体下载:《酷站两连发!可商用的矢量LOGO下载+平面最爱的27款免费字体》
  6. 压缩图片+在线配色:《酷站两连发!在线图片压缩神器+在线配色工具COLOURCO》
  7. CSS Hover动画+宠物小精灵配色:《酷站两连发!宠物小精灵专属配色网站+CSS HOVER动画收集站》
  8. 美女图片+游戏配色:《酷站两连发!游戏配色网站+免费美女素材特供网站》
  9. 在线配色+字体推荐:《酷站两连发!在线配色神器+英文字体推荐网站》
  10. 追波作品变代码+16进制颜色:《酷站两连发!用代码呈现DRIBBBLE作品+16进制颜色网站》
  11. 无缝纹理+多边形背景:《酷站两连发!专注无缝纹理素材站+多边形背景生成器》

原文地址:free.com.tw

uisdc-hao

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

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/lol-colors-material-icons

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 界面设计 设计师 扁平化设计 交互设计师 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 海报设计 设计理论 神器下载 字体下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里