一起來畫科技插畫吧!

12/02/2020 ・ 設計

Summary

仰賴於網頁及科技應用發展,越來越多商品、服務都與網路、手機等接上,隨著這樣的發展很快的網頁設計、 APP UI 設計等也越受重視,為了讓使用者在體驗、摸索、認識網站或 APP 的過程感到有趣,不少網站會使用插畫的方式引導用戶。
隨著網站或 APP 的需求或產品不同,所需要的插畫風格也會有所不同,像是最近流行的手繪、材質、有機形狀等的風格,他讓插畫上感覺更加溫暖、特別,不少品牌會將他使用在介紹畫面或提醒區塊,讓使用者為之一亮。

可以看到插畫應用在許多網站上 (左上:Todoist / 右下:dropbox / 左下:Discord / 右下:Eagle)

何謂科技插畫?

這次我們將分享常用於科技類的插畫,以下就簡稱科技插畫。
這樣類別的插畫風格,不得不提到一個與科技相當具有代表性的風格 ——賽博龐克Cyberpunk
賽博龐克的風格在畫面上經常使用絢麗的色彩呈現科技迷人的一面,但也因為冷色調,這樣的畫面呈現一種與『人』的溫度之間的距離感。

此圖為 freepik 上搜尋 technology 的截圖,當中發現更多重複的元素

 

讓我們來著手開始畫吧!

話不多說,這次讓我們來一起一步一步嘗試創作科技插畫吧!

Step1. 定義主題

想想你想嘗試什麼樣的主題呢?先以一個簡單的名詞、物品都行,以一個小範圍、熟悉的事物開始,像是茶壺、馬克杯、鬧鐘、包包、筆電、手機、書本等等,這會有助於你創作、嘗試。

Step2. 參考元素、找資料!

假設我們是第一次創作這樣風格的插畫,免不了需要了解這個插畫會有的元素、配色;因為我並非以畫這個插畫為主的工作,所以我每一次接到需要科技插畫的需求時,都一定會再查、再看一次資料素材,因為每一次讀這些資料,越挖掘就會有新的符號、素材可以加入。
如果你是處於練習的階段,可以模仿、仿作作為練習;嘗試使用賽博龐克的配色,氛圍。
透過一次又一次的觀察,慢慢就能夠掌握一些元素後內化就能靈活運用在畫面上!
讓我們開始在 google 或 Pinterest 搜尋關鍵字:Cyberpunk 、Cyberpunk illustration一級玩家、科技、FUI攻殼機動隊等。

在 Pinterest 搜尋關於 Cyberpunk 、FUI、攻殼機動隊的畫面截圖

Step3. 從拆解元素、符號、顏色到整合

接著你將會在這些素材中,重複看到某些元素,請加以整合、觀察。也許你會觀察到的元素和我不同,但這就是在嘗試創作新的插畫時,一個重要的步驟,你必須從歷史、影像資料去感受到為什麼會有這些元素、顏色、符號,藉此引入到新的畫面當中。

從這些素材當中可以看到一些重複的顏色、線條、元素、符號等

 

從上圖中可以歸類一些元素:

  • 顏色上多使用藍色、紫色等冷色系或搭配霓虹色系。
  • 霓虹燈夾雜水氣或是漂浮的淡淡氤氳感。
  • 多使用色塊、漸層色。
  • 俐落、細緻的框線。
  • 常使用電腦、機械、介面符號,像是 FUI 設計等加入畫面。
  • 題材元素上也可以看到科技製作物,電線、燈光、開關、機殼平滑的接縫細節等。

如果是你,又會搜集察覺到什麼樣的元素呢?不妨多觀察一下、欣賞這些視覺吧!相信你也會找到不一樣的元素。

Step4. 與現實物品結合 – 繪製草稿

接著讓我們將平凡無奇的物品,加上我們拆解出來的元素吧!
但先別急著上色!先用線條大致畫上符號、物件,運用你的想像力解構現有的原本物件,加上新的零件上去吧!
在這次的練習創作當中,我嘗試以鬧鐘為軸心,放射出色塊、冷光、線條、機殼等元素。過程當中不斷透過色塊、線條和筆觸堆疊,讓一個物品和整個畫面豐富。

草稿 – 已鬧鐘往外延伸元素

Step5. 多方嘗試的加入色彩

完成草稿後,再加入色彩,回顧步驟三拆解元素、顏色,讓我們觀察屬於這樣風格的色系、顏色。
你可以嘗試單色、漸層、對比色,比重;或是從找到的資料當中找出兩三張喜歡且同色系的圖片,然後用滴管吸主色、深色、淺色,嘗試套用在你的插畫背景和元素中,建立一個基本的配色後,再依照畫面、內容調整顏色;總而言之,多多嘗試!沒有絕對的配色!

插畫完稿

 

插畫細節

完稿後,加入設計內吧!

完稿後,讓我們加入網頁內,試著用 Figma 或 Adobe Xd 等網頁製作軟體,將這些插圖放進去包含文字、標題內的畫面,嘗試延伸插畫內的顏色在標題、文字內,更融入整體性。

放入網頁設計

題外話

這次嘗試寫這片插畫分享的文章,後來才發現是給自己挖了一個坑 XD
因為工作的關係,最近比較少畫這樣的插畫,但當初在訂定主題的時候想說應該不會示範太複雜的插畫過程,或是就把這篇當作一個創作或練習;結果在畫的過程當中一度陷入卡關 XDDD
首先寫了找資料、分析風格的前半部文章後,在進入後面插畫示範時一度工作爆忙加上一看到空白畫板的懶癌,導致草稿想法一度卡關,甚至在完成草稿後,又覺得好像不夠『賽博龐克』 或科技感。雖然最後 delay 了一點發文時間,但當成果放入網頁設計內後,才覺得真的完成了!!
期許我下次不要再輕易挖坑了 XD
總之,謝謝閱讀這篇文章的你!


此篇文章同時刊載在:一塊設計 | apo design – UI/UX 設計共筆部落格