图标的设计制作
图标的设计制作
【摘要】随着智能手机的火爆流行,界面设计越来越受到用户、商家的欢迎,如何进行界面设计也成为很多设计师关注的话题,尤其是那些初次让行的设计师,很多时候面对客户的需求总是一头雾水,如何设计的?且听笔者细细道来。
【关键词】图标制作;尺寸;细节
大多数人比较注重界面的最终效果，这当然无可厚非。
但是要想设计并绘制出一个贴切的精致的icon也不是那么简单的事，整个过程中请牢记你不仅是GUI 设计师，你还要兼顾程序开发人员的需求。
笔者以一个实际案例来阐明一下自己的观点。
图标有很多种分类，那我们是做剪影的还是写实的？是制作水晶质感的还是原材质质感的？在商业项目中我们设计师首先会综合甲方的需求、用户研究的结果及整个界面的视觉风格来确定图标的风格。
这是一个定位的问题，也是图标设计中最重要的问题，一旦图标风格与整个界面产品不搭调，那么我们的工作就是白费力气。
其次，确定图标的大小。
图标的大小尺寸一般都会是16的倍数。
如16*16 48*48 64*64 128*128 256*256 512*512等。
但是也会由于终端界面显示屏物理尺寸的原因，图标的尺寸也会发生变化，这个还要依据实际情况来定夺。
下面笔者来说明具体的设计制作步骤：我们要为国内某大型银行的手机银行中“理财”这一功能设计一个图标。
首先我们应理解理财的含义；它包含哪些功能；我们怎样去表现这一概念。
经过一番思考，笔者从把钱投进存钱罐这一日常行为作为设计出发点。
从一枚硬币开始我们的理财，开始新的一天。
然后我们可以把概念付诸简单的草图。
在这一过程中我们尝试多种图标的主体形状和配色以使我们的概念更加清晰，也为提高剩下工作的效率。
本例，我们结合客户需求和用户测试结果，采用了色调柔和、低质感的立体图标。
下面的工作需要在photoshop里面完成。
首先我们按照确定的图标尺寸绘制图标的底也称作图标背景（在此案例中，我们根据实际情况绘制的图标大小为88px*88px，圆角2px）。
在这个过程中，为了最终的开发效果清晰，边缘像素一定更要对齐网格。
所以我们通常会把图像放大很多倍以便精细观察。
（图1）图标的底制作比较简单，加上一些效果就有立体感了，这个时候，我们可以进一步考虑一下，单色的底会不会单调，有没有可以加上什么元素能让图标不是那么单调，而且还符合理财的功能定义（即图标上不会产生多余的无意义的元素）。
经过思考，我决定在底纹上加一些数字符号。
既可以加强图标的功能语义，也可以摆脱单调、丰富图标视觉效果。
（图1）
背景制作好，剩下的是图标的主体。
主要是形状的绘制，跟造房子一样，先毛坯，后装修。
先绘制形状，再在上面一层一层做效果。
（图3）
可爱的小猪存钱罐马上绘制好了，只需画个投币孔和一枚金币。
最后在细节调整过程中，设计师会给整套图标润色一下，本例中，我们给所有图标上方加了一个不规则形状的高光。
图四
最后如果对色彩还感觉不满意，可以再微调一下。
至此，整个图标绘制完成。
在整个过程中，需要注意的几点是：
(1)像素对齐。
(2)要有耐心和专业精神，直到做出自己认为最满意的效果。
(3)保证整套图标的风格一致。
小结：图标的发展趋势
(1)图标分辨率越来越大。
现在无论是桌面设备还是手持设备，其界面都在向高清方向发展，dip值都越来越高，所以图标也越来越大。
(2)写实风格与剪影图标并行。
这是由市场垄断所造成，苹果（高质感的、带有写实风格的图标）与微软（以windows phone7为例的纯平面的、摒弃一切装饰的剪影图标）风格对立但各占市场。
引领整个界面设计行业的风格。
(3)个性的手绘图标风生水起。
我们整日对着的显示器和鼠标导致设计表达语言和表现手法的单一化。
这需要到其他领域去寻找新的灵感，获得新的视觉效果。
传统的手绘不仅仅能丰富创作手段，更重要的是它重新唤醒了视觉设计师们对设计中的原创性和艺术性的再认识。
让我们的设计更加回归人性。
【参考文献】
［1］俞建章,叶舒宪.符号：语言与艺术.上海：上海人民出版社，1988.
［2］施耐德曼,普莱萨特,李建利,张国印.用户界面设计：有效的人机交互策略.北京：电子工业出版社，2011.
［3］陈素敏.设计图典系列·icon设计手册.北京：化学工业出版社，2008.
［4］.。
图标设计与制作流程
图标设计与制作流程下载温馨提示:该文档是我店铺精心编制而成，希望大家下载以后，能够帮助大家解决实际的问题。
文档下载后可定制随意修改，请根据实际需要进行相应的调整和使用，谢谢!并且，本店铺为大家提供各种各样类型的实用资料，如教育随笔、日记赏析、句子摘抄、古诗大全、经典美文、话题作文、工作总结、词语解析、文案摘录、其他资料等等，如想了解不同资料格式和写法，敬请关注!Download tips: This document is carefully compiled by theeditor. I hope that after you download them,they can help yousolve practical problems. The document can be customized andmodified after downloading,please adjust and use it according toactual needs, thank you!In addition, our shop provides you with various types ofpractical materials,such as educational essays, diaryappreciation,sentence excerpts,ancient poems,classic articles,topic composition,work summary,word parsing,copy excerpts,other materials and so on,want to know different data formats andwriting methods,please pay attention!1. 确定设计目标：明确图标的用途、受众和要传达的信息。
考虑图标的功能是装饰性还是具有特定的操作意义。
拟物化图标设计制作步骤
拟物化图标制作步骤
1.新建背景图层，填充颜色（Alt+Delete）
2.椭圆工具（U）绘制圆形，直接选择工具（A）分别横排和竖排的点，右键—自由变换点，宽、高分别缩小到80%。
3.为圆角矩形添加斜面浮雕、内阴影、光泽、渐变叠加、投影图层样式，参数如图：
4.椭圆工具（U）+Shift绘制正圆，为圆形添加斜面浮雕、渐变叠加图层样式，参数如图：
5.复制图层（Ctrl+J），Ctrl+T等比例缩小一些（Shift+Alt+鼠标拖拽），将图层不透明度调为20%
6.复制图层（Ctrl+J），Ctrl+T再缩小一些（Shift+Alt+鼠标拖拽）。
7.再次复制图层（Ctrl+J），Ctrl+T缩小一些（Shift+Alt+鼠标拖拽），添加内阴影、渐变叠加图层样式，参数如下：
8.再次复制图层（Ctrl+J），Ctrl+T缩小（Shift+Alt+鼠标拖拽），添加投影图层样式，参数如下：
9.再次复制图层（Ctrl+J），Ctrl+T缩小一些（Shift+Alt+鼠标拖拽），添加描边、颜色叠加图层样式，参数如下：
10.文字工具（T）输入文字。
ps制作logo教程
ps制作logo教程
今天我为大家介绍如何使用Photoshop制作logo的教程。
下面，我将向大家一步步演示如何操作。
首先，打开Photoshop软件，并创建一个新的文件。
我们可以
根据自己的需求设定文件的尺寸和分辨率。
接下来，选择一个合适的字体作为logo的主题字体。
在工具
栏中找到文本工具，并点击画布上的空白区域。
在打开的文本框中输入文本，然后选择文字的大小和颜色。
然后，我们可以开始对logo进行一些样式和效果的设计。
点
击图层面板中的“fx”按钮，选择想要的效果，例如阴影、渐变等。
此外，我们还可以添加图像或形状作为logo的背景。
在工具
栏中找到形状工具，选择想要的形状，然后在画布上绘制出来。
可以通过调整图层的透明度或使用混合模式来调整形状的显示效果。
接下来，我们可以为logo添加一些特色的图标或图形。
可以
使用形状工具创建简单的图标，或导入自己设计好的图形文件。
将图标或图形放置在logo中合适的位置，并调整大小和颜色。
最后，我们需要保存logo文件。
点击菜单栏中的“文件”选项，选择“保存为”，然后输入文件名和保存路径，选择所需的文件
格式，例如JPEG或PNG。
通过以上的步骤，我们就可以使用Photoshop制作一个简单的logo了。
当然，更复杂的设计还需要更多的操作和技巧。
希望这个简单的教程能帮助到大家!。
学习使用Illustrator进行图标和UI设计
学习使用Illustrator进行图标和UI设计Adobe Illustrator是一款专业的矢量图形编辑软件，被广泛运用于图标和UI设计领域。
本文将从图标设计和UI设计两个方面介绍如何学习和使用Illustrator进行创作。
第一章：图标设计1.1 理解图标设计的概念图标是一种简洁而表达力强的视觉元素，常用于网站、移动应用、产品标识等场景。
具备良好的图标设计能力是一名优秀的UI 设计师的基本要求。
我们先从理解图标设计的概念开始。
1.2 学习基本的矢量绘图技巧Illustrator是一款矢量图形编辑软件，掌握基本的矢量绘图技巧是学习图标设计的关键。
包括绘制基本形状、路径编辑、填充与描边等操作。
1.3 掌握图标设计规范与原则图标设计需要遵循一定的规范与原则，如简洁性、可识别性、可扩展性等。
学习并灵活运用这些规范与原则，可以提高图标的质量和用户体验。
1.4 熟悉Illustrator的相关工具和功能Illustrator提供了丰富的工具和功能，用于辅助图标设计。
比如路径工具、形状生成器、外观面板等，熟练掌握它们可以提高工作效率。
1.5 实践绘制各类图标通过练习绘制各类图标，可以锻炼自己的设计能力，并逐渐熟悉使用Illustrator进行图标设计的流程和技巧。
第二章：UI设计2.1 了解UI设计的背景和概念UI设计是用户界面设计的简称，是指通过设计人机交互界面的布局和视觉效果来实现用户体验的提升。
在学习使用Illustrator进行UI设计之前，我们需要了解UI设计的背景和概念。
2.2 学习UI设计规范与原则UI设计需要遵循一些规范和原则，如一致性、可用性、可访问性等。
掌握这些规范与原则，可以使设计更加合理和专业。
2.3 有效运用色彩和排版色彩和排版是UI设计中非常重要的元素。
学习如何选择和配合色彩，以及合理运用字体和排版，可以提升设计的美感和信息传达的效果。
2.4 掌握Illustrator中的UI设计工具和功能Illustrator中提供了一些专门用于UI设计的工具和功能，如切片工具、图层面板、样式库等。
方寸之间——图标的设计方法及技巧
方寸之间——图标的设计方法及技巧图标的含义不同的人对图标的定义是有不同的，司机眼中的图标可能是交通指示牌上的指示图形；机械操作员眼中的图标可能是操作面板中按钮上的图案；计算机开发人员眼中的图标可能是电脑中的桌面图标、文件图标。
而对于使用移动设备的我们来看，图标就是手机中的应用程序。
图标是标志、符号、艺术、照片的结合体，是图形信息的结晶。
而我们今天所要说的图标则是在我们生活中接触越来越多的手机应用图标。
手机应用图标的大致可以分为以下四类：A、图像类。
利用实体物品说明应用途。
例如:、iReading童话故事、乐顺备忘录、中国全史、CameraGenius、VirtuosoPiano这类中多为书籍、现实生活中常见的物品，这种表现方法能够直观的展现应用的使用方式和操作方式，让用户能直接清楚的了解这些。
B、内容类。
将应用或游戏的操作方式或是出现的代表性的图形展现出来。
例如：水果忍者、CuttheRope、FIFAgame、Asphalt5、FaceFighter使用展示内容的多为游戏应用，这类应用更需要给用户展示尽可能多的游戏玩法和内容。
例如水果忍者和CuttheRope这款游戏，很好的表现了游戏玩法。
C、比喻类。
用其他物体让人们产生对应用的联想方式。
例如：k歌之王、计算器、LiveSketch、todo、MSN、影片播放器这类图标往往会在效率类／聊天类／健康类的应用中，因为这些类型的图标往往都比较抽象，所以我们需要利用更多人们熟知的形象和物品来为应用内容做隐喻，让用户能够联想到其里面的内容，而不是去看简介。
D、标志类。
利用本身已有产品或已经深入人心的标识来展现。
例如：虚拟人生3、凯立德移动导航、列车时刻表查询、UNIQLO、掌中新浪严格意义上讲这种类型并不属于图标的范畴，但由于人们对其已经印象深刻，所以在应用图标中可以借助这种“印象”来阐述应用内容。
对于一些已经有一定用户基础的公司或是应用使用这种方式更加合适。
icon图标制作教程
icon图标制作教程图标是用户界面设计中常见的元素，它可以用来代表应用程序、文件夹、网站等的功能或内容。
一个好的图标设计不仅可以增加用户对应用程序的吸引力，还可以提供直观、简洁的用户体验。
下面是一个简单的图标制作教程，以帮助你制作出精美的图标。
1.确定设计需求：在开始设计图标之前，先确定图标的用途和目标群体。
不同的应用程序和目标群体可能需要不同风格和表现形式的图标。
2.收集灵感和参考：在设计图标之前，可以先收集一些灵感和参考，以便更好地理解和表达图标的核心概念和风格要求。
可以浏览一些图标设计网站或图库，或参考一些热门应用程序的图标设计。
3.确定设计工具：选择一个适合自己的图标设计工具，如Adobe Illustrator、Sketch、Photoshop等。
这些工具具有丰富的设计功能和图标制作工具，可以帮助你制作出高质量的图标。
4.草图和构思：在开始设计之前，可以先草图一些初步的构思和想法，以帮助你更好地把握图标的整体结构和外形。
可以使用纸和铅笔，或者直接在设计工具中绘制矢量图形。
5.绘制图标轮廓：使用矢量绘图工具，在设计工具中绘制图标的基本轮廓。
可以使用矩形、圆形、直线等基本形状，也可以通过修改节点和曲线来绘制更复杂的图形。
6.添加细节和效果：为了使图标更加生动和有趣，可以添加一些细节和效果，如阴影、渐变、纹理等。
但要注意不能过度添加效果，以免影响图标的清晰度和识别性。
7.选择适合的颜色：选择一个合适的配色方案，以使图标更加吸引人且易于识别。
可以参考色彩搭配原则，如互补色、相邻色、三角色等，或使用一些色彩工具来辅助选择配色方案。
8.测试和调整：在完成图标设计之后，可以将图标应用到实际的界面中，并进行测试和调整。
观察图标在不同背景下的展示效果，以确保图标的清晰度和可读性。
9.保存和导出：在满意图标设计结果后，将图标保存为矢量格式（如SVG、EPS）或栅格格式（如PNG、JPEG），以便在不同设备和平台上使用。
图标的设计规范及设计流程PPT.
目 录
• • •
任务介绍
知识点 总结拓展
任务介绍
通过操作演示，让同学们掌握在交互设计中图标的设计规范 及设计流程。
知识点 图标的设计规范：
1、在PS中尽可能用形状来绘制，保证图标是矢量图。 2、切图的时候的格式都是PNG格式。
而不是把不重要的信息铺满整个图标。
总结拓展
每款应用产品都应该重视它的图标设计， 因为很多用户在下载应用的时候都会首 先看到产品的图标，好看的图标都能吸
引用户去单击或下载。这些图标简洁、
大方、富有创意，可以直观地让用户了 解其功能，也会让用户觉得很有乐趣， 在用户使用时更会给用户很好的交互体 验。
谢谢观看
9、icon采用前视角，几乎没有透视，光源要在顶部。
图标的设计流程： 1、研究设计趋势 漂亮的图标不仅讨平台开发者的喜欢，还能取悦消费者们融入你的应用图标设计中。
2、了解市场竞争
搜索App Store和其他应用市场，找到潜在竞争对手，并借鉴
对方的优点为己用。在确保遵守当下的设计惯例的前提下，保 证图标适合放在用户的主屏幕上，而且能脱颖而出。
3、图标与界面相融合 图标不能单独存在，图标最终要放置在界面上才起作用。因此， 图标设计要考虑图标所处的环境，是否适合相应的界面。
4、保持简单
与其他手机相关的东西一样，图标设计要力求简单。与看起来 好看一样，简单的设计意味着设计师可以选择突出最关键元素，
3、图标的尺寸大小必须为偶数。
4、根据不同的功能需求设计不同的状态：如常态，选中态、 点击态等。 5、图标设计符合当下的流行趋势，避免过度使用隐喻。
图标制作教程
图标制作教程图标制作是一门非常有趣的设计技术，通过将复杂的概念和信息以简洁明了的形式表达出来。
下面是一个简要的图标制作教程，帮助你入门这门技术。
第一步是确定你想要表达的概念或信息。
图标的目的是以最简洁的方式传达一个特定的意思或功能。
因此，在开始制作图标之前，你应该清晰地了解到底要表达什么。
第二步是收集灵感和参考。
浏览互联网上的图标库、设计网站和社交媒体，寻找与你的概念相关的图标。
这个阶段的目的是为了从其他设计师的作品中获得灵感，并理解行业中常见的设计风格和元素。
第三步是草图和构思。
使用纸和铅笔，尝试画出几个初步的图标设计。
这个过程有助于你在电脑上制作图标之前，先捕捉住你的想法和构思。
第四步是选择合适的软件。
图标可以使用许多不同的软件制作，常见的有Adobe Illustrator、Sketch和CorelDRAW等。
选择一种你熟悉或感兴趣的软件，并开始制作。
第五步是制作图标的基本形状。
使用软件中的工具，绘制图标的基本形状。
这可以包括线条、曲线、矩形和圆形等。
保持形状简单明了，避免过于复杂或细节过多。
第六步是添加细节和效果。
在基本形状之上，添加细节和效果，使图标看起来更加生动和具体。
这可以通过使用颜色、渐变、阴影、纹理和光源等来实现。
第七步是优化图标的细节。
仔细检查图标的每个细节，确保线条对齐、颜色一致性和比例正确。
这个过程需要一些耐心和细致的工作，但它是确保图标质量的重要步骤。
第八步是导出图标。
根据你的设计需求，选择合适的文件格式和尺寸，导出你的图标文件。
常见的图标文件格式包括PNG、SVG和ICO。
最后，你可以将图标应用到你的设计项目中。
这可以是网站、移动应用程序、印刷品等。
确保图标与项目整体风格和目的相一致，以达到最佳的视觉效果和用户体验。
这个图标制作教程只是一个简要的概述，但它可以为你提供一个基本的了解和入门。
通过练习和不断尝试，你将能够进一步发展和提高你的图标设计技巧。
祝你成功！。
UI界面设计与制作-UI中的图标设计
2.1.3 设计要点
3.效果处理 （1）渐变：在线性图标的渐变效果中，渐变方向一般设置为45度或 135度，并且要保证渐变的方向和强弱关系是一致的。
渐变一致的图标
2.1.3 设计要点
（2）叠加：在线性图标的叠加效果中，需要先将图标拆分成两个部 分，然后再调整透明度或调整“图层混合模式”来呈现出叠加效果。
面性图标使用场景
2.2.3 设计要点
1.挖空比例 进行面性图标设计时，内部图形的挖空比例需要占20%～30%。这 样设计出的图标才会使整体视觉效果较为和谐，能够呈现最佳状态。
面性图标挖空比例示意图
2.2.3 设计要点
2.有无底板 同一个面性图标，通过底板的设计可以使其发生微妙的变化，产生不 同的性格特点。无底板的面性图标又称为单独型图标，这类图标视觉感知 更直观；有底板的面性图标又称为组合型图标，这类图标具有层次，相对 精致。越小的图标形体应该越简单，因此建议采用单独型图标，图标的尺 寸足够大时可采用组合型的图标，并补充图标的细节。
2.2.1 基本概念
面性图标即填充图标。面性图标由于占用的视觉面积要比线性图 标多，所以具有整体饱满、视觉突出的特点，能够帮助用户快速进行 图标的位置定位。但面性图标不宜在界面中大面积出现，这样会产生 界面过于臃肿，用户视觉疲劳等问题。
面性图标
2.2.2 使用场景
面性图标的使用场景与线性图标同样丰富，常用于页面的核心业 务，如金刚区、内容装饰、标签栏、列表流等。
UI中的 图标设计
本章介绍：
图标设计是UI设计中重要的组成部分，可以帮助 用户更好地理解产品的功能，是营造产品用户 体验的关键一环。本章针对UI设计中常用的 线性图标、面性图标以及线面图标进行系统的 知识讲解与实操演练。通过本章的学习，读者 可以对图标设计有一个系统的认识，并快速掌 握绘制图标的规范和方法，为接下来的UI设 计打下基础。
ps怎么设计地图图标logo？地图图标符号的制作方法
ps怎么设计地图图标logo？地图图标符号的制作⽅法经常会在地图上标注⼀个点，这时候就会出现地图图标，该怎么绘制地图图标logo呢？下⾯我们就来看看详细的教程。
Adobe Photoshop CC 2018 v19.0 简体中⽂正式版 32/64位
类型：图像处理
⼤⼩：1.53GB
语⾔：简体中⽂
时间：2019-10-24
查看详情
1、打开PS，然后根据实际需要，新建⼀个⽂件。
2、然后点击左侧⼯具栏中的椭圆⼯具，画出⼀个圆。
3、然后复制⼀个圆，将它缩⼩⼀下，放在⾥⾯，为了看清楚，可以使⽤不同的颜⾊。
4、然后使⽤路径选择⼯具，选中这两个圆。
5、选中之后，点击图层、合并形状、减去顶层形状，然后可以看到变成了如下图。
6、然后使⽤直接选中⼯具，点击选中外圆下⾯的那个锚点，往下拽。
7、然后使⽤转换点⼯具，将最下⾯的那个锚点点击⼀下，让它变成焦点，可以看到地图图标做出来了。
以上就是ps地图图标符号的制作⽅法，希望⼤家喜欢，请继续关注。