Niki Design

写在前面：这是去年这个时候翻译的一篇教程，感觉自己的风格受此教程影响很大，也是从这篇教程中，我学会了怎样用图层样式打造此类程序界面的质感。我曾经在博客中发表过译文，现在，将教程转移到这儿，跟大家分享，希望对读者有用。

最终效果：

原文地址：

https://psd.tutsplus.com/tutorials/interface-tutorials/twitter-app-interface/ 

步骤一：新建文件

新建文件，画布大小为1050*700像素，分辨率为72像素。

步骤二：准备画布

选择“视图”—>“标尺”，或者按“Ctrl+R”键显示标尺，在标尺上右击，将当前单位设置为“像素”。

步骤三

从标尺开始拖拽到面板，建立垂直、水平参考线。我们需要一个362*589像素的区域，在其内部左右边加7像素内边距。

步骤六

为图层添加“投影”和“描边”样式，参数设置如下。

步骤十一

激活移动工具，按住Alt键拖拽，复制按钮，并将其颜色分别改为黄色和绿色。要保证描边颜色与按钮颜色保持一致。

步骤十三

画一个相同宽度、相同圆角半径的矩形，将其放在标题栏的下面，颜色设置为#d2d8df。

步骤十四

在它上面添加矩形路径，路径模式为“交叉形状区域”。

步骤十七

为其添加1像素的白色投影，添加凸版印刷效果。

步骤十八

现在我们来添加用户头像区域背景。画一个圆角半径为5像素的矩形。要保证它和之前我们创建的参考线对齐。

步骤十九

双击图层，添加“渐变叠加”、“描边”图层样式。

步骤二十

在上一步骤的图形中央画一个圆角半径为3像素的小矩形，可以填充任意颜色。

步骤二十二

将你的头像粘贴到小矩形上，按“Ctrl + Alt + G”键将图层转换为图层蒙版，这样我们就能将图片嵌入到小矩形里了。可以按“Ctrl + T”改变图片的大小，用移动工具更改它的位置。

添加Twitter用户名。使用1像素宽的白色投影为其添加凸版印刷效果。

步骤二十七

画一个圆角矩形，圆角半径为2像素，颜色为#eef1f4。将其放在右上侧，右对齐参考线，添加如下图层样式。

步骤二十八

在上一步骤图形中央画一个黑色矩形，路径模式为“添加到形状区域（+）”，然后画一个小的矩形路径，路径模式为“从形状区域减去（—）”。

步骤二十九：铅笔图标

首先，画一个大矩形，模式为“创建路径”；第二，画一个高矩形作为铅笔的主体；第三，画一个矩形将其旋转45°；最后，再画一个矩形，路径模式为“交叉形状区域”，对铅笔主体进行裁剪。

步骤三十

旋转我们刚才创建的铅笔图标，将其放在刚做好的矩形上。

步骤三十一

在头像区域下面再画一个矩形，颜色为#e2e4e7。

步骤三十四：图标

使用钢笔工具手动画一个泡沫图标，颜色设置为#adb9c4。添加图层样式“内阴影”、“外发光”、“渐变叠加”。

步骤三十六

添加图层样式“投影”、“外发光”、“内发光”、“渐变叠加”。

步骤四十六

在图形下面画一条1像素的线，颜色为#a8b1ba，添加凸版印刷效果。

步骤四十七

画一个圆角半径为3像素的矩形，图层样式为“渐变叠加”、“描边”。

步骤四十九

在正方形上面粘贴一张图片，为其添加剪切蒙版，这样图片就能嵌入正方形中。

步骤五十

利用文字工具添加用户名、tweet内容和时间信息，记得在提到Twitter用户的地方添加链接。

步骤五十一

在tweet区域的右下角画一个#aab7c3的圆形，然后用多边形工具画一个五角星，路径模式为“添加到形状区域（+）”，我们将用这个做一个表示“喜欢”的按钮。

步骤五十二

用同样的技巧做一个回复按钮。

步骤五十三

按"Ctrl+G"键将所有tweets内容图层放在一个组内，按住Alt键拖动图层组复制，改变头像和内容。

步骤五十四

复制应用程序的背景图形，将其变为黑色，在顶部加一个矩形，路径模式为相交，添加“内发光”、“渐变叠加”、“描边”图层样式。

步骤五十六

画12个不同大小的圆角矩形，手动安置它们的位置旋转一圈，添加凸版印刷效果。

步骤五十七：滚动条

画一个细长的圆角矩形，圆角半径为1像素，添加“描边”。

步骤五十八

在滑竿上画一个小的圆角矩形，圆角半径仍为1像素，将其颜色设置为#8b9eb3，添加“内发光”和“描边”图层样式。

步骤五十九：添加更多参考线

主页我们已经完成。下一步做状态更新页面和上传图片窗口页面。首先我们需要更多的参考线辅助设计，看下图。

步骤六十：更新状态窗口

画一个圆角半径为5像素的矩形，颜色为#e2e4e7。

步骤六十一

在窗口左边添加矩形路径。按“Ctrl + T”键，旋转45°，确保路径模式为“添加到形状区域（+）”，然后添加样式“投影”和“描边”。

步骤六十九

建议每个按钮一个图层组，这样图层结构看起来会好一点。

步骤七十二

在窗口中间，画一个圆角半径为3像素的圆角半径，颜色为#d9dde1，然后，在内部画一个小的圆角矩形路径，路径模式为“添加到形状区域（+）”。

步骤七十四

重复同样的步骤添加垂直矩形。

步骤七十六

在窗口中间画一个圆角矩形，圆角半径为3像素，颜色为#cdd2d8。在其内部再加一个矩形，路径模式为“从形状区域减去（—）”。

完成