Sketch绘制相对复杂效果的Icon（网格、剪刀、旋转副本）使用

心已赠人 2022-10-29 12:29 20阅读 0赞

#### Demo1 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]

*  首先我们看到这个，之前的文章可以实现的差不多，但是中间的断层很难实现，这里就说一下怎么实现他们之间交叉的断层怎么实现的，两种方法
 *  方法1

> 直接钢笔工具自己将里面的所有的零部件全部画出来，显然这不是我要说的

*  方法2
 *  我们直接绘制一个画板（快捷键是a）
 *  然后我们绘制一个矩形，然后复制一个，旋转90度，选中两个，选择减去顶层  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 1]
 *  我们就得到这个断层的效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 2]

> 当然又会有抬杠的说了，我不会直接画两个矩形吗？当然是可以的，但是复杂的时候就不那么舒服了，我只是给你们演示一下基础用法，复杂的时候也是一样的，这里还有一个点就是减去顶层的时候，看好自己哪个是在上面的

#### Demo2 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 3]

*  这种是怎么实现的呢，很简单
 *  我们将原图扔进去，然后绘制一个圆角的矩形，按照他的比例来
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 4]
 *  选择旋转副本

> 这里值得注意的一点是，旋转的时候是不算自己的， 也就是你一共是8个的话，就只需要7个就够了

*  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 5]
 *  旋转以后拖动中间的白点，就会自己缩小，和原图一样的时候就松手
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 6]
 *  然后拖到隔壁的画板上，将颜色一个一个的改变
 *  最后就是这样，
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 7]
 *  但是很明显，前途的嵌套和我们的不一样，这个时候我们需要做的是全部选中，将边框取消（快捷键是B），然后我们选择正片叠底
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 8]
 *  苹果的Photo的logo就绘制结束了

##### Demo3 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 9]

*  这个最难的是这个缺口是怎么实现的
 *  我们绘制一个圆形，边框我们按照原图进行加粗，然后按照圆形的半径绘制一个正方形，这个正方形只是一个参考，没有别的作用，然后我们直接使用剪刀工具，将四分之一的部分减去
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 10]
 *  最后将背景颜色改为当前圆形内部的颜色即可  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 11]
 *  这里使用到了见剪刀工具，可以减去你不需要的任意部分。

#### Demo4 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 12]

*  这个是怎么快速实现的，这个icon其实就是一个更多的icon，很常见，这个实现最快的方式是网格
 *  我们绘制一个，然后选择网格，进行数量和间距的调整即可![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 13]

> 这一篇就写到这，下一篇我们讲一下怎么将阿里的svg图标使用这个软件进行编辑，然后说一下怎么切图！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]: /images/20221024/ae2ac2d08b394a35b8233c14c3ce68a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 1]: /images/20221024/2a9dc2c90b244c2689dee517071597ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 2]: /images/20221024/a9afbbe7cea24b64bd5879e95b797c9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 3]: /images/20221024/aa97c7dffbcc468d9d7176cb46fa52bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 4]: /images/20221024/e2063cc2b0a14a54ac5ad836667981e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 5]: /images/20221024/afdc098bc4f3401aadc5f2b02469d2e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 6]: /images/20221024/86aebdbfc07443a0afeb447ca945b5c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 7]: /images/20221024/936b8810c91d4db3a89dcf0fda183b02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 8]: /images/20221024/f9aecd70f818420399bfe22247e8e0bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 9]: /images/20221024/62f1f90d7c5e4c02af44c7ffc5f3d955.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 10]: /images/20221024/310c77eb7ede4cf2a4342dc77183b349.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 11]: /images/20221024/a92f0eea90bb4a209e02f2997483b1be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 12]: /images/20221024/add83a0eb20744f3868e3c347923c8e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 13]: /images/20221024/4a42d55b365e4faab6c6d886183b3a6b.png