·首页 > 课程类 > 最新开课最新开课

金华市UI设计培训?ui设计学什么?

报名热线:400-666-7863
[作者:佚名 发表时间:2019年03月13日]

金华市UI设计培训?ui设计学什么?

金华市UI设计培训?ui设计学什么?

那么我们使用什么软件来绘制图标呢?这里我建议使用Illustrator。首先,UI设计师使用不同的软件来设计页面,目前主流是Photoshop和Sketch,也有很多设计师选择Adobe XD。而这些软件都是兼容Illustrator的,所以使用它来绘制图标非常有灵活性。可能您对Illustrator并不熟悉,不过没关系,我们在这里只需要了解它与图标绘制功能相关的功能即可,比如钢笔、布尔运算、属性面板、描边、填充、混合工具等,并不需要学习非常深入。
 
笑脸图标
笑脸图标的设计步骤:1.画出一个正圆。2.接着画一个小圆然后ctrl+F复制平行移动到旁边,然后右键编组。接着,同时选中大圆和编组的小圆进行水平居中对齐。3.我们绘制一个圆形,然后通过布尔运算减去一个矩形得到半圆形组成嘴,完成。
 
对号图标
对号图标的设计步骤:1.使用矩形工具画出一个长方形,然后复制后将复制后的长方形向右上移动相同的距离,然后使用布尔运算剪切,旋转45°后变成一个对号。2.绘制一个正方形,使用路径选择工具选中,拖动圆角的圆点拉出圆角得到圆角矩形。3.对号和圆角矩形进行布尔运算,完成。
 
WIFI图标
WIFI图标的设计步骤:1.绘制多个圆形并且通过布尔运算相加减得出三个圆圈嵌套的靶子造型。2.通过旋转过的45°矩形和之前图形布尔运算得到Wifi图标,完成。
 
地理位置图标
地理位置图标的设计步骤:1.选择矩形工具单击画面输入数值,建立一个100px的圆形。然后选择这个圆形复制它,然后等比例缩小它,和之前的大圆进行布尔运算相减,得到环形。2.绘制50px的矩形,用对齐工具放在环形的左下方。3.旋转45°得到地理图标,完成。
 
云彩图标
云彩图标的设计步骤:1.绘制两个大小不同的圆形,使用对齐工具进行底部对齐。2.绘制一个矩形,同样底部对齐。3.合并形状,完成。
 
眼睛图标
眼睛图标的设计步骤:1.绘制出一个正圆。2.复制这个正圆形,然后按着Shift + 方向键下键,并通过布尔运算得到眼睛外轮廓。3.绘制两个圆形,通过对齐工具和布尔运算工具得到最终眼睛造型,完成。
 
铃铛图标
铃铛图标的设计步骤:1.首先用圆形和矩形合并组成主体;2.使用矩形和圆形进行布尔运算绘制铃铛底部和铃铛顶部的零件,然后进行合并形状;3.铃铛底部的半圆使用圆形和矩形布尔运算,完成。
 
 
简易齿轮图标
简易齿轮图标的设计步骤:1.通过两个圆形进行布尔运算得到环形。2.绘制一个矩形,上下复制在圆形上,然后把它们俩编组和环形使用对齐工具进行水平垂直对齐。3.复制矩形编组并旋转90°,得到一个十字形。4.复制这个十字形并最终全部合并形状,完成。
金华市UI设计培训?ui设计学什么?
齿轮图标
齿轮图标的设计步骤:1.用AI的爆炸图形和圆形进行布尔运算画出齿轮;2.用两个圆形进行布尔运算做出里面的零件,完成。
 
螺丝刀图标
螺丝刀图标的画法:1.用圆形和矩形做出螺丝刀主体;2.用矩形旋转并复制再布尔运算做出凹槽;3.使用矩形做出前面的造型,完成。
 
苹果图标
苹果图标的画法:1.绘制一个六边形。2.将水平中间两个点向上移动。3.在中心线上下建立两个锚点,并且向下移动。4.将下面两个点向内分别移动。5.使用圆角工具将每两个相同的点一组一组拉成圆角。6.绘制一个矩形并且旋转45°,然后将左右两个点向内拉得到菱形。7.用圆角工具使菱形变成叶子造型并且旋转45°。8.使用一个圆形和苹果造型相切,完成。
 
放大镜线性图标
放大镜线性图标的画法:1.绘制正圆。2.绘制一条直线。3.用属性面板里的对齐工具把它们俩对齐。4.用描边面板里的属性将描边改成圆头,然后旋转45°即可。
 
时钟线性图标
时钟线性图标的画法:1.绘制正圆。2.绘制一个矩形,对齐圆形中心。3.用增加锚点工具在矩形左和下边上增加两个锚点。4.用直接选择工具框选没用的线条,删除即可。
 
点赞线性图标
点赞线性图标的画法:1.绘制两个矩形,并用直接选择工具选择重合的四个锚点,在属性面板里使用对齐工具让它们完全对齐。2.将大的矩形底部锚点向左移动。3.绘制一个矩形并和大的矩形左对齐。4.用直接选择工具选中直角,拖动圆角小圆点让它们变成圆角,完成。
金华市UI设计培训?ui设计学什么?
线性图标的处理
如果您掌握了以上填充态图标的设计方法,相信其他图标的设计只要以此及彼的思考,就可以完成。比如线性图标,在绘制线性图标时,我们首先会建立一个半透明的矩形来固定图标应该绘制的范围,比如“40px”。然后我们把填充关闭,只使用描边来绘制线性图标即可。绘制完以后我们无需保存文件,仅通过Ctrl+C的复制快捷键,然后打开Sketch或者Adobe XD就可以使用Ctrl+V将图标粘贴过去了。但是,如果您使用Photoshop做界面设计,可能会多两道手续,首先就是线性图标需要扩展才可以复制到Photoshop中。将图标复制一份(扩展之后的图标不方便修改,所以要留着可修改版本),然后点击对象菜单 > 扩展,点确定,就可以把原本是没有闭合的路径改为完整的形状。
 
然后复制,打开Photoshop粘贴会打开提示框,我们可以选择把图标粘贴成为像素、智能对象、路径、形状。如果粘贴成像素的话,那无疑对修改是非常不利的。如果粘贴成智能对象,双击智能对象会回到Illustrator中修改,但是也有一定缺点,那就是智能对象不能直接在Photoshop中进行调整。如果粘贴成路径也不是很方便,所以最好是我们将Illustrator中绘制的小图标粘贴成形状。选择后,图标就粘贴成了形状图层,我们可以在Photoshop中对它进行布尔运算、锚点调整等操作了。然而,我们会发现图标粘贴到Photoshop中,横竖的路径会出现虚边的情况(圆角和斜线是允许一定的虚边出现的,但是直线不可以)。这种虚边有可能会影响用户的体验,我们必须把它消灭掉。第一种方法:在Photoshop中我们可以用直接选择工具后界面上方的对齐路径功能,给它打钩来尝试修复这个问题。第二种方法:我们可以使用直接选择工具选中虚掉的某两个锚点,然后按Ctrl+T(自由变换),再按键盘的上下或左右“摇一摇”,路径就会清晰了。第三种方法:也可以使用几像素的矩形进行布尔运算强行对齐。三种方法一定能够让图标的横竖路径没有虚边,达到完美的效果。当然Sketch和Adobe XD都是矢量工具所以复制后没有这个问题。
  

金华电脑设
计培训24小时联系电话15988595260
  • 金华电脑设计培训_虞老师在线