金属旋钮的制作步骤.docx

金属旋钮的制作步骤 案例最终效果： 案例拆解： 本案例为金属风格的按钮设计。制作案例前，首先将此案例所涉及到的图形进行拆解，然后解决每一个图形的制作。本案例中，经拆解，可以发现它是由一个胶囊形圆角矩形、一个黑色圆角矩形、一个含灰色渐变的圆角矩形及一个灰色渐变的矩形组成，如下图所示： 01 01 02 03 04 那么各个图形的作用分别如下： 胶囊形圆角矩形：这个图形是作为整个按钮的底板。 一个黑色圆角矩形：这个图形是作为旋钮下陷效果的底板。 一个含灰色渐变的圆角矩形：这个图形就是旋钮的主体图形。 一个灰色渐变的矩形组成：这个图形是为了加强旋钮的质感和真实感。 制作步骤： 1、胶囊形圆角矩形的制作： 选择圆角矩形工具，在画布点击后出现圆角矩形设置对话框，框内的参数填写如下图： 在图层面板中，双击图层，弹出图层样式对话框，在其中分别设置渐变叠加、内阴影、外发光和投影四种样式。它们的设置分别如下： 渐变叠加：这是最关键的一步设置，是为矩形加上渐变色。参数如下： 浅深这里设置渐变的样式为线性渐变 浅 深 这里设置渐变的样式为线性渐变 其他样式设置： 2、黑色圆角矩形的制作： 选择圆角矩形工具，在画布点击后出现圆角矩形设置对话框，框内的参数填写如下图： 在图层面板中，双击图层，弹出图层样式对话框，在其中设置外发光样式。设置如下： 3、灰色渐变的圆角矩形 选中黑色圆角矩形，按CTRL+J，得到新的黑色圆角矩形，将其缩小一些，使其四周外围能留出黑边，然后，添加渐变叠加、斜面和浮雕、外发光、投影四种样式。 渐变叠加： 注意角度要设置为0度 注意角度要设置为0度，这样渐变为从左到右，呈水平方向渐变 其他三种样式设置如下： 4、灰色渐变的矩形 选中灰色渐变圆角矩形，按CTRL+J，得到新的灰色渐变圆角矩形，在工具箱中选择直接选择工具，再使用钢笔工具，将其变为矩形，并取消斜面和浮雕、外发光、投影三种样式，只留下渐变叠加。然后，将这个矩形的高度缩小，让它的上下两边露出灰色渐变的圆角矩形的边缘。 5、绘制一个黑色椭圆，加滤镜中的模糊-高斯模糊，再用矩形选区工具，选取该图形5分之4多的部分，删除，然后，把图形放在灰色渐变圆角矩形底部，如图： 6、再绘制一个黑色椭圆，加滤镜中的模糊-高斯模糊，再用矩形选区工具，选取该图形二分之一多的部分，删除，修改它的图层不透明度，使其半透明，然后，把图形放在灰色渐变圆角矩形底部，如图：