ps教程论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

楼主: 伟~
收起左侧

[UI设计] 设计牛皮质感通讯簿图标教程

[复制链接]
 楼主| 发表于 2014-8-27 02:56:57 | 显示全部楼层

设计牛皮质感通讯簿图标教程

        
步骤 3
接下来的步骤需要1px的网格,编辑>首选项>参考线,网格和切片,设置网格线间隔为1px。将前景色设为#6c1c07,选择矩形工具,创建一个 5 x 376px 的矢量形状,位置如下。


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-8-27 02:56:58 | 显示全部楼层

设计牛皮质感通讯簿图标教程


步骤 4
为上一步的图层添加内阴影,参数如下。





回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-8-27 02:56:59 | 显示全部楼层

设计牛皮质感通讯簿图标教程


步骤 5
将前景色设为#7c2d0c,选择圆角矩形工具,创建一个2 x 7px 的矢量形状,位置如下。


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-8-27 02:57:00 | 显示全部楼层

设计牛皮质感通讯簿图标教程


步骤 6
复制上一步绘制的小圆角矩形(Command/Ctrl-J),把复制的图层向下移动13px。重复这项操作,再添加26个小圆角矩形。完成后,选中这些小圆角矩形,在图层面板中单击右键,合并图层。


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-8-27 02:57:01 | 显示全部楼层

设计牛皮质感通讯簿图标教程

        
步骤 7
为上一步合并后的图层设置如下。











回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-8-27 02:57:02 | 显示全部楼层

设计牛皮质感通讯簿图标教程


五、创建塑料薄片
步骤 1
将网格线间距调整为10px(编辑>首选项>参考线,网格和切片>网格线间隔 )。将前景色设为白色(#ffffff),选择矩形工具, 创建一个100 x 50px的矢量形状,位置如下。将该图层的填充调整为0%,设置图层混合选项如下。








回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-8-27 02:57:03 | 显示全部楼层

设计牛皮质感通讯簿图标教程


步骤 2
现在将网格线间距调整为5px。(编辑>首选项>参考线,网格和切片>网格线间隔)。选择矩形工具,创建一个90 x 40px 的矢量形状,位置如下。保持该图层选中状态,选择椭圆工具, 按住Alt键, 创建一个10px 的圆,位置如下。将该图层的填充调整为0%,按下图设置图层混合选项。 注意:渐变叠加中,黄色数据表示透明度,白色数据表示位置百分比。








回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-8-27 02:57:04 | 显示全部楼层

设计牛皮质感通讯簿图标教程


步骤 3
选择椭圆工具,创建一个10px的圆,位置如下。保持选中状态,选择矩形工具,按住Alt 键,创建一个5 x 10px的形状,如下图。 将该图层的填充调整为0%,设置图层混合选项如下。








回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-8-27 02:57:05 | 显示全部楼层

设计牛皮质感通讯簿图标教程

        
六、添加木纹背景
步骤 1
在图层面板中,选择所有的矢量形状,编成一组。(Command/Ctrl-G)。双击该文件夹,将其命名为通讯簿。按住Alt 键,双击背景图层解锁。将前景色设为#736357,选择油漆桶工具,给背景图层上色,如下图。


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-8-27 02:57:06 | 显示全部楼层

设计牛皮质感通讯簿图标教程


步骤 2
为该图层设置如下混合选项。注意:在图案叠加中添加木纹图案。





回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-8-27 02:57:07 | 显示全部楼层

设计牛皮质感通讯簿图标教程


七、添加阴影和高光
步骤 1
选择圆角矩形工具,将半径设为 5px。将前景色设为黑色 (#000000)创建一个280 x 380px 的圆角矩形,位置如下。


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-8-27 02:57:08 | 显示全部楼层

设计牛皮质感通讯簿图标教程


步骤 2
在图层面板中,右键上一步画出的圆角矩形,转化为智能对象。将该图层放置到通讯簿文件夹下方,将混合模式调整为叠加,然后选择 滤镜> 模糊 >高斯模糊,将半径设为 10px,点击确定。


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-8-27 02:57:09 | 显示全部楼层

设计牛皮质感通讯簿图标教程

        
步骤 3
复制通讯簿文件夹,(Command/Ctrl-J)。选择新的文件夹, 转化为智能对象。将新文件夹放置到通讯簿文件夹之下,将其填充调整为 0% ,设置混合选项如下。








回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-8-27 02:57:10 | 显示全部楼层

设计牛皮质感通讯簿图标教程


步骤 4
再次复制通讯簿文件夹,(Command/Ctrl-J),转化为智能对象,置于原有文件夹上方,把填充设为0%,设置混合选项如下。





回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-8-27 02:57:11 | 显示全部楼层

设计牛皮质感通讯簿图标教程


步骤 5
复制上一步的智能对象,设置图层混合选项如下。





回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-22 14:04 , Processed in 0.043663 second(s), 10 queries , XCache On.

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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