一起來畫科技插畫吧！

Summary

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

何謂科技插畫？

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

讓我們來著手開始畫吧！

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

Step1. 定義主題

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

Step2. 參考元素、找資料！

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

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

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

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

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

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

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

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

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

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

Step5. 多方嘗試的加入色彩

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

完稿後，加入設計內吧！

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

題外話

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

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