前端观察 » 图标

高质量社区媒体图标大搜集

神飞 — Mon, 12 Apr 2010 01:03:32 +0000

译自：Huge Collection of High Quality Social Media Icons
中文：高质量社区媒体图标大搜集
请尊重版权，转载请注明来源，多谢！

现在社区媒体已经大量存在并快速增长，它们已经深入到各位网友的生活中了。这里收集了大量的各种各样的社区图标，它们或许能够在你的这几种直接用到，或者可以给你某些设计灵感。另外，如果你有见到设计精良的中文社区图标设计，请与我们一起分享，谢谢。

200多个大号的、漂亮而精细的图标下载

神飞 — Tue, 05 Jan 2010 09:27:13 +0000

译自：200+ Big and Beautiful Highly Detailed Icons
中文：200多个大号的、漂亮而精细的图标下载
请尊重版权，转载请注明来源。

如果你是众多从网上收集各种图标成瘾的网页设计师中的一员，你可以无视本文。它可能会让你顾不过来。当然，如果你能够控制自己，那就看下去吧。在本文中，我们收集了共20套、超过200个大号的、漂亮而精细的图标。通过这些图标中的各种主题，你不会在找一些你想要使用或添加到图标库上面有问题。

多谢这些天才的设计师！

Cemagraphics Dock Icons (17 个图标)

Canon 400D + lens 17-85mm (2个图标)

Archigraphs Collection Icons (10个图标)

圣诞节设计资源大收集：纹理、笔刷、矢量、图标和字体

神飞 — Thu, 17 Dec 2009 19:02:13 +0000

译自：The Ultimate Christmas Round-Up: Patterns, Brushes, Vectors and Fonts
中文：圣诞节设计资源大收集：纹理、笔刷、矢量、图标和字体
请尊重版权，转载请注明出处，多谢！！！！

又到年终了，大家都很忙。一天24个小时已经不够用了。而且，不幸的是，圣诞节是一个重要的节日。是时间和家人在一起，是时候给朋友们和特别的人准备礼物了，参加聚会和排队，同时也是无法避免的空气中充满了美味的餐具的时刻。只是在这么短的时间内，有太多的诱惑和事情去做。不难理解，跟上工作进度变得如此困难。而且，最重要的是，设计师比一年的其它时候都被需要。所以为了能够完成任务，你需要集中于提高你的效率并找到一些技巧。否则，可能其它人在庆祝的时候，你还在加班呢。

这里我们准备了一些免费的圣诞节字体、矢量图、纹理、PSD和笔刷，它们在圣诞节前会迟早有用的。比如，如果你在为圣诞设计一个页面布局，你无需从草图开始制作图形的每个单独的部分，你可以轻松的使用“现货”——笔刷、字体、图标、矢量图等以节省你的时间。或者你可以使用它们在紧急关头制作一些漂亮的圣诞贺卡。另外，请使用前阅读一下授权协议，因为有些人不允许你将这些资源用于商业目的。

圣诞节纹理

圣诞节PSD

圣诞节Photoshop笔刷

200多个用于发光、闪光、光亮与闪烁的Photoshop 笔刷

松树笔刷集

Christmas Doodle Brushes
同时allonzo有一个很棒的圣诞涂鸦集。

逼真的雪元素笔刷

圣诞老人笔刷

Vintage Christmas Brushes

逼真的圣诞树笔刷

108个漂亮而简约的免费图标

神飞 — Sat, 05 Dec 2009 10:19:17 +0000

Tutorial9分享了一套免费的图标，很漂亮而简洁，共有108个图标，为32×32像素的png透明图片。默认是灰色的，不过你可以很方便的自定义图标的色彩：在Photoshop中，你可以使用“图层–>图层样式–>颜色叠加”效果来调整色彩；在Fireworks中，可以使用“滤镜–>色彩调整–>色彩填充”工具来修改图标的颜色。

下载：点击这里。

预览：

点击这里下载。

50套漂亮而新鲜的高质量免费图标

神飞 — Tue, 24 Nov 2009 13:55:50 +0000

我敢打赌大部分时间是喜欢免费图标，图标的价值在于它们以一种更直观和有效的方式与访问者和用户沟通的能力，用户友好的图标看起来舒服而且易于使用。

最棒的事情是，很多图标设计师制作觉多漂亮的图标集，并将它们提供免费下载。的确有很多很棒的图标集，这里我们收集了50套最漂亮的图标集供你下载，我希望每个人都能从中找到对自己有用的。

1. ) Lovely Website Icons Pack

2. ) Oldschool Icon Set

3. ) Kidaubis Chinese Wind Icon

4. ) Yoritsuki Icons

5. ) Colorabo Png

6. ) Office Space Icon Set

7. ) Fritidsresor Icons

8. ) W-shop Icon

9. ) Stock Icons

10. ) Seotime Icons

11. ) Archigraphs Collection Icons

12. ) Pirates Icons

13. ) Smashing Retro Icon

14. ) Antique Icon

15. ) Web Icons

16. ) Mountain Bike

17. ) Islamic Icon

18. ) Carbon Gloss

19. ) AEROSOL Icons

20. ) Elite Soldiers

21. ) Night Vision

22. ) Pioneer Camp

23. ) Wifun Icons

24. ) Baggy Icon

25. ) Container Icon

26. ) Starbucks coffee icons

27. ) PROFESSIONAL RED

28. ) KIDAUBIS Olympic Games Icon

29. ) Halo Icons

30. ) Archigraphs Cars Icons

31. ) Icons for Yellow Pages

32. ) Xi4Dox Icons

33. ) Furniture Illustrations

34. ) Animals Icon

35. ) Russian Icon

36. ) Canon 400D lens

37. ) Universal Icons

38. ) Halloween Vector Icon

39. ) AccBox Icons

40. ) Boxes Icons

41. ) Smile Icons

42. ) Blueset Icons

43. ) Archigraphs Porcelain Icons

44. ) Blue Icons

45. ) Amour Golden Series Icons

46. ) Coquett Icons

47. ) freeicons

48. ) Elite Desktop

49. ) Helix Icons

50. ) Mouse category Season

原文：50套漂亮的高质量免费图标
译自：50 (fresh) Beautiful and High-quality Free Icon Sets
请尊重版权，转载请注明来源！

2009年最佳免费图标大收集

神飞 — Thu, 12 Nov 2009 14:30:46 +0000

过去我们分享过很多天才和大方的设计师制作的大量图标，这些图标对我们在前端设计和开发中起到了很大的作用。现在我们整理一批2009年出现的最好的图标给大家，这些都是值得收藏的，合理的使用它们会大大的提高你的工作效率和设计效果。

Basic

Onebit Icon Set 2

Hand Pointer Icons

WP WooThemes Ultimate Icon Set

Led Icon Set

MinIcons

Grunge Peeling Stickers

Onebit

Web Injection

Watercolor Icon Pack

Finance

Flavour Extended

Social Media Icons

Must Have Icons

Social Icons Hand Drawn

Weby Icons

Quartz

原文：2009年最佳免费图标大收集
译自：The Best Free Icon Sets of 2009
原作者： Henry Jones
版权所有，转载请注明出处，多谢！

创建带有图标的导航菜单

神飞 — Sat, 14 Mar 2009 05:01:28 +0000

在我创建的每一个互联网应用中，我都试图避免创建完全由图片组成的菜单。在我看来，菜单系统中应该使用文字。这样做也会让菜单变得更干净利落、清晰和易读，不用考虑应用程序如何读取它，以及页面放大的时候也不会失真等。或许这只是我的想法？但是我们不能创建即好看又好用的菜单吗？

下面是创建下面的有图标支持的导航菜单的代码和样式。

点击这里查看演示(在新窗口中打开).

基本标签


<ul class="nav">
	<li class="home"><a href="#link">home</a></li>
	<li class="about"><a href="#link">about</a></li>
	<li class="work"><a href="#link">work</a></li>
</ul>

The CSS

/* style.css */
.nav {width:550px; height:50px; padding:0px 25px; margin:0px; background:url(img/bg.gif) repeat-x; border:1px solid #efefef;}
	.nav li {float:left; width:125px; height:50px; display:inline; padding:0px; margin:0px 25px 0px 0px;}
	li.home {background:url(img/nav-home.gif) top left no-repeat;}
		li.home:hover {background:url(img/nav-homeHover.gif) top left no-repeat;}
	li.about {background:url(img/nav-about.gif) top left no-repeat;}
		li.about:hover {background:url(img/nav-aboutHover.gif) top left no-repeat;}
	li.work {background:url(img/nav-work.gif) top left no-repeat;}
		li.work:hover {background:url(img/nav-workHover.gif) top left no-repeat;}
		.nav li a {display:block; padding:15px 0px 0px 50px; color:#000; font-size:18px; font-family:arial; height:35px; text-decoration:none;}
		.nav li a:hover {color:#C00;}

在更精细的网站设计中，菜单会变的更多的样式来支持。公平的说，如果你想使用一款特定的字体——事实上很少有网站允许这样做——那么你就需要使用图片、Flash或一些魔法。最后，尽可能保持易用性是非常重要的。

学习的最佳方式是练习，试着吧图标移动到文字的后面，或者创建一个有图标的垂直导航菜单系统。

神飞认为，其实这是一个很简单的教程，属于入门级别的，没有什么高级的技术，只是提供了一个制作带图标的水平导航菜单的方法。从网站的性能上来说，这样做并不是很好，现在最推荐的方法是CSS Sprite，就是将用到的那些图片放到一个图片文件中，然后通过background-position来分别调用。另外，对于使用特殊文字的情况，现在的情况有了一点小改观，就是CSS3已经开始支持网站的内嵌字体了。

如果你有什么更好的制作此类菜单的方法，不妨与前端观察的朋友一起分享，多谢。

原文：http://www.qianduan.net/?p=6214
译自：www.zenelements.co.uk
版权所有，转载请注明出处，谢谢。