知更鸟 » 设计资源

汉字创意设计8000张

知更鸟 — Sun, 30 Oct 2011 08:52:53 +0000

一直想给自己博客设计一个漂亮的LOGO，英文字母变形还好弄一些，不过汉字就不那么简单了。本文收集了8000余张汉字创意设计图片，其中包括一些著名的中文商标及LOGO，希望能给喜欢设计的的朋友一些参考及启迪，充实自己的创意理念，学习创意设计的原则和技巧，有朝一日设计出个性十足的LOGO商标，也不失一项谋生技能。

特别提示：本文提供的所有设计作品，仅做为参考之用,请勿用于商业用途，版权归原作者所有，本站不负责法律方面的相关事宜!

打包下载

压缩包较大（近170M）,貌似这个网盘有时需要登录才能下载

WordPress官方标志

知更鸟 — Wed, 13 Apr 2011 03:13:09 +0000

你是否需要一个WordPress官方标志？官方已供一个专门的展示页面并提供各种规格和风格的WordPress标志下载.

WordPress官方标志：http://wordpress.org/about/logos/

之前我也亲手作过WordPress标志字体：下载页面

正确与错误标志对比

标准的WordPress标志

当你需要在网站或刊物上使用WordPress官方标志时，请使用下列之一。

Mini PNG 16×16

Mini PNG 16×16

WordPress Buttons

Adorn your WordPress-powered site with these handsome web buttons.

WordPress Desktops

Show your WordPress love with desktop images for the most popular screen sizes (including the iPhone!)

WordPress Colors

When reproducing WordPress artwork in print or online, your project will look its best if you use this official WordPress color palette.

Blue
Pantone 7468
CMYK 97, 44, 26, 3
Hex #21759b
RGB 33, 117, 155
Orange
Pantone 1665
CMYK 6, 86, 100, 1
Hex #d54e21
RGB 213, 78, 33
Grey
Pantone Black 7
CMYK 65, 60, 60, 45
Hex #464646
RGB 70, 70, 70

2010年最好的图标集锦

知更鸟 — Fri, 01 Apr 2011 07:01:07 +0000

Shopping Bag Icons

Here's some other articles that you will definitely find useful.

How to Design App Icons for iPhone and iPad

15 Must-Have Minimalist Icon Sets

55 Examples of Beautifully Integrated Social Media Links in Web Design

20 Excellent Icon Sets for Application Design

The Best E-Commerce Icons All In One Place

20套免费图标

知更鸟 — Fri, 01 Apr 2011 06:35:30 +0000

We love finding and sharing freebies with our readers, especially icons. We do this so you can focus on doing what’s important, instead of spending all your time searching the internet. In this article, we’ve rounded up 20 sets of freshly created free icons. If you don’t have an immediate need for them, I’m sure you can find a place for them in your icon library.

Shiny Icons

Once

Mini Icon Set

Fidelity

Vector Social Media Icons

TRANQUILITI

WooFunction

32 Pixel Social Media Icons

Oxe Icons Set

Mixed Icons Pack

Touchscreen Icons

Applications Icons

Nixus

Roundy

Help

Sketchy Web Icons

Medical Icons

MinIcons

Pos Machine Icons

Absque

Here's some other articles that you will definitely find useful.

25 Fresh and Useful Icon Sets

How to Design App Icons for iPhone and iPad

15 Must-Have Minimalist Icon Sets

55 Examples of Beautifully Integrated Social Media Links in Web Design

20 Excellent Icon Sets for Application Design

在线Ajax载入动画生成工具

知更鸟 — Sat, 19 Mar 2011 09:16:42 +0000

loadinfo---在线Ajax载入动画生成工具
loadinfo是一个在线Ajax载入动画生成工具，图案多达99种，可定制性强，点击你中意的图片即可进入制作，可以对前景色和背景色进行设置，每种样式有三种大小供选择，分别是16*16、24*24、48*48，满足大多数网页设计需要，设置好后即可生成，然后将生成的gif图片保存即可。其中每一个图标都带有链接指向该图片的制作页，点击你中意的图片即可进入制作。

地址：http://loadinfo.net/

15个jQuery提示框插件

知更鸟 — Thu, 17 Mar 2011 00:51:56 +0000

需要在用户把光标移到某个元素上时显示一些额外信息时，提示框是一种不错的方式，提示框会在鼠标停留的时候显示，鼠标移开时消失。

适当的使用提示框能大大提升网站的友好度，并且可以节省一些不必要的网页空间，今天我们将看到15款制作友好的提示框的jQuery插件。

1. qTip

qTip是一款功能高级的提示框插件，它提供了非常多的特性，包括圆角框、提示泡泡等。

2. jQuery Tools/Tooltips

这个提示框插件能够显示任何的HTML元素，比如链接、表格、表单、图片，实现这些效果是很轻松的，你也可以轻松制作出自己独特风格的提示框。

3. Simpletip

Simpletip 允许你通过Jquery的元素选择器和事件管理器轻松在任何元素上制作提示框，提示框可以使静态的、动态的、甚至可以通过ajax加载，并且都有非常多不懂的显示效果。

4. jQuery (mb)Tooltip

jQuery (mb)Tooltip是一款通过 jQuery timers 和半透明阴影插件实现的漂亮的提示框插件，它为各种需求提供很多可选项。

5. EZPZ Tooltip

你不需要添加任何CSS或图片就可以扩展、定制提示框的样式风格。

6. jQuery Input Floating Hint Box

这个插件在表单右边提供一个自动变化的提示框，当输入框获得焦点时它就会显示，失去焦点时就隐藏。

7. HTML Tooltip

8. Orbital Tooltip

你可以用 Orbital Tooltip在目标元素的360°任何一个位置制作出一个提示框。

9. Tipsy

Facebook风格的提示框插件。

10. clueTip

11. jTip

jTip 利用 HttpXMLRequest 对象去获取内容，只要在链接上加一个”jTip”class，就可以获取远程地址提供的提示内容

12. BeautyTips

13. Hovertips

可扩展性极好，只需少量的javascript代码你就可以制定出自己风格的提示框。

14. BetterTip

BetterTip基于Cody Lindley的 jTip实现, 但是对比起来它扩展性更好。

15. jqTooltip

轻松通过ajax制作提示框。

译自：http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

60个免费高品质图标集

知更鸟 — Thu, 10 Mar 2011 04:59:35 +0000

Using icons in designs is a hot trend these days. Most of the websites now a days uses icons for their logos, navigation, bookmarks or use to represent their website.

I’ll be featuring 60 high quality icons set that are free to download but be sure to read the terms of the owner’s icon.

1. Free Cupcake Icon

Cupcake icon designed by ArtDesigner for sweet tooth websites. It is available in variety of sizes.

2. Moleskine Icon

Moleskine Icon is a beautifully crafted design with pixel perfection by Michael Stezycki. The icon comes in 7 different sizes ranging from 16×16 all the way up to 512×512. The download also includes a wide variety of file formats to meet all your needs.

3. Paradise Cherry Icon

Cute sweet cherry icon. It is available in sizes between 64×64 px and 512×512 px.

4. Ktax K-7 Icon

Two highly detailed replacement icons for Apple’s Quicktime player. Though drastically different from traditional quicktime icons, it blends in nicely with the rest of your dock or desktop.

5. Starflash Brownie

Kodak’s instant camera Starflash Brownie icon based. It is available 512×512px .png, .icns and .ico. Free for private and commercial projects.

6. Fjernsyn

Set of cool icons from young Danish designer Rasmus Nielsen, is a nice option.

7. USB Prober

USB Prober application for Mac icon based. Available in 512×512px.

8. Leica M7

6 Leica set icons in the resolutions 512×512px. Available as .PNG, .ICNS and .iContainter.

9. Apple Icons

Mac logo like icons. It contains 8 icons of different colored apples all in the rsrc format for use with Mac OS.

10. Iconlicious

A cute milk carton icon from Iconlicious.

11. Latte: 48px Icon Set

Latte’ contains 25 different icons in the resolutions 48×48px.

12. Notes and Evernote

An icon pack of Notes & Evernote. Available resolutions: 512×512px.

13. IsoIcons Workspace

Workspace like icons that ar available in 128px×128px resolution.

14. Mira Works

A calm office environment inspired icons from Mira Works. It is available in three different sizes: 64×64px, 128×128px and 256×256px.

15. iCandies Icon Set: 60 Free Icons

iCandies Icon Set, a set with 60 high quality icons in 64×64px, 48×48px and 32×32px, available in .EPS, .AI and .PNG. The set is designed by the talented folks from IconEden on a sole purpose of giving your projects a sleek and geeky style or provide crisp, attractive icons for your modern and fashionable-looking interfaces.

16. Designer Icons – Professionally Hand-Crafted Free Icon Set

This set of icons was professionally crafted by professional icon artist, Parthiban Mohanraj. This set has all the values of stock icons.

17. Blue Vinyl Fonts

Mac OS X icons collection. Colorful vinyl records and vintage style record cases. 16 icons in all.

18. This is ART 2

A collection of 12 icons all with maximal dimensions 512×512px. Creative renditions of various application related subjects as icons. Released under Creative Commons Attribution-NoDerivs 3.0 Unported.

19. The Graphs 2 – One graph collection to rule them all

This icon collection is ready for the future. With the power of Scalable Vector Graphics you can use these icons directly into your web pages.

20. High-res Browser Logos

High-resolution browser logos for your presentation or a blog post; these icons are available in the resolutions up to 256×256px, .PNG, each with their own official shadow treatment, and no background matte color. Presented by Paul Irish.

21. Various Smartphones Icons

This icon pack contains 14 icons for assorted smartphones, ranging from the Blackberry Storm to Motorola Droid. Maximum size available is 256×256 px.

22. Free PNG Credit Card, Debit Card and Payment Icons

Payment Icon Set, a set with 18 payment icons in PNG format, in the resolutions 32×32px — 128×128px. This set was designed by Phil Matthews.

23. Icon Pack: 256×256 Business Icons

This icon set contains 26 Business themed icons. Each icon is available in 256×256 .png format. Included in this set are User icons, Warning & Alert icons, Chat & Email icons, Maps & World Icons, and several other icons that are appropriate in business settings.

24. Upojenie

This collection includes 40 icons for iPhone and iPod Touch.

25. Construction

Construction is a free icon set with a total of 25 icons, designed uniformly with any of our current premium icon sets. As illustrated for building and construction tools and equipments, this icon set is aimed for use in your projects related to construction or infrastructure.

26. Iconfactory by David Lanham

This collection contains 42 square icons with large resources for Vista & Leopard.

27. Iconfactory Freeware by Dave Brasgalla

This collection contains 4 icons with large resources for Vista & Leopard.

28. Plush Icons Set

Plush toys icon based. This set includes 6 different cute plush icons in the resolutions 128×128px and 256×256px. Format: ICO and PNG.

29. E-Commerce Icon Set

E-Commerce Icon Set includes Products on Sale, New products, Checkout, Secure Payment, Credit Cards, Delivery, Shopping Bag, Empty Shopping Bag, Shopping Cart, Empty Shopping Cart.
Usage: Free for Personal and Commercial Projects (Size: 128, 64, 48, 32px)

30. MobileMe Icons by Prathyush

Six MobileMe icons with the resource PSD.

31. Flip Clock by Maxdicapua

This is a fully editable and scalable (except for the noise layers) and well-organized flip clock icon.

32. Boolean

Enter Boolean, a thriving city inhabited by tiny icons

33. 32px Mantra v2

Includes 36 free icons in PNG. It is available in the resolution 32×32px.

34. Solar System Icons

Solar system icons inspired. It contains the Sun, Moon, 8 planets, and 3 dwarf planets.

35. Littlear Icon Package

Unusual and funny set of icons giving life to different kinds of application, folder and file icons.

36. Compass

iPhone icon inspired by the Compass application. It is available in resolutions fit for iPhone, iPad, iPhone 4 and iTunes, from 57×57 px to 512×512 px.

37. 20 Free Marker-Style Icons

This icon set is originally inspired by the iPhone’s Notes.app and designed for Notepad (WordPress theme). Icons are designed in a simple marker stroke and can be applied on any color. You can use them in sketchy or modern design as seen on the iPhone and iPad apps.

38. Social Media Icons

Set of Vector Social Media Icons with the Google Buzz, Microsoft Bing, Picasa, Meetup, Feedburner, Ebay, Drupal, Gowalla, ICQ, Metacafe, Yelp, Xing, Paypal, Podcast, and various color buttons.

39. Project Icons

A pack of 182 32×32px icons. It is available in .PNG, .ICO, .ICNS, .iContainer.

40. PixeloPhilia2

This icon set contains 44 icons for web sites and web apps by Creative Commons.

41. iPad Icon

Simple icon set of Apple’s iPad.

42. Free Font Symbol Signs

This free collection includes common used symbol signs for public services such as Toilets, Telephone, First Aid, Smoking, Baby, Recycle Icon, Arrows collection and much, much more. The signs can be used for restaurant signage, hotel signage, office way-finding, airport signage and more.

43. Free Font Dingbests

The original dingbat font was designed in the sixties. This is a collection of dingbat fonts for the nineties, commissioned by FontShop. Over 700 pictograms including fax, laser printer, diskette, computer and mouse, as well as all the classic images. A special selection of them has been put together in the single font FF Dingbests.

44. 48 Free 16×16 pictograms by Miro Keller

A set of 48 tiny 16×16px pictograms to use in your projects. They are shared under a Creative Commons.

45. Weather Icons by Gavion Elliott

This is a set of 16px weather icons in PNG, JPG and PSD format.

46. 120 Free New Icons

A set of 120 simple icons, in 68×68px and 48×48px resolutions. You can either grab and freely use various elements or crop them for your resolution.

47. gCons: Free All-Purpose Icons for Designers and Developers (100 icons PSD)

The icons come in 12 different colors and are available in PSD, PNG, JPG and GIF formats. This set was designed by Sarfraz Shoukat.

48. Free Country Flag Icons

37 country flag icons rendered at 256×256, 128×128, 64×64, 48×48, 32×32, 16×16 pixels. Formats available are png, ico and icns. All the icons contained in this set are free for non-commercial use.

49. Flag Favicons

These world flag favicons were created from the standard 16 color palette in IconEdit32. The favicons are original work and free to download, use and modify in any way you like. Available in .ico format.

50. Icons at Artcore Skizzenblog

A set of unique, creative icons available for non-commercial use. Released under Creative Commons license.

51. Somatic Rebirth Extras 2 by David Lanham

This collection contains 16 illustrated icons with large resources for Win and Mac.

52. Desktop Icons by Greg Barnes

This desktop icon set includes Evil Dead 2, Vintage Kitchen icon set, Terrariums icon set as well as Vampire Hunter Kit. Coming up soon: Christmas Ornaments and Army of Darkness icon set. Available for Mac, PC and iContainer.

53. PaperPlanet Icon Pack

The pack consists of the icons for various applications, music and video players, standard Mac icons as well as a couple of extras.

54. tickfiguredancer

Four custom icons based on the super hero team ‘the Avengers’, available for Mac OS X and Windows.

55. A Live Spell Check

In this freebie icon set, you will find 16 free social media icons for sites that designers appreciate (such as deviantART, Flickr, Twitter, and more). This free icon set is called A Life in Pixels and is inspired by Minimalist design philosophies.The set includes 16 32px x 32px PNG files.

56. Free Glossy E-Commerce Icons

Presenting 32 free icons to use or remix in your eCommerce projects complete with master SVG file.

57. Shopping Cart Icon

Shopping cart full of items icon based.

58. Chalkwork Payment Icons

Chalkwork Payments is a free set of online payments icons, designed to perfectly complement all other sets in the Chalkwork Family. Featuring 21 original icons and 105 variations, these graphical representations of common payment services and payment-related imagery are a completely free icon set available for personal and commercial projects

59. Credit Card Icon Set

A set of six icons for showing your visitors that you accept credit card payment.

60. Weby Icons

eby Icon Set brings to you 100 icons at 64×64 pixels ready to be used in your application or website.The icons are available in PNG, ICO and ICNS format. They are free to use for both personal and commercial projects, including websites, templates & software.

为Web设计者和开发人员准备的35个图标集锦

知更鸟 — Thu, 10 Mar 2011 04:51:46 +0000

Overlooking the importance of icons in web designing is a noobish activity as they not only enhance the elegance of website but they also make it more user-friendly providing easy navigation through different content of a website. Finding free high-quality icons from sea of icon resources available is very difficult and time consuming task but don’t worry, as today we have collected 35 fresh free icon sets for designers and developers and tried to save you some time.

1. Adouble

2. Social Media Balloons

3. High-res browser logos

4. 10 Free Useful Icons for Designers

5. 20 Free Marker-Style Icons

6. Vector Social Media Icons

7. Ultimate Social Network Icons

8. Twitter Icons

9. Thinking Networks Icon 2

10. Fidelity

11. 100 free icons Weby Icon Set

12. Social Store Icon Set

13. RETRO Style Icons

14. Stock Icon Set

15. P6 Orb iconpack Black

16. Shanyin icon set

17. Icons Social snow

18. Web Cartoon

19. FREE Web Icons

20. PixelFun

21. Sketchy Icons v 1.2

22. 44 Icon for Web-Design & Software

23. Tango Icons

24. Free Web Application Icons Set

25. Dusk

26. Fugue Icons

27. Cyberpipe icons

28. Web 2.0rigami

29. Free icons 3 by Andy3ds

30. Quartz Icon Pack

31. Glyphish

32. Mate BW social icons

33. Shine

34. 15 Free Origami Icons

35. Box Icons

50款非常棒的苹果Mac图标

知更鸟 — Thu, 10 Mar 2011 04:43:29 +0000

Everyone loves free resources so does we, that’s why we keep on posting high-quality resources for you on regular basis. Today we have collected 50 awesome icon sets for your Mac. Beautiful icons make sure you have pleasing and joyful visual interface experience and offer you elegant means of interaction with your Mac. You can renew look of your mac by just changing basic icons with new creative and beauteous icons we have listed in this roundup. Give your Mac a new appearance today.

1. The MacBook In Black

2. Aluminium MacBook Pro OSX

3. HydroPRO -HP- Mac Edition

4. Stainless mac

5. The Mini. Mac Mini

6. Concave Mac Icons

7. Capital Icon Suite

8. Apple mac mini icons

9. Slick Drives

10. Mac mini Icon

11. Mac Pro Psd + Png + Ico

12. Mac Box Icons

13. iMac

14. Apple iMac icons

15. iMac 2008

16. G5 System

17. Float

18. TiSystem

19. Agua

20. iMac icon

21. New iMac 07

22. Icons 2 by Lecoupdulapin

23. Refresh Snow Leopard

24. Macbook and remote iKons

25. Nimble Folders

26. The Pro. MacBook Pro

27. Slick Drives Remake

28. Apple Mug Icons

29. Black Leopard Icon Set

30. Onibari Leopard Made

31. PoleStack

32. W R E N

33. Wooden Slick Drives

34. Ive Drives

35. HD StorageBox

36. Platinum Drives

37. Exempli Gratia

38. Lacunae

39. XIII

40. DA ID

41. 27″ iMac Icon OS X

42. The MacBook In White

43. The Anodized Behemoth

44. Carbon Light Folders

45. Mac USB Icons

46. Wireless Mighty Mouse

47. Smoothicons 14

48. eWorld X: eHardware

49. Totem Pole

50. Nano icon set

RSS图标集合

知更鸟 — Sun, 16 Jan 2011 06:59:00 +0000

Dirceu Veiga Icons

Beer Fest RSS Icons

Cocktail Party

Paper feed icons

Hat RSS Icon

Wax Seals

RSS Bot

345 Free RSS Icons

RSS

RSS icons

Rss Icons Orb v2

Feedicons 2

RSS Icons

Circle Feeds Icons

RSS NEWS

RSS Icons

Toast Feed Icon

Rss icons – namo

RSS 2008

RSS Feeds Icons – Shirt

RSS Block

3D Rss Feeds Icon

Free web 2.0 RSS icons

Rss icons by ~jinsona

40 Vector Translucent 3D Look RSS Icons

Color RSS icons

Feed Me Animals: A Free RSS Feed Icon Set

30 Free Vector RSS Icons

RSS Feed Icons – Glossy Balls

RSS feed button pack

RSS feed 17 icons-sign v1.0

RSS Icons by *lansworxph

RSS Icons by ~serega

RSS ICON by ~blogeeks

StickerFeed by ~bati1975

RSS Icons by ~mata-mhari

Free Download: RSS Feed Badges / Icons

RSS READER Icon by ~twinware

RSS Icons set by ~mata-mhari

Web 2.0 RSS Icon 2

Free Glass Style RSS/Feed Icons

NewsFire

devi.RSS

RSS Icons – PNG

RSS Pack

Wood RSS Feed Icons

Gold RSS Icon

Rss icon (png) freebie!

Technorati 标签: RSS图标

27个免费无缝图案背景下载网站

知更鸟 — Sun, 09 Jan 2011 17:01:36 +0000

你可以在很多网站上看到，设计师们应用了非常漂亮的无缝背景图案。背景图案的应用可以让平凡的设计作品拥有更多的个性化和趣味性。图案不仅仅可以应用在网页设计中，服装设计包装设计等等都可以有所借鉴。这里，我们收集了27个可以下载到免费无缝图案背景的优秀网站，希望你会喜欢。

1.) Pattern 8

2.) Huge Magazine

3.) Bg Patterns

4.) Din Pattern

5.) COLOURlovers

6.) Shizoo Design

7.) PixelDécor

8.) Patterrific

9.) AVA 7

10.) Squid Fingers

11.) Everyday Icons

12.) Hybrid Genesis

13.) Kaliber 1000

14.) Alice Grafix

15.) Pattern Cooler

16.) Patterns of Change

17.) Pattern Head

18.) Portfelia

19.) Milleseicentopercento

20.) Fractured Sanity

21.) Urban Strokes

22.) Citrus Moon

23.) Secret Loft

24.) Pattern Bomb

25.) Appendix Squared

26.) Seamless Tiles

27.) Tartan Generator

微软雅黑字体设计分析

知更鸟 — Sun, 14 Nov 2010 20:45:30 +0000

一．雅黑设计理念

雅黑字体是为微软公司设计的屏幕显示汉字。它具有个性独特、结体优美、识别性强、块状效果好、显示清晰等优点。在当今数字化时代更是用途广泛。这副字可以说是科技进步的产物，是人类社会的需要，在设计上也有所突破。

首先打破传统结体方式，采用大字面设计，字怀放开，增大内白，使文字方正，布白匀称。由于字体中宫放开，使文字的适用性也随之增强，不但适合小级数文字的使用，更适合屏幕显示。

在笔型塑造上去除“喇叭头”。为防止文字笔划缺乏美感、没有精神，在撇、捺、点、勾的处理上使其粗细有略微的变化，使之富有弹性。

在制作上，力求精良，笔划间尽可能少搭笔，使文字清新、爽朗、易读。

追求字体的整体形式美，强调文字设计的审美性和文化性，朴实大方，典雅端庄。

下面从字体设计理论方面与实际字体应用的角度来阐述一下雅黑是用什么方法和字体设计技巧来完成和完善设计目标的。

二．按用途来设计字体

1．字体设计类型

字体设计可细分为平面美术字体设计和印刷“活字”设计。在这所要谈的字体设计是指在印刷“活字”范畴内的字体设计，主要研究字在缩小后的清晰度、可读性以及整体效果。在字型的处理上它不能象美术字和书法字那样，可以无视大小地尽情抒发情感，而要受到一定规矩的约束，讲究共性和个性的关系，来达到一种机械的美观。这种设计也是一门比较冷僻的视觉艺术。近年来，随着科学技术的不断发展，印刷“活字”设计又可分为出版印刷用字设计和屏幕显示用字设计这两个大类。

雅黑是属于屏幕显示用字，设计时更要注重研究字在低分辨率下的清晰度和可读性，尽可能做到小字号显示时的清晰易读，要达到这一目标，关键在于设定字面大小、笔型塑造和严谨合理的结构处理……。

2．字面大小的含义

我们有必要先来搞清楚两个不同的概念：“字面大小和字身字面比”。字体设计专用方格都有两个方框，外框称字身框，内框称字面框。

图1

字面大小：“就是在字面框不变的情况下，可以把字设计成大小不同的字，大字称字面大，小字称字面小。”

图2

字身框和字面框之间的距离就是半个自然字距。能正确地运用好他们之间的关系，是字体设计的基础。

字身字面比：“简单说就是在字身框不变的情况下，两者之间的百分比值，比值大字就大，比值小字就小，说白了就是把字放大和缩小。”

图3

现在有许多用户，为了能挤排，图省事，不惜把字缩小，造成字与字距之间的关系失衡。这样使用，即使有再好的字体也排不出完美的版面来，这是非常不科学的用法，与其这样，还不如缩小字号来用显得完美。

3. 字面的可测量大小和视觉大小

字面大小又可分为可测量的字面大小和视觉上的字面大小。已故字体设计大师谢培元老师在1962年归纳总结的“第二中心线”理论已表明，汉字由形声组合的字都是可以测量的，形旁和声旁这两个部件的中心距离越大，字面就越大，反之，字面就越小，我们只要测量这两个部件的中心距离就可以得到相应的字面大小值。同时，这也是控制整副字大小的有效工具。

图4

雅黑在保持文字个性的基础上，尽可能的扩大形声这两个部件的中心距离来增大字面。同时，运用这种方法使得80%以上的字，大小保持一致。对于那些不能测量的字和一些易见小的字，雅黑又是如何处理呢？

从几何形角度来看，汉字形状众多，最典型的可分为四种类型：“方形、圆形、三角形和菱形”，从面积上看方形最大，菱形最小，要想把图形面积变得一样大小，就必须按菱形大小走，这样设计出的汉字才能在视觉上保持一致。

图5

要想做大字面的字，我们首先要考虑面积最小的菱形，那么，怎样才能把菱形字做大？很简单，只要适当调整改变菱形的形状，那么，我们就能得到比原来菱形面积大的形变图形，用这种方法来设计，就可以得到在视觉上比原先字面大的字。

图6

雅黑在设计初期就是用视觉大小这种方法来定字面大小的。

4. 字面大小和屏幕显示的关系

字面大小和屏幕显示又有什么关系呢？为了说明问题，用少点阵图来比较说明。

图7

从上面两图比较中我们可以看出，左图字面大，占像素多，内白均匀舒适、清晰易读。右图字面小，占像素少，因此，内白不匀称、识读效果变差。

雅黑设计时考虑到这一因素，不但采用大字面设计，同时，在字距较合理的范围内调大了字身字面，多争取到了每一点宝贵的像素，为小字号使用的清晰易读奠定了基础。

5. 去掉影响屏幕显示效果的“喇叭”口

现用黑体字的笔锋过大，成喇叭状，我们戏称为“喇叭头”或“喇叭口”。传统手写的黑体本应没有这么大的“喇叭头”，只稍微有点笔锋。那么，这 “喇叭头”又是从何而来？有两个原因，第一，可能是个别写字人员认为喇叭口稍大些精神，故意写大些，第二，在把照相字模版的字翻制成电脑字库时，做字人员在不明白黑体字应有笔型的情况下，把原本制作照相字模版时，为防止在拍照缩小的过程中笔划变得虚弱、变圆走型而装上的“小辫”给融进了笔划，形成现在这样的“喇叭口”。

图8

过大的喇叭头，不但失去了黑体字应有的品格，在屏显时，“喇叭头”能在笔划两头多出一块，如果两笔离得较近，头就有可能连上，使笔划交代不清，可读性变差。

图9

雅黑属无装饰风格的字体，少了不必要的累赘，自然避免了这类问题的出现，使文字清晰易读。

三．雅黑设计中的要点

1．雅黑是根据我在90年代初期设计的黑体系列样张改进设计的。

图10

从上述样张中可以看出，字体符合屏显字体的基本要求，字面大，无“喇叭头”，属无装饰风格的字体，可以作为雅黑的设计基础来改进提高。

2．雅黑设计上主要改进了字的粗细，“钩”的僵硬和“八”字点的写法，使其符合规范要求。同时，更注重线条的刻画，使其柔和挺拔富有弹性。

图11 部分笔划笔型图

3．为了使正文字的阅读效果更好，对所有的口和带框的部件加“脚”，也就是口下面出头，其目的是为了给眼睛以适量的刺激，来提高阅读速度，这是正文用雅黑设计的一次新尝试。

图12 口和带框的部件加“脚”

4. 为适合屏幕显示用，在字结构的处理上“计白当黑”，严格控制“白”在各部位所占的比例，使其舒朗匀称。

图13 黑白处理示意图

这种处理方式不但使字稳重大方，而且使字撇捺舒展、飘逸潇洒、富有姿态。

5. 采用独创的手法对笔划进行特殊处理，减少交错连笔处的黑度，使字的整体灰度更好，更清晰，更适合屏显。

图14 特殊笔划处理示意图

6．避免笔划交代不清，粘连过多

图15

这些字笔划交代不清，粘连过多，既降低了识、读的速度，又有错字嫌疑。雅黑在设计时就尽量避免这种问题的发生。

图16

四．笔划粗细与结构、留白、重心之间的关系

这是活字设计中的一个综合问题，并非一朝一夕就能掌握的，它不但对字的个性要有深刻的理解，而且还要具有非常敏锐的观察力。做字的过程其实就是练眼的过程，眼睛练“凶”了，字自然越做越好。

下面通过调整统一字体的粗细，来了解笔划粗细与结构、留白、重心之间的关系。为了更好的说明问题，便于理解，选用多笔划和少笔划的粗体字为例。

图17

1 调整字的粗细，使之成为一个整体

这两个字一粗一细，视觉上看是两款字，粗细调整不当。首先，把细的“體”字加粗，使两个字的视觉粗细一致。

图18

2 字的内白影响字的重心

“體”字在加粗后，虽然在粗细上合适了，但是，看着还不舒服，仔细分析一下原因，问题在于内白，各部件的重心位置欠妥，骨字重心偏高，曲、豆重心偏低，使得互相间的呼应性、协调力变差。那么，我们只要调整“體”字的内白，改变重心位置就行。

图19

3 调整字的局部粗细来改善字的结构，提高字的品位

现在我们来调整“粗”字，先分析一下粗字的那些地方需要改进，米字过大过黑，形象欠佳并压迫且字，从而使结合部太紧，整字见窄。改进的方法是：缩小米字，放大且字，减细米字上方的八字点，改善横眉竖眼的“凶”相并使点见长，加长撇梢，使其舒展，分清下点使其交代清楚。通过这些调整，粗字变得面貌一新，提高了品位。

图20

“粗體”两字通过调整粗细、内白，改变重心与结构，使“粗體”两字变得更完美。

图21

从上面的几次调整中可以看出，笔划粗细与结构、留白、重心之间是相互相成的关系，是一个不可分割的整体，只要协调好它们之间的关系，就能提升字的品格，并有良好的排版效果。

雅黑在设计制作过程中就是运用这种设计技巧使字既有品位，又整齐划一，灰度良好。

五．文字的形象、表情与气质

笔型是构成文字笔画、风格的基本元素，笔画制作的完成度会影响到成字后字的品质，而字的结构就好比人体的比例、五官的位置，它直接能体现文字的形象、表情与气质。因此，对于字体设计制作来说，每一环节都是至关重要的。我们设计黑体字，要表达出黑体字本身具有的庄重、典雅的特性，就必须先把笔划做好，把字写端正。

图22

从上面这些字我们可以看到，这些字就没有写端正，笔划生硬，制作粗糙，部件之间的位置安排欠妥。大头小头缩头，重心有高有低，结构松散，整体形象不好，给人以不整齐、不稳重的印象，缺乏正气感。下面雅黑的感觉就比较整齐舒适。

图23

我们再来具体的对比分析一些字的常见病例。

1. 笔划僵硬，制作粗糙，严重影响字的品质。

图24

2. 撇捺不舒展，使字失去应有的姿态。

图25

3. 缩头

图26

点划的头已伸不出去，还要斜，既不美观，又破坏形象。在头见短，伸不出去的情况下，还是做的稍平些比较妥当，头也长了，字也显得正气。

图27

4. 短腿

图28

节、帝两字下半部的外框做的太长，使主笔中竖见短，就象人的两只手长到脚背上，比例失调。

图29

5. 钩短

图30

钩短，有钩不出的感觉，使字显得拘谨、局促、小气，缺乏气度。

图31

我们常说的一句话：“字的姿态要像仙鹤的舞姿，引项高歌”，也就是说要想把字做得正气漂亮，必须“有头有脚有腰身，撇捺舒展有姿态”。

一个字的含义，并不一定只有字典上的意义，而有感情上的另一种心理感觉，他不但有表情，而且能直观地体现出字本身的气质来。

例一

图32

这些字东倒西歪，毫无庄严的正气感。

图33

主要问题出在字的结构和重心上，给人的感觉是：自卑，没自信，唯命是从，低头哈腰，没有高雅庄严的气度，它的潜台词是：“叔叔阿姨行行好”。

图34

例二

图35

八字点犹如人的双眼，富有表情，不同的角度、形状都能使人产生不同的联想。上面这些字的问题在于八字点上，有的内八字点变成外八字点，有的过大过小，像人倒挂着双眼，呆滞的眼神，带有悲苦哀伤的表情，没有朝气……。

图36

例三

图37

走之底脚短且软弱，向左倾斜，就像建房时地基没打好，不堪重负，摇摇欲坠。同时，也像一个人没有肩负重任，独自擎天的气概。

图38

从上面所举的这些例子中我们可以看出，字要设计得既庄重高雅，又有豪华富贵的气质，是最难能可贵的。雅黑在设计时就注重字的内涵，对文字的表情与气质进行了研究。>

六．雅黑最初的设计样张

图39 雅黑细体

图40 雅黑粗体

文字既是一个文明传承的载体，又代表了中国人的审美观。因此，我们在设计时严格地把好每一关，尽最大的努力做好每一个字，追求字体的整体形式美，力求表现出对比、和谐、均衡、韵律等艺术特征。强调文字设计的审美性和文化性，真正做到给读者以关爱。

附：雅黑是屏显专用字体，用于印刷还有缺陷，我们经过精心修整，并逐步扩充其系列字体的款数，现已有多款字体上市，方便用户使用。衷心希望用户能把意见反馈给我们，让我们把字做得更好。

兰亭黑系列字体设计样张

50个高质量的Mac图标

知更鸟 — Thu, 29 Apr 2010 19:58:22 +0000

Free icons are great, they are better when they are in high quality and comes in variety of different formats. Thanks to a great number of generous designers out there, we are enjoying what they are distributing for free. Here in this post, we’ve gathered more than 50 high quality Apple Mac related icon sets. What’s included are icon sets of Macbook, Macbook Pro, Macbook Air, iMac, Apple TVs and more.

Here’s a little note. These icon sets are fine for personal usage, but you might not use them for commercial projects. So please check with the authors or check with the disclaimer if you intend to use them on commercial projects.

iMac

iMac 2008 by ~Walrick – iMac 2008 in Illustrator file.

Click to View Full Image

iMac icon by IconsClub

Click to View Full Image

Fasticon Apple Icons

Click to View Full Image

Mac Icons – iMac

Click to View Full Image

Apple iMac Icons by skate3214 – They come in white and black, with or without OSX on the screen, 256×256 PNG and ICO.

Click to View Full Image

Leopard Hardware iCons by alfonsohuby – Hardware iCons with Leopard screen 512×512.

Click to View Full Image

Leopard iMac Icon by MITCHFIELDER – 512×512 iMac icon, featuring the Leopard Desktop Wallpaper

Click to View Full Image

iMac evolution icons 1.0 – The evolution of the iMac contains 6 different iMac icons, including the first iMac from 1998 and the newest model from 2007.

The Apple Collection V.2 by GlossII – 43 icon’s & png’s (256 x 256, 3oo x 3oo, 32o x 32o, 324 x 324, 379 x 379, 512 x 512, 768 x 768 & 866 x 866)

Click to View Full Image

New iMac 07 by IconsClub

Click to View Full Image

Aluminium iMac 20,24″ Icons by spiderlama – The new Aluminium iMac 20″/24″ Icons for Tiger.

iMacBox by Thvg – A Widget, an icon, an Application Stack Drawer and the 300dpi iMac illustration.

iMac by mrrste – Icon comes in 256×256 ico and icns and a 512×512 PNG.

Click to View Full Image

Icons 2 by lecoupdulapin

Click to View Full Image

iMac by pickupjojo

Concept Icons by Bobbyperux – 12 different icons in PNG format 256×256px.

Click to View Full Image

iMac Icon by maoos

Click to View Full Image

Apple concept by Darwins

Click to View Full Image

Aluminium iMac Icons by skate3214 – 4 icons of the new aluminium iMac, PNG and ICO.

Click to View Full Image

Black Mac by GoSco

Black iMac by ChicanoDesigns

Vikiworks Apple-iMac Icon – Package includes both PNG & ICO format.

new iMac by GlossII – 4 icon’s & png’s (512 x 512)

Click to View Full Image

More iMac related Icons

Macbook

Macbook and remote iKons by funk-meister

Click to View Full Image

MacBook by ralleria

Mac Icons – MacBook by g-f

Click to View Full Image

MacBook OS X and XP icons by smartazz104 – One for your OS X install and one for a Windows XP Bootcamp install.

Click to View Full Image

The New MacBook by ibaldi

Click to View Full Image

White Macbook by bhound89

The MacBook In Black. by Kamikaze00X

Click to View Full Image

More icons:

Macbook Pro

Apple laptops by GlossII – 8 icon’s & 16 png’s (95o x 95o, 768 x 768, 6oo x 6oo, 55o x 55o & 512 x 512) + 3 wallpapers

Click to View Full Image

The Pro. MacBook Pro by Kamikaze00X

Click to View Full Image

MacBook Pro by cgink – Icon size 512×512px in png and icns

Click to View Full Image

MacBook Pro by Flarup – MacBook Pro in 48, 128, 256 and 512 pixels, all bundled in an ico and icn file + the PNG’s.

Click to View Full Image

Macbook Air

MacBook Air and iMac by Replica-Artist

Click to View Full Image

Mac Mini

Icon 4 Mini Mac Setting by lecoupdulapin

Click to View Full Image

New work stuffs by bunaioding

Click to View Full Image

Mac Mini Icon by chaodam

Click to View Full Image

Mac Mini Icon Pack by thounsell

More Mac Mini icons:

Mac Mini by albinstreipel

MISC

Just a bunch of Apple Icons by g-f

Click to View Full Image

Affel by Bobbyperux – 72 icons in PNG format with a resolution of 256×256 px

Click to View Full Image

Apple TV Black Edition by pwn247

Click to View Full Image

Apple Cinema Display Icon by adenfraser

Click to View Full Image

My Computer Icons by Jrdn88 – Includes 10 different versions in png and icon format. 512px.

Click to View Full Image

FreeIconsWeb – E-Mail icons,Chart icons,Mac folder icons.

Click to View Full Image

Power Mac G5 Icons by User-DA – 256 .png’s of each plus original PSD for adding own wallpapers or colours.

Click to View Full Image

Mighty Mouse Icons – 6 icons inspired in the Apple’s Wireless Might Mouse.

Click to View Full Image

Wireless Mighty Mouse by MohsinNaqi

Fruity Apple – 9 .png and .icns (Leopard ready : 512×512 px), 2 Bonus and 1 Wallpaper (2560×1600 px)

Click to View Full Image

18个Apple风格的GUI PSD 源文件下载

知更鸟 — Thu, 15 Apr 2010 07:34:46 +0000

图形用户界面（Graphical User Interface，简称 GUI，又称图形用户接口）是指采用图形方式显示的计算机操作用户界面。与早期计算机使用的命令行界面相比，图形界面对于用户来说在视觉上更易于接受。这18个Apple风格的GUI PSD 源文件，包括按钮，浏览板和操作系统窗口等，制作精致，个人非常喜欢，值得珍藏。

1. iPhone GUI PSD 3.0

2. iPad GUI PSD

3. Palm Pre GUI PSD

4. Browser Form Elements PSD

5. iPhone PSD Vector Kit

6. FreshBooks iPhone Application GUI

7. The ultimate iPhone GUI PSD

8. iPhone GUI Elements

9. Mobile - iPhone-GUI

10. iPhoneOS Design Stencil for iPhone and iPad

11. Browsers GUI PSD

12. elements of Android 1.5 GUI

13. WEB UI Treasure Chest v 1.0

14. OmniGraffle Wireframe Stencils

15. Web Form Elements Vol.2

16. 960 Grid GUI PSD

17. OmniGraffle Wireframe Stencils

18. Windows 7 Active Window PSD

50款独特而难忘的标志设计

知更鸟 — Thu, 15 Apr 2010 04:41:33 +0000

The logo is one aspect of a company’s commercial brand, or economic or academic entity, and its shapes, colors, fonts, and images usually are different from others in a similar market. Logos are also used to identify organizations and other non-commercial entities. Having a well designed logo can separate you from your competitors and help you build your brand. In this post we presenting this showcase of Highly beautiful, original and creative text based logo designs for your design inspiration.

知更鸟 » 设计资源

汉字创意设计8000张

WordPress官方标志

标准的WordPress标志

WordPress Buttons

WordPress Desktops

WordPress Colors

2010年最好的图标集锦

Related Posts

20套免费图标

Related Posts

在线Ajax载入动画生成工具

15个jQuery提示框插件

1. qTip

2. jQuery Tools/Tooltips

3. Simpletip

4. jQuery (mb)Tooltip

6. jQuery Input Floating Hint Box

7. HTML Tooltip

8. Orbital Tooltip

9. Tipsy

10. clueTip

11. jTip

12. BeautyTips

13. Hovertips

15. jqTooltip

60个免费高品质图标集