记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航

[UI教程] AI制作复古风格的邮票小插画[含26P]

[复制链接]
发表于 2017-5-29 22:18:31 | 显示全部楼层 |阅读模式
使用AI制作复古邮票
老规矩,先看看最终的效果:(前方高能,哈哈哈,原谅逗逼的我)
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851erfjirmizrg90f9o 1




嗯,分析一下子:
1.三张邮票都有一样的邮票框。(废话,邮票框不都一样啊)
2.粗(嗯,粗)描边风格
3.邮票内容为建筑物的轮廓



OK,话不多说,开始我们的表演:

首先,新建一个图层(好不想说这句话,因为你们都知道。。)。800*600px(向dribbble看齐),颜色模式为RGB,分辨率为72ppi。
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851ogcumcunt4bbb4uc 2





STP1:背景的制作
(1)绘制安全框(目的是为了保证三个邮票的大小一致)
新建一个矩形,大小128*128px,颜色为#F15A24
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851ccxpheckrzkkce8x 3



然后绘制一个120*120px,颜色为白色的矩形,使之与上图对齐
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851csghe849o5yiy9h0 4



(2)制作邮票背景
新建一个矩形,100*116px,颜色为#45576B,使之与安全框垂直居中对齐
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851ld9d1dhzhdqwptqh 5



新建一个8*8px的圆形,复制多个,使之按下图所示排列
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851c8ymt6iv64y54t5r 6



然后选中全部圆和中间那个矩形,减去顶层形状,然后给新的形状添加一个4px的描边,当当当当,我们的邮票背景就做好了
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851vez6tq54dk7d9kb9 7





STP2:绘制我们的建筑物(邮票主体)

新建一个76*92px,颜色为#EFA28B,描边为4px颜色为#45576B的矩形,使之与邮票外框垂直居中对齐
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851tccc4076oeaooqfg 8





然后,新建一个22*18px,描边颜色颜色为#45576B,大小为4px的矩形,按下图所示放置
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851z7c5ll57c7c7a1lt 9




然后就是堆积木的游戏了。


14*20px
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851uz1akg6lszt660mj 10



将这两个矩形复制一下,移到右边
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851qbzo3gg8bxqdnldb 11




再建一个38*10px的矩形继续堆积木,与下面两个对齐
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851njesz7vsscce00cn 12




利用钢笔工具在新建的矩形下边添加一个瞄点,然后删除掉,得到下图
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851fqqhr0dim5jltwrr 13





接着建一个30*12px的矩形继续堆在上面
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851ve5szw8aaeelwsy6 14




继续22*6px的矩形堆在上面
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851mf4goifvswup39jw 15





继续6*12px的矩形堆在上面
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851pkly5flcs5gltg11 16





最后一根14px长,4px宽的直线矗立在顶端
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851rkpx11tw15c4y12l 17





终于建筑的大概轮廓出来了。

STP3:绘制建筑的细节(高光,阴影啥的)

如下图所示,2px高的白条使得建筑显得有立体感一些
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851x2rnmgj8hem9b6v9 18




太亮了点,降低点不透明度,调为60%
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851bnu99l1mt6tu04l7 19





然后竖着添加一些2px的柱子,每个相隔4px,丰富一下我们的建筑(不然倒了,哈哈哈)
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851c1ahk1yklmmubs8p 20




接着给他们每个楼层添加箱阳台的东西。。
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851urrgv8dz03gya6ax 21





调整一下我们的阳台。。。
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851ammwvzoyrojaoe8o 22





最后,使用直线工具添加些云彩,使建筑看着不那么单调。
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851h7awav7t5a5ixxp5 23





OK,我们的第一个建筑邮票就做好了。

帝国大厦:
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851bxrllsajwrgxdz17 24





嗯,又到了成龙大哥的表演时间了。。。

Duang
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851fbrhgx08xb2e6whq 25



克莱斯勒大厦



Duang
AI制作复古风格的邮票小插画 建筑物,分辨率,当当,风格,复古 【UI】 221851pzxy2nctsznib0c2 26



世界贸易中心大厦





OK,本次教程到此就没了,希望大家喜欢。。。(不要打我就好。。。)如果有什么不懂的,欢迎留言讨论。




老规矩,原文链接:

https://design.tutsplus.com/tutorials/how-to-create-a-new-york-buildings-themed-icon-set--cms-28364

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
微信扫一扫,每天教程更新!
想学习最新知识关注“今日教程”微信公众号!站长每天更新教程,每天八条,欢迎关注支持!!!
快速回复 返回顶部 返回列表