打印 上一主题 下一主题

如何用AI快速制作一个可爱的手机形象教程

  [复制链接]
跳转到指定楼层
#
admin 发表于 2016-9-12 19:16:57 | 只看该作者 |只看大图 回帖奖励 |正序浏览 |阅读模式
中文图文CG教程
行业: UI设计
模块:  
软件/插件: -
版权: 本资源来自互联网,仅供学习交流

马上注册CG织梦网,结交更多CG好友,下载更多CG素材,让你轻松学习。

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

x

What You'll Be Creating

在今天的教程里,我将告诉你如何用AI里最基本的形状和工具并结合混合模式,做出一个可爱的手机插画
让我们开始吧!

1. 创建一个新文件
如往常一样,每个项目的第一件事就是新建文件。 点击 文件>新建 或者使用快捷键 Ctrl+N 来创建一个800*600像素的文件,设置如下:
  • 画板数量:1
  • 单位:像素

高级设置模块:
  • 颜色模式:RGB
  • 栅格效果:屏幕(72 ppi)
  • 使新建对象与像素网格对齐:选中



提示:鉴于我们将要制作像素级完美的插画,我建议你抽出一点时间去阅读我之前的教程“如何制作像素级完美的艺术作品”,那个教程深入解释了如何做到像素级完美,这样你可以快速开始今天的教程。
给文件取一个你喜欢的名字,然后开始下一步。
2. 项目的图层
无论哪个项目,你都应该尽量使用图层,因为图层可以帮助你划分你的设计结构,让你一次专注一个部分,而不必害怕自己不小心移动了或者放错了另一个形状。
那么,假设你已经知道如何使用图层面板了,创建3个图层并给它们如下命名:
  • 图层1:手机形象
  • 图层2:四周点缀
  • 图层3:渐变覆盖





3. 开始制作可爱的形象
我们先制作可爱的小手机形象,看完后面的步骤,你就会知道这个过程真的很简单。

步骤1
定位在第一个图层,然后使用圆角矩形工具创建一个168*314像素的圆角矩形,其中圆角大小为20像素,颜色为#64c4f1,然后把形状与画板对齐居中。




步骤2
选中该圆角矩形,点击 对象>路径>偏移路径 然后输入6px偏移值,这样给该形状一个边框。 其他的设置保持默认值,然后点击确定
步骤3


把边框的颜色设为较深颜色#1b456b来区分边框和主体。




步骤4
使用矩形工具(M)创建一个230*140像素的矩形(颜色#659def),作为显示屏,然后给它一个6像素的粗边框(颜色#1b456b) 选中以上两个形状,把它们与手机机身左右居中对齐,屏幕边框与机身边框的上间距为38像素




步骤5
开始添加一些细节:创建手机顶部的传感器(颜色:#1b456b),旁边的按钮(颜色:#1b456b)和底部的圆形按钮(边框颜色:#1b456b;填充颜色:#519fc4)。




步骤6
使用椭圆工具(L)制作两个18*18像素的圆(#1b456b)作为眼睛,它们的间距为60像素
再制作另一个28*28像素的圆作为嘴巴,把填色切换为描边(选中形状>Shift+X),然后把它切半,描边粗细设置为6像素
把嘴巴放在眼睛正下方,然后组合(Ctrl+G)眼睛和嘴巴,再把它们与屏幕居中对齐。




步骤7
添加脸颊,制作两个20*20像素的圆(#4f8bd3),它们放置在眼睛下方,然后往外移几个像素。




步骤8
手机主体已经完成的差不多了,我们接下来为手机添加一些高光和阴影的细节。
选中手机的最大的浅蓝色的圆角矩形,复制(Ctrl+C > Ctrl+F),然后点击 对象> 路径> 偏移路径 并输入-4px的偏移量来创建内部的偏移量。
然后选中之前复制的圆角的矩形和偏移的圆角矩形,在路径查找器面板择减去顶层形状,从而制作一个环形的高光,把它的颜色设为白色(#ffffff),并把混合模式调为柔光不透明度调为80%



步骤9
与之前步骤的数值一样,在手机的右上方添加两条竖高光和在屏幕外边框下添加一条4像素粗的横高光。




步骤10
在屏幕和Home键内部添加一些阴影,颜色是黑色(#000000),不透明度14%




步骤11
最后添加屏幕的对角线高光(颜色:白色#ffffff;混合模式:柔光;不透明度:30%),再在手机左上角添加两个星星形状的光(颜色:白色#ffffff;混合模式:柔光;不透明度:80%)
选中所有的形状,然后点击Ctrl+G把它们合并成组。




步骤12
在手机下面添加一个144*10像素的椭圆,把它的颜色设为黑色(#000000),把不透明度降低为20%



我们已经很好地完成了我们插画的主体,接下来在第二个图层上制作一些小小的图案,让整个画面显得更好更平衡。

4. 制作四周的图案
这一部分很简单也很有趣,因为你得制作很多形状,比如方形、圆形、十字、三角形、菱形等,然后你把它们点缀在手机两侧来得到一个好看的图案。
把这些形状的描边粗细设置为4像素,颜色为#1b456b,然后好好地摆放它们,使它们不仅看上去好玩,而且看上去统一一致。




5. 添加渐变覆盖层
我们添加完手机四周的图案后,就可以开始最后一部分了,最后一部分是要制作并覆盖一个渐变层,这样我们插画的颜色可以更突出。

步骤1
复制手机主要的形状(包括最外边框和旁边的按钮)和手机周围的图案(你需要点击 对象>扩展>填充和描边 来扩展这些图案),然后把它们粘贴到第三个图层。
然后选中所有的形状,点击 对象>复合路径,再点击建立。 这样可以使你所有的形状作为一整块,这正是我们想要的,因为我们接下来就要把渐变覆盖在它们上面。




步骤2
选中我们刚刚制作的复合路径,然后创建一个线性渐变,从#0000ff到#00ffff,保证角度设为了90°




步骤3
最后,调整渐变,把混合模式调为强光不透明度降低为28%




我们完成啦!
你已经掌握了如何使用一些基本形状和小技巧(渐变混合模式)就制作一个可爱的形象啦。
我希望你们一直在不断地学习新技巧,还有,和往常一样,我期待看见你们制作出来的作品。


22#
xman2008 发表于 2024-1-10 22:36:50 | 只看该作者

谢谢楼主分享
回复 支持 反对

使用道具 举报

21#
xiaoxi2700 发表于 2021-1-13 08:14:57 | 只看该作者
谢谢分享,学习了
回复 支持 反对

使用道具 举报

20#
paltrow 发表于 2019-8-18 15:15:46 | 只看该作者
谢谢楼主分享
回复 支持 反对

使用道具 举报

19#
yarou 发表于 2018-1-23 08:41:15 | 只看该作者
非常不错的教程
回复 支持 反对

使用道具 举报

18#
wjgmr 发表于 2018-1-23 07:48:24 | 只看该作者
学习了,谢谢。
回复 支持 反对

使用道具 举报

17#
蔡明 发表于 2017-12-30 10:09:10 | 只看该作者
非常感谢你的分享。。。。
回复 支持 反对

使用道具 举报

16#
art5783 发表于 2017-12-30 09:01:17 | 只看该作者
謝謝分享好文並附圖解說謝謝版主 !!
回复 支持 反对

使用道具 举报

15#
wjgmr 发表于 2017-3-19 07:19:14 | 只看该作者
学习了,谢谢。
回复 支持 反对

使用道具 举报

13#
445749557 发表于 2016-10-21 15:15:57 | 只看该作者
非常感谢,感谢分享
回复 支持 反对

使用道具 举报

12#
crazybirds7 发表于 2016-10-12 07:38:55 | 只看该作者
非常感谢,感谢分享
回复 支持 反对

使用道具 举报

11#
crazybirds7 发表于 2016-10-10 09:02:45 | 只看该作者
挺棒的,谢谢分享
回复 支持 反对

使用道具 举报

10#
xiaodong杀 发表于 2016-9-23 12:04:51 | 只看该作者
好教材  感谢   搂住好教材  感谢   搂住
回复 支持 反对

使用道具 举报

9#
dongknne 发表于 2016-9-15 00:40:39 | 只看该作者
好东西,谢谢
回复 支持 反对

使用道具 举报

8#
dongknne 发表于 2016-9-15 00:40:17 | 只看该作者
好东西,谢谢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

精彩图文
在线客服(工作时间:9:00-22:00)
18916069001
织梦网微信公众号

Copyright   ©2015-2016  CG织梦网  Powered by©Discuz!  技术支持:织梦网