高大上的产品UI设计PS教程(图标篇).pdf

Photoshop 产品UI设计：图标篇 本文档适用范围： Photoshop版本不同，个别机能可能会有差别。 本文中非界面类所有图片均为利用Photoshop绘制，可能会与实际显示有局部差异。 本文着重描述Photoshop在UI设计的实例中如何制作图标以及UI设计需要注意的要素。 1. 图标效果图 图标的效果图 1.1 新建文件并创建辅助图层 新建400*400像素文件并创建一个新图层，将其命名为自己能够看懂用途的名字即可。 1.2 定义一个图案 用矩形工具画4个正方形，每个边长20像素，按照上图排布之后定义为图案后取消选区。 1.3 填充图案 全选，删除前图后，选择填充图案，选择刚才定义的图案。之后设定不透明度为20%。 1.4 创建图标背景基本图形 创建一个新的图层。使用圆形选区工具画一个160*160像素的圆并填充黑色。水平居中。 1.5 调整图标背景外形(1) 新建一个图层，创建一个40*240的矩形选区，填充红色后相对整个画布水平垂直对齐。 1.5 调整图标背景外形(2) 将红色的矩形图层复制，之后将新图层做-30度旋转。 1.5 调整图标背景外形(3) 将下层的红色矩形做-15度旋转。 1.5 调整图标背景外形(4) 选中下层红色作为选区，之后删除下面红色图层，之后在上层红色图层中删除选区。 1.5 调整图标背景外形(5) 删除右下侧的红色部分，保留左上部。将红色区域的尖端对准黑色圆形背景的圆心。 1.5 调整图标背景外形(6) 新建图层，创建一个152*152的圆形选区填充白色，之后相对于整个画像水平垂直居中。 1.5 调整图标背景外形(7) 选中白色圆形图层做选区，删除该图层，并在红色图层内删除该选区内容。 1.5 调整图标背景外形(8) 选中红色圆形图层做选区，删除该图层，并在黑色图层内删除该选区内容。 得到图标背景图层最终外形。 1.6 调整图标背景样式(1) 在图层样式中，追加渐变叠加效果，具体参数参考上面图片。 1.6 调整图标背景样式(2) 在图层样式中，追加投影效果，具体参数参考上面图片。 1.6 调整图标背景样式(3) 在图层样式中，追加内阴影效果，具体参数参考上面图片。 1.6 调整图标背景样式(4) 在图层样式中，追加外发光效果，具体参数参考上面图片。 1.6 调整图标背景样式(5) 在图层样式中，追加内发光效果，具体参数参考上面图片。 1.6 调整图标背景样式(6) 在图层样式中，追加斜面与浮雕效果，具体参数参考上面图片。 1.6 调整图标背景样式(7) 在图层样式中，追加描边效果，具体参数参考上面图片。 1.6 调整图标背景样式(8) 追加了所有图层效果后，图层最终的效果。 1.7 创建图标背景环形凹槽(1) 创建新图层，命名为“图标背景环形凹槽”，填充144*144的白色圆形，水平垂直居中。 将图层的混合方式改为：线性加深。 1.7 创建图标背景环形凹槽(2) 在图层样式中，追加外发光效果，具体参数参考上面图片。 1.7 创建图标背景环形凹槽(3) 在图层样式中，追加内发光效果，具体参数参考上面图片。 1.7 创建图标背景环形凹槽(4) 追加了所有图层效果后，图层最终的效果。 1.8 创建图标背景右下凹陷(1) 创建新图层，命名为“图标背景右下凹陷”，填充136*136的黑色圆形，水平垂直居中。 1.8 创建图标背景右下凹陷(2) 创建新图层，填充96*96的白色圆形，水平垂直居中。 1.8 创建图标背景右下凹陷(3) 选中白色圆形图层做选区，删除该图层，并在黑色图层内删除该选区内容。 1.8 创建图标背景右下凹陷(4) 创