前端页面设计-masterGo学习笔记-入门篇

masterGo学习笔记-入门篇

简单的UI图标绘制

分析结构组成

通过分析我们可以得知这个icon他的基本结构以及相对应的效果原理，之所以把这一部分单独提出来讲是为了让铁子们以后在绘制相关图形的时候能够形成流程化的思维来完成相关的事情，而不是无头苍蝇一样乱撞。

既然分析完成之后咱们就可以开始着手了

基本结构绘制

根据刚才的分析，首先分为两大模块，一个是图形模块，一个是字体模块。

图像模块

通过点击形状工具或使用快捷键一次选取矩形工具、圆形工具、多边形工具，通过鼠标直接点击或拖拽即可完成图形的绘制。

快捷键命令

R //矩形
O //圆
I //直线

其他图形补充

多边形工具

星形工具

好的，到这里就补充完毕，咱们继续

然后嘞，我们就根据一开始的结构和大概位置进行绘制就行，如下图所示

Icon效果设置

我们通过原图得知，我们的右上方的圆是有一个渐变色的，所以我们点击右边的颜色，然后选择线性渐变模式并进行调节

注意：这个地方一定要先选定对象后再进行操作，直接点击图形便是你的操作对象，最后根据实际效果来调整就行。

然后分别设置咱们的矩形和三角形的圆角效果，这个地方注意，如果你无法点击选取到你需要操作的图形，可以通过点击左边的图层信息栏主动选取

再通过观察，我们的矩形是透明的，这个我们可以选定这个矩形然后设置不透明效果，这个分别有三个地方可以设置

然后虽然透明了，但是并没有模糊效果，我们可以点击右边菜单栏的特效进行添加，点击右边的加号然后选择背景模糊，当然，效果你可以一个一个的试

对比后我们发现后面的那个圆会有很模糊的边界感觉，这个就是典型的设置了高斯模糊效果，所以我们直接点击或左侧菜单栏选取小圆进行特效-高斯模糊就行，可以点击这个模块设置具体的模糊值

设置完成后，同理设置三角形的投影效果，可以通过 设置x周、Y轴、扩散效果来设置最终的效果

设置完成后，咱们记得给刚才的矩形加一个描边效果

最后设置一下字体的具体效果，因为看起来单个字体之间的间距比较宽，那就是设置了字符间距

等一切设置完成之后咱们就大功告成了