photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)

今天我们用AI软件绘制一个纪念碑谷那种不可能图形,然后结合PS制作成夜歌APP启动界面。首先我们在AI软件中搭建一个纪念碑谷的2.5D图形,首先纪念碑谷这种2.5D效果都是比较规则的图形,2.5D有个特点就是翻转下就能当另一面使用,这也是游戏中常用的手法。

先看看效果图

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(1)

制作步骤:

这些矩形后面会大量用到,这里先做出几个备用

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(2)

拿出一个矩形色板,执行【效果-3D-凸出和斜角】,

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(3)

在弹出的对话框中位置选择上方,厚度我选择的是30 ,大家根据不同的大小合理设置厚度。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(4)

利用相同的方法再次制作一个立体的矩形,将两个矩形拼接到一起,如图示,将顶部的再复制一个到最下,记得调整图层上下顺序

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(5)

将这3个矩形全选中,执行【对象-拓展外观】,将他们合并。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(6)

用直接选择工具选中形状底部的三个锚点,向下拖拽拉长一些。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(7)

继续复制下方这两个矩形,相同的方法将底部继续拉长。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(8)

这样城楼的主体形状就出来啦,下面制作一面旗帜。先用矩形绘制一长条,执行【效果-3D-旋绕】,选项内直接确定,将长条矩形变为圆柱旗杆。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(9)

用矩形工具绘制一个矩形,在矩形右侧中间位置利用钢笔添加一个锚点,并向左移动。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(10)

执行【效果-变形-旗形】,适当调整弯曲度,拼上之前的旗杆咱们的旗帜就完成啦,摆放到城楼上。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(11)

下面再来做窗户,首先绘制一个圆角矩形,圆角加大,将上下改为半圆形,选中最底部的锚点删除,嫌门小选中底部两个锚点适当的向下移动一些。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(12)

执行【效果-3D-凸出和斜角】,位置选择左方,厚度为0,这样一个倾斜的窗户就出来啦。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(13)

为了突出窗户,也显示屋内灯光,将窗户改为淡黄色,复制放到城楼上。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(14)

下面做窗台,同样创建一个长条矩形,执行【效果-3D-凸出和斜角】,位置选择左方,厚度为2,做出立体效果

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(15)

将窗台摆放到窗户下面,复制几个放到其他窗户下面

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(16)

复制一个窗户放到下面,放大当门来用,制作一个大的矩形立柱放到最下方

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(17)

继续制作向上的阶梯,同样是用到这个矩形,倾斜摆放6个,将后面几个拉长,让他们底部对齐。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(18)

将几个图形选中,通过路径查找器的联集合并为一个形状,选中形状底部几个锚点,向下拖拽。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(19)

因为楼梯是不同的方向,记得多复制几个原始图形,拿其中一个执行【效果-3D-凸出和斜角】,位置选择左方,厚度为30,做出立体阶梯效果

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(20)

将阶梯拼到原来的小楼上,接下来就是各种复制组装出效果。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(21)

下面来制作一个起点,拿过来一个矩形,将填充去掉换成描边,执行【效果-3D-凸出和斜角】,位置选择上方,厚度为0。做好后换个青色

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(22)

将做好的起点放到城堡上,并复制几个中心收缩下。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(23)

下面将整个起点都选中,执行【对象-拓展外观】组合到一起。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(24)

多复制几个起点放到其他位置装点下,注意调整合适大小

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(25)

现在城堡绘制完成啦,下面在PS中创建一个启动页面,将城堡复制过去。根据城堡的颜色在背景填充个渐变色,再找个星空的图案叠加上去,完成背景的制作。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(26)

月亮的制作,绘制两个圆形,合并到一起,用直接选择工具选中上方的圆形,在选项栏选择减去顶层,完成月亮

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(27)

将月亮更改为黄色,并添加外发光。

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(28)

最后添加上启动页必须的LOGO和slogan

photoshop绘画街景(Illustrator绘制立体风格城市夜景插画)(29)

在教程中咱们大量的用到了复制,这个也是2.5D的一个优点,只要改变方向就是另一面,哈哈,看着复杂,其实做起来挺简单的,大家可以跟着练习下。

免责声明:本教程来源于网络,禁止商业使用, 禁止个人使用,仅供学习交流使用 ,版权归原作者所有, 若涉及版权问题,请及时联系删除!!!(小编分享只为自己和大家学习所用!越努力,越幸运!本头条号不承担任何法律责任!)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页