小白常见问题-绘制图标锚点对不齐

用户头像
大连/UI设计师/8年前/748浏览
小白常见问题-绘制图标锚点对不齐

本文通过讲解一个简单小图标的方式,梳理基本的图标制作思路,并解说一下锚点对不齐时的解决办法。

这个是我们想要做的图标:

首先,分析一下图标,其实就是一个风车的形状。风车大家平时生活中都不陌生,简单讲就是四个三角形拼在一起。

所以,我们先随便绘制一个三角形,给三角形的小尖尖加个圆角,像这样:

接下来使用旋转工具,按住alt键将图标点中右侧的锚点,将旋转中心设定为右侧锚点。


此时会弹出旋转的功能弹窗,将旋转角度设置为90度,选择复制选项。注意,这里一定要选择复制,如果选择确定是只旋转不复制的。


随后重复旋转(快捷键:Ctrl+D),就变成了这个样子:

这个时候,基本的轮廓已经出来了,但还是四个分开的形状。

接下来,我们需要把四个分开的形状合并。




因为最后的图标是线性的,我们把颜色填充改成描边。描边属性设置为居中,圆角。




接下来,给这个描边用钢笔工具加两个锚点。

为什么要加锚点呢?因为后面要对描边的锚点进行删除修改,如果直接删掉锚点,图形形状就会变得面目全非。

像这样:



如果加两个锚点,再将中间的锚点删除就会是这样:



是不是已经很接近了?这个时候只要把这两个锚点稍微拖拽一下就可以了。




最后把中心的圆加上,再调整一下锚点位置和描边宽度就可以了。



然而,由于误操作或者没有注意细节,有可能会做成这个样子: 



拐角的锚点很明显的没对齐,而且还转成了形状,这可怎么办?


这个时候可以选择借助一下直线工具,在使用直线工具且未选中任何图层元素的情况下,悬停在锚点的位置,会有提示。


然后使用直线工具连接形状内侧的两个锚点:

是不是有点看不清?我们加粗显示一下:

然后选中要删除的那侧锚点,往你要删除的方向拉,只要拉的位置在原先位置的延长线上就会有提示。

同理,按照这种方法继续拉:

然后,用钢笔工具把这些直线连成一个形状,然后使用注意,这个形状要包含的是需要删除的部分,不要选反了。

为了保险起见,最好把看起来闭合的图形用路径查找器里面的形状工具的合并工具合并一下,确保万无一失。



为了看起来清楚点,要删除的形状改成了填色不带描边的显示。接下来使用减去顶层形状,形状大致就出来了:

把末端的尖角变圆加上,再加粗一点。如果觉得锚点太多,可以用钢笔工具将锚点减去,注意是减去,不是删除!不是删除!不是删除!





最后把圆加上,再看看不好看的修一修:





大功告成!!!!

1
举报
|
4
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】游戏/娱乐icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
新能源APP应用UIKit
高级表盘系列UI源文件
UI 登录界面设计模板包
矢量立体简约UI蓝白图标
我的钱包-UI界面设计-app
新拟态风格 UI设计组件库
【新年UI图标】影音icon
UI界面 组件
智能家居中心 简约 UI设计组件库
3D渐变流体抽象矢量UI背景图
【新年UI图标】会员icon
UI通用设计素材1
Security Camera UI kit
盲盒APP UI设计
钱包ui模板
【新年UI图标】秒杀icon
科技医疗透明柜UI界面设计
高级感金属拟物 UI设计组件库
【新年UI图标】珠宝icon
拟物风质感写实UI卡片合集源文件
【新年UI图标】30个图标
登录注册