创建像素的3D字母

Recommand
上海/UI设计师/13年前/8505浏览
创建像素的3D字母Recommand
有籍

自从《computerarts》停刊后,就不怎么关注了。最近发现该网站改版了,那些教程依然牛逼~。于是不由自主地翻译过来,英文水平一般,请多包涵~~

 (接下来,

自从《computerarts》停刊后,就不怎么关注了。最近发现该网站改版了,那些教程依然牛逼~。于是不由自主地翻译过来,英文水平一般,请多包涵~~

(接下来,Steven Bonner 教您怎样使用等距网格来创建非同寻常的3D文字

作者最近与一本建筑杂志合作,目的是为了创建一个具有立体感的文字设计。本教程详细了,作者从构思到创建三维网格,到制作成型的各个细节。一旦理解了制作技术的基础后,您就能气定神闲的创作更加复杂和庞大的3D矢量图了~~

源文件下载到这里哦~



01 请不要一开始就打开AI哦,在制作前先画下草图,考虑下要做的结构。虽然现在脑袋一片空白,但是学习完本教程只有,在画完草图后,大概就知道用什么步骤做了。虽然画了几个字母,但是在制作过程中,作者只提供了一个字母的详细制作步骤,因为更多的实践才能做出有自己风格的设计。



02 有很多方法来创建等距网格,每一种都有它的独到之处。但对于作者来讲,有个最简单的方法:

第一步,使用AI中的线条工具,并且在界面中画一条水平线,然后你就疯狂复制到手抽经(不用太多哦)。然后右键—变换—倾斜(按照上图进行设置)。



03 全选后复制(ctrl+c)然后原位置粘贴(ctrl+f),右键-变换-对称(垂直)。然后复制按住SHIFT旋转到垂直。按照上面的方法,全选后创建参考线,然后锁定它。



04 至此你将看到大概类似上面的效果。当然你也可以用混合路径工具来替代手抽经式的复制。对了转换路径的快捷键是ctrl+5



05 如果您还没有打开智能参考线,请按CRTL+U,并且对其点(ctrl+alt+’,来帮助你精确定位。然后用钢笔工具描出上图各部件。



06 把立方体放在一起,建立出一个立方体。一定要包括隐藏的面哦(就是看不到的那些面),因为以后想用的话直接拖动。然后要增加一个光源,应该就是立方的明暗关系了。光源来自左面底侧。所以顶面会黑一点,右面中等,左面会亮一点。稍微加入渐变,如上图,会更具立体感。



07  现在建立第一个字母,复制您的立方重新让他们定位。这时智能参考线和点对齐会给您提供更多的帮助。您会发现在有光源后,字母更具立体感也更清晰了。



08 这里就可以开始上色了。我们不需要让字母看起来太规矩,搞点破坏吧,打破一点点常规,会更好的。调一下蓝色部分的透明度,看上去像窗户~~



09 我们可以开始删除一些前面的面,然后将里面的面做一点渐变。并且在字母的后面加入一点投影。其实您也可以在平面上加入颗粒或者是其他纹理使画面更具细节。



10 一旦你完成了所有的细节,可以试着画一些阴影了,记住阴影不是死黑死黑的,需要加入一些透明渐变,如果是在草地上的那应该是深绿色的,轮廓也会有些粗燥,记住要对上30度的网格线。



11 绘制一些人物,注意人物的投影角度。通过复制和倾斜才实现投影形状。



12 一旦您掌握了以上几点。您就可以充分发挥您的想象力,给字母添加各种细节。


13 按照前面的字母,绘制其余的。在绘制的过程中,您可以尝试用各种方式,加入各种细节来丰富您的字母群。但是,不要影响字母的可读性哦。



14 一旦你做好了所有你需要的字母。然后要做的是增加一些胶片的颗粒光感,以便来提现复古的未来主义感。您也可以按照自己的喜好来做一些改进。



15 最后一个阶段,就是将这些进行画面排版。您可以按照网格线,按照30度的进行整齐的排列。是不是很酷?你还可以加入更多的小人,如果您喜欢,可以让他们在原地交谈,玩耍,或者是坐着电梯等等。然后添加一个斜拉渐变背景,来体现环境光源。


作者介绍

Steven Bonner

Stirling-based Steven is a multi-disciplined designer and illustrator, working for clients such as Harper Collins, Cadbury and Diesel. A love of type is a recurring feature of his work.


16
阅读原文
|
Report
|
204
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
Log in