網頁 icon 資源分享 (一) – iconbros 及 ElegantThemes 介紹與使用方式

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略,你常常因為找不到適合文案或是不夠美觀的 Icon 而煩惱嗎?或是在設計業主的案子時浪費太多時間繪製 Icon 導致案子延遲嗎?別擔心,還記得我們之前分享過的 『網頁素材分享 – 可商用免費下載 icon 圖示,IconStore 網站介紹』 不管是平面、簡報、網站、 UI 等設計,常需要使用圖標 – Icon 來進行視覺的編排及重點整理,才能讓畫面有更多美觀的圖樣來吸引讀者的注意,為了讓設計師們有更多的素材可以使用,減少搜尋及繪製時間成本,鵠學苑分享另外兩個不同風格、可免費商用 Icon 資源網站。接下來跟著鵠學苑的腳步,讓我們開始學習吧!

Simple Icons 網站連結
https://www.iconbros.com/
Brand Colors 網站連結
https://www.elegantthemes.com/blog/freebie-of-the-week/beautiful-flat-icons-for-free

iconbros 網站介紹與使用方式

第一步:iconbros 裡的 Icon 設計以線條或是單色視覺為主,雖然風格簡潔,但是每一個圖標都是經過精心設計,造型也不會過於俗氣,喜歡簡約風的設計師們一定不能錯過這個網站。

網頁 icon 資源分享

第二步:雖然 iconbros 沒有直接篩選與分類的功能,可能會花上一些時間在查找上,不過上方提供了快速的搜尋功能,可以輸入關鍵字後按下 enter 鍵,就能幫你找出相關的 Icon 了。不過要注意的地方是,因為 iconbros 是屬於外國網站,需要使用英文進行搜尋,輸入中文是找不到任何東西的喲!

網頁 icon 資源分享

第三步:點選需要的 Icon 進入頁面後,主要會呈現該 Icon 放大的樣子,圖下面則會出現一排關鍵字,點選後可以進入關聯的清單頁面。

網頁 icon 資源分享

第四步:提供兩種檔案下載,一種是 .png 透明圖檔,下載後可以直接使用;另一種則是 .Svg 檔案,可以使用 Adobe Illustrator 修改顏色或是造型。建議下載之前先閱讀上方 License 條文,畢竟是其他設計師的心血,要遵守使用規範才行。

網頁 icon 資源分享

第五步:下方列出同類型的 Icon ,若不喜歡這個樣式可以馬上選擇另一種款式,非常方便。

網頁 icon 資源分享

第六步:Iconbros 還有一個易於使用的功能,點選選單 collections 頁面,已經將相同使用類型與風格的 Icon 都打包整理在一起,不用費心尋找,這樣子就不用擔心同個網站找了很多不同 Icon 但風格卻不符合的情況發生。

網頁 icon 資源分享

>Iconbros 雖然風格較單一,更新的速度不快,但是設計質感對於網站已經夠使用了。

elegantthemes 網站介紹與使用方式

第一步:elegantthemes 其實是 WordPress 主題產品的網站,但它提供了網頁常使用主題圖示,並以扁平化風格與單色為主。

網頁 icon 資源分享

網頁 icon 資源分享

網頁 icon 資源分享

第二步:直接點選 Download ,即可整包下載。下載的檔案類型包括 ai、.eps 、.pdf 和 .png 檔案,尺寸包括 64px 和 128px ,方便設計師修改使用。

網頁 icon 資源分享

結語:

挑選好的素材使用能提高網站的設計質感與縮短製作時程,搜集與素材的整理也是設計師日常工作中重要的一環,鵠學苑也會持續地分享更多好用與易用的素材網站給大家。
今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

架站資源 相關教學文章:

網站架設知識推薦閱讀:

新冠肺炎大流行 – 企業線上數位轉型網站架設重點與優勢分析
AMP Stories 介紹 – 你一定要了解的 Google 行動網站技術
Google 優先索引行動版內容 將於一年內對所有網站實施

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

返回頂端