图标在线设计免费——PS如何制作图标图标？

有哪些图标网站值得推荐？图标网站:

1，Iconfont-阿里巴巴矢量图标库

阿里巴巴的免费矢量图库提供矢量图标下载、在线存储、格式转换等。，可以用中文搜索，直接在搜索框中输入所需内容即可出现相应的素材。只要点击下载图标，网站还支持在线修改颜色，真的是一个很独特的网站。

2、NounProject

一个基于平面设计师的图标分享平台，提供高质量、可识别的图标。用户可以通过网站右上角的图标找到类别，筛选出你想要找到或使用的logo图标。这些类别包括动物、食品和饮料、生活护理、人、安全和预警、科学、体育和娱乐、交通、旅游、天气和自然。

3、偶像忍者

IconNinja是一个高质量的免费图标素材搜索下载平台，支持近654.38+0万免费图标。根据文件格式、图片宽度、高度、文件大小等信息，用户可以根据自己的需求进行选择，特别适合前端工程师或PPT设计师使用。

4、图标8

Icons8是一个高质量的免费图标资源网站，支持在线变色、添加文字或背景装饰等。下载素材时，用户可以选择SVG、EPS、PNG、PDF四种下载格式，方便用户在不同场景下使用。

5、圣像公园

IconPark是Bytes出品的开源图标库，可以将单一的SVG源文件转化为多种主题，网站分类详细，代码更轻，用户使用场景更灵活。致力于构建高质量、统一、可定义的图标资源，让大多数人都能选择自己风格的图标。

如何用ps制作小图标方法一:直接打开ps和。

创建ctrt+N，创建一个高度和宽度都为256像素的图片，(我个人测过，如果高度和宽度大于256像素，就不能保存为ico格式)，控制高度和宽度像素小于256，然后拖动自己的图片保存为CTRT+Shift+S-选择保存ico格式。然后，会出现一个对话框，选择第二个选项。就这么干吧

方法二，打开ps，打开自己的图片，ctrt+alt+i调整图片大小，高度和宽度控制在256像素以内。这个也做过实验，大于256像素时，如图:

当小于等于256像素时，如图，可以保存，保存时可以选择ico格式。此时文件几乎不到150K K。

选择保存路径，单击保存，然后选择第二个选项:png(vista)。点击确定即可。(如果你选择了第一种，那么这个文件基本就是失败的。)

如何制作自己的网页字体图标？从设计单个图标到转换成@font-face格式进行嵌入，甚至授权他人使用，整个过程我们只会使用免费软件和在线服务。你感觉如何？做一套成功的英文字体(包括字母和数字)不一定要靠什么高深的知识，只需要你的眼睛去设计——你面对的可能是非常非常小的东西。

最终你会收获一个制作设计元素的过程(方法)，这远比制作简单的图标有意义。

在我们继续之前，我们应该先谈谈我们希望通过在设计中使用图标来实现什么，以及是什么让一个图标比下一个图标更成功。先理论，后应用。为了完成这一任务，我们必须考虑作为符号学一部分的图标的作用。

什么是优秀的图标？

广义的符号学是对符号系统的研究。我们如何为它们的形成和维护做出贡献？他们也受到我们对世界的理解的影响。

每当你从“它象征着什么”——它向你的观众传达了什么信息，或者它唤起了什么概念——的角度思考你设计作品的一部分时，你都是在从一个符号学家的角度看待你的设计。符号学和其他语言学一样，确实可以涵盖一门语言。在一个网站上，有很多东西不是用文字表达的，比如颜色、字体、形状(图标)。大家要注意的是，这些东西表达的东西，包含了很强的文化因素。在中国，红色意味着好运，但在许多西方国家，它意味着危险。

“图标”一词在符号学中有着特殊的含义。图标是通过相似性来表达某种东西的人工制品。例如，标记地图位置的图标。它也有类似的现实。

地图标记的形状，所以它可以代表一个位置。反过来，真实的地图位置标记又让人想起各种有意义的概念。其中，有抽象的概念，比如位置；也有不那么抽象的概括。

例如，阅读这个位置可能在哪里。

有些所谓的图标并不真正具有代表性。无处不在的RSS图标，一个点和两个同心弧段，没有比这更简单的了。

辛迪加。组成RSS图标的形状是通过单独的协议来象征的，我们已经达成了* * *。然而，RSS图标更适合被称为RSS标志。

现在，我希望我们已经确定了以下两个成功网站图标的标准:

应该和实物有相似之处，比如一个类似于真实打印机的打印图标。

你的图标应该是符号系统中熟悉的可识别的符号。

字体图标变得越来越流行。

图标字体，因为它提供了一种图标速记方法，长期以来被认为是一种增强的UI设计，有助于人们理解文本信息。图标形象以毒品传播的速度在整个网页设计社区传播。使用它可以让你的设计更明亮，吸引更多的用户点击。

与图片相比，使用图标字体是一个相对较新的想法。但与图片(背景图片)相比，它有很多先天优势，所以它的吸引力也在逐渐增加。早在9月初，我就在微博中写了它的好处，ChrisCoyier显然也有类似的想法，几周后就把它介绍给了更多的受众。基于以上两篇文章和其他内容，我整理了这个比较完整的特性列表:

它们的大小可以在不损害图像质量的情况下轻松调整(作为矢量图)；

为图标定义颜色就像文本一样简单。例如，对于一个rss图标，颜色:橙色；

很多图标可以排成一组，也就是一个文件，这样只需要一个http请求；

正如Chris所指出的，他们还可以在IE6中通过透明来显示形状(这与PNG图片不同)；

对于那些应该出现在文本附近的图标，对齐和打包都不是问题(因为是文本)；

您可以应用CSS3的文本阴影和背景剪辑:文本效果来突出字体的形状。

与SVG不同，图标字体很容易跨浏览器兼容；

问题

克里斯说使用图标字体是个好主意，我想告诉你。

尽管如此，图标字体的使用并不理想。首先，一些高质量的可用字体，如Pictos、Fico、Klepto、Cheetos、Ponyo和SailorMoon都是收费的。事实上，这意味着确实存在两个问题:

你可能需要投资一些钱。

不管需不需要花钱，都会被迫接受别人的烂设计。

除了自动爬虫，我认为主要是网页设计师会阅读这篇文章。我是一个设计师，我觉得不是只有我一个人讨厌依赖别人的作品，这让他的设计思路大打折扣。

类似的事情。当然，我不喜欢有权付钱的想法。我知道我想用什么图标，也知道如何让它适合我的整体设计。我想要那种控制。

经过一番搜索，我想介绍一下Inkscape的svg字体编辑器。通过使用Inkscape和一个在线转换器(SVG字体到TTF)，我制作了字体“Heyding”，这是在Simurai的列表中介绍的(由Coyier的文章链接)。我不打算把我的字体卖给你(它是免费的)，但我认为它会给你带来一个非常好的概念。

用Inkscape制作图标字体

启动Inkscape

让我们从下载并安装Inkscape开始。你还应该使用我的图标字体启动器模板，这些模板放在这个GitHub资源库的resource文件夹中(以后这个项目会有更多)。在Inkscape中打开此文件后，您应该通过在主菜单中打开以下窗口来设置您的工作区:

对象→填充笔画

对象→对齐和分发

文本→SVGFONTEDITOR

在“SVG字体编辑”面板中，单击“字体”下的“Font1”。现在，您的工作区应该看起来有点像这个屏幕截图:

值得指出的是，基线并不在画布的下边界以下:如果你想和相邻的字体font * * *)共用同一条基线，你的图标应该稍微悬浮在画布的底部。我用Georgia，Arial和一些网络字体测试过。

制作你的第一个字体

要定义字体，请单击SVG字体编辑面板中的“字形”选项卡，然后单击面板底部的“添加”

Glyh”按钮。一开始你可能不太清楚，但是如果你点击你的字体(“字体1”)，就会显示一个字段，要求你输入与你需要的图标对应的字符。首先，让我们.../我们首先/我们开始于/我们开始于

要制作一个简单的星号，所以我建议你输入字符“s”、“s”或“*”:

现在我们已经定义了字体对应的字符，我们需要制作字体本身。既然这次只想做一颗星，那就从Inkscape左边的工具栏里选择有用的吧。

星星和多边形凳子

然后，在画布上画一颗星星。你会发现这个工具带有选项，允许你改变星星的外观。在我的例子中，我选择的角度数为5，辐条。

比值为0.5，取整值为0.1。

使用AlignandDistributepanel(可能隐藏在SVGFontEditor下)将星形水平居中，然后拖动国家中的形状接触基线。关闭网格显示后，画布应该如下所示:

在我们的图标字体中，字体只是形状，没有颜色、层次、渐变形状。所以，要想让我们的星成为合格的字体候选，就必须从一个物体来改变它。

转换为基于路径的图形。可以选择主按钮上的星号，然后选择路径→对象到。

完成此任务的路径。现在，选择星号后，我们可以在SVGFontEditor中突出显示可用的“S”字体，然后单击Get。

曲线选择按钮:

当您在SampleText区域键入“s”时，您的星号应该可以预览，如下所示:

制作更复杂的图标

您已经创建了第一个可扩展的SVG字体。通过使用菲兰德

“描边”面板上的选项:编辑路径节点以及合并对象和描边可以让您做出更加非凡的图标设计。既然我们还有很多要谈的，我也不想深究一个完整的。

Inkscape教程，但是遵循这些简单的规则将使您受益:

坚持使用黑色笔画和填充，只是为了提醒你那些图标只是形状，而不是复杂的矢量图。我们将使用CSS为最终产品中的图标着色。

所有对象和笔画(线条)都必须转换为路径(无论是使用路径→对象路径还是路径→笔画路径)。

当使用多个对象和/或笔画来完成一个图标字体时，应该合并它们(使用路径→组合，或者在某些情况下，使用路径→联合)。

为了从现有形状中剪切出所需的形状，请将该形状放在主形状上，选择两个形状，然后选择路径→差异。单击Getcurvesfromselection，黑色块上方的白色区域就是你想要的形状。

准备嵌入你的字体。

假设你已经多次重复了我刚才描述的方法，创建了一些有用的图标，并将字体文件保存为。现在，您可以在网页中使用这个图标库了。

将SVG转换成TTF

您应该采取的第一步是将SVG字体格式转换成一种更熟悉、更通用的格式。对于本地安装，TTF是一种很好的格式。同时也为重新转化为@font-face提供了良好的基础。可以转换字体的在线服务包括:

和

。然而，我个人最喜欢的是

因为我不会排队，也没见过它崩溃。

我觉得不用告诉你这个资源怎么用，就足以表示我的诚意了。引人注目的文件上传字段，选择元素和巨大的转换按钮会让你很快进入主题，真的。

编辑字体信息

既然您已经获得了一个TTF，我建议您现在编辑生成的元数据。重命名字体，添加属性和描述，以便安装、嵌入和分发。这也是宣告字体是为你而生的一种方式。运行Windows的读者可以选择使用看似霸气的MicrosoftFontPropertiesEditor或者允许免费使用Typograf天。对于苹果和Linux用户，希望得到大家更好的意见。

重要:尽管MicrosoftFontProperties

编辑器允许你添加作者、描述、权限信息，但好像并不能让你编辑字体名称、postscript名称等基础数据。这些字段被禁用。如果你想使用这些特殊功能，你

在将SVG转换为TTF之前，您需要编辑SVG代码中的禁止值。在您最喜欢的文本编辑器(我使用Notepad++)中打开原始的SVG，并编辑以下内容:

FontName:您可以在标签中找到font-family属性。

PostscriptName:您可以在标签中找到id属性。

描述:你应该添加一个描述(作者，权限等)。)到这个标签。请注意，这不同于TTF描述文本，在转换过程中不会被保留；您还需要为TTF添加单独的描述。

嵌入字体

一旦在本地系统中安装了TTF并预览了它，就可以在FontSquirrel的@font-facegenerator中运行它。为了使输出代码尽可能高效和有效，下面是专家模式中值得一提的几个选项:

子集化:该选项允许您只运行所需的字符集(包括字符编码、类型、语言和其他选项)以减小文件大小。

你的图标几乎总是单独出现，所以字距调整是不必要的。据说这样也能减小文件大小。

WebOnly:如果您希望您的字体只在Web上使用，而不是在桌面上使用，您可以选择此选项。也能更好的符合你的授权计划。现在我将介绍许可证。

发布字体

如果您对发布您的字体感兴趣，向它添加一个许可证是一个很好的做法。不然很多字体网站都不会拿它来玩。既然我们在制作图标时使用免费开源软件，那么在发布图标时也不妨这样做。

目前，有许多可用的授权选项，逐一调查有时会令人费解。GNUGeneralPublicLicense是完全可以接受的，但是您可能要考虑SILOpenFontLicense。使用此许可证的主要优点是允许其他设计人员修改字体，但他们需要使用不同的名称。在实际操作中，这意味着图标设计中的一些不良行为不能用“你的名字”来进行。

CSSspriting的终结者

为什么不再使用SVG字体作为通用图标？有了制作图标的能力，你就有能力设计网站独特的造型、品牌元素和装饰。这就像CSS。

Sprities，所有这些视觉元素都可以保存在一个文件中，减少了服务器调用http请求的次数；但是，图标字体的元素可以调整大小，而不必依赖它。

在位置坐标(背景位置值)可以正确显示。这使得它们更适合响应性设计。

让我们假装选择一种SVG字体，而不是我的蒸汽朋克博客中的一些基本设计元素。组件设计的一个简单的HTML表格如下所示:

这种方法最大的优点是通用性。比如左起第二个齿轮形状，可以设计成一个微小的圆点，也可以设计成一个巨大而抽象的背景装饰。着色非常简单

单身:颜色:栗色，但没必要拘泥于平板色；多重CSS3效果可以增加质感和触感。为了一开始就启发你，看看这个sexclentgalleyofcss 3-enhanced web fonts。

屏幕阅读器快速笔记

以这种方式使用字体显示视觉元素的一个问题是，当它在屏幕阅读器上输出时会受到影响。直观上，网站访问者会看到齿轮和箭头等图标，但屏幕阅读器会坚持阅读指定这些设计的字符。对于装饰性SVG字体元素的使用，我建议听听Coyier的建议:为Unicode的SupplementaryPrivateUseArea分配矢量。读者不应该阅读这些符号。

协作iconweb字体

作为我的JavaScript导师，有一天Rupert向我指出，使用SVG字体创建图标集提供了一个有趣的合作机会。你看，SVG代码——XML的一种形式——是高度标准化的，易于阅读。是源代码的顺序让我觉得图标字体的开发非常适合选择GitHub这样的协作编码服务。

这个想法很符合我想要的象征意义:如果一个图标是很多人协商一致确定的，那么它的形成过程中也有一定的“* * *知识”。它一定是我们的图标识别系统设计的最典型的图标。我们要创造一个属于社群的图标词汇，对需要的人有意义。

为了发展这个想法，我创建了一个开放的GitHub资源库CommunityIconFont。这个库的文件结构并不复杂:仔细阅读Inkscape教程和项目主页的内容应该可以解答你所有的疑惑。如果你是GitHub的新成员，试着阅读他们的帮助页面，或者询问你附近的技术人员(我就是这么做的)。