ps制作一个逼真的空调调节器旋钮开关ui图标教程

问题描述:

本教程教脚本之家的各位ps按钮制作学习者使用ps制作一个逼真的空调调节器旋钮开关ui图标的方法,教程应用最多的依旧是图层样式,打造的效果非常逼真,推荐到脚本之家一起分享学习

最近,真是越来越热了,记得上欠我们画了个空调吗?今天,带大家做一个空调调节器的图标,就图标来说,应用最多的依旧是图层样式,今天的文章说实在的,新的东西也很少,还是老一套,最多图层组的知识点,算是一个吧。

PSD文档下载请点击

效果图:

ps制作一个逼真的空调调节器旋钮开关ui图标教程

主要过程:

下面,正题开始,创建一个渐变背景,我做了一个从#c1ccd2到#eaeaea的90度线性渐变。

ps制作一个逼真的空调调节器旋钮开关ui图标教程

复制一层渐变图层,转智能对象,添加杂色。

ps制作一个逼真的空调调节器旋钮开关ui图标教程

执行“滤镜—风格化—浮雕效果”。

ps制作一个逼真的空调调节器旋钮开关ui图标教程

将图层混合模式修改为“叠加”,这时我们得到一个类似墙壁的纹理背景。

ps制作一个逼真的空调调节器旋钮开关ui图标教程

新建一个渐变调整层,颜色设置请参照图片上的参数,将这个渐变调整层的图层混合模式更改为“叠加”。

ps制作一个逼真的空调调节器旋钮开关ui图标教程

至此,我们的背景完成了,下面,我们开始图标的制作,首先画个圆角矩形,我给它添加了斜面浮雕、渐变叠加、投影,三个样式。

ps制作一个逼真的空调调节器旋钮开关ui图标教程

ps制作一个逼真的空调调节器旋钮开关ui图标教程

ps制作一个逼真的空调调节器旋钮开关ui图标教程

ps制作一个逼真的空调调节器旋钮开关ui图标教程

复制一层圆角矩形,移到下层,清除掉图层样式,将填充更改为0,我们再次添加一个投影图层样式,强化阴影。(这里需要说明的,CC2015的版本开始可以添加多个图层样式,但是为了避免低版本的PS打开PSD会出错,我们的做法都是按照低版本的操作)

ps制作一个逼真的空调调节器旋钮开关ui图标教程

ps制作一个逼真的空调调节器旋钮开关ui图标教程

接下来,用椭圆工具画一个正圆,这里,圆的位置,我选择在了右侧,选择在右侧的原因是因为有参考了一个实际存在的空调品牌的调节器。因为等会的旋纽的位置,是要与图标对齐的,所以现在,圆的位置有超出了图标一点,一会我们再完善,我为这个圆添加了内阴影、内发光、渐变叠加以及投影四个样式。

ps制作一个逼真的空调调节器旋钮开关ui图标教程

ps制作一个逼真的空调调节器旋钮开关ui图标教程

ps制作一个逼真的空调调节器旋钮开关ui图标教程

ps制作一个逼真的空调调节器旋钮开关ui图标教程

ps制作一个逼真的空调调节器旋钮开关ui图标教程

下面,我们来画旋纽,同样的是使用椭圆工具画个正圆,圆的右侧,对齐图标右侧,我为其添加了斜面和浮雕、渐变叠加以及投影,三个样式。

ps制作一个逼真的空调调节器旋钮开关ui图标教程

ps制作一个逼真的空调调节器旋钮开关ui图标教程

ps制作一个逼真的空调调节器旋钮开关ui图标教程

ps制作一个逼真的空调调节器旋钮开关ui图标教程

跟刚才给图标主体增强阴影效果一样,现在我们复制一层旋纽图层,清除图层样式,下移一层,将图层填充修改为0,添加一个投影样式。

ps制作一个逼真的空调调节器旋钮开关ui图标教程

ps制作一个逼真的空调调节器旋钮开关ui图标教程

接下来,我们添加空调温度文本,首先,我以按纽的中心点为中心,利用Ctrl+Alt+Shift+T,我们可以轻易的得到我下图中的文本位置参考。

ps制作一个逼真的空调调节器旋钮开关ui图标教程

以这个红色的矩形位置以参考,打上温度的文本,隐藏或者删除掉位置参考的这个图层。文本我用的颜色是#6cbebb,是为了与刚才我们所做的旋纽圆槽保持一致。我为所有文字添加了内阴影和投影,这个我想不需要再截图了吧,差不多每一次的图标教程我们都会用到,如果你还真不会的话,看看我们提供的PSD吧。

ps制作一个逼真的空调调节器旋钮开关ui图标教程