Free Design Resources 免費素材下載,英文字型、模型、圖片模板每日更新

Free Design Resources 免費素材下載英文字型、模型、圖片模板每日更新

Free Design Resources(簡稱 FDR)是一個提供創意免費資源的國外網站,每日更新,收錄許多世界各地傑出藝術家、專業設計師精心製作的素材,包括免費字型、模型(mockups)、圖片和模板等等,使用者可以從 FDR 尋找靈感或是直接搜尋看看有無合適的素材,下載檔案、經過編輯修改就能快速製作出需要的素材,其實類似的網站很多,例如「The Design Inspiration 設計師靈感泉源,每日更新免費素材資源網」就有不少素材模板免費下載使用。

Supershots 製作漂亮畫面截圖,為圖片加入漸層背景陰影效果

Supershots 製作漂亮畫面截圖,為圖片加入漸層背景陰影效果

身為 Mac 使用者除了對於系統字型感到滿意(看起來舒服極了),Mac 內建螢幕擷取功能也能製作非常好看的畫面截圖,除了視窗四個圓角邊框還會帶上陰影效果,讓螢幕截圖更有質感,也更容易吸引其他人目光。如果你也想製作好看的螢幕擷圖,但不是使用 Mac,現在有很好用的免費線上工具可以幫到你的忙,而且透過瀏覽器就能做到,請接著看接下來的教學。

ScrollingMockup.io 只要五分鐘就能製作漂亮、捲動網頁效果的模型影片

ScrollingMockup.io 只要五分鐘就能製作漂亮、捲動網頁效果的模型影片

如果有在關注免費資源網路社群的文章,可能會注意到有不少文章會使用帶有電腦或手機螢幕畫面做為首圖,這不是由我拍攝,而是透過各種模型工具(Mockups)產生器製作而成,只要預先選擇要使用的素材,再加上網址或擷圖就能線上將它們整合在一起,舉例來說,Mockup Photos 就收錄數千張高畫質素材,使用者也可以自行上傳相片整合;或是以前我經常使用 Smartmockups 也能製作出以假亂真的好看模型照,對於要展示畫面來說也更有質感。

Pixeltrue Mockup Generator 免費模型產生器,將擷圖輕鬆整合裝置畫面

Pixeltrue Mockup Generator 免費模型產生器,將擷圖輕鬆整合裝置畫面

如果要介紹、示範工具或應用程式等產品,通常會透過畫面擷圖搭配說明,不過只有擷圖看起來又很單調,這時候就能將畫面整合在裝置上,也被稱為模型(Mockup)。但是對於設計師以外的使用者來說,要把擷圖放入到筆記型電腦、平板電腦或智慧型手機畫面並不是一件容易的事,因此網路上有不少 Mockups 產生器,選擇你要的圖庫素材,將擷圖上傳後裁切就能變成好看的圖片。

Mock Magic 為擷圖畫面加上外框,支援 iPhone、MacBook 等裝置模型

Mock Magic 為擷圖畫面加上外框,支援 iPhone、MacBook 等裝置模型

我介紹過不少實物模型(Mockup)工具,可以讓使用者上傳畫面,快速合成到相片中出現的裝置畫面,像是 iPhone、iPad 或是 MacBook,有些還帶有裝飾或景深,看起來非常專業!有時候如果需要展示網頁或應用程式,單獨放上擷圖好像又太單調,就可以選擇像是 Mockup PhotosMockDrop 或 Mockuper 等服務稍微處理一下,類似工具都不需要額外下載安裝軟體,只要選擇想使用的模型,把手邊相片上傳後就會整合。

MockDrop 免費 Mockups 產生器,在圖庫相片整合想呈現的畫面

MockDrop 免費 Mockups 產生器,在圖庫相片整合想呈現的畫面

上面這張相片頗具質感,電腦顯示的是免費資源網路社群首頁,其實不是由我拍攝,現今有非常多的線上工具可以做到所謂「模型」(Mockups)效果,簡單來說就是將你要呈現的畫面整合到圖庫相片特定裝置或範圍,營造出一種好像是自己拍攝的錯覺,對要展示畫面來說會有不錯的效果,例如 Mockup Photos 提供數千張高畫質素材,是我近期最常用的服務;Smartmockups 則是我較早會使用的模型工具,後來相片都必須付費才能使用。

Device Shots 將圖片快速整合到手機、平板電腦或筆電顯示器螢幕

Device Shots 將圖片快速整合到手機、平板電腦或筆電顯示器螢幕

有時候我們會需要將應用程式或是網站畫面呈現在裝置上,例如在設計網站、介紹教學或展示產品會用到,不過要直接拍攝裝置其實並不容易,除非本身有不錯的攝影器材和光線,還得加上後製修圖的時間,其實只要使用 Mockups 工具就能輕鬆做到,我之前介紹過 QurbMobile Mockup 和 MockUPhone 都能達到類似效果,像是將畫面整合到手機、平板電腦或是筆記型電腦,還能選擇不同的裝置外框、顏色或背景顏色等等,即使手邊沒有軟體也能輕鬆製作素材。

Screenshot Rocks 線上製作帶有瀏覽器或手機外觀的網頁擷圖

Screenshot Rocks 線上製作帶有瀏覽器或手機外觀的網頁擷圖

如何製作出上圖帶有瀏覽器外框的網頁擷圖畫面呢?可能很多人會選擇打開網頁,將視窗調整到適當大小後擷圖即可,這個答案好像也沒有錯,只是相較於使用 Mockup 工具來說會更費時費力,其實只要透過像是 BrowserFrameMobile Mockup 就能在輸入網址後快速製作出模型圖,看起來會比自己擷取還要更有質感。如果是 Mockup PhotosSmartmockups 還能直接套用免費圖庫提供的高品質相片,免費資源網路社群有一部分的文章首圖都是以類似工具處理,看起來很自然而且能提昇質感。

Mockup Photos 數千張高畫質素材圖庫,可自行上傳圖片或線上擷圖整合

Mockup Photos 數千張高畫質素材圖庫,可自行上傳圖片或線上擷圖整合

上面這張圖看起來是不是很有質感呢?如果仔細看,會發現電腦螢幕出現的正是免費資源網路社群首頁,不過這可不是我自己擺設的佈景,而是運用合成方式將適當的畫面合成到圖庫素材,也被稱為「Mockups」,對於要展示一些畫面來說非常有用。若我在編寫文章時找不到適合的圖片,也會利用像是 Smartmockups 來產生更好看的擷圖畫面,你可能會發現有些圖片看起來相似度極高,別懷疑,你也可以自己動手做。

The Stocks 2 整合免費圖庫、影片、圖示和字型,單一網站快速瀏覽切換

The Stocks 2 整合免費圖庫、影片、圖示和字型,單一網站快速瀏覽切換

距離上一次介紹 The Stocks 已經超過五年,前段時間無意間瀏覽到這個網站,才想起我以前好像也寫過文章,不過網站現在變得不太一樣而且內容又更完整了,非常推薦加入收藏,因為真的很方便。如果你還不知道 The Stocks,它整合各種設計相關免費資源,最早只有將一些免費圖庫整合在一起,讓找圖的使用者透過側邊欄選單快速切換各個不同圖庫網站,加速搜尋圖庫的效率。