最近特别想要做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

相关文章