第三章UI界面中基本元素的制作与设计（六）.ppt

第三章：UI界面中基本元素的制作与设计（六） 3.7.3：纸箱纹理的图标栏设计 围棋图标案例制作 找实物图片参考，仔细观察形状及光影变化等细节，很少有人能凭借脑袋中的记忆凭空画出一个实物，所以寻找参考图片是一个最好的方法。 打开Photoshop新建一个大小400x400的画布，使用圆角矩形工具拖出一个等比例的圆角正方形。 添加图层样式，使用“斜面浮雕”、“内发光”、“渐变叠加”、“投影”等命令为图案添加更多的样式，并且把背景颜色填充成灰色。 导入木纹素材，将素材与我们之前做好的图案进行一个形状匹配，并将素材使用柔光混合模式。 继续添加细节完善图形，只用直线制作成网格，放到图形上组成棋盘。用蒙版将直线多余的部分去掉，将直线使用“斜面浮雕”。再降低不透明度。 接下来制作棋子，要把真实感表现出来就需要把光影做好，多个环境光比单个要显得真实，但难度也相应变大。用椭圆选区工具，按住shift拖出一个圆，填充成黑色，将此图层设置投影效果。新建一个图层，再用画笔工具手动绘制出棋盘上的高光点。 接下来我们把做好的黑棋复制到其它位置上，用同样的方法制作白棋。完成后如下图效果 这篇教程主要分享两个ICON的制作过程，一个是镜头主题图标，一个是时钟，图标其实不难，主要是分享一个思路。 新建一个400x400分辨率的画布，使用圆角矩形工具，拖出一个圆角矩形，填充渐变。 接下来绘制提出部分，使用椭圆工具，按住shift拖出一个标准大小的圆，使用图层样式“内阴影”，“渐变叠加”“投影”等效果。 绘制一个圆，添加效果，作为镜头圆框，接着绘制一个70x70的圆，做向下陷进去的效果。 经过上面的步骤，其实效果用的比较多的，内阴影，投影，描边之类的，在做icon的时候，要有想法，很多细节要自己去体会，下面的黑色圆圈和渐变圆圈，是相机的镜头。 最后一步使用画布工具，绘制出高光，这样一个icon就完成了。