性感可以很簡單,繪製極簡時尚風格插畫

2017/05/13

本文已獲授權

飛屋設計微雜誌

轉載請聯繫授權

尋圖困境

UI設計中配圖的問題我曾在【網頁配圖之個性年代插畫當道】中簡單說過,然而這僅僅是一個開始,關於不同風格的插畫如何進行運用,需要我們進一步「開發」。

每個藝術家的插畫里都有來自他自身創造出的節奏和風格,而接下來的一段時間,我們將學習繪製不同風格的插畫,用實際行動去體會隱藏於圖案表象下的不可言說的趣味和技巧。

學習時尚極簡風格插畫的目的是運用,而極簡風格的插畫在UI設計中是非常適宜討巧的配圖對象。尤其是運用在與時尚相關的網頁中,大約是最不容易被忽視的亮點。

拿照片當參考

我們曾經也做過《絲滑牛奶風!用AI打造矢量人像插畫》,那時我們是按照照片給定的輪廓來繪製的,雖然有細節的突破,但仍然沒有逃開照片的約束。

這時,我仍然要說,離開照片再遠一點!所繪之物和照片實體之間,應該是幻影關係,而非一對一的簡單臨摹。繪製過程中額外加入我們自己的想象,這將幫助你一步步接近繪畫的本質。當然這說得太遠,但目標即在,一步一回顧。

符號輪廓:基礎形標準化

所繪製的對象,有一種符號化的趨勢。就像圖標一樣,模糊所有個性化細節,使其變得符號化。讓外形成就某種「完美」,當然所繪製的主題也並不在表現人物造型細節,而是在於突出某種氛圍。讓我們繪製的基礎形都有趨於某種完美定式的傾向。

STEP 01

讓我們打開AI,創建一個寬1600px高1200px的新文檔。然後將所參考的照片置於其中,鎖定照片的圖層,再新建一個圖層作為繪製層。繪製時可以用鋼筆工具,

STEP 02

鋼筆工具所繪製的形狀關閉填充,線條設置為紅色,將線條大小設置為0.5px。這裡選用紅色是為了照顧視覺的可辨性,你也可以選用和照片本身差別大的色彩。

根據照片提示的輪廓進行繪製,並不是一定要完全效仿照片。就像本例中,我們未必要完全效仿模特的髮型。基礎形里的每一個形狀都要封閉完全,這是為了填色的需要。

STEP 03

繪製五官的部分,尤其是眼睛的時候,要注意保持每個形的封閉型,這時你要非常清楚你的填色邏輯,不要被線條誤導了。

五官保持最簡單的形,去掉一切繁瑣細節,而又要保持視覺上的「合理性」。

STEP 04

處理人物剩下的部分。這時可以稍微發揮創意,比如我在這裡增加了頭髮的長度和弧度。也是這時開始,我們就丟棄對照片的依賴。關閉照片可見,完全從線條的角度來審視整個畫面。

STEP 05

調整線條,讓它變得更為「絲滑」,並對形進行合併與刪減。其目的是為了填色的需要,因此要謹慎選擇合適的形狀對象。而保持「絲滑」的前提就是不要過度的歪曲與拐角,你需要放大細節進行調整。

處理形的要義就是要學會趨向簡單幾何。

簡約配色

這裡我們將要學會對色彩的節制,注意在繪製人像時,人物的某一五官將作為突出重點,比如我們要在這裡突出嘴唇,因此嘴唇的部分和皮膚的部分就在色彩上加以區分。

這時,整體的色彩最好不要超過三種。用顏色作為視覺引導,在人物的重要部分運用不同的色彩對比。

STEP 06

為畫面增加背景色,這個背景色與唇色呼應。讓色彩顯得乾淨。基本的填色完成後,大致的人物形象就一目了然,在此進行對五官細節的微調,將是更進一步的「符號化」的過程。

陰影的點睛作用

有趣的地方就在於,儘管我們丟棄了所有的陰影細節,然而並不代表我們不需要它。利用陰影,可以起到畫龍點睛的作用。比如在這幅畫中,我們給脖子上增加頭部的陰影,脖子和頭就有了視覺上的層次,立體感增強了。

STEP 07

陰影的色彩我們選用和唇色一樣的粉紅色。將陰影的混合模式改為「正片疊底」,透明度降至30%。

STEP 08

再為眼睛增加陰影,這將增加眼神的力量。「眼影」的混合模式仍然為「正片疊底」,透明度為60%。

STEP 09

為了增加臉部的立體感,我們也要利用陰影進行「潤色」。這時,陰影不僅僅是實際的對光線投射的描繪,而是有著某種「裝飾」的意味,同時突出臉部輪廓,在關鍵的部分利用線條的婉轉來表現臉部的輪廓起伏狀態。

填色后的混合模式仍未「正片疊底」,透明度為15%。

製造焦點

我們曾經也談到過正負形交錯的用法。也就是讓背景與所繪製對象主體的色彩有彼此可以融合的部分,根據完形法則,我們人眼能從一些線索中就判斷出對象。

STEP 10

將背景變為黑色,與黑色的頭髮、眉毛相接。又將桃紅色背景縮小為更小的圓,用以突出焦點。在焦點處添加上焦點。

手段的目的就是手段本身

說起來,這句話有點繞。換句話說,在目前「唯結果論英雄」的思維方式下,我們更應該焦距在過程本身。不被結果影響是很難做到的,但至少我們可以抽身在享受過程的某一個小瞬間。

其實,最初是想要探討關於網頁設計中插畫的方向。做設計的人都深有體會,有時候為了尋找一個好的素材,翻遍各大免費攝影網站都未必合適。精疲力盡的同時還加深了我們對於DEADLINE的焦慮。於是,求人不如求己,我就想到了用插畫的方式來自己動手設計素材。

這並不是我自己突然之間的想法,而是在看project runway(一個美國的服裝設計大賽,具體請自行百度或谷歌)的時候得到的靈感。在project runway中有一個比賽環節叫做非常規材料賽,具體說來就是參賽選手要用於設計服裝的材料不是普通的布料,而是垃圾堆里的或者其他不尋常的廢棄材料,比如塑料紙啦、燈泡啦、金屬片、雞毛等。而且,作品的評選標準並不僅僅是把服裝做得「美」,而是根據這個設計師在多大程度上改造了原有材料,把這些「廢品」做成了可穿著的物料,發揮了衣服的特性和美感。有些難度?但是,大多數設計師都會在這一環節感到興奮,而且,也只有在這一環節,他們會覺得是比較能充分發揮自己的設計功底和想法的。比起直接從布料里找到好布料進行裁剪,他們更喜歡自己「創造」出「布料」。

好了,說回我們的UI設計,其實也是類似的。當我們在圖片的海洋中尋找優質資源的時候,就像要找到一匹好布料,而事實上,即時最終的作品非常優秀,也部分得益於「運氣」(找到漂亮的布料的運氣),而且這個運氣的中獎率往往也並不太高。而比較靠譜的做法就是自己創造「布料」,也就是自己為配圖進行取材,這才是能讓你的設計功底得以腳踏實地,儘管你也許走得比別人慢,但不依賴於運氣的方式,也就是享受過程的方式會讓路途越來越開闊。

而插畫的風格則五花八門,一個人就能自成一種風格。在沒有形成自己的風格之前,就是對每個種類的風格都了解一遍。在輕質風格的網頁中,能用得上的插畫風格當屬扁平風和線條風這兩大類,而細分下來每個大類中還有若干的小方向。所以,我們將在以後繼續介紹這類風格的繪製方法,而且它們不僅可以作為配圖,還可以成為圖標或其他更多的UI組件樣式。

還是回到我們的主題,插畫本身是手段其實也是目的。如果你真的喜歡設計,就無法忽略繪製過程中的美感體驗。

封面設計: Joydeep Chowdhury

本文由 一點資訊 提供 原文連結

立即按讚,感謝大大無私地分享
寫了5860430篇文章,獲得21705
Line

熱門推薦

精彩推薦

今天的案例,不是美式風格。但是極簡設計,看看絕對不虧!M3 architecture 設計是烏克蘭著名的極簡設計工作室,他們為一對80后新婚夫婦設計了一個愛巢,也給這個新家庭提供了更多的可能。▲以經典的白色與米白色為...
▲它很好地柔和了簡約主義的簡潔、利落和傳統歐式風格的精緻,讓整個家居變得典雅、大氣、更貼近自然。▲簡歐餐廳設計 -- 一盞燈 一份熱湯▲簡歐廚房設計 -- 安靜 整潔 功能合理閃著絲綢般光澤的帷幔、被單……▲在這樣...
這套房子以時尚簡單的現代風格裝修,通過把實用與簡約的設計,搭配出一個溫馨又舒適的環境,給人以輕鬆愉快的感覺。玄關打開大門后的玄關,靠牆裝了個L型的收納鞋櫃,玄關這側的是矮櫃,而另一側的則是矮櫃+吊櫃...
現代簡約風格現代風格裝飾特點:由曲線和非對稱線條構成,如花梗、花蕾、葡萄藤、昆蟲翅膀以及自然界各種優美、波狀的形體圖案等,體現在牆面、欄杆、窗欞和傢具等裝飾上。現代室內傢具、燈具和陳列品的選型要服...
=====環保的生活,舒適的家=====客廳建築面積:140平方案例戶型:四室兩廳裝修風格:簡歐風格裝修套餐:528套餐+個性造型設計師:謝璐(微信號:18625510568)餐廳開放式廚房露台全景衛生間乾濕分離戶型平面布局兒...
本套案例線條造型流暢,色彩高尚優雅,整體色調是白色為主,通過簡易傢具和裝飾畫,來凸顯設計風格的獨一,同時吊頂的造型也在一定程度上與整體設計遙相呼應!該方案追求功能第一,設計第二的理念客餐廳案例戶型...
現代主義風格體現的是一種簡約之美,簡約而不簡單,乾淨簡潔大氣,體現的是一種現代人的時尚創意環保空間,成為了年輕人所追捧的風格。不需要繁瑣的裝飾,一片綠地,簡單的鋪裝,放上一張桌子幾把椅子即可。修剪...
後台回復「小藝外」藝外君會為您推送一條設計物語365天,365句經典,每天更新一次哦《藝術很難搞》每一次都是視覺的覺醒打造屬於你的靈感創意庫說起藝術大家一定會覺得高大上,看不懂等來形容,然而這組繪畫只是...
說起藝術大家一定會覺得高大上,看不懂等來形容,然而這組繪畫只是用了最簡單的元素,線條來繪製。普通的白紙加上藍色的線條,也能成為一幅幅時尚感藝術感爆棚的畫作。裝裱上畫框,儼然一幅完整的藝術作品。線條...
則回覆