-
软件系统图标设计四准则
5g时代手机里面下载各种app,有些图标很精致,有些很丑,其实图标可以自己设计哦,手把手教你做软件系统图标设计1.图标的渊源说到图标一般指的都是智能设备中的代表一个含义的图形。其实在现实生活中也会发现许多图标的存在比如交通标示的图标,再比如旅游景区内的引导图标。这些图标存在的价值是提供信息指引,帮助用户找到需要的信息。而智能设备中的图标其实就是把现实生活中的图标迁移到界面当中,在界面中图标传达信息并且引导用户操作,用户根据接收到的信息进行操作。总之一句话图标的存在是为了快速准确的传达信息给操作的用户并且引导用户作出反馈行为。2.图标设计四准则随着扁平化设计的发展趋势,越来越注重图标的简洁与寓意表达。现在各种各样的图标充斥在不同的app当中,那么怎样的图标才设计师应该追求的方向呢。评价一个图标设计的好坏的标准是什么呢。下边我们从四个维度来分析下。1)表意性准则图标作为快捷传到信息的载体首要的标准就是要准确的表达含义,如果一个图标不能准确快速的表达含义,也就不能快速准确的引导用户操作,那么这个图标也就没有存在的必要了。范例:精准表达图标的含义2)美观性准则图标在界面中一般都是点睛之笔,都是由精致美观的图形设计。一个图标的美观度决定了用户对这个图标的观感,帅气的图标会大大增加用户点击的几率,从而更有效地传达图标所代表的含义。范例:美丽的色彩搭配美观的线条造型简洁大方的块面早造型,色彩鲜明的色彩对比当下追波最流行的图标设计3)统一性风格准则在同一个产品中保持同样的图标风格显得有为重要,统一性是保证设计品质的重要一环。统一风格的图标设计会极大地提升设计品质,一套不统一的设计风格会极大地降低产品的设计品质。统一性具体包含设计风格的一致性和一套图标的栅格系统的统一性(后边会详细讲解图标的栅格化系统)范例:统一的线条,统一的圆角统一的线条,统一的圆角统一的线条,统一的圆角,统一的透明度对比统一的造型,统一的圆角,统一的透明度对比4)情感表达准则图标除去自身的信息传达之外还要传达产品的情感,用以突出一个产品的个性。比如硬朗、温柔、大方、个性、可爱等。图标设计不同的造型会传达给用户不同的情感感受,图标的情感表达是图标设计的较高境界需要对图形、线条、大小、颜色都有特别细腻的把控力。范例:情感:简洁大方情感:可爱温柔情感:方正硬朗情感:方中带圆刚柔相济系统图标是移动端设计中非常重要的部分,也是衡量一个设计师水准的重要指标。图标设计的表意性、美观性、统一性、情感表达的四个准则,从不同角度阐明了一套优秀系统图标的要求
-
ai设计制作海滩图标方法
ai很智能也很好玩,ai制作图标更么么哒ai设计制作海滩图标方法第一步、建立一个新的文件点击【文件】>【新建(或CTRL+N)】,设置如下图:第二步、建立自定义网格点击【编辑】>【首选项】>【参考线和网格】,设置如下(注意勾选):第三步、新建图层按F7呼出【图层】面板,新建几个图层,更改图层名称如下:第四步、创建参考网格有了这个参考网格,你所制作出来的图标会更规范和精致哦!步骤1:选中【参考网格】图层,使用【矩形工具(M)】创建一个128×128像素的矩形,填充颜色ff6b57。SHIFT+F8呼出【变换】面板,将下面3个选项全部勾选,如下图:步骤2:添加另一个较小的116×116像素的矩形,颜色f2f2f2。步骤3:选中这两个矩形,按CTRL+G组合,然后CTRL+C复制,CTRL+F粘贴三份,分别放置在右侧40像素,使用【对齐】面板将他们垂直居中对齐,并统一对其到画板的中心。第五步、创建图标基底步骤1:将视野放大到第一个参考网格,使用【椭圆工具(L)】,创建一个88x88像素的圆,颜色34d5ea,然后将它放置在距离底部4个像素的位置。小提示:我建议你打开【视图】>【像素预览】,这样你可以更轻松地定位你的形状与底层的像素网格。(定位好了可以关掉像素预览哦~)步骤2:选择它,然后【对象】>【路径】>【偏移路径】,设置如下图,颜色493e3e。步骤3:选择蓝色的圆,CTRL+C>CTRL+F创建一个它的副本,再给它一个【-4px的位移】,选中通过复制和偏移得到的这两个圆,SHIFT+CTRL+F9呼出【路径查找器】面板,使用【减去顶层】得到剪影。步骤4:调整剪影的颜色为白色ffffff,SHIFT+CTRL+F10呼出【透明度】面板,设置其【混合模式】为柔光,不透明度80%。步骤5:用【矩形工具(M)】绘制一个96*46的矩形,颜色edbc32,确保它的底部与蓝色圆的底部对齐。使用【锚点工具(SHIFT+C)】,点击矩形左上角的锚点,按住SHIFT往上拉动,使其变弯曲,再点击矩形右上角的锚点,按住SHIFT往上拉动,使其变为下图中的样子。步骤6:给它一个4像素的位移(使用偏移路径的方法),颜色493e3e。步骤7:我们需要添加一些沙子的纹理,用【椭圆工具(L)】适当添加一些2×2像素的圆,颜色d19a20,完成后,选中所有小圆,使用CTRL+G组合。步骤8:选择黄色海滩+海滩的轮廓+沙子,CTRL+G组合在一起。复制一个蓝色的圆,将其放置在最顶层,如下图。同时选中这个圆和黄色海滩,右键选择【建立剪切蒙版】。步骤9:CTRL+C复制蓝圆的白边,CTRL+F创建一个它的副本,将它放置在沙滩图层的上面。同时选中沙滩和白边的副本,在【路径查找器】面板中点击【分割】,然后右键【取消编组】。删除掉沙滩之外的多余白边部分。用【钢笔工具(P)】勾一条白边在沙滩最上面的部分,调整其混合模式为柔光,不透明度80%,得到下图中的形状。步骤11:(1)用【圆角矩形工具】创建一个16x8像素、4像素圆角半径的圆角矩形,颜色ffffff;(2)然后画一个6×2像素的矩形连接元件;(3-4)添加2x2像素的圆,一边一个,用它来创建切口(用路径查找器);(5)添加一个12×4像素、2像素圆角半径的圆角矩形,连接起来。步骤12:选择所有的云CTRL+G组合,然后定位到左上角,设置其【混合模式】为柔光。步骤13:再创建两朵云,确保CTRL+G组合。选中背景中所有的组件,CTRL+G组合。步骤14:我们需要创建背景的三个副本,并将它们放置到参考网格,确保你粘贴到相应的图层上。第六步、创建果汁图标步骤1:将视野放大到第一个图标的位置,使用【矩形工具(M)】创建一个48x50像素的形状,颜色9fba7d,然后放置在海滩沙子底部,确保水平中心对齐。步骤2:下一步,添加一个较小的28×4像素的矩形,颜色9fba7d,放在距刚刚创建的矩形顶部16像素的位置。步骤3:使用【钢笔工具(P)】,画一个形状连接这两个形状,用锚点工具调整它的弯曲度。步骤4:选择三个形状组成的瓶子,使用【路径查找器】中的联集。步骤5:给它一个4像素的粗轮廓(偏移路径),颜色493e3e。步骤6:下一步,创建一个36x2像素、1像素圆角半径的圆角矩形,颜色ccc8be,给它一个4像素的轮廓,颜色493e3e,与罐子上部的轮廓相交。步骤7:复制粘贴另一个瓶盖。(可以用ALT拖动复制)步骤8:选择绿色罐子,使用一个-2像素的偏移,消除其顶部和底部的中间部分,颜色ffffff,然后设置其混合模式为柔光,不透明度80%。步骤9:使用【矩形工具(M)】创建一个2×70像素的形状,然后添加另一个稍宽的4×70像素,放置在右侧2像素的位置,CTRL+G组合它们,然后调整透明度。步骤10:添加一个28×4像素的矩形,颜色000000,放置在瓶盖下面,不透明度40%。步骤11:接下来使用【椭圆工具(L)】绘制两排2x2像素的圆,颜色493e3e,分别间隔2像素,然后CTRL+G,与罐子中心对齐,距离瓶盖20像素。步骤12:用圆角矩形工具创建一个24x42像素、12圆角半径的圆角矩形,颜色eddac0,再添加一个4像素的偏移,颜色493e3e,对齐罐子中心,距离小圆点8像素。步骤13:用相同的方法添加一些高光,使用相同的透明度。(用路径查找器合并)步骤14:使用一些简单的形状,如圆、矩形和圆角矩形添加一些细节元素。记得做完用CTRL+G组合!步骤15:给罐子的顶部添加一些高光,颜色ffffff,调整其混合模式为柔光,不透明度80%。记得做完用CTRL+G组合!步骤16:创建一个4×22像素的矩形,颜色eddac0,给一个4像素的偏移,颜色493e3e,放置在瓶盖顶部右侧。步骤17:添加一个4×2像素的矩形(#ffffff),设置其混合模式为柔光,不透明度90%。然后,添加一个4x4像素的黑色(#000000)在它的底部,变成阴影,不透明度为40%。步骤18:添加一个4×4像素的矩形,用【直接选择工具(A)】选择其右边的2个锚点,往上拖动使其变斜,颜色493e3e,然后再复制粘一个。记得做完用CTRL+G组合!步骤19:开始制作薄荷叶,创建一个14x14像素的圆(#809b54)。(1)使用【直接选择工具(A)】选择最上的锚点,推动它向顶部延长8像素;(2)给它一个4像素的偏移(#493e3e),再给内部做一个高光(偏移+复制+路径查找器);(3)高光颜色ffffff,【混合模式】柔和,不透明度80%;(4)CTRL+G组合,旋转整个叶片45度;(5)添加阴影(颜色000000,不透明度40%)在底部,得到(6)。步骤20:CTRL+G组合,把叶子放在瓶盖图层的下面,放置在对应的位置。步骤21:创建一个88×88的圆,颜色34d5ea,放置在正中心。步骤22:再添加一个88×70的矩形,放在圆的上方,与顶部参考线对齐。用路径查找器合并这两个形状。步骤23:CTRL+G合并瓶罐的所有元素(不包括圆形背景),检查你的图层顺序是否同下图一样。同时选中蓝色形状和瓶罐,右键>建立剪切蒙版。我们已经完成了第一个图标~现在可以CTRL+2锁定这个图层。第七步、创建冰淇淋图标选择【冰淇淋】图层,将视野放大到第二个参考网格,开始制作我们的第二个图标(一共有4个图标哦~做到这一步的你已经完成一半啦!保持耐心哦^^)步骤1:使用圆角矩形工具,创建一个48×92像素、6圆角半径的圆角矩形(#e25439),使用【直接选择工具(A)】选择上面的两个锚点将其变圆(你也可以在【变换】面板中改变上面两个的圆角半径数值哦),给它一个4像素的偏移(#493e3e),将它对齐参考网格的顶部。步骤2:添加一些高光(#ffffff),混合模式柔光,不透明度80%。记得CTRL+G组合冰淇淋哦!步骤3:开始做冰淇淋的木棍,画一个12×12像素的正方形,颜色#d3b276,然后给一个4像素的偏移(#493e3e),放在冰淇淋下面,与冰淇淋对齐。步骤4:使用【矩形工具(M)】,创建两个2×12像素的形状(#ffffff),放在棍子的两边,混合模式设置为柔光,不透明度为80%。步骤5:添加一些2像素宽的圆角矩形(#b2915d)作为纹理。记得CTRL+G!步骤6:创建一个12x4像素的矩形(#000000),放在棍子的顶部变成一个阴影,不透明度40%。记得一定要CTRL+G组合哦!这样你的图层顺序才不会乱~步骤7:选择所有冰淇淋的组件CTRL+G组合起来,同一个图标使用相同的方法建立剪切蒙版。我们已经完成了第二个图标,CTRL+2锁定这两个图层,并移动到第三个图层【冲浪板】。第八步、创建冲浪板图标选择【冲浪板】图层,将视野放大到第三个参考网格,开始制作我们的第三个图标(一共有4个图标哦~做到这一步的你已经完成四分之三啦!保持耐心哦^^)步骤1:使用【椭圆工具(L)】,创建一个48×164像素的形状,颜色#d3b276,然后给它4像素的偏移(#493e3e),确保它与参考网格顶部对齐。步骤2:再给它一个-2的偏移(#ffffff)(复制+路径查找器),混合模式柔光,不透明度80%。步骤3:添加一些2像素宽的圆角矩形作为纹理(#b2915d),彼此之间的距离相等,并用剪切蒙版的方法使它们呈现在冲浪板的内部。z步骤4:添加两个垂直的高光,(颜色ffffff;混合模式柔光;不透明度80%),将它们放置在冲浪板右侧,用路径查找器将它们与外环高光联集。步骤5:创建一个18x32像素的椭圆,颜色#eddac0,给它一个4像素的偏移(#493e3e),对齐冲浪板的中心,距离参考网格顶部82像素的距离。步骤6:给圆环添加高光,完成后添加一个2×84像素的矩形(#493e3e),连接圆环到冲浪板的顶部,对齐冲浪板的中心。步骤7:选择所有冲浪板的组成元素,CTRL+G组合。和前面两个图标一样的方法创建剪切蒙版。我们已经完成了第三个图标啦,CTRL+2锁定图层,并移动到第四个图层【砂桶】。第九步、创建砂桶图标选择【砂桶】图层,将视野放大到第四个参考网格,开始制作我们最后一个图标(恭喜你做到了最后一个图标,加油!离成功只差一步啦~)。步骤1:使用【矩形工具(M)】,创建一个40×28像素的形状(#aaa79f),将它放置在沙滩底部。步骤2:用【直接选择工具(A)】,将其下面两个锚点朝内2像素,再添加一个4像素的偏移(#493e3e)。步骤3:添加高光和阴影,高光(#ffffff,混合模式柔和,不透明度80%),阴影(#000000,不透明度40%)。记得随时CTRL+G哦!步骤4:创建一个16x20像素、8圆角半径的圆角矩形,颜色#eddac0。给它一个4像素的偏移(#493e3e),然后放在距离桶顶部10像素的位置。步骤5:给它一些高光和两个小矩形阴影(#493e3e),使它更具视觉吸引力。一旦你完成后,一定记得CTRL+G组合哦!步骤6:使用【矩形工具(M)】,创建一个48×10像素的形状,颜色#ccc8be,给它一个4像素的偏移(#493e3e)然后放在桶的上面,确保它们的轮廓重叠。步骤7:给新的形状的一些高光(#ffffff),设置其混合模式为柔光,不透明度为80%。步骤8:添加两组三个2×2像素的圆(#493e3e),彼此距离2像素,放在两侧。步骤9:完成了桶的顶部,添加一个22x2像素、1圆角半径的圆角矩形(#493e3e),然后选择所有元素CTRL+G组合。步骤10:创建一个8×42像素的矩形,颜色#e25439。给它一个4像素的偏移(#493e3e)放在砂桶上面,确保它们的轮廓重叠。步骤11:添加两个2x40像素的矩形(#ffffff)到它的两侧,并将它们的混合模式设为柔光,不透明度80%。步骤12:使用【矩形工具(M)】,创建一个更小的8×4像素的形状(#000000),然后变成一个阴影,不透明度40%,确认它的位置在铲体下段。步骤13:创建一个2×14像素的矩形,然后由另一个较小的2×2矩形放在它上面2像素的位置,颜色#493e3e。将它们放在中心。步骤14:创建铲子的把手,先添加一个28×20像素、4像素圆角半径的圆角矩形,颜色e25439。(1)添加一个20×12像素的矩形在中间;(2)使用路径查找器的减去顶层得到图2的样子,把这个形状进行一个4像素的偏移(#493e3e);(3)添加一个8×4像素的矩形(e25439)遮盖住铲子下部分的黑色轮廓;(4)添加两个6×4像素、2圆角半径的圆角矩形(#493e3e);(5)添加一些高光得到(6)。步骤15:选中所有砂桶元素,使用CTRL+G组合,和前面用到的方法一样,建立剪切蒙版。恭喜你!我们完成啦!我相信你已经成功地遵循了教程的每一步,并学到了非常多有用的新东西,现在,你已经能够熟练地操作它了。
-
面型图标vs线型图标设计
什么时候该用线型图标,什么时候该用面型图标,不知道大家平时有没有去思考过?我自己也曾经纠结过,但却没有深究,这篇文章给出了一些答案常常会陷入到该用面型图标还是线型图标的纠结中,到底哪种对用户体验来说更合适呢?有些人觉得它们之间的区别只是在于个人喜好的问题,但有研究表明,更深一层的原因是:它们之间存在着不同的识别效率。对于设计师来说,应该要知道如何选择线型或面型图标,才能让用户更高效地浏览应用。如果设计良好,用户就能够更快地识别,并做出正确的选择。一项名为《面型图标vs线型图标,对于可用性方面的影响》的调查研究发现,图标样式会影响识别效率。识别效率是通过识别和选择图标的速度和准确性来衡量的。面型图标一般来说会比线型图标更快被识别,但也有例外,一些图标在识别效率上没有明显差异,这与图标的特征线索有关。图标的特征线索特征线索是指用户如何辨认图标,如果没有明显的特征或很难被注意到,图标就没法准确识别。例如:评论气泡图标的尾巴就是它的特征线索,没有它,就只是一个圆;锁图标上的钥匙孔是它的特征线索,没有它,就很容易被误认为是包;齿轮图标上的齿形是它独有的线索,没有它,看起来就像是一个甜甜圈。调查研究中发现,锁图标中没有画锁孔是被误会最多的图标,有超过四分之一的用户看错了。如果没有这个必要的特征线索,图标看起来可能会像是一个包,钱包甚至是一口锅。这些特征线索是用户识别图标的关键,使用图标时,请确保它包含了用户能识别的线索。如果图标看起来像是其他什么东西,请考虑为其增加额外的特征线索。什么情况下用线型图标更好?除了要包含特征线索外,线型和面型图标之间也有区别。有时候,某些图标上的特征线索在线型图标上比面型图标更为突出。调查中发现,能够被更快识别的线型图标有三个:评论、垃圾桶、钥匙。这些图标的特征线索都出现在其外轮廓上,正因为如此,当图标为线型的时候,这些特征线索更容易被注意到。评论图标的尾巴在面型时容易被忽略掉,但是在线型时则更加明显。垃圾桶盖子在面型时也一样,线型时更容易看到。钥匙的齿形在线型时相较于面型时要更明显。当图标的特征线索比较微妙且出现在形状的边缘时,使用线型图标。这样能使得图标的线索更加突出,从而能够更快地被识别。选择图标时,最好能保持一致的风格,不要把面型和线型混搭。试着选择一组图标,它们具有明显的特征线索,角度干脆不模糊。例如:如果将评论,垃圾桶和钥匙图标放在特征线索更明显的图标一起进行比较,就能看出区别。更明显的线索凸显出来后,更容易被注意到。什么情况下用面型图标更好?大多数图标是作为现实世界中对象的缩影,把图标用面型剪影的形式表现更符合人的一般认知。相对而言,线型图标并不能真实的反映大多数人的认知习惯。这就是为什么面型图标能更快识别的原因。尽管如此,用户仍然能够识别线型图标,但如果图标的内部空间非常狭窄,那么就需要更长的时间才能识别。研究发现:点赞、剪刀、电话和工具图标在面型的时候更容易被识别。这是因为这些图标的轮廓样式在其中一些地方内部间距太小,从而产生了视觉噪音。对于内部空间拥挤的图标,最好使用面型图标,剪影形式提供了一个信息量更小的形状,使图标更容易识别。什么时候线面皆可?研究发现,两种风格的图标有时候的识别效率是一样的。例如:星星、购物车和旗帜图标都有相似的识别时间。这意味着此时的线型图标不会降低用户的识别效率。原因是它们内部的空间很宽,减少了视觉噪音。内部空间越窄,产生的噪音就越多,干扰识别。Tab栏活动态图标样式通常使用面型图标作为导航栏中的活动态,而其他按钮保持线型形式。但其实这种设计方法是落后的,应该反过来。用户需要对他们尚未选择的图标有更快的识别速度,而不是针对他们已经选择的选项。已选择的不需要用面型的图标,对于没有选择的内容来说,面型图标更为有效。使用线型图标能够突出显示选择态的图标(面型图标相对会弱一些),它提供了一种更清晰的风格和颜色的变化,能够强化所选的内容。打破过时的图标风格规范如果使用效率对用户来说很重要,则必须考虑图标的识别率。如果想要更快的识别率,面型图标会更好。但上面提到的一些例外情况,也应该有所了解,以便于准确的做出选择,不再盲目纠结。总之,在使用图标样式时,应该要记住以下几点:图标是由能够识别的特征线索组成。面型图标识别速度更快,除非他们的特征线索不够突出。线型图标的内部间距较宽时,更容易被识别。如果面型图标的特征线索在其边缘细微之处,则使用线型图标更好如果线型图标内部的间距较窄,则使用面型图标会更好。
-
界面启动图标设计
说到起动标志的标准,最先会想起的,就是说iOS出示的标志栅格。根据这一栅格,会标准图型的规格,及其所在的部位这个模板和工具图标的使用方法类似,我们在后面的案例进一步讲解。接着,来说明一个更重要的问题,就是启动图标画布的尺寸。默认的情况下,我们使用1024×1024尺寸来设计启动图标,这个参数在iOS和Android中都适用。之所以使用这么大的尺寸,是由屏幕分辨率的差异和使用场景导致的。第一,在手机硬件中,根据屏幕规格的不同,展示图标的实际像素量也不同,即图标的尺寸会发生改变。例如在1x的屏幕中,图标使用60x60px;在2x的屏幕中,就使用120x120pt;3x则是180×180。第二,不同设备和显示场景里,应用的图标尺寸也不一样。对于一个真实的项目来说,图标不是只放在手机上运行,无论是iOS还是Android的APP都可以在PAD上安装,图标尺寸规格就不同。并且,在网页或者手机应用商店里,也需要展示启动图标,显示的规格和真实应用列表中又不同。所以,在iOS官方的图标模板中,我们会看见里面罗列了非常多的图标尺寸,我们只需要设计第一个1024规格的,将这个图标置入到PS的智能对象,或者Sketch的Symbol中,就可以一次性生成所有尺寸,不需要我们自己手动调整各种规格的图标输出。应该有同学这时候还会产生疑问,模板里的画布就是一个正方形,但是大多数手机的APP图标使用的是圆角,所以,应该如何制作这个圆角,以及它的相关参数呢?真实项目中,除非项目的特定要求,只需要提交正方形的图形即可,之后无论是APPStore,还是多数安卓应用商店,都会「自动」对该图形进行裁切,生成符合自己系统的圆角图标。如果我们想要设计出正方形图形后预览真实的效果,就可以用我们准备的PSD模板,将正方形置入到模板中即可。在设计已经确认以后,我们就要导出这些图标。因为启动图标有很多拟物的设计或会使用真实的摄影素材,所以应用商店提交的格式会选用位图格式而不是矢量格式,所以导出启动图标,只需要导出对应尺寸的PNG即可。启动图标的设计演示1.图标形式在一些比较基础的应用类型中,通常会直接使用工具图标的图形设计启动图标。因为基础的APP服务大多有表意极其清晰的工具图标与之对应,例如邮箱、计算器、音乐、地图等类型应用,企业往往在使用一些抽象的品牌化图形与表意更清晰的工具图标中选择后者。工具图标的设计其实很简单,就是在画板中完成两种元素的设计,一个是背景,一个是上方图标。背景的设计,比较常见的有两种类型,纯色、渐变。而上方图标的设计里,包含的类型就是我们前面讲过的几种常见的工具图标。所以你看,只要将它们组合,就可以很轻松地设计出符合主流特征的启动图标。所以,如果我们要设计一款笔记应用,那么就可以先画一个线性的笔记图标,然后再将它置入格线模板中确认大小,再分别为它们上色,就可以完成设计了。2.文字形式文字形式的设计,背景和上方一样,也只使用纯色和渐变,但这种设计的主要难点在于字体的设计上。想要放文字,大家首先想到的肯定是直接用字体打进去,但是切记,字体的商业版权问题是不能视而不见的。选择字体前,一定要关注该字体是否是免费的,百度或者官网都可以查询。或者一开始就在免费字库中挑选,如思源黑、思源宋、王汉宗系列等等。可商用字体合辑:《我整理了200款免费商用字体,放心下载不会侵权!》如果觉得直接使用字库文字太没有设计感,那可以选择做一次字体的二次创作,对于新手来说简单一点。即一开始挑选一个合适的字体,然后在AI中对该字体进行临摹,再对细节进行重新加工,比如衬线的调整,笔画粗细的调整等等。比如要设计一个我的应用,那么我可以取「超人的电话亭」的第一个字──超,作为图标上方的文字。然后我选用「方正兰亭大黑」作为基础字形,对它进行重构即可。最后建议,如果不是一些比较严肃或是传统的题材,尽量不要选用宋体或是楷体进行设计。前往优设字体设计专题学习更多干货:「字体设计」3.拟物形式虽然现在整体设计环境中,拟物已经被扁平取代,但不代表它已经消失,或是在形式上不合理。适当的拟物设计会让我们对应用功能的认识更清晰,且更有趣味性。还是老惯例,我们从简单的拟物设计入手。目前拟物的领域中,使用最普遍的风格也是新手最容易学习的风格,即「轻拟物」的设计。这种风格需要刻画的细节相对较少,更易于我们掌握,只要能用好渐变即可。比如,iOS的官方应用──文件,图标的形式就符合轻拟物的特征。简单分析一遍,即在确定完轮廓后,通过渐变填充来表示物体本身的高光和阴影,并添加投影来制造立体感。如果要设计一些更复杂的拟物图形,可以通过多做拟物图标的练习会更有帮助。在今天扁平化图形当道的环境中,设计得精良的拟物图标往往可以在满屏的扁平图标中脱颖而出,助于吸引用户启动应用。
-
高级线性图标设计
一般多种多样大小设计风格的线形标志,会在图型內部挑选某条线段,改动他们的描边值。比如在以前的演试中,人们应用了2pt大小的描边,那麼根据将图型內部的线段改动成1pt的描边,就能生产制造这类实际效果在这种风格中,如果图形只通过外轮廓展现,就无法融入这个风格的特征,比如点赞的心形图标、搜索图标等。所以设计图形的过程,就得保证它们有内部线条的运用。常见的做法就是在原图标的基础上,进行一些「复杂化」的处理,为它们增加内部的线条样式,比如下面的案例:有时候为了强化线条间的对比,会降低内部线条的透明度或饱和度,来增加视觉观赏性,比如我们将案例中的图标进行对应调整,最后的效果如下:描边缺口风格这种风格看起来简单,实际在细节处理上有很多麻烦。有哪些问题呢?我们来看看实际的操作和解决方案。首先我们要做的是搜索图标的缺口,通常开口是在原型的镜片边框上。那么,就可以先画一个矩形,并将它进行旋转,用来确定我们要裁切的区域。多数新手会以为只要用这个矩形,和底部的圆进行减去顶部图形操作就可以得到目标图形,其实这个想法是错的。布尔运算不会改变图形本身的闭合状态,即使裁切了,缺口的部分也会被连接起来。所以,要实现真的缺口,就得换种做法。方法1第一种,是使用路径锚点删除的方法。即使用添加锚点工具在两个图形交汇点上打点,然后在中间随意添加一个锚点,再删除它,就可以获得缺口的效果。这时候,只要在描边设置中,将边缘设置成圆角,就可以获得圆润的切口边缘。这个操作有个问题,就是会导致圆形本身作为一个闭合路径,变成了非闭合路径。那么本身图形的部分属性设置就会出问题,最直接的就是描边设置,无论原本使用外描边或者内描边,都会转化为居中描边。在工具图标设计演示中,我们应该知道,使用内描边是最容易控制图形实际大小,以及符合像素对齐规范的,但在这类风格的使用上我们要尽可能在一开始设计时就使用居中描边。而居中描边的使用需要在画布中开启「对齐到像素」的选项,并关闭另外两项,才能保证操作的规范性。通过文章的形式这个问题很难描述清楚,大家可以自己动手尝试一遍。方法2方法1理论上可以解决大多数问题了,但还有一些说不清道不明的原因,会导致演示1中的方法失效。所以,在第2个演示中,我们来应用另一种方案。这种方案重点使用的功能是「轮廓化描边」,也就是一个将所有路径格式转化成完整的比例路径图形的操作。它具体的操作方式是,选中任何矢量图形,然后点击工具栏的对象–路径–轮廓化描边。通过这个方法,就可以将描边的图形转化成一个完整的矢量图形,而原本路径的描边就失效了,变成了路径填充色。当这个图形变成了一个完整的闭合路径以后,就可以用布尔运算进行裁切了。到这一步,操作看起来都很简单,但有不和谐的地方,就在切口边缘的调整上。如果设计的风格使用尖角,那么不用做什么处理;如果使用圆角,那么这个半圆就非常棘手了。通常,要制造这个圆角,需要我们画一个直径和之前描边相等的圆,然后关闭所有对齐的选项,再将圆移动到这个边缘中,使它可以和边缘的两侧对齐。这一步操作是依靠目测完成的,不够严谨,虽然可以通过一些特殊的几何辅助线手段来得到这个圆具体的坐标位置,但往往操作起来太复杂没有可行性。并且,路径查找器会破坏原本路径的特征,将描边的状态变成了填充状态,会增加我们对整个图形细节调整的成本。所以,尽可能不使用这种方案。多色描边风格多色描边的风格,设计起来非常简单,就是更改图标其中一个线段的色彩。和粗细不同的风格一样,如果图标图形没有比较合适的线段来添加一个新的颜色,那么也可以对其进行「复杂化」的处理,多增加一些线段出来。如果想有一些更有趣的表现,也可以将图标强行拆分成若干线段,然后再替换其中一条的颜色。比如在优惠券图标中,我们可以将虚线左侧的描边修改成其它颜色,而不是调整虚线的色值。渐变描边风格渐变描边其实就是为描边填充渐变色,这也就需要我们提前将图标的图形进行轮廓化描边,然后将所有线段进行「联集」,才能统一进行渐变色的处理。在渐变描边中,要遵守一个规则就是我们要保证渐变的方向和强弱关系是一致的。比如我们使用45°倾斜的渐变角度,并且左上颜色较深,那么所有的图标都应该遵守这个规律。只要在做出第一个图标的渐变以后,通过吸管工具吸取渐变,就可以轻松完成渐变的复制。在这个规则下,既可以使用相同的渐变色,也可以使用不同的渐变色。描边叠加风格最后,我们来讲讲描边叠加的设计风格。在图例中应该发现了,我们将圆角改成了直角,之所以有这样的调整,是因为直角在相交的过程能比较好的进行拼合,更适合叠加风格的设计。在设计这类风格的过程中,主要的难点在于拼接的方式,因为有的图形看起来是一体成型的,需要我们额外为它创造出拼合结构。比如心形图标,在制作过程中就可以通过路径查找器的相关功能将它拆分成两个部分。在完成了图形的编辑以后,下一步才是填充色彩,在这种风格中可以使用渐变也可以使用纯色,但是我们要为不同的图层添加透明度,才能制造出叠加的效果。如果是在PS或是Sketch中,除了使用普通透明度的方式,还可以通过调整「图层混合模式」来呈现出更好的叠加效果。最后,应该注意的是,如果使用图层混合模式,图形应该导出为巴布亚新几内亚格式,然后在实际项目中最佳使用。否则,如果图标应用程序背景不是白色的,效果可能不像预期的那样。
-
迷你按钮设计
按钮是网页最重要的组成元素之一,是用户和网站进行交互的重要桥梁。要设计出优秀的按钮是一件非常困难的事情,因为设计师们需要从整体设计的角度考虑按钮设计成什么样的风格才能和页面的其它部分很好的融合,同时按钮的设计要操持风格的一致性。下面和大家分享网页中15个迷人的按钮设计案例,一起欣赏。RadiofmbuttonsIphoneCameraAppUiBTUIFaceliftModalPop-upClippersappFiddlesMusicPlayerConceptVerysimpleminiplayerLoadingBarAppStoreButtonWoodSwitchRotatingNavigationShindigiOSAppDrinkCheckInModalWindowNavigationflex
-
图标悬浮设计
1.填充色变换2.填充色收缩3.填充色闪换4.描边由实变虚5.图标飞入效果6.图标内部旋转7.描边阴影闪现8.边界呼吸效果9.描边扩展下过
-
QQ旋风图标设计
QQ旋风图标设计这个是原图标这个是我们的临摹成果背景的创建没什么好说的,只是渐变,然后加了个图案而已。文档大小的话,请随意,本人用的1500*1000像素。首先,我画了水平居中和垂直居中两条参考线,方便等会的对齐,选择椭圆工具,画一个圆。为这个圆添加一个渐变叠加。添加一个1像素的描边。添加一个投影。目前效果如下:还是使用椭圆工具画出内部的这个圆。给内部的这个圆添加一个径向渐变。添加一个描边。添加一个内阴影。添加一个外发光,模拟原图标灰色描边外面的白色高光。现在,我们得到如下的效果。下面,开始画那个下载的箭头图标,首先,画个圆,再画个椭圆减去。选择矩形工具,画个矩形,旋转一下,减去。画个圆角矩形,增加。复制圆角矩形,并旋转,调整大小。画个三角形,把中间空白的位置补上。合并形状组件,并添加一个图层蒙版,用画笔涂抹,让箭头图标的左边跟原图标一样,有个透明度。为这个箭头添加一个渐变叠加。复制一层这个箭头图层,并将填充更改为0,下移一定的像素,并将其置于箭头图层的下层,添加一个颜色叠加。添加一个投影。再次复制一下箭头图层,修改一个锚点,调整成如下图所示,我们来做那个浮雕效果。将这个图层的填充更改为0,添加一个斜面和浮雕。勾选等高线。复制这个添加了斜面浮雕的图层,将图层颜色更改为白色,将填充更改为10%。在属性面板中,为这个形状羽化10像素,让其边缘平滑过渡。现在,我们强化一下浮雕的效果,画一个矩形,并将矩形的颜色填充设置为无颜色。为这个矩形添加一个渐变叠加。将图层不透明度更改为40%。现在我们得到如下效果。下面,我们开始画那些刻度。我们首先来画这个长的刻度,设置前景色为#12c8ff,画一个矩形,CTRL+T,设置中心点为画布的中心,旋转30度,CTRL+ALT+SHIFT+T,得到如下效果。为这个刻度条添加一个投影。接下来,我们画短的刻度,跟刚才是一样的操作的,只是旋转角度更改为7.5度,删除掉跟长的刻度重叠的部分。一样的,添加一个投影。下面,我们来画指针,首先,用椭圆工具画出中间那个圆。添加一个渐变叠加。添加一个斜面浮雕。添加一个描边。添加一个内阴影。添加一个投影。在圆的图层下层,设置前景色为#000000,画一个三角形的指针,用矩形删掉一个锚点,轻而易举可以得到一个等腰的三角形。为指针图层添加一个投影。在这个指针图层上层,圆图层下层,设置前景色为#2e2e2e,画一个矩形,旋转一定角度,创建剪贴蒙版,用来构成指针的立体面。这个是原图标这个是我们的临摹成果背景的创建没什么好说的,只是渐变,然后加了个图案而已。文档大小的话,请随意,本人用的1500*1000像素。首先,我画了水平居中和垂直居中两条参考线,方便等会的对齐,选择椭圆工具,画一个圆。为这个圆添加一个渐变叠加。添加一个1像素的描边。添加一个投影。目前效果如下:还是使用椭圆工具画出内部的这个圆。给内部的这个圆添加一个径向渐变。添加一个描边。添加一个内阴影。添加一个外发光,模拟原图标灰色描边外面的白色高光。现在,我们得到如下的效果。下面,开始画那个下载的箭头图标,首先,画个圆,再画个椭圆减去。选择矩形工具,画个矩形,旋转一下,减去。画个圆角矩形,增加。复制圆角矩形,并旋转,调整大小。画个三角形,把中间空白的位置补上。合并形状组件,并添加一个图层蒙版,用画笔涂抹,让箭头图标的左边跟原图标一样,有个透明度。为这个箭头添加一个渐变叠加。复制一层这个箭头图层,并将填充更改为0,下移一定的像素,并将其置于箭头图层的下层,添加一个颜色叠加。添加一个投影。再次复制一下箭头图层,修改一个锚点,调整成如下图所示,我们来做那个浮雕效果。将这个图层的填充更改为0,添加一个斜面和浮雕。勾选等高线。复制这个添加了斜面浮雕的图层,将图层颜色更改为白色,将填充更改为10%。在属性面板中,为这个形状羽化10像素,让其边缘平滑过渡。现在,我们强化一下浮雕的效果,画一个矩形,并将矩形的颜色填充设置为无颜色。为这个矩形添加一个渐变叠加。将图层不透明度更改为40%。现在我们得到如下效果。下面,我们开始画那些刻度。我们首先来画这个长的刻度,设置前景色为#12c8ff,画一个矩形,CTRL+T,设置中心点为画布的中心,旋转30度,CTRL+ALT+SHIFT+T,得到如下效果。为这个刻度条添加一个投影。接下来,我们画短的刻度,跟刚才是一样的操作的,只是旋转角度更改为7.5度,删除掉跟长的刻度重叠的部分。一样的,添加一个投影。下面,我们来画指针,首先,用椭圆工具画出中间那个圆。添加一个渐变叠加。添加一个斜面浮雕。添加一个描边。添加一个内阴影。添加一个投影。在圆的图层下层,设置前景色为#000000,画一个三角形的指针,用矩形删掉一个锚点,轻而易举可以得到一个等腰的三角形。为指针图层添加一个投影。在这个指针图层上层,圆图层下层,设置前景色为#2e2e2e,画一个矩形,旋转一定角度,创建剪贴蒙版,用来构成指针的立体面。
-
酷狗图标设计
最终效果:新建一个文档,尺寸1000*1000。拉一个径向渐变。前景色:#f5f5f5背景色:#cccccc用形状工具画一个圆,尺寸800*800。图层样式-内阴影不透明度调为20%,角度-120度,距离2,大小4。再画一个圆,尺寸700*700。跟上一个圆居中对齐。(用Ctrl选中需要对齐的图层,选择移动工具,上面的面板就有各种对齐。居中对齐按第二个和第六个。)图层样式-渐变叠加角度改为90度。前景色:#76aeda背景色:#2784cc复制一层图层,在图层下面再新建一个图层,将有渐变的这个图层向下合并到空图层。滤镜-杂色-添加杂色数量2,平均分布或者高斯分布都可以,选上单色。还有内阴影。不透明度20%,角度120度,距离0,大小5。用钢笔画出icon里的K。先画一条竖线。再新建一层画
-
机械风格图标设计
机械风格图标设计Step01点击—【文件】—【新建】(快捷键Ctrl+N)新建一个新的图像,命名好并把宽度设置为800px,高度为600px,分辨率为72dpi,然后点击确定,记得顺手保存文件(快捷键Ctrl+S)。Step02选择【圆角矩形工具】(快捷键U,可按Shift+U切换),在画布点击【创建圆角矩形】弹出层,设置宽度为180px,高度为180px,半径20px,并勾选【从中心】,然后点击确定;Step03重命名图层为di,右键设置图层样式:【斜面和浮雕】:样式:内斜面、方式:平滑、深度100%、方向:上、大小3、软化1、阴影角度90°、勾选【使用全局光】、高度30°、高光模式颜色#dedede、阴影模式颜色#262626、【渐变叠加】:线性渐变,色值从上到下为#333333—#c6c6c6,角度为90°;复制di图层重命名为di_bian,选择右键清除图层样式,填充颜色改为#616161;按住Ctrl键点击图层载入选区,向上移动两像素,再反向选区(快捷键Shift+Ctrl+I),再点击【图层】窗口的【添加图层蒙版】;Step04制作残旧金属纹理部分,这一步采用的是素材图片嵌入和笔刷绘制,可在网上搜索关键字:残旧、颓废、喷溅、金属等字眼下载相关素材,ps:本教程所用到的图片跟笔刷连同图标源文件psd均有提供(见附件下载或者网盘链接),笔刷如何载入请自行百度,谢谢!金属纹理主要是不断通过设置图层的混合模式和不透明度的参数值叠加调试而成的,本教程调试后的参数如下:01采用素材图片Rust_5.JPG,混合模式:正片叠底,不透明度70%;02使用笔刷,颜色#8c8c8c,不透明度30%;03采用素材图片纹理.png,混合模式:变暗,不透明度30%;这一步可自由发挥,自己觉得金属图片哪块可以作为纹理即用就可,参数也可自己调试叠加,以实际效果为主;Step05制作金属破损处,选择【钢笔工具】(快捷键P,可按Shift+P切换),绘制几个不规则多边形,形状自由发挥自定,配置金属纹理背景,颜色深点即可,此处举例:填充颜色#777777,设置图层样式:【内阴影】:正片叠底,填充颜色#464646,角度90°,距离1px,阻塞0,大小1px;再复制图层载入选区,填充颜色为#FFFFFF,向上移动一像素,反向选区(快捷键Shift+Ctrl+I),再点击【图层】窗口的【添加图层蒙版】。其他破损处也是使用这种操作方法;Step06复制图层di重命名为nei_di,点击【编辑】—【自由变换路径】(快捷键Ctrl+T),缩小90%(记得点击【保持长宽比】),右键清除图层样式,选择【混合选项】设置:【渐变叠加】:线性渐变,色值从上到下为#4b4b4b—#98988d,角度为90°;【投影】:正片叠底,颜色#202020,角度90°,距离5px,扩展0,大小8px;Step07绘制备份图标,选择【椭圆工具】(快捷键U,可按Shift+U切换),在画布上按住Shift键画一个正圆,再选择【椭圆工具】,并选择路径【减去顶层形状】,画一个圆环,选择【钢笔工具】(快捷键P,可按Shift+P切换),并选择路径【合并形状】,在圆环右边处画一个三角形,最后再选【钢笔工具】,并选择路径【减去顶层形状】,画一个缺口,完成备份图标,重命名为backup,填充颜色#202020,设置图层样式:【描边】:大小3px,外部,线性渐变,色值从上到下为#787878—#484848,角度为90°;【内阴影】:正片叠底,颜色#474747,角度90°,距离3px,阻塞0,大小3px;再复制图层backup重命名为backup_bian,载入选区,向上移动一像素,反向选区(快捷键Shift+Ctrl+I),再点击【图层】窗口的【添加图层蒙版】,设置图层样式:【渐变叠加】:线性渐变,色值从上到下为#282828—#aeaeae,角度为90°;Step08绘制螺丝孔:选择【椭圆工具】,在画布上按住Shift键画一个小正圆,大小自定适合即可,设置图层样式:【描边】:大小2px,外部,线性渐变,色值从上到下为#929292—#3b3b3b,角度为90°;【渐变叠加】:线性渐变,色值从上到下为#353535—#0c0c0c,角度为90°;复制图层(快捷键Ctrl+J或者选择【移动工具】按住alt键拖动),复制四个小圆分别放在四个角;绘制插槽:选择【矩形工具】(快捷键U,可按Shift+U切换),画一个长方形,大小自定适合即可,设置图层样式:【描边】:大小1px,内部,颜色#606060;【内阴影】:正片叠底,颜色#2c1d02,角度90°,距离1px,阻塞0,大小5px;【渐变叠加】:线性渐变,色值从上到下为#e5c511—#644200,角度为90°;最后复制六个图层,并排放在底部且居中排列;Step09制作内部框残旧金属纹理部分,一样是采用素材图片嵌入和笔刷绘制;金属纹理主要是不断通过设置图层的混合模式和不透明度的参数值叠加调试而成的,本教程调试后的参数如下:01采用素材图片Rust_4.JPG,混合模式:强光,不透明度15%;02使用笔刷,颜色#181818,混合模式:叠加,不透明度40%;03使用笔刷,颜色#3f311d,混合模式:叠加,不透明度50%;这一步可自由发挥,自己觉得金属图片哪块可以作为纹理即用就可,参数也可自己调试叠加,以实际效果为主,完成图标绘制;Step01点击—【文件】—【新建】(快捷键Ctrl+N)新建一个新的图像,命名好并把宽度设置为800px,高度为600px,分辨率为72dpi,然后点击确定,记得顺手保存文件(快捷键Ctrl+S)。Step02选择【圆角矩形工具】(快捷键U,可按Shift+U切换),在画布点击【创建圆角矩形】弹出层,设置宽度为180px,高度为180px,半径20px,并勾选【从中心】,然后点击确定;Step03重命名图层为di,右键设置图层样式:【斜面和浮雕】:样式:内斜面、方式:平滑、深度100%、方向:上、大小3、软化1、阴影角度90°、勾选【使用全局光】、高度30°、高光模式颜色#dedede、阴影模式颜色#262626、【渐变叠加】:线性渐变,色值从上到下为#333333—#c6c6c6,角度为90°;复制di图层重命名为di_bian,选择右键清除图层样式,填充颜色改为#616161;按住Ctrl键点击图层载入选区,向上移动两像素,再反向选区(快捷键Shift+Ctrl+I),再点击【图层】窗口的【添加图层蒙版】;Step04制作残旧金属纹理部分,这一步采用的是素材图片嵌入和笔刷绘制,可在网上搜索关键字:残旧、颓废、喷溅、金属等字眼下载相关素材,ps:本教程所用到的图片跟笔刷连同图标源文件psd均有提供(见附件下载或者网盘链接),笔刷如何载入请自行百度,谢谢!金属纹理主要是不断通过设置图层的混合模式和不透明度的参数值叠加调试而成的,本教程调试后的参数如下:01采用素材图片Rust_5.JPG,混合模式:正片叠底,不透明度70%;02使用笔刷,颜色#8c8c8c,不透明度30%;03采用素材图片纹理.png,混合模式:变暗,不透明度30%;这一步可自由发挥,自己觉得金属图片哪块可以作为纹理即用就可,参数也可自己调试叠加,以实际效果为主;Step05制作金属破损处,选择【钢笔工具】(快捷键P,可按Shift+P切换),绘制几个不规则多边形,形状自由发挥自定,配置金属纹理背景,颜色深点即可,此处举例:填充颜色#777777,设置图层样式:【内阴影】:正片叠底,填充颜色#464646,角度90°,距离1px,阻塞0,大小1px;再复制图层载入选区,填充颜色为#FFFFFF,向上移动一像素,反向选区(快捷键Shift+Ctrl+I),再点击【图层】窗口的【添加图层蒙版】。其他破损处也是使用这种操作方法;Step06复制图层di重命名为nei_di,点击【编辑】—【自由变换路径】(快捷键Ctrl+T),缩小90%(记得点击【保持长宽比】),右键清除图层样式,选择【混合选项】设置:【渐变叠加】:线性渐变,色值从上到下为#4b4b4b—#98988d,角度为90°;【投影】:正片叠底,颜色#202020,角度90°,距离5px,扩展0,大小8px;Step07绘制备份图标,选择【椭圆工具】(快捷键U,可按Shift+U切换),在画布上按住Shift键画一个正圆,再选择【椭圆工具】,并选择路径【减去顶层形状】,画一个圆环,选择【钢笔工具】(快捷键P,可按Shift+P切换),并选择路径【合并形状】,在圆环右边处画一个三角形,最后再选【钢笔工具】,并选择路径【减去顶层形状】,画一个缺口,完成备份图标,重命名为backup,填充颜色#202020,设置图层样式:【描边】:大小3px,外部,线性渐变,色值从上到下为#787878—#484848,角度为90°;【内阴影】:正片叠底,颜色#474747,角度90°,距离3px,阻塞0,大小3px;再复制图层backup重命名为backup_bian,载入选区,向上移动一像素,反向选区(快捷键Shift+Ctrl+I),再点击【图层】窗口的【添加图层蒙版】,设置图层样式:【渐变叠加】:线性渐变,色值从上到下为#282828—#aeaeae,角度为90°;Step08绘制螺丝孔:选择【椭圆工具】,在画布上按住Shift键画一个小正圆,大小自定适合即可,设置图层样式:【描边】:大小2px,外部,线性渐变,色值从上到下为#929292—#3b3b3b,角度为90°;【渐变叠加】:线性渐变,色值从上到下为#353535—#0c0c0c,角度为90°;复制图层(快捷键Ctrl+J或者选择【移动工具】按住alt键拖动),复制四个小圆分别放在四个角;绘制插槽:选择【矩形工具】(快捷键U,可按Shift+U切换),画一个长方形,大小自定适合即可,设置图层样式:【描边】:大小1px,内部,颜色#606060;【内阴影】:正片叠底,颜色#2c1d02,角度90°,距离1px,阻塞0,大小5px;【渐变叠加】:线性渐变,色值从上到下为#e5c511—#644200,角度为90°;最后复制六个图层,并排放在底部且居中排列;Step09制作内部框残旧金属纹理部分,一样是采用素材图片嵌入和笔刷绘制;金属纹理主要是不断通过设置图层的混合模式和不透明度的参数值叠加调试而成的,本教程调试后的参数如下:01采用素材图片Rust_4.JPG,混合模式:强光,不透明度15%;02使用笔刷,颜色#181818,混合模式:叠加,不透明度40%;03使用笔刷,颜色#3f311d,混合模式:叠加,不透明度50%;这一步可自由发挥,自己觉得金属图片哪块可以作为纹理即用就可,参数也可自己调试叠加,以实际效果为主,完成图标绘制;