你是怎样设计图标的？如果还没开始上手？不要紧，抓紧练习前，先看看 Craig Grannell 从设计大神那里总结的一些经验。
那么到底要怎样设计图标呢？我们一道来听听大师的看法，一道探索吧。
01.使用辨识度高的隐喻
(1)Edwards 首先注意到的一点便是图标通常尺寸都很小，因此图标设计的关键就在于：简单的勾勒出应用的整体概念
“一般的做法是使用一种或两种辨识度较高、能代表概念的物体。然后再用优秀的色彩和流畅的形状来塑造美...
分类为 UI 的文章：
介绍
关于png的乱七八糟的一些东西这里就不说了。在前端的日常开发中，我们经常要用到png图片，由于IE6默认是不支持图片含有alpha透明的，这时候一般就要用到一些hack方式了。常用的方式有：
1、CSS里添加filter(手工添加很麻烦)
2、用gif来代替（有瑕疵）
3、使用vml（JS来实现，并且动态操作DOM时可能也要调用）
对于使用filter的方式，有没有自动化的方式呢？
如果使用程序来自动添加_filter和_background的话，就要做到如何...
现在在提起Icon Font，已经不是什么新鲜的词汇了，网上已经有很多介绍它的文章，并且很多网站也已经将它用到，本篇主要是将制作Icon Font的整个流程整理一下，并且加入了自己在制作中遇到的问题，使得大家可以在今后使用的时候可以很快上手并且避免这些问题。
一、首先要说的是，什么是Icon Font。
我认为，我们现在通常所指的Icon Font，是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。
二、知道了什么是Icon ...
UI设计 不像平面设计那样随性， 期间可以用点技巧来减少痛苦。
1. 设置网格线 保持像素完美
不在1:1分辨率下也能保持像素完美，可以通过创建网格线来避免虚边的出现。 编辑 ＞ 首选项 ＞ 参考线、网格和切片 保持尺寸为偶数。
例如：设置网格线间隔为64px，子网格为64
使用网格在画图形时会自动吸附，不是1:1状态下也可以画出完美像素。
2 .智能对象和路径的变形
（1）将图层转换为智能对象（右击图层 ＞ 选择转换为智能对象...
「如果你不够小心，在Photoshop 中旋转图像时，可能会毁了你辛苦完成的作品！——马克爱德华」
在Photoshop 中旋转图像时（这边指顺时钟或逆时钟旋转90 度的情况），如果你的图像的长跟宽都是奇数，或者都是偶数时，并不会发生什么问题。但是当你的图像只有一边为奇数时，你会得到预期之外的结果，如下图：
为了更清楚的了解发生什么事情，我们取一张3X4 像素的图形，可以发现由于旋转中心在两像素的邻边，当我们对此图形做90度...
网上有人说为中文或E文添加span标签或添加class然后单独定义样式。
其实，办法很简单：
在 font-family 里将E文字体写到前边即可：
body {
font-family:Corbel,Georgia,"微软雅黑";
}
浏览器会根据顺序为文字选择字体，如果字体中没有这个字符（比如中文），就会去下一个字体中寻找（E文字体中是没有中文字体的）。
效果：
目前，文字信息仍是网站最主要的内容，随着CSS3技术的不断成熟，Web字体逐渐成为话题，这项让未来Web更加丰富多彩的技术拥有多种实现方案，其中之一是通过@font-face属性在网页中嵌入自定义字体，主流的浏览器都支持这项技术，本文介绍主要的几种Web字体格式及各浏览器兼容情况。
Web字体格式介绍
TrueType (.ttf)
Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使...
注：中文的话除了“黑体宋体楷体”也就“雅黑”可选了，以下是英文的几个可用字体（蓝色标注的是本站推荐使用）。另，本文偏重Windows系统。
所有平台都预装的字体，被称为“安全字体”，因为它可以保证所有用户的视觉效果是一样的。字体安全即从安全字体的使用中说起！！
在Web编码中，CSS默认应用的Web字体是有限的，虽然在新版本的CSS3，我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体。但多数情况下，考虑各个因素...
我们在使用CSS对网页元素定义样式时经常会遇到这种情况：要对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢？
在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先。
那么，又怎么来计算选择器的特殊性呢？下面这张图介绍了特殊...
提到图片，我们不得不从位图开始说起，位图图像(bitmap)，也称为点阵图像或绘制图像，是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成一副图片。当放大位图时，可以看见赖以构成整个图像的无数单个方块。
常见的格式中JPG、PNG、GIF亦属于位图，所以它们的数据结构大致相同，只是每一种图片格式都有不同的压缩算法，不同的扫描方式，但是优化的方法都有一个共同点，都是围绕着每个像素颜色值来下...
什么是扁平化设计？
在实际当中，扁平化设计一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果，从而打造出一种看上去更“平”的界面。扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。
随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸，创建多个屏幕尺寸和分辨率的skeuomorphic设计既繁琐又费时。设计正朝着更加扁平化的设计，你可以一次保证在...
