尋圖困境

UI設(shè)計(jì)中配圖的問(wèn)題我曾在網(wǎng)頁(yè)配圖之個(gè)性年代插畫(huà)當(dāng)?shù)乐泻?jiǎn)單說(shuō)過(guò)，然而這僅僅是一個(gè)開(kāi)始，關(guān)于不同風(fēng)格的插畫(huà)如何進(jìn)行運(yùn)用，需要我們進(jìn)一步“開(kāi)發(fā)”。
每個(gè)藝術(shù)家的插畫(huà)里都有來(lái)自他自身創(chuàng)造出的節(jié)奏和風(fēng)格，而接下來(lái)的一段時(shí)間，我們將學(xué)習(xí)繪制不同風(fēng)格的插畫(huà)，用實(shí)際行動(dòng)去體會(huì)隱藏于圖案表象下的不可言說(shuō)的趣味和技巧。
學(xué)習(xí)時(shí)尚極簡(jiǎn)風(fēng)格插畫(huà)的目的是運(yùn)用，而極簡(jiǎn)風(fēng)格的插畫(huà)在UI設(shè)計(jì)中是非常適宜討巧的配圖對(duì)象。尤其是運(yùn)用在與時(shí)尚相關(guān)的網(wǎng)頁(yè)中，大約是最不容易被忽視的亮點(diǎn)。
拿照片當(dāng)參考
我們?cè)?jīng)也做過(guò)《絲滑牛奶風(fēng)！用AI打造矢量人像插畫(huà)》，那時(shí)我們是按照照片給定的輪廓來(lái)繪制的，雖然有細(xì)節(jié)的突破，但仍然沒(méi)有逃開(kāi)照片的約束。
這時(shí)，我仍然要說(shuō)，離開(kāi)照片再遠(yuǎn)一點(diǎn)！所繪之物和照片實(shí)體之間，應(yīng)該是幻影關(guān)系，而非一對(duì)一的簡(jiǎn)單臨摹。繪制過(guò)程中額外加入我們自己的想象，這將幫助你一步步接近繪畫(huà)的本質(zhì)。當(dāng)然這說(shuō)得太遠(yuǎn)，但目標(biāo)即在，一步一回顧。
符號(hào)輪廓：基礎(chǔ)形標(biāo)準(zhǔn)化
所繪制的對(duì)象，有一種符號(hào)化的趨勢(shì)。就像圖標(biāo)一樣，模糊所有個(gè)性化細(xì)節(jié)，使其變得符號(hào)化。讓外形成就某種“好”，當(dāng)然所繪制的主題也并不在表現(xiàn)人物造型細(xì)節(jié)，而是在于突出某種氛圍。讓我們繪制的基礎(chǔ)形都有趨于某種好定式的傾向。
STEP 01
讓我們打開(kāi)AI，創(chuàng)建一個(gè)寬1600px高1200px的新文檔。然后將所參考的照片置于其中，鎖定照片的圖層，再新建一個(gè)圖層作為繪制層。繪制時(shí)可以用鋼筆工具，
STEP 02
鋼筆工具所繪制的形狀關(guān)閉填充，線條設(shè)置為紅色，將線條大小設(shè)置為0.5px。這里選用紅色是為了照顧視覺(jué)的可辨性，你也可以選用和照片本身差別大的色彩。
根據(jù)照片提示的輪廓進(jìn)行繪制，并不是一定要完全效仿照片。就像本例中，我們未必要完全效仿模特的發(fā)型。基礎(chǔ)形里的每一個(gè)形狀都要封閉完全，這是為了填色的需要。
STEP 03
繪制五官的部分，尤其是眼睛的時(shí)候，要注意保持每個(gè)形的封閉型，這時(shí)你要非常清楚你的填色邏輯，不要被線條誤導(dǎo)了。
五官保持最簡(jiǎn)單的形，去掉一切繁瑣細(xì)節(jié)，而又要保持視覺(jué)上的“合理性”。
STEP 04
處理人物剩下的部分。這時(shí)可以稍微發(fā)揮創(chuàng)意，比如我在這里增加了頭發(fā)的長(zhǎng)度和弧度。也是這時(shí)開(kāi)始，我們就丟棄對(duì)照片的依賴(lài)。關(guān)閉照片可見(jiàn)，完全從線條的角度來(lái)審視整個(gè)畫(huà)面。
STEP 05
調(diào)整線條，讓它變得更為“絲滑”，并對(duì)形進(jìn)行合并與刪減。其目的是為了填色的需要，因此要謹(jǐn)慎選擇合適的形狀對(duì)象。而保持“絲滑”的前提就是不要過(guò)度的歪曲與拐角，你需要放大細(xì)節(jié)進(jìn)行調(diào)整。
處理形的要義就是要學(xué)會(huì)趨向簡(jiǎn)單幾何。
簡(jiǎn)約配色
這里我們將要學(xué)會(huì)對(duì)色彩的節(jié)制，注意在繪制人像時(shí)，人物的某一五官將作為突出重點(diǎn)，比如我們要在這里突出嘴唇，因此嘴唇的部分和皮膚的部分就在色彩上加以區(qū)分。
這時(shí)，整體的色彩最好不要超過(guò)三種。用顏色作為視覺(jué)引導(dǎo)，在人物的重要部分運(yùn)用不同的色彩對(duì)比。
STEP 06
為畫(huà)面增加背景色，這個(gè)背景色與唇色呼應(yīng)。讓色彩顯得干凈。基本的填色完成后，大致的人物形象就一目了然，在此進(jìn)行對(duì)五官細(xì)節(jié)的微調(diào)，將是更進(jìn)一步的“符號(hào)化”的過(guò)程。
陰影的點(diǎn)睛作用
有趣的地方就在于，盡管我們丟棄了所有的陰影細(xì)節(jié)，然而并不代表我們不需要它。利用陰影，可以起到畫(huà)龍點(diǎn)睛的作用。比如在這幅畫(huà)中，我們給脖子上增加頭部的陰影，脖子和頭就有了視覺(jué)上的層次，立體感增強(qiáng)了。
STEP 07
陰影的色彩我們選用和唇色一樣的粉紅色。將陰影的混合模式改為“正片疊底”，透明度降至30%。
STEP 08
再為眼睛增加陰影，這將增加眼神的力量?！把塾啊钡幕旌夏Ｊ饺匀粸椤罢B底”，透明度為60%。
STEP 09
為了增加臉部的立體感，我們也要利用陰影進(jìn)行“潤(rùn)色”。這時(shí)，陰影不僅僅是實(shí)際的對(duì)光線投射的描繪，而是有著某種“裝飾”的意味，同時(shí)突出臉部輪廓，在關(guān)鍵的部分利用線條的婉轉(zhuǎn)來(lái)表現(xiàn)臉部的輪廓起伏狀態(tài)。
填色后的混合模式仍未“正片疊底”，透明度為15%。
制造焦點(diǎn)
我們?cè)?jīng)也談到過(guò)正負(fù)形交錯(cuò)的用法。也就是讓背景與所繪制對(duì)象主體的色彩有彼此可以融合的部分，根據(jù)完形法則，我們?nèi)搜勰軓囊恍┚€索中就判斷出對(duì)象。
STEP 10
將背景變?yōu)楹谏?，與黑色的頭發(fā)、眉毛相接。又將桃紅色背景縮小為更小的圓，用以突出焦點(diǎn)。在焦點(diǎn)處添加上焦點(diǎn)。
手段的目的就是手段本身
說(shuō)起來(lái)，這句話有點(diǎn)繞。換句話說(shuō)，在目前“唯結(jié)果論英雄”的思維方式下，我們更應(yīng)該焦距在過(guò)程本身。不被結(jié)果影響是很難做到的，但至少我們可以抽身在享受過(guò)程的某一個(gè)小瞬間。
其實(shí)，最初是想要探討關(guān)于網(wǎng)頁(yè)設(shè)計(jì)中插畫(huà)的方向。做設(shè)計(jì)的人都深有體會(huì)，有時(shí)候?yàn)榱藢ふ乙粋€(gè)好的素材，翻遍各大免費(fèi)攝影網(wǎng)站都未必合適。精疲力盡的同時(shí)還加深了我們對(duì)于DEADLINE的焦慮。于是，求人不如求己，我就想到了用插畫(huà)的方式來(lái)自己動(dòng)手設(shè)計(jì)素材。
這并不是我自己突然之間的想法，而是在看project runway（一個(gè)美國(guó)的服裝設(shè)計(jì)大賽，具體請(qǐng)自行百度或谷歌）的時(shí)候得到的靈感。在project runway中有一個(gè)比賽環(huán)節(jié)叫做非常規(guī)材料賽，具體說(shuō)來(lái)就是參賽選手要用于設(shè)計(jì)服裝的材料不是普通的布料，而是垃圾堆里的或者其他不尋常的廢棄材料，比如塑料紙啦、燈泡啦、金屬片、雞毛等。而且，作品的評(píng)選標(biāo)準(zhǔn)并不僅僅是把服裝做得“美”，而是根據(jù)這個(gè)設(shè)計(jì)師在多大程度上改造了原有材料，把這些“廢品”做成了可穿著的物料，發(fā)揮了衣服的特性和美感。有些難度？但是，大多數(shù)設(shè)計(jì)師都會(huì)在這一環(huán)節(jié)感到興奮，而且，也只有在這一環(huán)節(jié)，他們會(huì)覺(jué)得是比較能充分發(fā)揮自己的設(shè)計(jì)功底和想法的。比起直接從布料里找到好布料進(jìn)行裁剪，他們更喜歡自己“創(chuàng)造”出“布料”。
好了，說(shuō)回我們的UI設(shè)計(jì)，其實(shí)也是類(lèi)似的。當(dāng)我們?cè)趫D片的海洋中尋找優(yōu)質(zhì)資源的時(shí)候，就像要找到一匹好布料，而事實(shí)上，即時(shí)最終的作品非常優(yōu)秀，也部分得益于“運(yùn)氣”（找到漂亮的布料的運(yùn)氣），而且這個(gè)運(yùn)氣的中獎(jiǎng)率往往也并不太高。而比較靠譜的做法就是自己創(chuàng)造“布料”，也就是自己為配圖進(jìn)行取材，這才是能讓你的設(shè)計(jì)功底得以腳踏實(shí)地，盡管你也許走得比別人慢，但不依賴(lài)于運(yùn)氣的方式，也就是享受過(guò)程的方式會(huì)讓路途越來(lái)越開(kāi)闊。
而插畫(huà)的風(fēng)格則五花八門(mén)，一個(gè)人就能自成一種風(fēng)格。在沒(méi)有形成自己的風(fēng)格之前，就是對(duì)每個(gè)種類(lèi)的風(fēng)格都了解一遍。在輕質(zhì)風(fēng)格的網(wǎng)頁(yè)中，能用得上的插畫(huà)風(fēng)格當(dāng)屬扁平風(fēng)和線條風(fēng)這兩大類(lèi)，而細(xì)分下來(lái)每個(gè)大類(lèi)中還有若干的小方向。所以，我們將在以后繼續(xù)介紹這類(lèi)風(fēng)格的繪制方法，而且它們不僅可以作為配圖，還可以成為圖標(biāo)或其他更多的UI組件樣式。

還是回到我們的主題，插畫(huà)本身是手段其實(shí)也是目的。如果你真的喜歡設(shè)計(jì)，就無(wú)法忽略繪制過(guò)程中的美感體驗(yàn)。

本文來(lái)自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽：重慶網(wǎng)站建設(shè)公司,成都網(wǎng)頁(yè)設(shè)計(jì)公司,成都網(wǎng)站設(shè)計(jì)公司

當(dāng)前標(biāo)題：繪制極簡(jiǎn)時(shí)尚風(fēng)格插畫(huà)
標(biāo)題鏈接：http://www.rwnh.cn/news41/165441.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站改版、網(wǎng)站收錄、網(wǎng)站設(shè)計(jì)、企業(yè)建站、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)