華文網

五分鐘教你快速掌握三維圖示

發佈於13小時前閱讀2380評論0喜歡0

閱讀2380

我現在在Zeta工作,是一名產品設計師。 雖然我從未學過設計,還是工程師出身,畢業於印度一所不是很好的學校。但與外界貼在工程師身上的標籤“單調、無聊”恰恰相反,

我的專業實際上具有很高的創造性。

雖然我擁有不錯的視覺審美(我的意思是,我知道什麼樣的T恤應該搭配什麼樣的鞋),但我更多是一位交互設計師,日常工作是:頭腦風暴,確立產品特性,創建UI流程,分享使用者行為等等。

在必要的時候我會做一些圖,但是我還沒有到達可以自信地仰起脖子說自己是一位元插畫師的等級。(我正在努力ing)

雖然,我掌握了大部分AI技巧,

可以熟練使用AI,並能從容地畫一些簡單的功能圖示。

但是當涉及到“設計一個場景”或者“畫一些美觀的東西”時,我發現自己還是有很大的缺失。對於我來講,很難辨別哪些元素是至關重要的,哪些是不必要的,甚至是多餘的。

比如,當我畫一個房子,畫了很多版!

“我應該畫一個窗戶還是兩個窗戶?”

“我應該給門加分割元素嗎?看上去會不會很亂?”

“我是不是應該加個煙囪讓它看起來更像一棟房子?”

“我怎樣去設計才能讓這個房子看上去更像一家商店?”

這些答案不會主動地來找我。

這種情況在我去畫更大、更細緻的插圖時更加嚴重。在某種程度上,我無法找到那種令人舒適的平衡感。

一、發現

經過一段時間的觀察,我發現通過引入第三維度,我可以把那些我理想中的那些細節加入到這些簡單的圖示中,而且看起來一點都不複雜、淩亂。

在3D的插圖中多出兩個面,使它更接近現實中的物理物件的同時,還增加了視覺吸引力,效果相當棒!

當我們看現實中的物體時,大腦會基於不同距離和視角區感知它、扭曲它。(在不同距離、不同視角中,我們看到的物體呈現出來的形態是不同的。)我們模仿這種情況去做的圖,被稱為透視圖。簡單來講,就是將物體遠離視線的部分比照接近視線的部分按比例縮小。

2、等距插圖

有另一種方法可以簡化3D繪圖,

這種方法是我在工程學院學到的——等距。

這種形式的插圖提供了一個獨特的視角,適合技術圖紙。它唯一缺少的就是透視感,即,這個物體的每一個部分,無論是離視線近,還是遠,尺寸不變。這種方法更加容易,而實踐起來很實用。

三、趨勢

最近,等距插圖在數位產品上越來越常見了,因為他們簡單、好看且真的很好用!當我第一次看到它們的時候,

我無法相信它們竟然是用Ai——一款2D繪圖軟體畫出來的。但是現在我學會了繪製它們的技巧,現在再看它們就是小菜一碟。

我自己畫了了一些,它們不需要一雙福爾摩斯的眼睛去分辨哪一個角度看上去會更加可口。

四、技巧

這種技巧被稱為SSR,只有實現涅槃才能掌握的超級難的技巧。

哈哈,開玩笑的。

SSR指的是——比例、斜切、旋轉(Scale, Shear and Rotate)。

對,就是這麼簡單。通過縮放、剪切、旋轉正射投影(即投影平面切於地球面上一點,視點在無限遠處,投影光線是互相平行的直線,並與投影平面相垂直。),我們可以模仿他們的等距對應形態。

假設我們現在需要把一個正方形製作成等距模式,我們需要這樣做。

第一步:繪製正射投影

傳統上,我們會稱這些視圖為俯視圖、正視圖、側視圖。但是在這篇教程裡,我會把它們稱為:俯視圖(top view)、左視圖(left view)和右視圖(right view),以避免出現描述上的混亂。

第二步:應用SSR來修改這三個視圖

我們從俯視圖開始,把它從正射投影選出來:

1.(Scale)調整高度到86.602%(是的,它需要精確到86.602%,不能四捨五入到86%或者90%)。

2.(Shear)然後,將圖形斜切+30°。

3.(Rotate)最後,把斜切後的圖形旋轉-30°。

請保證你是嚴格按照以上比例資料來做圖的,否則,最終做出來的圖可能會出現偏差。

鐺鐺鐺~我們的俯視圖就做好啦~~

與俯視圖相似的步驟,接下來做左視圖和右視圖:

左視圖:

1.調整高度到86.602%(同樣要確保這個數字);

2.斜切-30°;

3.旋轉-30°。

右視圖:

1.調整高度到86.602%(同樣要確保這個數字);

2.斜切+30°;

3.旋轉+30°。

總結一下,下面是轉換數值的總表單。

第三步:把它們組合在一起

現在只剩最後一步,就是把所有的面組裝在一起,完成!

現在你應該知道了,我們要做的就是把等邊距圖形的各個部分細緻地調整即可

專業技巧1:

在Ai裡,可以在Action中將“調整高度、斜切、旋轉”綁定後一鍵設置。我可以寫如何實現這種操作的教程,不過這就是另外一篇文章了。

專業技巧2:

每一個等距圖形的視角要是相同的,因為這樣,才能將它們非常和諧地搭配組合在一起。舉個例子,我可以輕易地將這個等距漢堡放在等距的筆記型電腦的右邊,二者擺在等距桌子的上面,並且,它們看起來是如此搭配。

所以,你準備好了去喚醒沉睡在你身體裡的插圖天賦嗎?通過引入第三維度,你可以打開曾經被束縛住的無限可能!

原文作者:Saptarshi Prakash

翻 譯:藍湖

注:本文系藍湖原創翻譯,轉載請聯繫我們獲取授權

哈哈,開玩笑的。

SSR指的是——比例、斜切、旋轉(Scale, Shear and Rotate)。

對,就是這麼簡單。通過縮放、剪切、旋轉正射投影(即投影平面切於地球面上一點,視點在無限遠處,投影光線是互相平行的直線,並與投影平面相垂直。),我們可以模仿他們的等距對應形態。

假設我們現在需要把一個正方形製作成等距模式,我們需要這樣做。

第一步:繪製正射投影

傳統上,我們會稱這些視圖為俯視圖、正視圖、側視圖。但是在這篇教程裡,我會把它們稱為:俯視圖(top view)、左視圖(left view)和右視圖(right view),以避免出現描述上的混亂。

第二步:應用SSR來修改這三個視圖

我們從俯視圖開始,把它從正射投影選出來:

1.(Scale)調整高度到86.602%(是的,它需要精確到86.602%,不能四捨五入到86%或者90%)。

2.(Shear)然後,將圖形斜切+30°。

3.(Rotate)最後,把斜切後的圖形旋轉-30°。

請保證你是嚴格按照以上比例資料來做圖的,否則,最終做出來的圖可能會出現偏差。

鐺鐺鐺~我們的俯視圖就做好啦~~

與俯視圖相似的步驟,接下來做左視圖和右視圖:

左視圖:

1.調整高度到86.602%(同樣要確保這個數字);

2.斜切-30°;

3.旋轉-30°。

右視圖:

1.調整高度到86.602%(同樣要確保這個數字);

2.斜切+30°;

3.旋轉+30°。

總結一下,下面是轉換數值的總表單。

第三步:把它們組合在一起

現在只剩最後一步,就是把所有的面組裝在一起,完成!

現在你應該知道了,我們要做的就是把等邊距圖形的各個部分細緻地調整即可

專業技巧1:

在Ai裡,可以在Action中將“調整高度、斜切、旋轉”綁定後一鍵設置。我可以寫如何實現這種操作的教程,不過這就是另外一篇文章了。

專業技巧2:

每一個等距圖形的視角要是相同的,因為這樣,才能將它們非常和諧地搭配組合在一起。舉個例子,我可以輕易地將這個等距漢堡放在等距的筆記型電腦的右邊,二者擺在等距桌子的上面,並且,它們看起來是如此搭配。

所以,你準備好了去喚醒沉睡在你身體裡的插圖天賦嗎?通過引入第三維度,你可以打開曾經被束縛住的無限可能!

原文作者:Saptarshi Prakash

翻 譯:藍湖

注:本文系藍湖原創翻譯,轉載請聯繫我們獲取授權