
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 還是以前的擬物風格,我希望有一個比較“扁平化”的綬帶放在上面,於是我就臨時畫了一個放上去了,長這個樣子:

於是之後我就花了大概半天的事件,畫了一套 ribbons 給以後用,自己用,也希望大家能用到,不僅有 github,還有 gitlab 和碼雲的版本,暫時只做了這些,以後有好的想法了再新增。


所有的東西都出自一個程式設計師之手,沒有經過專業的設計學習,請大家覺得醜的話輕噴
sketch 是我最喜歡的設計軟體,推薦給大家。
在設計這套圖片的時候我也儘量發揮了 sketch 的特性,比如顏色配置,公用樣式,symbol等很好用的功能,這些都可以達到改一處動全部和事半功倍的效果。
下面放上效果預覽:
Preview







































How to use
沒有固定的使用方法,都是圖片,你可以下載下來用到你的專案裡,或者直接使用本倉庫的圖片連結。每款綬帶都有 @2x 版本
後續還會陸續更新其它的圖片資源。
其實不論 github 還是碼雲,官方提供的都有類似的 ribbon,看個人喜好選擇 D2 還是官方就好
但是你把 d2-ribbons 收藏一下,以後不就不愁找了麼~