恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【AI】超级详细的迪拜大厦教程
0.0°
2016-12-22 自译外文 教程 原作者: Miss Chat*Z 举报 3411 19 19 0

教你用布尔运算做出迪拜大厦!

这个教程难度并不高,只会稍微费点时间。教程中重复用到了AI中路径查找器面板里的路径查找器和形状模式(布尔运算),跟着教程将这张图临摹出来,你也就能掌握上面这两个重要的技能了。


OK,正文开始咯~


在这个教程中,你将会学到如何用AI打造一个沙特阿拉伯王国的标志性建筑,这里将会用到基本的AI功能,几何形状以及一些简单的工具。(下面是最终成形图)

Image title

位于利雅得的王国中心大厦是世界上低于50层的建筑中最高的,它仅次于上海的世贸中心和东帝士天空塔。在教程的最后你可以建造出一个有趣的地标建筑,与此同时还能掌握一些实用性的技术,可以用来建造任何你喜欢的城市。


1.草稿&创建新的任务:

第一步:

首先,画一张“王国中心大厦”的草图,将它存储为JPG格式。

Image title

第二步:

打开AI, 文件> 新建(Control-N)来新建一个文档,并设置它的大小。命名:“Kingdom_Centre_Saudi_Arabia”

·画板数量(Number of Artboards):1

·宽(Width):600PX

·高(Height):600PX

·单位(Units):像素

·色彩模式(Color Mode):RGB

·栅格效果(Raster Effects):高(300ppi)

Image title

第三步:

置入草稿图,运用置入的快捷键(Control-Shift-P),然后点击草图进入画板。打开图层(窗口>图层)面板,双击图层然后:

1.名称:Sketch

2.选择锁定(Lock)

3.透明度(Dim Images to):20%

Image title

在“草稿”的上方新建图层,命名为“作品”。


2.制作线稿图:

第一步:

打开描边Stroke(窗口>描边)面板。选择圆角矩形工具,用来画图标的外形。调整圆角角度的快捷方法就是按住向上的箭头来增大弧度,向下的箭头来缩小弧度,当你认为弧度合适时就可以松开了。(新版的AI已经可以直接拖拽来进行圆角角度调整了)

Image title

第二步:

在圆角矩形上方画一个矩形框,如图所示:

Image title

第三步:

窗口(Window)>路径寻找器(Pathfinder),同时选择两个形状,在路径寻找器面板中选择图形模式(Shape Modes):相交(Intersect)。这用来创建图标的外围轮廓。

Image title

第四步:

矩形工具(6pt的黑色描边,无填充)画出摩天大楼的外围轮廓。然后用椭圆形工具(Ellipse Tool)画出相交的两个小圆作为月亮,同时在摩天大楼上方再画相交的两个圆来打造王国中心大厦的“U型口”

Image title

第五步:

选择月亮的两个圆形,在路径寻找器(Pathfinder)里,选择形状模式:减去顶层形状。对“U型口”重复同样的动作。然后对象> 复合路径(Compound Path)> 建立 ,使其成为复合形状。

Image title

第六步:

选择塔的“U型新月”和摩天大楼的矩形边框,路径寻找器>分割。取消对象分组:对象>取消组(Control-shift-G)然后选择两个凸出的“犄角”形状,用选择工具(V),然后删除

Image title

第七步:

现在,开始创建人行天桥啦!

选择椭圆形工具,画一个截断天桥的椭圆。同时选择两个形状然后在路径寻找器里选择形状模式:减去前面。

Image title

第八步:

现在我们需要创建笔刷来制作棕榈树。

画两个水平方向如下图所示的黑色无描边椭圆,选择这两个椭圆,然后在路径寻找器里选择形状模式:相交。

Image title

第九步:

打开窗口>笔刷,然后我们就可以加载我们定制的笔刷了。将笔刷形状拖拽进笔刷面板艺术画笔选项的对话框就会自动弹出。选择艺术笔刷,点击确定。定制的笔刷就此建好了。将先前的两个椭圆就可以删除了。

Image title

第十步:

让我们来画几棵棕榈树。

选择画笔工具,然后就可以看见定制笔刷已加载到了笔刷面板里,然后只画一侧,随后我们会用到镜像了。

提示:笔刷要用不同的磅数。

Image title

第十一步:

选择其中一个:对象>展开(目的是将单个的形状合并成一个统一的路径)

然后将展开的形状通过路径寻找器里的形状模式:合并(Unite)来统一成一个形状。

Image title

第十二步:

让我们镜像棕榈树,首先复制选择的形状

1.复制(Control-C)

2.粘贴在前面(Control-F)

3.选择镜像工具(Reflect Tool)

4.将中心参考点放在棕榈树的中心位置,按住Alt+Shift进行拖拽到合适位置后放手。

最后,同时选择这两个形状,在路径寻找面板将形状进行合并。

Image title

第十三步:

画出其他棕榈树,然后准备画树干。

矩形(黑底无描边),为每个棕榈树画出树干,选择路径寻找面板里的形状模式:合并,将它们和棕榈树的上半部分组合起来。

Image title


3.添加一些细节:

第一步:

现在来画塔的窗户。

摩天大楼的初步形状已经建成,但我们需要细化它的外观,所以我们将会用到基础的矩形和矩形副本。

选择矩形工具,在底层画一排矩形的窗户,复制并选择形状,按住ALT键进行拖拽。Control-D(等距离连续复制)来重复上个步骤。

当你横向复制好了一排的窗户,将它们编组(Group),然后再垂直方向进行复制。

Image title

第二步:

王国中心大厦顶层的窗户比较小,所以用矩形工具画一些平行的窗户,复制粘贴,就像第一步那样。

Image title

第三步:

我们需要从窗户矩阵中把“U型口”挖出来。

选择工具选择出上方的窗户,然后在路径中选择形状模式:合并。

然后在路径面板右侧的下拉菜单中,选择建立复合形状并点击展开(对象>展开),然后这些形状就变成了一个统一的形状。

Image title

第四步:

为了挖出U型口,实施下面的步骤:

1.选择摩天大楼的边缘。

2.复制>粘贴在前面

3.选择顶部窗户和摩天大楼的边缘

4.形状模式:相交。

就酱,你的窗户就做好了,U型口也留了出来。

Image title

第五步:

继续来做云的背景。

椭圆形工具,画一些圆形来组成云的背景效果。然后选择所有的椭圆并在形状模式里选择合并。

Image title

第六步:

现在需要对云的形状进行裁剪以适应背景的大小

1.选择图标最外围的边

2.复制>粘贴在前面

3.同时选择云和图标最外围的边。

4.形状模式:相交

Image title

第七步:

当我们画出了建筑的主要轮廓,现在将各个图层排序在合适的位置上。

将对象移到顶层或底层,选择对象然后:对象>安排>放在前面(Shift-Control-])或者对象>安排>放在后面(Shift-Control-[)

将对象向前或向后移动一步,选择对象然后:对象>安排>放到后面(Control[)或者对象>安排>放到前面(Control])

Image title


4.添加颜色:

第一步:

给建筑的背景上色,我们需要复制它们的形状,选择每个形状然后:复制>粘贴到前面,给建筑上色#299CBC,给背景上色#1C3B72,对象>安排>放置到最后。

给其他元素上色:

云:#2458A3

月亮和U型口: #FAD631

人行天桥:#F99E32

棕榈树:#59D353和#398C34

Image title

第三步:

给窗户群组上色,用选择工具,然后给单独形状上色,用直接选择工具。让窗户的颜色多样化,在黑色和淡蓝色之间:

窗户1:#294B87

窗户2:#5AD7FF

窗户3:#16325B

然后再添加一些白色的窗户。

Image title

第四步:

给其中一颗棕榈树上深蓝色#10294C来形成树的背景剪影。然后,给其他三颗棕榈树勾边,选择这三棵树然后:对象>路径>偏移路径。

·偏移:4px

·连接:斜接

·斜接限制:4


你会注意到偏移的路径在你原先图形的正下方,给偏移路径上纯黑色。

Image title

第五步:

现在让我们来建人行天桥的边。画一个10pt的空心椭圆,并将它施以对象>展开的动作。展开面板就会打开,选择描边

Image title

第六步:

切割天桥内部的弧。

选择椭圆形和天桥,复制粘贴在前面,路径寻找>相交,删除椭圆多余的形状。

然后再画图标的底座,沿着底部画一个矩形,很简单。

Image title

第七步:

月亮的边缘看起来比较尖锐,所以在描边面板,选择圆角端点。

Image title

第八步:

展开所有描边,给他们同一个颜色。所以选择所有黑色描边的对象,然后对象>展开,在展开面板上勾选:填充和描边。

Image title

对象>取消群组,这样我们就可以把所有填充从拓展的描边中分离出来。选择所有拓展过的描边,给他们上深蓝色#10294C。


5.添加一些效果:

让我们添加一些效果来使它变得更加生动。

第一步:

在图标底部加一个横向高光来让颜色变得生动,首先在底部画一个横向的椭圆形,给它填充淡蓝色:#3891E8

1.选择椭圆和云的形状

2.复制粘贴到前面。

Image title

第二步:

1.形状模式:相交

2.删除椭圆的多余形状

3.对象>安排>放到后面

Image title

第三步:

现在让我们增加一些阴影和光的特效。

画一个垂直的空心椭圆来创建建筑的阴影部分。

1.选择椭圆和建筑轮廓

2.复制>粘贴在前面

3.路径寻找器>减去顶层

4.删除椭圆

Image title

第四步:

来给我们的新形状添加一个蒙版。

打开窗口>透明,在面板中选择正片叠底,这将会产生投影。

对象>排列>放到后面

Image title

第五步:

给“U形口”以同样的步骤。

椭圆工具沿着“U形口”的边缘画一个垂直的椭圆。

1.选择椭圆并给“U”填充黄色

2.复制粘贴到前面

3.路径查找器>相交

4.给它填充橘色:#F99E32

5.删除椭圆形。

Image title

第六步:

下面,给建筑边缘增添高光,就像月光轻轻地铺在上面。用矩形工具沿着摩天大楼的边缘画一个垂直的窄矩形。对象>排列>放到后面。

Image title

第七步:

最后,让我们添加一些闪烁在夜空中的星星来衬托建筑。

在背景天空上画一些白色和蓝色的圆形。

Image title

第八步:

让我们增加一些闪烁的效果:

在工具栏里面选择星星工具:

直径1:14px

直径2:2px

角数:4

画一些黄色的星星,然后删除“草稿”图层。

Image title


恭喜!摩天大楼建好了!




















更新:2016-12-22

收藏

19人已收藏

Iris_Uu

腿长一米八

  • 8

    作品

  • 148

    粉丝

  • 0

    关注

  • 一波全新的Google设计作品
  • 减少认知过载——为了更好的用户体验
  • 还在为导航设计而犯愁么?教你五招轻松应对
  • 创建完美用户体验设计不可缺少的七个原则

    猜你喜欢

      2016-12-22 自译外文 教程 原作者: Miss Chat*Z 举报 3411 19 19 0

      【AI】超级详细的迪拜大厦教程

      0.0°

      你确定要举报【AI】超级详细的迪拜大厦教程

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年12月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      19
      19
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录