title: 設計師手扎，免費線上工具與素材的整理筆記，第1609期 --- **摘要** 本月的設計師手札，特別推薦 【線上工具】ColorDrop.io 由網頁設計師 Tristan White 製作的 ColorDrop.io 色票網站，收集一些扁平化設計時常用的配色，進到網站就可以看到一系列的配色組合，點選配色條，可以看到該組合的顏色代碼，而且提供了直接下載的功能，讓你將喜歡的顏色組，下載成一個 txt 文件檔，直接套用到網頁的語法中使用，而左側的 Flat Colors 選項，則是可以直接查看所有顏色和 HEX 色碼的總列表，是一個蠻直覺的選色工具 **Category** - [網站推薦](https://www.soft4fun.net/category/tech/website-recommand) - [網路相關](https://www.soft4fun.net/category/software/internet) **Tag** - [免費素材](https://www.soft4fun.net/tag/%e5%85%8d%e8%b2%bb%e7%b4%a0%e6%9d%90) - [免費線上工具](https://www.soft4fun.net/tag/%e5%85%8d%e8%b2%bb%e7%b7%9a%e4%b8%8a%e5%b7%a5%e5%85%b7) - [筆記](https://www.soft4fun.net/tag/%e7%ad%86%e8%a8%98) - [網路資源](https://www.soft4fun.net/tag/%e7%b6%b2%e8%b7%af%e8%b3%87%e6%ba%90) - [設計師手札](https://www.soft4fun.net/tag/%e8%a8%ad%e8%a8%88%e5%b8%ab%e6%89%8b%e6%9c%ad) - [設計資源](https://www.soft4fun.net/tag/%e8%a8%ad%e8%a8%88%e8%b3%87%e6%ba%90) - [設計趨勢](https://www.soft4fun.net/tag/%e8%a8%ad%e8%a8%88%e8%b6%a8%e5%8b%a2) **圖片清單** - ![%e8%a8%ad%e8%a8%88%e5%b8%ab%e6%89%8b%e6%9c%ad-%e7%9c%8b%e6%9d%bf%e5%9c%96-1609](https://cf.img.soft4fun.net/2016/09/設計師手札-看板圖-1609.png "%e8%a8%ad%e8%a8%88%e5%b8%ab%e6%89%8b%e6%9c%ad-%e7%9c%8b%e6%9d%bf%e5%9c%96-1609") - ![設計師手扎，免費線上工具與素材的整理筆記，第1609期 YU0kkHd_nOigYRnWiQczDcrg9W3e3VmFndnG6XzfdFIiCBVvwPKjxybu6PrP1NSCcgPNlCf8xysSl6QGRNKUAHpdrcrwPKcy6dMw4kj3mlBwCn3NbltWwDgTzXH8BPgG_1FPBq3XXZ3RxbYl29mu20KKjVUVxZkBPqf9wYfTP-ksONd0371t--lI6V2G7KSJvGDoMX_IkKHSShXL9Dw9UQzPMsP8FBTvmabahWE3gPBvn-xBb-q4pZ39sE4KePlndsn6Iv6h0XPC_tWDcYbS28VV316T93Xc9j2vnQwBFXWud0-MXHELCQTqhsOgVqNotdD8Brkds8jbGKdkSkC0jXQKBSbcgYwlXeHeT9nl3R8daXcgajMFwTJ0DRFaqkQs4nxc6utcZ_dz-XiYRXJrOFdCu8DdkOrh3xFea3rQjpNsbcbhY_LgfoKogotz2qwpWWAB8qE1OKzp4TQJ3s0Oh0_6eHGgbunsaVOGHfWPJlkGJXo9W3h5suYiP6F-z9MqbipEzgXSwdv-0-a6GojacoitCVOYoV51cyDpSLJa-VjrYK_aIvW3HT4wcSrV36EWvRVXZFz0ZxWFbs0XFYR89GH6SmnV-Gn07nmacQYgiPZ5VkGwXA=w590-h352-no](https://lh3.googleusercontent.com/YU0kkHd_nOigYRnWiQczDcrg9W3e3VmFndnG6XzfdFIiCBVvwPKjxybu6PrP1NSCcgPNlCf8xysSl6QGRNKUAHpdrcrwPKcy6dMw4kj3mlBwCn3NbltWwDgTzXH8BPgG_1FPBq3XXZ3RxbYl29mu20KKjVUVxZkBPqf9wYfTP-ksONd0371t--lI6V2G7KSJvGDoMX_IkKHSShXL9Dw9UQzPMsP8FBTvmabahWE3gPBvn-xBb-q4pZ39sE4KePlndsn6Iv6h0XPC_tWDcYbS28VV316T93Xc9j2vnQwBFXWud0-MXHELCQTqhsOgVqNotdD8Brkds8jbGKdkSkC0jXQKBSbcgYwlXeHeT9nl3R8daXcgajMFwTJ0DRFaqkQs4nxc6utcZ_dz-XiYRXJrOFdCu8DdkOrh3xFea3rQjpNsbcbhY_LgfoKogotz2qwpWWAB8qE1OKzp4TQJ3s0Oh0_6eHGgbunsaVOGHfWPJlkGJXo9W3h5suYiP6F-z9MqbipEzgXSwdv-0-a6GojacoitCVOYoV51cyDpSLJa-VjrYK_aIvW3HT4wcSrV36EWvRVXZFz0ZxWFbs0XFYR89GH6SmnV-Gn07nmacQYgiPZ5VkGwXA=w590-h352-no "設計師手扎，免費線上工具與素材的整理筆記，第1609期 YU0kkHd_nOigYRnWiQczDcrg9W3e3VmFndnG6XzfdFIiCBVvwPKjxybu6PrP1NSCcgPNlCf8xysSl6QGRNKUAHpdrcrwPKcy6dMw4kj3mlBwCn3NbltWwDgTzXH8BPgG_1FPBq3XXZ3RxbYl29mu20KKjVUVxZkBPqf9wYfTP-ksONd0371t--lI6V2G7KSJvGDoMX_IkKHSShXL9Dw9UQzPMsP8FBTvmabahWE3gPBvn-xBb-q4pZ39sE4KePlndsn6Iv6h0XPC_tWDcYbS28VV316T93Xc9j2vnQwBFXWud0-MXHELCQTqhsOgVqNotdD8Brkds8jbGKdkSkC0jXQKBSbcgYwlXeHeT9nl3R8daXcgajMFwTJ0DRFaqkQs4nxc6utcZ_dz-XiYRXJrOFdCu8DdkOrh3xFea3rQjpNsbcbhY_LgfoKogotz2qwpWWAB8qE1OKzp4TQJ3s0Oh0_6eHGgbunsaVOGHfWPJlkGJXo9W3h5suYiP6F-z9MqbipEzgXSwdv-0-a6GojacoitCVOYoV51cyDpSLJa-VjrYK_aIvW3HT4wcSrV36EWvRVXZFz0ZxWFbs0XFYR89GH6SmnV-Gn07nmacQYgiPZ5VkGwXA=w590-h352-no") --- 本月的**設計師手札**，特別推薦 【線上工具】ColorDrop.io 由網頁設計師 Tristan White 製作的 ColorDrop.io 色票網站，收集一些扁平化設計時常用的配色，進到網站就可以看到一系列的配色組合，點選配色條，可以看到該組合的顏色代碼，而且提供了直接下載的功能，讓你將喜歡的顏色組，下載成一個 txt 文件檔，直接套用到網頁的語法中使用，而左側的 Flat Colors 選項，則是可以直接查看所有顏色和 HEX 色碼的總列表，是一個蠻直覺的選色工具 ![設計師手扎，免費線上工具與素材的整理筆記，第1609期 YU0kkHd_nOigYRnWiQczDcrg9W3e3VmFndnG6XzfdFIiCBVvwPKjxybu6PrP1NSCcgPNlCf8xysSl6QGRNKUAHpdrcrwPKcy6dMw4kj3mlBwCn3NbltWwDgTzXH8BPgG_1FPBq3XXZ3RxbYl29mu20KKjVUVxZkBPqf9wYfTP-ksONd0371t--lI6V2G7KSJvGDoMX_IkKHSShXL9Dw9UQzPMsP8FBTvmabahWE3gPBvn-xBb-q4pZ39sE4KePlndsn6Iv6h0XPC_tWDcYbS28VV316T93Xc9j2vnQwBFXWud0-MXHELCQTqhsOgVqNotdD8Brkds8jbGKdkSkC0jXQKBSbcgYwlXeHeT9nl3R8daXcgajMFwTJ0DRFaqkQs4nxc6utcZ_dz-XiYRXJrOFdCu8DdkOrh3xFea3rQjpNsbcbhY_LgfoKogotz2qwpWWAB8qE1OKzp4TQJ3s0Oh0_6eHGgbunsaVOGHfWPJlkGJXo9W3h5suYiP6F-z9MqbipEzgXSwdv-0-a6GojacoitCVOYoV51cyDpSLJa-VjrYK_aIvW3HT4wcSrV36EWvRVXZFz0ZxWFbs0XFYR89GH6SmnV-Gn07nmacQYgiPZ5VkGwXA=w590-h352-no](https://lh3.googleusercontent.com/YU0kkHd_nOigYRnWiQczDcrg9W3e3VmFndnG6XzfdFIiCBVvwPKjxybu6PrP1NSCcgPNlCf8xysSl6QGRNKUAHpdrcrwPKcy6dMw4kj3mlBwCn3NbltWwDgTzXH8BPgG_1FPBq3XXZ3RxbYl29mu20KKjVUVxZkBPqf9wYfTP-ksONd0371t--lI6V2G7KSJvGDoMX_IkKHSShXL9Dw9UQzPMsP8FBTvmabahWE3gPBvn-xBb-q4pZ39sE4KePlndsn6Iv6h0XPC_tWDcYbS28VV316T93Xc9j2vnQwBFXWud0-MXHELCQTqhsOgVqNotdD8Brkds8jbGKdkSkC0jXQKBSbcgYwlXeHeT9nl3R8daXcgajMFwTJ0DRFaqkQs4nxc6utcZ_dz-XiYRXJrOFdCu8DdkOrh3xFea3rQjpNsbcbhY_LgfoKogotz2qwpWWAB8qE1OKzp4TQJ3s0Oh0_6eHGgbunsaVOGHfWPJlkGJXo9W3h5suYiP6F-z9MqbipEzgXSwdv-0-a6GojacoitCVOYoV51cyDpSLJa-VjrYK_aIvW3HT4wcSrV36EWvRVXZFz0ZxWFbs0XFYR89GH6SmnV-Gn07nmacQYgiPZ5VkGwXA=w590-h352-no "設計師手扎，免費線上工具與素材的整理筆記，第1609期 YU0kkHd_nOigYRnWiQczDcrg9W3e3VmFndnG6XzfdFIiCBVvwPKjxybu6PrP1NSCcgPNlCf8xysSl6QGRNKUAHpdrcrwPKcy6dMw4kj3mlBwCn3NbltWwDgTzXH8BPgG_1FPBq3XXZ3RxbYl29mu20KKjVUVxZkBPqf9wYfTP-ksONd0371t--lI6V2G7KSJvGDoMX_IkKHSShXL9Dw9UQzPMsP8FBTvmabahWE3gPBvn-xBb-q4pZ39sE4KePlndsn6Iv6h0XPC_tWDcYbS28VV316T93Xc9j2vnQwBFXWud0-MXHELCQTqhsOgVqNotdD8Brkds8jbGKdkSkC0jXQKBSbcgYwlXeHeT9nl3R8daXcgajMFwTJ0DRFaqkQs4nxc6utcZ_dz-XiYRXJrOFdCu8DdkOrh3xFea3rQjpNsbcbhY_LgfoKogotz2qwpWWAB8qE1OKzp4TQJ3s0Oh0_6eHGgbunsaVOGHfWPJlkGJXo9W3h5suYiP6F-z9MqbipEzgXSwdv-0-a6GojacoitCVOYoV51cyDpSLJa-VjrYK_aIvW3HT4wcSrV36EWvRVXZFz0ZxWFbs0XFYR89GH6SmnV-Gn07nmacQYgiPZ5VkGwXA=w590-h352-no") ## 【線上工具】[Thimble](http://4fun.tw/UZGW) 由 Mozilla 開發的線上撰寫網頁、編輯原始碼功能，無須額外下載軟體安裝，只要透過瀏覽器就能使用，它就像一個功能完整的網頁開發工具，能讓你直接於瀏覽器編寫程式碼，即時預覽網頁所呈現出來的效果 ## 【線上工具】[ColorDrop.io](https://4fun.tw/vmXa) 網頁設計師 Tristan White 製作的 ColorDrop.io 色票網站，收集一些扁平化設計時常用的配色，進到網站就可以看到一系列的配色組合，點選配色條，可以看到該組合的顏色代碼，而且提供了直接下載的功能，讓你將喜歡的顏色組，下載成一個 txt 文件檔，直接套用到網頁的語法中使用，而左側的 Flat Colors 選項，則是可以直接查看所有顏色和 HEX 色碼的總列表，是一個蠻直覺的選色工具 ## 【設計素材】[Pixtastock](https://4fun.tw/t9xO) 來自日本的圖庫網站，雖然沒有免費圖庫下載，但是這個圖庫網站比較特別的是，免權利金素材(RF)=購買一次，永久有效，同時可以應用在平面、網頁、多媒體等等，不像一有些圖庫網站有限制只能運用在特定範圍使用，如果要用在影片或是產品包裝上則需另外支付權利金，此外如果你是攝影師還可以在上面販售你的作品，讓設計師們購買使用，這個圖庫網站是用台幣定價，不會因為日幣匯率高低而買貴，如果需要亞洲人的臉孔素材，這個網站非常的多，有些國外圖庫不會提供發票，很難請款報稅，但 Pixtastock 購買圖庫會開立發票給公司報帳使用． ## 【免費主機】[100hub](https://4fun.tw/nChy) 來自日本的 100hub 威利主機，提供了兩種免費主機方案，第一種是全功能免費試用14天，另一種是在網站下方有附加主機商廣告的方案，這種方案提供了 300MB 空間，以及每個月有 6GB 的免費流量，此外有中文版本的後台介面可以使用，如果覺得這款主機好用，就可以付費租用完整版無廣告的方案． ## 【線上工具】[Imagecyborg](https://4fun.tw/FqBy) 身為設計工作者，看到好的作品就會忍不住想要下載，收藏起來當參考使用，但是一張一張的抓，未免太浪費時間了，這個網站提供快速下載的服務，只要輸入目標網址，就能將網頁的圖片一次抓取下來 ## 【免費字體】[思源柔黑體](https://4fun.tw/Zsh0) 由日本人將開源的思源黑體修改成圓體，取名為思源柔黑體，提供給大家免費下載使用，不過由於是日本人開發的關係，有些中文字沒有辦法出現，例如查案的「查」字，是沒有辦法顯示的，這也是介介很少分享日本製作的中文字體的原因，但是拿來湊成字數少的標題，也是不錯的選擇，思源柔黑體有三種風格，從小圓角到大圓角等等 ## 【插畫繪畫】[電影變形金剛官方粉絲頁](https://4fun.tw/Xt2w) 電影變形金剛的官方粉絲頁，不時會刊登出新的角色的設定集，甚至還會分享電影中的拍攝過程，喜歡電影拍攝與科幻元素的設計師們必訂閱的粉絲頁 ## 【文化風格】[德國紋章介紹](https://4fun.tw/Fj6E) 德國國家紋章的介紹，從盾徽、徽章、國家標誌，甚至是當地的品牌 Logo，十幾個洲與各個城邦的介紹，可以了解德國的文化與時代美學的演進 ## 【創意廣告】[2020年東京奧運的介紹影片](https://4fun.tw/7Nuk) 2016里約奧運落幕了，接著日本2020年東京奧運的介紹影片就出來了，很多知名的動漫都在影片中出現，非常符合日本的意象，不僅結合動畫宣傳，最後日本首相的化身任天堂的知名角色演出，這部宣傳影片，讓人更是期待2020的東京奧運的到來