![banner](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a3f6d7b2ee_w-1776_h-600_f-png_s-66423.gif)
D2 Ribbons 是一套为开发者准备的开源社区绶带资源,你你可以下载图片到你的项目中使用或者直接使用仓库资源链接。
素材地址 https://github.com/d2-projects/d2-ribbons
Features
- 扁平化风格
- Github Gitlab Gitee 三套图标
- 六色主题
- 半透明 / 不透明样式
- 文字 / 图标样式
- @2x 资源
- 统一尺寸(150 x 150 / 300 x 300 @2x)
- 附带 Github 经典样式的绶带
Story
我想了想究竟是预览放在前面还是介绍放在前面,最后我觉得应该先写东西,因为预览图太多了
萌生做这么一个项目是从做另一个开源项目 D2Admin 的时候,我想给我的项目页面角落加一个 “Fork me on github”,然后我就找了几个开源项目想看看他们用的是什么图片,都不很理想,后来找到了 Github 官方的 ribbons,但是和我的项目风格不是很搭配,Github 官方的 ribbons 还是以前的拟物风格,我希望有一个比较“扁平化”的绶带放在上面,于是我就临时画了一个放上去了,长这个样子:
![Snip20180711_32](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_16489363b54fa78b_w-2146_h-1260_f-png_s-938713.gif)
于是之后我就花了大概半天的事件,画了一套 ribbons 给以后用,自己用,也希望大家能用到,不仅有 github,还有 gitlab 和码云的版本,暂时只做了这些,以后有好的想法了再添加。
![Snip20180711_27](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_16489363b01a90e8_w-3104_h-1518_f-png_s-662124.gif)
![Snip20180711_29](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_16489363adbe62e0_w-3048_h-1726_f-png_s-696787.gif)
所有的东西都出自一个程序员之手,没有经过专业的设计学习,请大家觉得丑的话轻喷
sketch 是我最喜欢的设计软件,推荐给大家。
在设计这套图片的时候我也尽量发挥了 sketch 的特性,比如颜色配置,公用样式,symbol等很好用的功能,这些都可以达到改一处动全部和事半功倍的效果。
下面放上效果预览:
Preview
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a3f6d19c99_w-1776_h-300_f-png_s-36986.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a3f6e40dd9_w-1776_h-1000_f-png_s-131309.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a3f6fd7b41_w-1776_h-1000_f-png_s-131932.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a3f6bd917e_w-1776_h-300_f-png_s-36881.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a3f7450aaf_w-1776_h-1000_f-png_s-130280.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a46910d25a_w-1776_h-1000_f-png_s-131420.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a4abd11da9_w-1776_h-300_f-png_s-35972.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a4b8d2ef7c_w-1776_h-1000_f-png_s-128591.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a58ebacc4d_w-1776_h-1000_f-png_s-129742.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a5add55d2e_w-1776_h-300_f-png_s-36049.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a64f448da9_w-1776_h-1000_f-png_s-121901.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a64a80dc0e_w-1776_h-1000_f-png_s-124001.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a6237e84d1_w-1776_h-300_f-png_s-35871.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a6793dc2b1_w-1776_h-1000_f-png_s-122415.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a6e8b92bc0_w-1776_h-1000_f-png_s-124123.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a728def617_w-1776_h-300_f-png_s-35732.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a8ae3eb5a1_w-1776_h-1000_f-png_s-120570.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a7b289983e_w-1776_h-1000_f-png_s-122328.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a95fb7095c_w-1776_h-300_f-png_s-30436.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a94d7d6867_w-1776_h-1000_f-png_s-113768.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a9c0e6cd66_w-1776_h-1000_f-png_s-112618.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892aa0df48ae3_w-1776_h-300_f-png_s-30236.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a9b27ba996_w-1776_h-1000_f-png_s-113218.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892aa08ceb746_w-1776_h-1000_f-png_s-112381.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a97f69ca7f_w-1776_h-300_f-png_s-29333.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892a9b32dd41a_w-1776_h-1000_f-png_s-111176.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892aa4a8107ef_w-1776_h-1000_f-png_s-111273.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892aa1db8761d_w-1776_h-300_f-png_s-30045.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892aa2a2b3906_w-1776_h-1000_f-png_s-103645.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892aaad23e5e6_w-1776_h-1000_f-png_s-104087.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892aaa00b66e7_w-1776_h-300_f-png_s-29867.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892aa5b57ae22_w-1776_h-1000_f-png_s-103341.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892aaef487ce1_w-1776_h-1000_f-png_s-103308.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892ab49c08f0b_w-1776_h-300_f-png_s-29788.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892aaf53d74c0_w-1776_h-1000_f-png_s-101253.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892ab7325606f_w-1776_h-1000_f-png_s-100807.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892ab35e78b90_w-1776_h-300_f-png_s-28119.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892aafa17c229_w-1776_h-1000_f-png_s-272694.gif)
![](http://www.mk2048.com/web_upload/blog_imgs/6/https___user-gold-cdn-xitu-io_2018_7_11_164892ab9436659c_w-1776_h-1000_f-png_s-280619.gif)
How to use
没有固定的使用方法,都是图片,你可以下载下来用到你的项目里,或者直接使用本仓库的图片链接。每款绶带都有 @2x 版本
后续还会陆续更新其它的图片资源。
其实不论 github 还是码云,官方提供的都有类似的 ribbon,看个人喜好选择 D2 还是官方就好
但是你把 d2-ribbons 收藏一下,以后不就不愁找了么~