icon设计软件-教你用Sketch设计超赞的Icon

直接用这个在线的图片转ico工具吧,方便快捷,常用的图片格式比如jpg/png/webp/bmp等等都可以直接转成ico图标,还支持在线裁剪缩放,选取你需要的尺寸。

在线图片转换ICO图标,PNG|JPG转ICO图标制作

图片生成ico图标

图片转换ICO图标Pro版步骤:

一、点击或者拖拽到上传框中,即可上传你要转换的图片,直接将新图片拖入上传框即可更换图片。目前已知支持jpg、png等多种常见的图片格式,如果上传图片并转换ico图标成功,则代表支持该格式。

二、此时预览框中会出现刚刚上传的图片,可以任意缩放拖拽裁剪框,选择你想要截取并转换ico图标的区域。在拖拽缩放裁剪框的过程中,左上方会有ico图标效果的实时预览。

三、选择需要生成的ico图标的尺寸,主要提供宽高为16、32、48、64、128、256、512的尺寸以供选择。通常的ico图标基本都是32、64或者128像素的。

四、选择转换生成的ico图标的文件格式,默认的格式是.ico,并且有.jpg和.png格式可以选择。需要注意的是,ico图标一般都是背景镂空透明的图形,只有.ico和.png格式支持透明背景的图片。而.jpg格式的图片本身是不支持的。

本教程为翻译教程,原文地址为:

虽然Sketch主要是设计用户界面的软件,可是用来设计icon也同样顺手。这正是我们将要做的,我会一步步指导你设计出下面三个图标。

我们首先按 A ,创建一个矩形画板。在左侧的 Layers List 里面将这个画板命名为“ Icons ”。不用太在意它的位置和大小,我们马上来重新调整。首先,我们在右侧的 Inspector 中输入一些数值。将 Position 中的 XY 值都设为0,然后将宽度设为400,高度设为100。通过按 cmd+3来让画板到我们的视野中心,接下来按 cmd+0将画板放大到100%。最后,按两次 cmd+ +来得到更好的视野。

你只需要记住一个重要的原则: 尽量用基础形状来构成你的图标,而不是使用向量工具。 这也是我们用来制作第一个图标" Followers ”的原则。

第一步,按 O 键画一个40*40的圆,按住 Shift 键确保它是正圆。现在,在它的下面,我们画另一个圆,这一次不要按 Shift 键,因为我们需要一个50*75的椭圆。将这个椭圆拖拽到第一个正圆的附近(如截图那样)。

现在,我们还差一个矩形。按 R 键画一个60*50的矩形,使之位于两个圆形的正下方。将矩形的上边与椭圆的中心对齐。

为了完成这个图标,我们将用到 Sketch 中的布尔运算体系,它使得不同的形状,能够组成一个新的形状。所以,现在把两个圆形都选中(点击其中一个,按住 Shift 后点击另一个),然后按下工具栏中的“ Union ”按钮。你能在左侧的 Layer List 中看到它们已经组成了新的形状。

但这还不是我们想要的呢,因为矩形还没被减去。让我们再次运用布尔运算吧:选择刚刚合并的形状,同时选择矩形,按下工具栏中的“ Substract ”按钮。这样做之前,我希望你确保矩形图层在合并的形状图层之上。

最后,将这个图标的 Fill 去除,然后更改它的 Borders 。点击整个图标,将 Inspector 中 Fill 前面的勾勾点掉。之后,将描边的位置改为 Inside 然后设置粗细值为5。哒哒,我们完成啦!

接下来我们制作“ Tweets ”图标,这个图标由一个对话框气泡和三个位于中间的点构成。像之前一样,画一个70*50的圆。不过,光靠基础形状并不能构成所有图标,我们现在需要修改这个圆形的向量点。点击这个圆然后按 Enter (或者双击它)来进入向量编辑模式。在此模式中,你可以调整构成形状的向量点。你能在这个圆上看到四个向量点,一边一个,它们由小圆圈来表示。

不过我们不去改变预先设定好的点,取而代之,我们为这个圆增加一些新的点。光标在椭圆右下方的线段上盘旋时,你将看到这条线变成了蓝色,按住cmd键,你将得到这段曲线的中点,点击它,为这段曲线增加一个向量点。

这之后,在这个点的左右两侧各增加一个向量点。这时,你也许想要再按一下 cmd++来获取更好的视图。现在,选择我们添加的第一个点,将其向右下方拖拽。这样我们就得到了想要的对话气泡形状。请注意,这个点由两条线来控制,决定它的弯曲度。这里我们不需要任何弧度,我们只需要一个尖角,所以我们通过点击 Inspector 中的第一个按键,将这个点改变为“ Straight ”点。

这样对话气泡就做好啦,但我们还需要添加一些点在它中间。但首先还是把  Fill 去掉,再增加 Border。我们先按 Esc 离开向量点编辑模式。把 Inspector 里面 Fill 前面的勾去掉,再像之前那样设置边框。现在我们来加小圆点吧!再次按下 O 键去画一个12*12的正圆。点击这个圆,按 Alt 之后拖拽一个它的副本在它右边;再这样做一次以得到第三个圆。现在你所需要的只是把这三个圆在气泡形状中分布开,然后移除它们初始的 Border。

现在我们来做第三个“ Following ”图标。第一件事是按 U 来创建一个圆角矩形,同时按住 Shift 来确保它是正方形的。让这个圆角正方形的大小为55*55,圆角半径为10。和之前一样,我们想把这个圆角正方形的 Fill 移除而换成 Border,这样我们可以在里面添加一些什么。

我们会采用一个新的方法来绘制方形中的加号。我们按下 T 然后进入输入模式,选择一个清爽的字体,比如“ Avenir next bold ”,点击矩形中间然后输入“+”。字号差不多是55。按 Esc 离开输入模式,然后将加号移动到图标的中间。最后将它转变成一个形状(选择 Type>Convert Text to Outlines)。

图标们基本上要完成了,但是我们还需要统一它们然后将默认的灰色换成更有生机的绿色。点击所有图标的外边框,然后点击边框前面的小色块来选择一个你喜欢的绿色。之后,我们还需要将里面的部分也换成这个颜色。点击里面的部分,然后点击填充前面的小色块来选择相同的颜色。

到此我们就完成啦～

1.Photoshop

简称“PS”是一款位图设计软件,主要处理以像素所构成的数字图像。在图像、图形、文字、视频、出版等方面都有涉及。Ui设计中较为复杂的视觉效果还需要在PS里实现。

2.Illustrator

简称“AI”是一款矢量图设计软件,应用于出版、多媒体和在线图像的工业标准矢量插画软件,icon设计一般在Ai中绘制,保证在界面中不失真。

3.Sketch

它是一款矢量绘图工具,与AI不同的是,Sketch是为图标和界面设计而生的,同时它还提供布尔运算将多个简单形状混合更为复杂的形状。其主旨是为了给广大产品界面和UI设计师一个简洁实用的创造平台。

4.蓝湖

它是一款产品文档和设计图的共享平台,帮助互联网团队更好地管理文档和设计图。可以无缝链接产品、设计、研发流程,降低沟通成本,提高工作效率。

5.AfterEffects

简称“AE”,是一款图形视频处理软件,属于层类型后期的软件。小到设计简单的特效制作,大到电影后期制作。在UI设计过程中界面加载中loding动效、开机动画等交互动效都需要在AE中实现。

6.Principle

它是一款高效的输出设计软件,动画效果的制作是本款软件的强项。如你是AE和Sketch的使用者,你会对其有更熟悉的认知:类似Sketch的界面+AE的时间轴动画+Keynote的神奇移动,外挂一个容易理解的联动功能,用于触发某个事件发生的变化

7.C4D

中文名4D电影,外文名CINEMA4D,是一款有极高运算的速度和强大的渲染插件。在越来越注重UI动效和不满足于平面视觉效果的今天,C4D动效越来越受到更多人的关注,也是求职路上一条闪亮的光点。

设计软件千千万,适合自己的才是UI路上的利器,良将身上怎能不配好剑,设计之路充满万千变化,永远在学习的路上才不会被淘汰。