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

发布于:2018-01-23 15:12

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

显示形状6添加图层样式

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

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

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

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

显示形状4添加图层样式

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

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

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

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

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

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

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

同理添加图层样式

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

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

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

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

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

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

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

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

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

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

显示形状5添加图层样式

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

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

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

显示形状3添加图层样式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

显示形状7添加图层样式

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

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

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

复制形状7添加图层样式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最后添加一个t椭圆投影

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

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

大功告成! 教程很长,希望你们可以认真学习





—————————————————————我是一条分割线——————————————————————

《免责声明》本网站转载的文章遵循原作者的版权声明,如果原文没有版权声明,按照目前互联网开放的原则,我们将在不通知作者的情况下,转载文章;如果原文明确注明“禁止转载”,我们一定不会转载。如果我们转载的文章不符合作者的版权声明或者作者不想让我们转载您的文章的话,请来信告知,邮箱:496976599@ qq.com;电话:18819171618。 本网站转载文章仅为传播更多信息之目的,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。 任何透过本网站网页而链接及得到的资讯、产品及服务,本网站概不负责,亦不负任何法律责任。 本网站所刊发、转载的文章,其版权均归原作者所有,如其他媒体、网站或个人从本网下载使用,请在转载有关文章时务必尊重该文章的著作权,保留本网注明的“稿件来源”,并自负版权等法律责任。

共有3条评论
正序查看
倒序查看
回复
1
永远的拼笑 2018-02-04 23:03
回复

2

華子 2018-02-05 09:54
回复
3

回复:UI设计教程之啤酒杯UI图标教程

图片
视频

0

今日新帖

0

昨日新帖

59

帖子总数