前段时间，写了一篇利用 PS 制作 C4D 质感图标的方法，简单分享了一些在拟物风格中的小方法与小技巧。

PS：点开我的UI中国主页，就能看到上篇文章了。

很多小伙伴在看完上篇，都觉得挺有意思，喜欢这种光影的刻画。所以今天，我又给大家带来了一篇关于光影刻画的原创方法文章，不辜负小伙伴们的关注。

先晒一张Photoshop界面，证明一下确实没偷懒 ~

好了，去掉参考线，咱们来看看今天要分享的这幅作品真实样子

上面这幅作品是白色表盘的，再看看换肤之后黑色表盘的。

还可以再搭配上彩色的UI界面，也很精致。

这三幅作品，从表盘、到界面、再到金属质感边框，以及皮带，均使用PS制作而成。方便大家学习，PSD分享给大家下载，不限制用途。

因为PSD大概有个60M，UI中国不支持≥20M的附件，所以需要大家移步一下微信，搜索UX小学，关注公众号后，发送关键词『 手表PSD 』就能下载啦。

嫌搜索麻烦的，点开文末的附件下载，就能看到下载地址了。

接下来，我会一步一步对这个作品进行拆解，分析在设计这个作品时候的一些思路，以及一些使用软件的技巧。

算了下，从构建思路，到绘制完成，三张作品一共耗时 2.5h，不算太难。

整个作品的步骤大纲如下：

1、绘制外轮廓

2、绘制金属表盘

3、金属挂扣、皮带质感营造

4、光影氛围及细节处理

5、界面的绘制及细节

如果 Photoshop 不熟练，建议提前打开PSD进行对照（微信搜索UX小学，关注发送" 手表psd "就能下载)，这样结合起来看，更容易理解些。

新建文件

第一步当然是先打开PS，毋庸置疑。

然后新建一个画板，因为我想绘制个高清的，所以这里设定的尺寸是1500x1500

为了保证咱们的表盘能够在画面正中央，需要先拉两根辅助线在屏幕的正中间，后面所有的对齐、旋转，包括对称的中心点都需要围绕这两条辅助线的交点。

绘制轮廓

接下来，咱们开始绘制轮廓，可以先从表盘开始，表盘的大小没有严谨的数值，可以根据自己的感觉来调，但尽可能在画面里饱满一些为好。

第一步要绘制的表盘一共需要绘制三个圆，分别是外框、内框，和表盘的盘心，盘心需要叠加在最上面，看不清的同学可以戳下方图片进行放大。

三个图层好了后，接下里就是使用矩形画出表带的区域，这里表带尽量不要画的太粗，细一点的表带更能衬托表盘的饱满。

然后再使用圆角矩形，绘制出表盘与表带中间衔接用的卡扣，这里注意一下比例，卡扣也不宜太大，大了后会略显粗糙。

好了后使用路径选择工具，对卡扣进行调整，注意卡扣上方要窄一些，下面宽一些。与表带衔接的那一边，需要紧贴对齐，所以这里我用矩形工具将左边裁了一下。

再调整一下圆角及路径的细节，尽量让卡扣看起来比较和谐舒服。

再使用路径合并工具，把多余的部分合并掉，让这个图层有一个独立形状就好。

接着用 Alt 键依次复制出剩余三个卡扣，Command+t 变换后右键使用水平翻转及垂直翻转等功能，来让四个卡扣能完整对齐。完成后再把卡扣打组，利用 Command+a 选区，把卡扣组完整的对齐画面，如下图所示：

卡扣完成后，接着再使用圆角矩形工具，绘制出表盘侧边的按钮，这里需要注意的是按钮的圆角不宜过大，尽量不要超出露出来的宽度部分。

复制一个到右边，然后按住Conmand+T，使用Alt把旋转中心点定位在屏幕中央，把按钮逆时针旋转30°C，得到下图所示：

‍‍‍‍‍‍‍同理，再复制一个，顺时针30°C旋转得到右边下方的按钮，这样手表的基础形状就绘制好了，路径也就下面这些了。‍‍‍‍‍‍‍

这里需要注意的是，绘制手表基础形状的时候，需要有一定的耐心，来不断调整各个元部件之间的大小，直到一个比较舒适的比例为止。

基础形状好了后，接下来就是开始刻画各个元素的影调，基础的光影关系，以及相应材质的基础质感。

金属表盘的刻画

接下来就是对局部的细节进行打磨啦。

先给表盘的内框，添加一个渐变，拉出亮部及暗部。由于画面氛围设定光源在上方，所以凹进去的那一面，暗部自然在上方，亮部则在下方。

接着再给外框添加渐变，因为外框是凸出来的，所以光照打下来后，外框的亮部是在上方，暗部则在下方，一定要注意渐变角度。

接下来再给表盘的盘心添加一个微弱的渐变，因为盘心虽然是平的，但是表盘的上方离光源更近，自然则要更亮一些。

表盘的边框部分光影基础部分绘制完成后，咱们开始给卡扣添加金属质感。

金属挂扣与皮带的细节刻画

金属材质的特点是高光部分很亮，暗部较黑，反射能力较强，所以我们可以先调整出亮部部分，这里我借用图层样式里面的内阴影功能，在卡扣的右上角，先添加了一层反射的高光。

接着再使用内阴影功能，叠加一层暗部上去，覆盖在高光上面。这个时候，卡扣的暗部暗下去了高光也比较亮，已经初步具备了金属的质感特色。

再使用相同的手法，给左边的卡扣，也添加上质感。这里需要注意一下高光及阴影的角度，是需要跟右边的对称的，比如上图右边的角度是54°，那么下图左边的则为90+（90-54）=136°，这样两个卡扣看起来就比较对称了。

再给下面两个卡扣添加质感，因为下面的卡扣受光源影响，会受到表盘的阴影所覆盖，所以下面的卡扣咱们先添加阴影，还是使用内阴影的这个功能，参数可以自己调，也可以参考我下面配置的这个。

再增添一些高光，注意的是下面的卡扣位于暗部，反射的实际是环境光，不是直接光源，所以这里高光的透明度可以低一点，不需要那么亮。

再依次给剩下的卡扣添加质感，这样四个卡扣的基础质感就好了，虽然看起来有点不太和谐，不过没关系，后面再调整细节，先把大感觉铺垫好。

接着再给按钮增添质感，因为按钮的形状是圆状突出的，所以这个时候直接使用一个渐变，要更为合适。渐变的整体节奏为『暗-灰-黑-亮-黑-灰-暗』，高光旁边需要有较深的颜色来进行衬托，这样光滑的金属质感才能立竿见影。

接着，再使用斜面浮雕，跟按钮增加倒角，在按钮对外的那一侧，稍微给圈光亮，这样按钮的层次就有了。这里有点需要注意的是，左边的按钮倒角为亮部，而右边按钮的倒角，就是暗部需要加黑了。

接着给剩余的几个按钮增加质感，顺便再对卡扣的质感进行微调，把高光区域减少一点，让卡扣平整一些，不要那么显眼，视觉层次往后收一收。让表盘的整体光影，调到一个比较舒适的阶段。

大的影调有了，接下来咱们开始刻画细节，可以从这个金属的表盘开始。先使用斜面浮雕，给外框再增加一些倒角及亮部的细节，让外框变的更为立体。因为是细节，所以不仔细看很难看出差别，这里大家可以把下图与上图对比，就能看到差距了。

接着再使用内阴影，给外框的下面，增添一些反光。反光的亮度不宜太高，比较柔和就可以，让表盘外框的色值与皮带拉开关系。

外框好了后，再刻画内框，先给使用内阴影在顶部增加一层黑色的描边，让内框与外框的明暗交界线更为清晰，再给内框增加底部的倒角高光，让内框与外框的衔接变的更为真实。

这几步的操作会稍微复杂一些，如果看不太懂的同学，建议打开我的PSD，找到内框、外框、表盘这三个图层，对照就能理解了。

接着再使用投影功能，增加一层亮色的描边在顶部的明暗交接处上，这样金属的质感就能一下出来了。

目前看起来似乎是外框没有扣在表盘的盘心上，所以咱们现在要给盘心增加内阴影，也就是金属框在表盘上的夹缝区域。

接着再画出两个圆，给两个圆添加白色到透明色的渐变，让表盘有种玻璃的质感。这里的渐变透明度不宜太高，避免抢了主体，有种微弱的感觉就可以。

表盘是OK了，接下来咱们刻画皮带的细节。皮带这块，较难处理的是皮带的纹理，所以为了省事，咱们可以直接采取贴图的方法。百度搜索『牛皮贴图』就能搜到相应的肌理素材。

对牛皮素材按住Ctrl+U，把牛皮的饱和度调为0，图层的混合模式调为柔光，再用剪切蒙版盖在表带图层上，这样表带就有了牛皮的材质属性。

接着在在表带的图层上，使用斜面浮雕，给表带稍微增加一些厚度，让表带的细节看起来能更加真实一些。

好了后再给表盘的外框增加一层若投影，拉开表盘与表带之前的关系。接下来再新建一个图层，并把图层的混合模式设为柔光，在图层上绘制出两个圆的形状，裁切出表带的亮部区域。

接着再把这个形状，在属性里面增加一些羽化的操作，让皮带上的高光看起来更为的柔和真实。（这一步操作不熟悉的，可以打开我的UI中国主页，翻一翻上篇文章《这组 C4D 质感的图标效果，居然是用 PS 绘制的？》

这样手表的基础刻画就OK了

接下来，接下来就是对环境及细节的处理了。

光影氛围及细节处理

先找到所有手表外形的形状图层，复制出来并合并，这样我们就能得到一个手表的外框轮廓。

接着把这个图层置于最下方，先给外轮廓增加第一层投影，这里的投影边界可以清晰一些，大小不宜过大。

好了后，咱们再添加第二层投影，这一层的投影范围尽可能大一点，让投影过渡的更为自然。

再给背景也拉出一层渐变，亮部在左上角，暗部在右下角，让前后衔接的更为顺畅。再把渐变的这个图层模式设为叠加，不透明度调低一些。

再Check一下细节，觉得有哪里不妥的地方，都可以再微调一下，直到自认为还比较满意，看起来比较真实为止。

完成后再新建两个分别为亮度对比度与色彩平衡的调整图层，让整体画面的影调氛围更为的舒适，颜色也可以稍微偏冷一些，这样金属冰冷的质感也会更为的强烈。

调整完成的效果如下：

接下来咱们再把表盘里面的内容添加进去。

界面的绘制及细节

界面UI的绘制，我就不详细展开讲了，这些是最为基础的软件操作知识和基本能力。大家也可以根据自己的喜好来进行绘制，好了后，咱们把它放到画面里，调整比例，直到一个比较舒适的尺寸。

接着给UI添加一些细节，比如指针下的投影等等。

然后把界面文件拖放到高光渐变的下方，再调整一下UI里面的颜色，比如大面积区域同样需要考虑光源影响，所以这里我把那圈大白色，加了一点渐变，让UI更贴合在表盘内部。

这样一只精致高质感的手表，基本就绘制完成了。细节觉得不完美的地方，可以再手动处理一下，不断打磨，直到满意为止。

当然表盘的UI，大家也可以随意发挥，只要是中心点是完全对齐与咱们之前设定的参考线的交点就可以。

这里我也调了个深一点的颜色做尝试，让表盘看起来更为的酷炫精致！

指针的颜色也需要逐步修改一下，让UI更和谐。

这样一支很nice的作品就完成了！

这两套看起来都不错，不知道大家是喜欢上面的这套黑色的，还是下面的这套经典白色的呢？欢迎在评论区里告诉我！

当然，除了这种仪表。我们也可以搭配一些有色彩倾向的界面UI，让手表也可以瞬间进化为一只高科技智能手表。

另外在搭配界面的时候，需要注意界面发光带来的影响，比如我给表盘的内框稍微增加了一些蓝色，包括在内框的右上角，增加了一点黄色的反射光源，让它们看起来尽可能的保持真实。

到这里，今天的教程就告一段落了。微信搜索UX小学，关注公众号后，发送『手表PSD』就能下载到这三个手表的源文件PSD，嫌搜索麻烦的，可以点开文末的下载按钮。

作为福利，不限制大家的使用范围及用途，商业随意。

授人以鱼不如授人以渔，希望我准备的这篇文章能对大家有所收获！一张一张截图也不容易，所以喜欢本文的同学，别忘了文末来个赞吖~~

下期预告

预告一下，只要这篇文章的转发量超过500，下一期的高级教程立马安排上！是想看界面，还是动效，或者是字体，还是排版，或者是产品交互相关，评论区里大家说了算！（作为全栈设计师，还没有什么能难到我的哼 ）

还有咱们之前的微信群满了，所以又开了个新的微信群，添加管理员微信『 Dollam 』，表明粉丝身份就能加入啦~~

Powered by Froala Editor