视觉设计 » 用AI绘制3D渐变效果的网页BANNER

用AI绘制3D渐变效果的网页BANNER

发表于: 视觉设计. 评论
Sponsor

本文教大家一个不错的3D渐变效果,学会它可以用在网页BANNER设计、海报设计等项目。

使用工具:Adobe illustrator CC
教程难度:简单
核心练习:混合工具运用、渐变配色工具使用、色感练习

用AI绘制3D渐变效果的网页BANNER

1、绘制参考线:

绘制参考线要注意由小到大,这样画出来的线才好看哦!

Tips: 快捷键 Ctrl + ; 可以隐藏/显示参考线

用AI绘制3D渐变效果的网页BANNER

2、画曲线:

使用「钢笔工具」通过参考线绘制出波浪形的曲线。

用AI绘制3D渐变效果的网页BANNER

3、绘制圆:

绘制两个圆,大小、间距如下图,并设置水平居中。

用AI绘制3D渐变效果的网页BANNER

4、添加渐变色:

用AI绘制3D渐变效果的网页BANNER

5、混合渐变:

a.选择两个圆,点击菜单「对象-混合-建立」

用AI绘制3D渐变效果的网页BANNER

第一次建立的混合渐变可能是这样子的:

用AI绘制3D渐变效果的网页BANNER

b. 修改混合渐变,点击菜单「对象-混合-混合选项」选项和参数如下图:

用AI绘制3D渐变效果的网页BANNER

6、替换混合轴:

选中曲线和混合渐变对象,点击菜单「对象-混合-替换混合轴」。

用AI绘制3D渐变效果的网页BANNER

此时就会变成下图的样子:

用AI绘制3D渐变效果的网页BANNER

7、调整大小:

按照透视的远小近大原理,我们把右边的圆圈放大(双击圆就能选中)

用AI绘制3D渐变效果的网页BANNER 用AI绘制3D渐变效果的网页BANNER

8、调整渐变:

用AI绘制3D渐变效果的网页BANNER

反复调整,直到好看为止。

用AI绘制3D渐变效果的网页BANNER

9、添加投影效果:

注意投影的透明度。

用AI绘制3D渐变效果的网页BANNER

用AI绘制3D渐变效果的网页BANNER

10、添加渐变背景:

Tips: 渐变配色可以到设计导航的「配色」栏目找渐变灵感哦!

用AI绘制3D渐变效果的网页BANNER 用AI绘制3D渐变效果的网页BANNER

11、加入修饰文字:

如果没有点缀就会显得单调,所以加一点文字作为装饰效果。

完成!最终效果图:

用AI绘制3D渐变效果的网页BANNER

总结

看似10多个步骤,实际上是很简单的,难点在于色彩的调整,如果色彩不好调整,可以到设计导航的「配色」栏目找渐变配色网站来获得灵感。

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }