最近特別想要做3D相關的教學,雖然手機的UI介面都在推扁平設計,3D設計還是得花上比2D許多時間設計;在設計的一開始,有時候會不知道東西該擺在哪邊、比例要如何調整,其實不管是photoshop還是illustrator有幾種特殊的參考功能,1.參考線、2.格線、3.尺規
illustrator在自訂參考線顯然比Photoshop容易多了,所以這次我們講一下photoshop參考線的制定
Step 1. 開啟新檔
建立一個1024X1024的檔案

3D-1.jpg
傳統的格限制定
編輯/偏好設定/參考線、格線與切片

3D-2.jpg
有確的是參考線顏色都是青色,格點是灰色;格線是25公釐,這個預設間距相當的大,我們可以改自己想要的設定

3D-3.jpg
顯示格點
快速鍵Ctrl+',或者檢視/顯示/格點

3D-4.jpg
預設的格點的模樣

3D-5.jpg
調整格點間距
你可以按造自己的習慣調整

3D-6.jpg
調整後的模樣

3D-7.jpg
自訂參考線
當然也可以自己定義,這個參考線是為了要製作3D圖樣所定下來的
Step 2.繪製直線
使用線條工具
3D-18.jpg
按下Shift用滑鼠拖曳便可以拉出一條直線

3D-8.jpg
Step 3 複製線條
使用直接選取工具
3D-19.jpg
在線條上按下Alt+拖曳便可以對線條做複製

3D-9.jpg
大約複製28~30條直線,我們可以使用線條對其功能,對齊/均分寬度,他可以自動將這些線平均分配間格

3D-10.jpg
Step 4. 複製線條
Ctrl+J,複製一份 

3D-11.jpg
旋轉+60

3D-12.jpg
把尚未旋轉的命名為『線條+0』,旋轉+60的命名為『線條+60』,將線條+0圖層再複製一份命名為『線條-60』

3D-13.jpg
將『線條-60』旋轉-60

3D-14.jpg
Step 5.移動直線
將直線移動到『線條+60』與『線條-60』線條的交叉點

3D-15.jpg
移動後的圖樣

3D-16.jpg
當然你也可以把育色的黑色改成青色

3D-17.jpg
可以將這三個線條做一個羣組管理
3D-20.jpg
最後你還可以搭配設定格線間距確定設計的UI實際尺寸喔~~
3D-21.jpg

相關文章