ps教程论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 9320|回复: 19
收起左侧

[UI设计] 教你设计复古风格电视图标教程

[复制链接]
发表于 2015-12-4 21:34:21 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

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

x
运用图层样式设计出来的图标,效果挺好看的,提供了PSD文件,适合新手学习,喜欢的可以练习一下。做完交作业。这里再次强调一点,图层样式中的参数设置是对应其相应图层的,受图层大小尺寸影响,在不同尺寸下,效果呈现是不同的。比如说,同样一个5像素的描边的图层样式,在10像素的圆和100像素的圆下,其表现效果肯定是不一样的。所以,四个字:活学活用。源文件链接:
http://pan.baidu.com/s/1qW06AGs
密码:kfbm首先,我们看看原图,一个400*300的小图。

作者:P大点S 出处:pdadians
 楼主| 发表于 2015-12-4 21:34:21 | 显示全部楼层
新建一个1000*800的文档,添加一个渐变调整层,做一个#b4b097到#4e473a的90度的径向渐变,设置缩放为150%,勾选仿色,防止出现色块。

回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-12-4 21:34:21 | 显示全部楼层
使用圆角矩形工具画一个600*600像素的圆角矩形,设置圆角为140像素,设置水平居中,垂直居中。

回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-12-4 21:34:21 | 显示全部楼层
复制一层“主体”图层,更改图层名为“投影”,将“投影”图层置于“主体”图层下层,将图层填充设置为0,再添加一个图层样式,我们来增强一下投影效果。



回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-12-4 21:34:21 | 显示全部楼层
原图画的是一个类似椭圆的形状,我这里偷懒一下,还是画的圆角矩形,大小为500X360像素,圆角半径为130像素,添加一个图层样式。





回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-12-4 21:34:21 | 显示全部楼层
下面,我们创建屏幕,设置前景色为#b4b097,使用圆角矩形工具,画一个大小为420*280像素,圆角半径为100像素的圆角矩形。

回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-12-4 21:34:21 | 显示全部楼层
为这个“屏幕”图层添加一个图层样式。









回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-12-4 21:34:21 | 显示全部楼层
用两个屏幕的那个圆角矩形相减,得到我们需要的屏幕下部的高光形状,将这个形状的颜色设置为#eaead2,在属性面板中设置一个1像素的羽化,并将图层混合模式更改为“柔光”,不透明度34%。

回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-12-4 21:34:21 | 显示全部楼层
设置前景色为#eaead2,用屏幕的那个圆角矩形和一个椭圆相交,得到我们需要的屏幕顶部的高光形状,同样的将图层混合模式更改为“柔光”,不透明度34%,并添加一个图层蒙版,适当的擦拭左右两侧。

回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-12-4 21:34:21 | 显示全部楼层
我想大家一定很好奇,我的截图径向渐变中的浅色为何不居中,而是位于中部居上,看我们的GIF演示。在渐变填充的状态下,我们把鼠标指针放置到屏幕上,出现那个移动工具的图标时,我们拖动,渐变的位置也跟着动,这一个操作方法,在图层样式中一样可用。

回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-12-4 21:34:21 | 显示全部楼层
我将这个圆角矩形命名为“主体”,并为其添加了一个图层样式。









回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-12-4 21:34:21 | 显示全部楼层
复制一层“屏幕”图层,转智能对象,添加一个杂色,并将图层混合模式更改为“柔光”。

回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-12-4 21:34:21 | 显示全部楼层
下面,我们来制作按纽,设置前景色为#b4b097,画一个正圆,并添加一个图层样式。



回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-12-4 21:34:21 | 显示全部楼层
设置前景色为#d9d0ca,画一个小一点的圆,并添加一个图层样式。







回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-12-4 21:34:21 | 显示全部楼层
复制一层“按纽”图层,更改图层名为“投影”,将图层填充设置为0,再添加一个图层样式,我们来增强下投影效果。



回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

求建议和反映问题|小黑屋|免责声名|Archiver|photoshop教程论坛 ( 粤ICP备07017357号 )

GMT+8, 2024-12-22 10:01 , Processed in 0.043456 second(s), 11 queries , XCache On.

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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