设计网页上用户和密码的小图标_网页设计中如何巧用图标来吸引用户

1、网上下了一些网页设计的图标素材都是像这种psd图片的，我要怎么用啊，抠图抠下来吗 - -

你好，一般像素材图片，特别是PSD的，都是有图层的，所以你可以用PS软件打开，里面会有图层显示，每个按钮都是有图层的，你只需选择你要的某个按钮的图层，拖到你的设计文件里面使用即可。如果只是一张JPG图，全部合了层的，你才需要抠图，当然效果都一样。只是这个素材有图层的话更方便。更多设计方面的专业文章请浏览唯美客设计网站!

2、为什么网页中的图标常用16px，24px，32px 这些尺寸

提到图标设计，似乎每个设计师都有话说，但是要做好图标设计真的那么容易么?今天这篇文章针对网页设计领域的图标设计进行了相对全面的梳理，从设计技巧到设计资源一应俱全，但愿能帮上你! 图标是每一个现代UI中不可或缺的组成部分，它们不仅能协助UI布局组织内容，而且轻量级的图标融入界面也不会喧宾夺主。不仅手机和平板的APP UI中会大量用到各种图标，而且iPod和智能手表的界面中也是如此，这正是因为图标具备快速直观传达信息的能力。在网页设计刚刚兴起的时代，小图标就已经被早期的网页设计师和开发者投入使用了。这些图案和标识通常是常见的、易于接受的、功能型的图形(文件夹、打印机、鼠标、箭头等)，在随后的20多年间，这些图标逐渐发展成约定俗成的一套图形语言。在接下来的设计指南中，我想分享一些网页设计中图标使用的技巧，以及一些实用的免费图标素材合集，希望你能喜欢! 图标设计样式我们通常所说的“图标设计”其实覆盖了相当大的一个范围。小到网页中那些纯色扁平小标识，大到PS和AI精雕细琢的拟物风APP图标，都在图标设计的范畴内。每个图标设计项目都有着不同的设计需求和图标风格，这些不同造就了图标设计的差异化。目前所流行的极简风和扁平化设计，已经在全世界设计师中拥有了无数的拥簇。而之前一直不温不火的线性图标也已经成为了目前iOS系统的首选图标，其他的移动操作系统也正在逐步跟进。从风格上来说，图标并无对错之分，只能说是各自选择和偏向不一样罢了。在我看来，扁平化设计和拟物化设计之间的竞争对比，对于网页设计而言是一件无比美妙的事情。这也对图标设计产生了影响，许多艺术领域的概念被引入到图标设计中来，比如光影变化，深度，等等。作为设计师的你如果更倾向于扁平化设计，那么你需要学习创建纹理，控制阴影，让你的设计看起来富有真实感。为此你需要进行大量的练习，但是这绝对是值得的。企业品牌设计虽然品牌设计看起来是显而易见的事情，但是它依然值得一提，因为那些优秀的网站通常有着优秀得令人难以置信的品牌设计。一个优秀的图标能向用户传达出品牌的理念和情感。当你为一个企业或者网站进行品牌设计的时候，品牌的图标、吉祥物或者符号应该让品牌和它的用户之间形成独特的情感联系。当然，你也可以为品牌设计一系列不同的图标，每个图标包含不同的效果，传达不同的理念。图标设计的可能性是如此之多，你甚至可以设计出以个图标大合集，让所有不同的图标拥有相同的风格。由于每个图标都是独特的存在，但是风格又如此一致，当它们运用到网页中的时候，可以让整个网页拥有独特的气质，足以从诸多设计中脱颖而出。 MailBakery 就是这样一个典型的案例，它使用了个大图来宣传它们的服务。当光标移动到下方每一个图标上的时候，上方的大图内容会被替换成相应的图片内容，这样的图标+图片的组合在设计上保持着高度的一致性。这些图标所对应的图片可以说是专门为网站定制的，但是这些图标却是某个免费图标集的一部分。你可以在几十个不同的网站上看到这些相同的图标，也就是说，这些图标作为潜在品牌设计的独特性，已经被忽略掉了，他们其实可以做的更好。也正是因此，我常常建议有报复的图标设计师去学习为界面单独定制成套的图标集。对培养品牌、客户以及项目而言，这都是更为长远更有价值的事情。导航链接在过去，网页上的图标常常用作内容导航，也就是说，图标的内容和含义，同图标所指向的页面内容/性质高度相关或者一致。今天，Facebook上的导航也遵循着同样的原则。虽然你不会一直遵循这样的设计方式，但是有必要且值得了解它。下拉菜单链接通常非常实用，因为用户会主动去了解每一个菜单的名称。但是如果在横向或者纵向上有十几个导航链接的话，通过图标来识别是比较可靠的方案。视觉内容识别在网页设计中使用业内图标最主要的原因是用来区分内容。图标可以从视觉上更清晰地传达信息，能够平衡包含大量文本的布局，所以，如何通过一个简单的图标来准确传达信息是设计师的必修课。我最喜欢的案例就是GitHub的教学页面。页头使用Github的吉祥物和粉笔黑板营造出教育的氛围，当你向下滚动的时候，每个板块都有单独对应的图标，为你说明这以块是干啥的。值得注意的是，每个图标都使用的是手绘的效果，虽然色彩不同，但是整体风格高度一致，明显是统一设计的一整套图标。更重要的是，每一个图标都明确直观地描述了它所在区块的内容。文字内容足以描述清楚细节，但是图标能高度概括地阐明信息。你可以在 Glazed & Infused 的首页看到类似的设计效果。文字小区块详细地描述了他们的服务、咖啡和礼品卡的信息，而顶部的手绘图标则从视觉上阐明了内容的性质，更重要的是，这三个图标迅速地抓住了用户的眼球。矢量背景从重复平铺背景到矢量对象，你可以用矢量图形做很多事情。对网站背景的处理方式，已经远不止于平铺纹理那么单一了。通过矢量图形来创建覆盖整个背景的场景已经很容易了。矢量图形可以很轻松地缩放，但是很难创造出逼真的效果。想制作出复杂样式的矢量图形并不容易，你需要通过大量的练习来熟悉在图形上构建图形的技巧，不过一旦学会还是蛮有趣的。在这里我们推荐一个好用的工具：Bota Iusti。设计教程跟踪学习在线的设计教程是提高图标设计技能的重要方式。想要精通设计技能没有捷径，唯有不断学习，坚持练习。虽然图标设计是一个广泛的领域，但是许多教程是可以举一反三的，接下来提供的一系列教程非常实用，希望你能通过学习融入日常的设计中去。 16×16 px Icons Weather Line Icons Flat Social Icon Tab Bar Icons Bat Icon Gem Icons Water Pistol Mail Alert Notebook Almost Flat 免费图标 40 Flat Icons Mini Icons Colorful Iconset Simple Flat Sport & Fitness Chat & Email Atitel Icons Tab Bar Icons Simple Lines Flatified Web Design Iconset iOS Settings Icon Colorful Switch Synthesizer Book App Icon

3、网页设计中如何巧用图标来吸引用户

网页设计中，为什么要使用图表？设计就是传达信息：如果你的网站不能吸引用户，这个问题不在于你分享的信息有多重要、有多刺激。在访问一个网站的最初，大多数用户首先扫描页面来寻找视觉上看着有趣的内容，只有某些事物引起了他们的注意力，他们才真正开始阅读。图标是一个简单、有效的方式吸引用户阅读你网站上的内容。图标起着与分段一样的心理效果：在视觉上，图标打破了内容，使之不那么让人生却。通过图标将内容划分成几个容易理解的段落和重点，这样的页面很容易阅读，在视觉上也足够有趣以维持用户的注意。因此，不要再浪费时间写那么多无人阅读的内容了，开始使用图标吧！在本文中，我们将展示很好的例子和网页设计中使用图标来支持内容的最佳做法。 1.如何使用图标使用图标的首要目标应该是帮助用户更有效地吸收和处理信息。一般的做法是使用大量的空白和那些能增强内容的图标。图标通过给予内容更多的实质和有效的传达，能很好地丰富内容。图标应该用来吸引用户注意信息内容，而不是削弱或取代它。 *让功能清单更有趣列出服务清单是有效的市场推中实用、必要的一部分，但本质上来说，清单是乏味和无聊的。在您的功能清单中使用图标将使其更具有吸引力。 * 吸引用户关注Web应用程序的新功能在这种情况下，把图标想成是logo，记住logo的目标是在产品和特定的图像建立精神联系。图标应该独特而简单的：大部分的图标只有128*128像素的，因此要用最低限度的方法，用少表达更多的信息。 *列出您的服务并增加可读性图标的使用让你的网站显得友好、吸引人和专业，这些表明了你注重细节，哪怕这个细节很小很小。让你的图标发挥创意：标题、工具条、功能清单都是放置图标的好地方。

4、网页设计时地址栏前的小图标如何制作

在<head></head>里加
<link rel="shortcut icon" href="favicon.ico"/>

5、电脑上的各种小图标是怎么做出来的？

创建 Windows XP 图标

Windows 用户体验组
Microsoft Corporation
2001年7月

摘要：本文探讨如何使用矢量程序（如 FreeHand 或 Illustrator）和 Photoshop 设计并创建 Windows XP 的彩色和动态图标。

目录
简介
图标设计概述
步骤 1：概念
步骤 2：绘制图像
步骤 3：创建 24 位图像
步骤 4：创建 8 位和 4 位图像
步骤 5：创建 .ico 文件
创建工具栏
创建 AVI
简介
Microsoft® Windows® XP 引入了一种新的图标设计样式。在以下指南中，我们将讨论设计和创建 Windows XP 样式图标的具体步骤。

Windows XP 图标样式有趣、色彩丰富且充满活力 — 这是因为这些图标是 32 位图标，并且边缘非常平滑。在矢量程序中绘制完每个图标后，再用 Adobe Photoshop 进行处理可使图像更加完美。

本指南是专为设计者编写的。在创建图像时，建议您与高水平的图形设计者一起工作，尤其是具有丰富的矢量和 3D 程序经验的图形设计者。

图 1：图标示例

图标设计概述
本节的目的是让您熟悉 Windows XP 的新样式，为创建图标做好准备。

6、网页设计图标怎么做

你指的是上面的小红圈效果吧?

要点,将小红点父级CSS的position设置为relative;

将小红点本身的position设置为absolute,然后利用top和 right属性来调整位置.

示例代码:

.box{background:#455996; padding:10px; height:20px;color:#eee;font-size: 12px;}

.box div{ float:left; line-height:20px;}

.bt{ background:#405287; padding:0 20px; margin:0 10px; position:relative;}

.bt span{ display:block; position:absolute; line-height:14px; width:14px; height:14px; background:#F00; top:-5px; right:-5px; text-align:center;}

</style>

</div>

7、做网页设计修改密码需要用什么图标合适？

根据你设计的页面，搭配一个小按钮就行了啊，只要搭配好了，什么样的图标都好看的。

8、请设计个网站的Logo 包括网页的小图标Icon 64*64 和大图标 512*51

要原logo恐怕是没人会给你做的，那都是收费的。还是自己做吧。你也可以直接在网上找一个用。

9、在网页设计中asp那个小图标是什么意思?怎么修改？

一般是DW网页设计软件，在ASP和PHP显示在HTML所见既所得界面中显示的是ASP图标和PHP图标

但这个图标并不代表是一个文件，一般是代码，也有是包含的文件

找到方法是鼠标左键选择ASP图标，在切换到代码视窗中，就可以找到代码或者包含的文件

导航:首页 > 万维百科 > 设计网页上用户和密码的小图标

设计网页上用户和密码的小图标

与设计网页上用户和密码的小图标相关的知识