用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論

2021-4-1    周周


文章主路徑如下:

  • 找到優(yōu)秀作品準(zhǔn)備臨摹
  • 分析作者設(shè)計(jì)語言拆分變量
  • 臨摹過程與思考
  • 延展半原創(chuàng)圖標(biāo)
  • 修改變量得到原創(chuàng)圖標(biāo)

找到優(yōu)秀作品準(zhǔn)備臨摹

這組圖標(biāo)非常有活力和創(chuàng)意,色彩很活潑,原作者是菜心。我也常用微漸變來做圖標(biāo),但是沒有嘗試過加上描邊,并且這種強(qiáng)烈的對(duì)比色也在我習(xí)慣用色外。臨摹這組圖標(biāo)可以突破我的用色習(xí)慣。

用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論(含源文件)

分析作者設(shè)計(jì)語言拆分變量

我們先逐步拆分,再進(jìn)行總結(jié)。

第一步,分析原作品的結(jié)構(gòu)。

圖標(biāo)可以拆分為線、面和小元素。我在 sketch 做的,形狀的線面轉(zhuǎn)換比較簡(jiǎn)單。線跟面的圖層要分開,因?yàn)槊鎴D層帶有反光,而線圖層沒有。

用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論(含源文件)

第二步,確定光源的方向。

從作者的表現(xiàn)來看,光源在左上角,因此所有的圖標(biāo)應(yīng)該遵循同一光源方向的原則。光源的表現(xiàn)會(huì)因?yàn)椴馁|(zhì)的不同而不同。比如「LIKE 燈牌」帶有自發(fā)光、「鈴鐺」帶有高光。所有物體的反光比受光面要亮一點(diǎn),讓人感覺很通透。

用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論(含源文件)

第三步,分析原作的顏色。

不要吸色,先自己調(diào)色。剛開始會(huì)有點(diǎn)難,但是這種練習(xí)會(huì)幫助我們提高眼睛辨色的能力,提高色感。對(duì)比自己和原作的顏色,發(fā)現(xiàn)我調(diào)色不夠準(zhǔn)確,沒有做到不同顏色飽和度一致,漸變色跳躍比較大。這表示我還沒有理解原作的用色,后續(xù)臨摹的時(shí)候需要修正。

用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論(含源文件)

第四步,總結(jié)作者的設(shè)計(jì)語言。

用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論(含源文件)

臨摹過程與思考

分析完以后開始臨摹。

先說一下體量感的問題,因?yàn)橛泻芏?/span>設(shè)計(jì)師在做圖標(biāo)的時(shí)候會(huì)忽略這一點(diǎn)。常見的方法是拿圖標(biāo)框來限定,但是問題又來了,有的人限定得太死板,不會(huì)根據(jù)實(shí)際情況來微調(diào)。針對(duì)這種情況,可以拿別人的整套圖標(biāo)作品做反推,在臨摹的時(shí)候,留意別人對(duì)體量感的把握。

用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論(含源文件)

定義了大概的體量之后,我會(huì)觀察圖標(biāo)大致的形狀和角度,憑印象先把造型做出來。過程中沒有把原作品放在旁邊,最多在忘記的時(shí)候去看一眼。這樣做的好處是,可以發(fā)現(xiàn)自己觀察的時(shí)候漏了什么(這個(gè)方法是跟菜心學(xué)的)。下圖就是第一次臨摹的草稿,orz…鈴鐺最不好畫了。

用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論(含源文件)

拿著草稿來對(duì)比原圖,把自己錯(cuò)漏的地方找出來。

用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論(含源文件)

統(tǒng)計(jì)錯(cuò)漏的地方,重新調(diào)整圖標(biāo),達(dá)到 90%以上的相似度后,給圖標(biāo)上色。

用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論(含源文件)

延展半原創(chuàng)圖標(biāo)

做完這一步后,大概理解了作者做這套圖標(biāo)時(shí)的邏輯以及方法。我們可以開始做半原創(chuàng)的設(shè)計(jì),在原作的基礎(chǔ)上延展幾個(gè)圖標(biāo)。我選擇電商主題的「充值、簽到 、賺錢、砍價(jià)」這四個(gè)圖標(biāo)來做。

我們先找參考素材。不管畫圖標(biāo)、做界面,還是畫插畫,學(xué)會(huì)找參考非常重要。參考不是照抄,而是給我們提供靈感來源,切記不要憑空想象。有一天,團(tuán)隊(duì)的設(shè)計(jì)師跟我說她不會(huì)畫衣服的褶皺,畫起來總是怪怪的。我叫她上網(wǎng)找相似衣服的圖片,看一下別人的褶皺和光影,她就茅塞頓開了。因?yàn)樗偸怯谩霸瓌?chuàng)”局限自己,沒有找實(shí)物參考。

原創(chuàng)絕不是憑空想象,而是有源設(shè)計(jì)的融合。

用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論(含源文件)

結(jié)合作者的設(shè)計(jì)語言做延展圖標(biāo),放在原作里面也不違和的話,就成功一大半啦。

用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論(含源文件)

修改變量得到原創(chuàng)圖標(biāo)

接下來是原創(chuàng)時(shí)間~我們將作者的設(shè)計(jì)語言其中一些變量改變,會(huì)得出不同的結(jié)果。

用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論(含源文件)

用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論(含源文件)

用一個(gè)實(shí)戰(zhàn)案例,幫你掌握原創(chuàng)圖標(biāo)方法論(含源文件)




文章來源:優(yōu)設(shè)網(wǎng)       作者:牙線y2x



藍(lán)藍(lán)設(shè)計(jì)bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)




分享本文至:

日歷

鏈接

個(gè)人資料

存檔