纸箱纹理的图标栏设计.PPTVIP

第三章：UI界面中基本元素的制作与设计 3.7.1 图标栏的设计原则 图标栏特别适合有三个或者三个以上的操作，需要提供给用户选择并且不需要对操作有额外解释的情景。图标栏可以是列表样式的也可以是宫格样式的，宫格不局可以增加视觉的清晰度，如下图所示为不同App中图标栏的设计效果。 使用图标栏可以展示和其它APP相关的操作，比如作为进去其它App的入口。在一个标准的列表样式的底部图标栏中，每一个操作应该有一句描述和一个对齐的图标。如果需要的话，也可以使用分隔符对这些操作进行逻辑的分组，也可以为分组添加标题或者副标题。 图标栏在样式表现上也比较灵活，根据信息内容的需要，有点图标栏在界面的两侧，有的图标栏在界面底部且行数在两行以上，具体如下图所示。 在设计图标栏的过程中，有的图标栏中只使用具有很强指示作用的图标对信息进行表现，而又的使用图标加文字的方式进行表现，如下图所示，不管是用那种方式，图标栏中的图标都要与实际操作功能相符，并且整个图标栏的文字和图标风格要保持一致。 3.7.2：线性化的图标设计 案例一 思路与思考： 运动 分析需求：这个图标的作用是什么？放在哪里什么风格？ 确定释意：通过具体的图形来表达或抽象或具体的意思。 形象制作：图形设计，可以先在纸上画好草图，思考后打开PS，效率会高很多。 需求分析好，释义也想好以后，进入到Photoshop开始制作。 新建一个400x200分辨率的画布，铺上一个绿色的背景色 择椭圆工具，按住shift在画布正中央拖出一个等比例圆形。点击鼠标右键选择描边 直接复制之前创建好的圆形，将其稍微放大，并移动到合适位置。 选择矩形工具，为当前创建好的圆形中间添加一个长方形 完成圆形的摆放后，我们只需要删除多余的结构就可以得到篮球的样子，再将图案旋转30度。如下图 用同样的方法，摆放出其它几个圆形的位置。如下图 3.7.3：纸箱纹理的图标栏设计 围棋图标案例制作 找实物图片参考，仔细观察形状及光影变化等细节，很少有人能凭借脑袋中的记忆凭空画出一个实物，所以寻找参考图片是一个最好的方法。 打开Photoshop新建一个大小400x400的画布，使用圆角矩形工具拖出一个等比例的圆角正方形。 添加图层样式，使用“斜面浮雕”、“内发光”、“渐变叠加”、“投影”等命令为图案添加更多的样式，并且把背景颜色填充成灰色。 导入木纹素材，将素材与我们之前做好的图案进行一个形状匹配，并将素材使用柔光混合模式。 继续添加细节完善图形，只用直线制作成网格，放到图形上组成棋盘。用蒙版将直线多余的部分去掉，将直线使用“斜面浮雕”。再降低不透明度。 接下来制作棋子，要把真实感表现出来就需要把光影做好，多个环境光比单个要显得真实，但难度也相应变大。用椭圆选区工具，按住shift拖出一个圆，填充成黑色，将此图层设置投影效果。新建一个图层，再用画笔工具手动绘制出棋盘上的高光点。 接下来我们把做好的黑棋复制到其它位置上，用同样的方法制作白棋。完成后如下图效果 这篇教程主要分享两个ICON的制作过程，一个是镜头主题图标，一个是时钟，图标其实不难，主要是分享一个思路。 新建一个400x400分辨率的画布，使用圆角矩形工具，拖出一个圆角矩形，填充渐变。 接下来绘制提出部分，使用椭圆工具，按住shift拖出一个标准大小的圆，使用图层样式“内阴影”，“渐变叠加”“投影”等效果。