设计教程 ·

【PS设计教程】之塑料开关PS设计,适合UI初学者

以下这篇教程是由我们的SKYUI同学从国外设计博客翻译过来的。如有不明白之处,请留言或坯砖?呵呵

ps软件:PS CS5

难易度:初学者

耗时:1小时

最终成品

2

1. 创建背景

创建新文件,宽度400,高度300,分辨率72Dpi

4

 

创建新组,命名为背景,用矩形工具画一个比画布稍微大一点的矩形,就像下面这样,颜色设置为#ffffff

6

 

设置以下的图层样式。

 

8

 

“斜面和浮雕”参数:“内斜面” “平滑” 高光模式:滤色  阴影模式:正片叠底

10

 

 

“颜色叠加”参数

12

 

“渐变叠加”参数 勾选反向

 

2. 创建按钮

 

创建新组,命名为Base。使用钢笔工具画出如下的形状,颜色设置为#242424,并应用图层样式。

14

15

 

“内阴影”参数:正片叠底

17

 

“外发光”参数

19

 

“斜面和浮雕”参数:高光模式:滤色 阴影模式:正片叠底

创建一个新组,命名为Button。使用钢笔工具画出如下形状,颜色为#ada397,应用以下图层样式。

21

22

 

“内阴影”参数:

创建一个新图层,

使用钢笔工具,画一个黑色形状。滤镜->模糊->高斯模糊->1.5像素。如下

24

 

 

橡皮擦工具大小58,硬度0,擦掉模糊形状的左边,下图中的红色区域,不透明度18%,效果至满意为止。如下

 

26

 

创建一个图层,选择画笔工具。大小15像素,硬度0,颜色设置为#92897f,如下画一条直线。

28

 

创建新图层,选择钢笔工具,画出下图形状,颜色#c8b7a5,滤镜->模糊->高斯模糊->1.5像素。如下

30

 

橡皮擦工具大小58,硬度0,擦掉模糊形状的左边,下图中的红色区域。效果至满意为止

32

 

 

选择画笔工具,大小13像素,硬度0,颜色#c8b7a5,画直线如下图。

 

34

 

创建一个新图层,钢笔工具,画出下图形状,颜色#000000,滤镜->模糊->高斯模糊->1.5像素。如下

36

 

橡皮擦工具,大小58像素,硬度0,擦下图的红色区域。效果至满意为止

38

 

图层模式滤色,不透明度80%    

创建新图层,钢笔工具画出形状,颜色#000000,滤镜->模糊->高斯模糊 1.5像素。不透明度20%

40

 

 

创建新图层,用画笔工具画高光,大小2像素,硬度0,颜色#d5c8b5,在按钮左边画几个小点。

42

 

再创建一个图层,用钢笔工具加点细节,颜色#dbcebe,如下画出3个形状或更多。

44

 

 

创建一个新组,位于Base组之下,命名为Shadow。使用钢笔工具,画出形状如下图,颜色#000000.滤镜->模糊->高斯模糊->1.5像素。不透明度20%

46

 

 

橡皮擦工具,大小58像素,硬度0,擦红色区域,效果至满意为止。

48

最终结果

 

50

 

参与评论