安卓篱笆

  • 400-800-1234
  • 为您定制专业的垂直门户
搜索
猜你喜欢
查看: 3375|回复: 0
打印 上一主题 下一主题
收起左侧

UI设计教程之啤酒杯UI图标教程

[复制链接]

308

主题

307

帖子

1097

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1097
跳转到指定楼层
楼主
发表于 2018-1-4 11:24:19 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,,享用更多功能,让你轻松玩转本站。

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

x
终于知道翻译教程的酷友是多么的伟大了,真的是好麻烦啊!不试不知道啊!d但愿大家能看懂!


                               
登录/注册后可看大图


创建一个1200*1200px,分辨率为72px/inch的文档。双击背景图层,添加渐变叠加图层样式


                               
登录/注册后可看大图


下载玻璃形状,按下图标注添加形状#1-350*624px;#2-326*472px;#3-196*455px;#4-286*116px;#5-216*16px;#6-285*111px;#7-405*272px;


                               
登录/注册后可看大图


仅保留形状1隐藏其他图层,为其添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


显示形状2,使用椭圆形状减去顶部,减去的这部分作为啤酒的泡沫层(复制刚刚得到的形状2,将减去改成相交即可得到泡沫层,最后在合并形状组件)


                               
登录/注册后可看大图


给形状2添加渐变叠加样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图


复制形状2图层并添加渐变叠加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图


再次复制形状2添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


第三次复制形状2,CTRL+T向左向右拉伸到玻璃瓶最外沿,选中选区部分添加图层蒙版


                               
登录/注册后可看大图



                               
登录/注册后可看大图


第四次复制形状2,减去顶部,仅保留图上部分,添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


复制形状2拷贝5图层,添加斜面与浮雕样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图


显示泡沫层添加渐变叠加样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图


显示形状6添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


显示形状4添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


下图形状应该不难创建吧,这里就不多说了,直接添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图


同理添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图


载入选区,创建一个新的空白图层,编辑-描边-10px白色


                               
登录/注册后可看大图


删除底部选区部分,仅保留顶部部分,添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


显示形状5添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


显示形状3添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


创建如下三个椭圆路径,新建图层,填充颜色,减去选区以外的部分,填充不透明度为0添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


复制形状3添加斜面与浮雕效果


                               
登录/注册后可看大图



                               
登录/注册后可看大图


再次复制形状3添加斜面与浮雕效果


                               
登录/注册后可看大图



                               
登录/注册后可看大图


创建新的把手层,减掉选区以外的部分,然后添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


创建把手组,然后复制把手组,合并把手组CTRT+T水平翻转,使用自由变换工具调整,然后设置叠加模式


                               
登录/注册后可看大图



                               
登录/注册后可看大图


显示形状7添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


复制形状7添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


再次复制形状7添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图


第三次复制形状7添加渐变叠加图层样式移动到形状7图层底部作为投影层,向左向下各移动2像素,然后滤镜-高斯模糊0.6,创建图层蒙版擦除不需要的部分


                               
登录/注册后可看大图



                               
登录/注册后可看大图


新建空白图层,设置画笔,用吸管选取合适的颜色,绘制泡沫纹理


                               
登录/注册后可看大图



                               
登录/注册后可看大图


新建空白图层,设置画笔,在选区内绘制泡沫纹理并添加图层样式,重复操作一到两次,使效果更加


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


复制杯体并合并图层组然后设置编辑-调整-对比度-35;滤镜-模糊-高斯模糊+6;滤镜-杂色-添加杂色+3;滤镜-扭曲-玻璃


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


为了使效果更佳下载并添加特殊的纹理层。打开通道面板。选择红色通道并点击小图标加载选区,回到图层面板,给玻璃层添加图层蒙版。


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


开始绘制水珠,新建空白图层首先设置画笔工具,然后添加图层样式


                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图



                               
登录/注册后可看大图


添加投影,分别合并杯体和把手图层,垂直翻转,然后对杯体进行变形(凸起变形模式)


                               
登录/注册后可看大图



                               
登录/注册后可看大图


合并把手与杯体添加图层蒙版,并对选区部分设置高斯模糊滤镜+3,使投影更加自然


                               
登录/注册后可看大图


最后添加一个t椭圆投影


                               
登录/注册后可看大图



                               
登录/注册后可看大图


大功告成! 教程很长,希望你们可以认真学习,欢迎加入UI设计群587751709
回复

使用道具 举报

*滑动验证:
使用 高级模式(可批量传图、插入视频等)
您需要登录后才可以回帖 登录 | 立即注册

关闭

站长推荐上一条 /3 下一条

快速回复 返回顶部 返回列表