提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
立体化的按钮操作并不难,主要是把按钮体积感及高光刻画出来,制作之前最好先了解清楚高光、暗部构成及环境光表现,这样制作的效果就会逼真很多。方法有很多哦,也欢迎朋友们补充意见。
今天我们就以上图为演示来操作步骤,这里使用的设计工具是「行空设计」,这是一款专为产研团队研发的设计协作平台,操作顺畅,页面简洁,兼容Sketch,复制链接:https://xk.design?c=huicn 至PC端即可使用,边看边操作效果更佳哦,文章底部附有源文件链接,大家需要的自取哈~
—————————————————————————
新建画板并填充颜色,随后用形状工具绘制大、小两个圆,画出大致图案。
画板:326*271px;填充#828282
大圆:206*206px 小圆:206*206px
为了使立体效果更逼真,我们可以绘制两个比上方大圆与小圆更小一点的圆,凸出厚度与质感。另外这里的高光我们可以用填充渐变色以及内阴影来完成。
大圆:线性渐变填充#525252-#EBEBEB;
内阴影#000000、不透明度80%、大小『5、-6、12、0』;
内阴影#FFFFFF、不透明度80%、大小『-4、6、10、0』
大圆凸面:线性渐变填充#575757-#333333;内阴影#9E9E9E、大小『2、0、5、0』;高斯模糊2
小圆:线性渐变填充#BFBFBF-#6E6E6E;
内阴影#000000、不透明度40%、大小『2、-3、5、0』;
内阴影#FFFFFF、不透明度70%、大小『-2、4、8、0』。
小圆凸面:线性渐变填充#6E6D6D-#BDBDBD;内阴影#E8E8E8、大小『2、-3、6、0』;高斯模糊2。
利用外阴影给大圆以及小圆分别增加一层投影,使得按钮更加真实。按钮上的字体同理,填充颜色后利用外阴影打造亮部与暗部。
大圆:外阴影#000000,、不透明度80%、大小『-18、20、40、0』
小圆:外阴影#000000,、不透明度50%、大小『-6、6、12、4』
X:默认字体、大小72、字距0.4、填充色#DBCBC0;
外阴影#FFFFFF、大小『-1、0、0、0』;外阴影#000000、不透明度50%、大小『-1、-1、1、0』
以上就是立体按钮的教程啦,复制链接:https://xk.design?c=huicn 至PC端查看源文件,大家有其他疑问可以在评论区讨论哦~
—————————————————————————
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册