Sep29

“简洁”icon教程

photoshop

最近两个项目都用到了简洁风格的小图标,虽然资源网上有很多现成的可以用,但是基本没有源文件,就算有psd,大多栅格化的图层也没办法缩放修改,与png无异,这样约束很多。于是决定全部自己来画好了。画的过程也没什么创意,仅仅在新网禅上分享下photoshop的操作过程吧。

先看看几个图标吧,只有四枚,而且颜色未必合你口味,不过这可都是Jesse体力活儿搞出来的。况且每一个部分都是形状图层,当他在新网禅分享这几个图标的源文件出来之时,各位打酱油的同学或许可以加以利用一下 =)。

分享图标icon下载

…选择蓝色这个中等难度的,传说中的教程开始了…

1. 新建图层组,然后在矩形工具上点右键选择椭圆工具(默认情况下=))。

矩形工具

2. 按住shift的时候,在画布上画一个不大的正圆。因为图标一般都不大,而且从我一个完全没有UI从业经验的人de感觉来说,做图标一般都是以目标大小开始做,因为大图标缩小以后效果都会变很多的,至少是从中间水平开始做,比如32*32。大图标到了16*16的时候几乎元素都挤在一起,需要重新调整。如果没必要大图标的时候,我觉得以目标大小最合适不过。

矩形工具

3. 此时用矩形工具在圆形上面画出一个适当大小的长方形来。注意:放大!!放大!!在不设置对齐的时候以及其他一些Jesse不知道的情况下,会出现下边白色箭头所指示状况,边缘出现小于1px的溢出(?官方叫什么)。其实我写这篇东西的关键目的就是讲调整这个溢出,或者说利用这个溢出,因为我感觉我们在一般机器上的辨别能力是0.05px级上面,如果差了1px,效果是很明显的。

4. 还是上面这张图,右键点击路径选择工具选择直接选择工具(此时鼠标为白色空心形状)

直接选择工具

5. 此时,用直接选择工具点选左上角锚点(锚点有空心方块变为实心),然后按住shift再点击左下角锚点。如上图左半部分所示,左边两个锚点被选中。注意:这时候画布仍然是500%+。按右方向键,被选中的锚点会带动溢出部分0.x像素/次向右靠拢。如上图右半部分所示。在画布缩放处于100%时按方向键,方向键一次移动为1px,按住shift移动则是10px(默认值)。

添加锚点工具

6. 如上图所示:在调整好(没有溢出)的长方形上边,用添加锚点工具钢笔工具上点右键,出来的钢笔形状右上角有个“+”的那个)添加4个新锚点。

直接选择工具

7. 如上图所示,用直接选择工具(白色空心鼠标形状的那一个)选择第二个,向下拖到长方形内部。

8. 同样方法把第三个拖下来,此时如图所示,用转换点工具将带有调整柄的锚点转换为///(不知道怎么描述,就是不带湾了- -。)四个依次效仿。这里需要掌握好初学者比较头疼的钢笔工具,隆重推荐几个钢笔工具使用的教程:

钢笔工具

9. 按照5步所示的方法,将“凹”槽调整为上图所示状态,将视图调整到100%看下状况。实际上在图标制作过程中,放大与还原是处于不断的切换状态。

工具栏选项

10. 制作箭头。点击矩形工具,在工具栏选项如上图所示位置选择这款扁平的箭头,顺时针90度旋转,画到“凹”槽上部,再做5步所示的微调。最后得到如第一步前边所示效果。

分享图标icon下载

四枚图标源文件下载地址:

Comments文章评论3Click here to leave a response.

  1. admin says:

    我来个沙发吧,木人看啊木人留言。

  2. thisman says:

    你下面的分享图标就挺漂亮的呢!

  3. 杨皓棱 says:

    ls +1 求分享啊,