记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航

[UI教程] PS使用图层样式制作电话拨号按钮教程[含19P]

[复制链接]
发表于 2017-5-29 22:18:31 | 显示全部楼层 |阅读模式
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456v4w6p546a66ma5ff 1


关键是要找准突出的小细节,如阴影,照明,和挤压的边缘。在本教程中,您将学习如何使用形状图层和图层样式制作电话拨号按钮!
步骤1
开始新建一个600*600的图层。
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456w06xxeen1xzmmucc 2


步骤2
制作键盘的背景。首先创建一个图层“背景”和填充颜色# 363636
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456p5n0izhc1hphsq1k 3


步骤3
添加一些纹理的背景。复制背景层,命名为“学UI设计网 副本”滤镜>杂色>添加杂色,数量:60%,分布:平均分布,单色:选中,设置“学UI设计网 副本”层,模式:叠加,不透明度设置15%左右。
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456zwwia3co8cchlzbv 4


PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456z4p4sf8tvap3s6s4 5

步骤4
背景添加一个渐变灯光效果。设置前景色为白色。复制“学UI设计网副本”层,命名它为“梯度”。设置图层的填充为0%。图层样式>渐变叠加,混合模式:叠加,
样式:径向,
角度:90,
范围:117%,设置渐变颜色为前景色到透明(这就是为什么我们的前景为白色)。设置“梯度”层的叠加,不透明度设置15%左右。
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456art8t1pb2r61brdz 6
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456d559nkd5vyohbvvd 7


步骤5
现在,让我们开始创建拨号按钮。用椭圆来创建一个小圆圈。这将是按钮外的影子,我命名为“学UI设计网 圆”按钮(外)。”我的是约76像素。设置图层的填充为0%。图层样式斜面和浮雕,
样式:外斜面,
深度:441%,
方向:下,
大小:10px,
角度:90
高度:60;
全局光:勾选。
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456wjjjstb5pc60151t 8


现在,我们有我们的拨号按钮看起来像这样的外部:
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456dp3xelkv3eve7i3v 9


步骤6
让我们内部的按钮。复制“学UI设计网 圆(外)”的形状,并重新命名为“学UI设计网 圆(内)”。设置”按钮(内)“形状图层的颜色(# 363636),设置填充不透明度为100%
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456u8lvd35ihlg3j3j5 10


步骤7
现在我们调整的图层样式。首先,我们先对“按钮的投影设置如下:
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456v58esy9qqdd798sy 11


步骤8
现在让我们调整“按钮内阴影(内)“形状图层。
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456auxcpca350z5ca0p 12


步骤9
现在我们要调整“按钮内发光(内)“形状图层。PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456ubto4ooznbroobbl 13
步骤10
现在让我们改变斜面和浮雕的“按钮设置(内)“形状图层。
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456hoooop8vtt1j22vj 14


步骤11
现在让我们改变“按钮渐变叠加设置(内)“形状图层。
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456phryy6hqbjwpihdl 15


现在,调整后的所有这些层的设置,我们应该有这样的事情:
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456jt9bp9qtn9bnzr9q 16


步骤12
增加数字和字母的拨号。PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456qhh0hqq8cvn9epcq 17
步骤13
组数和字母键,我们已经创建了一组(快捷键:ctrl+g)
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456mhkd61fd3h8hhk96 18


结论
现在你可以简单地复制图层组和变一下数字和字母的就可以了!你可以使用最终的图像作为参考,看看数字对应的字母。
PS使用图层样式制作电话拨号按钮教程 灯光效果,UI设计,透明度,电话,制作 【UI】 222456ixpe08ycm6c8x1mc 19
本文章来源【学UI设计网http://www.xueuisheji.com/?p=4484

本帖子中包含更多资源

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

x
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表