3月份，Photoshop CS6 Beta版(下文简称PS CS6)发布公测，有着多项惊艳的新特性，工作中整天和像素打交道，感触比较深的特性就是PS CS6支持矢量对象绘制、变换时像素自动对齐网格。

当然，对象绘制、变换时像素对齐网格并不是PS CS6独有的功能，只是更智能更好用了，PS CS6的像素自动对齐网格功能在绘图过程中，无疑方便了很多，不必再担心图形边缘会出现模糊，但是我们在实际的图形设计过程中会发现，还是会经常需要调整 一些路径没有完全对齐到网格产生的半透明的过渡像素，用来平滑图形边缘减少锯齿感，或让图形看上去更饱满、更细腻，我们称其为次像素 (或亚像 素，Sub-pixel，一般用于屏幕显示技术等领域)，如下图所示。

图1-消除锯齿的次像素

趁着 PS CS6正式版还未普及，以PS CS5为例，和大家探讨矢量路径图形绘制时如何让像素对齐网格，如何利用路径调整次像素改善图形的饱满度的一些经验，希望对大家有所启发和帮助。

一、像素对齐网格

1.    对象绘制时像素对齐网格

像素对齐网格最大的作用就是避免绘制图形时出现虚边，解决图形模糊的问题，尤其是将画布放大数倍去抠界面、图标细节时，精度可以达到像素级，让设计师将精力更多的集中在创意表达层面，不必因为担心模糊而谨慎的去操作，从而提高工作效率。

在PS CS5初始状态时，只有当画布在100%比例下，也就是实际像素比例时，画出来的图形才不会模糊，放大或缩小画布到其他比例下，即使打开网格进行辅助，画 出来的图形也会模糊，如图2所示，蓝色图形与紫色图形分别为100%画布下不打开网格，和非100%比例画布下打开网格随意绘制的相同大小的矩形，我们能 明显的看到紫色图形边缘非常的模糊。

图2-对齐像素图形和未对齐像素图形的对比

 　　这时的网格没有起到作用，是因为在PS CS5初始状态时，网格的参数不是以像素为单位，而是毫米，如图-3，首选项窗口可以通过主菜单中“编辑>首选项>常规”或快捷键Ctrl+K来打开。

图3-初始状态下的网格参数

　　想要在常规图形 (矩形、圆角矩形、圆形) 绘制过程中，使像素在任何情况下都对齐网格，在PS CS5的首选项窗口中，对“参考线、网格和切片”选项卡的网格参数进行简单的设置，并配合快捷键就可以做到。

图3中可以看到网格线间隔的默认值是25毫米，将单位改为像素，这时单位前面的数值会自动变为1，这时的网格线并未与画布上的像素格对齐，需要 手动重新输入数值，且网格线间隔数值与子网格数值必须相等，图4展示的是在3200%比例下，两种不同数值网格所呈现出的效果，可根据自己的喜好进行调 整。网格可通过主菜单“视图>显示>网格“来显示或隐藏，快捷键为Ctrl+’(回车左侧的引号键)。

图4-不同网格参数呈现的效果

　　完成了如上设置，最后确保”主菜单>视图>对齐”及“对齐到>网格“两个选项已勾选，“对齐到>网格“选项在打开显示网格的情况下才可编辑。

图5-对齐功能及相关选项

像素对齐网格设置完成，以后在非100%视图下绘制常规图形，只要打开网格辅助，就不会出现模糊情况。像素对齐网格在PS CS5中还是存在一定的局限性，受到图形形状的约束，当使用线条工具、多边形工具、自定义形状工具绘制一些带有倾斜边缘或非直角的图形时，还是无法保证所 有角点和边缘对齐网格，当然这里的模糊更多的是防锯齿效果，可以利用网格手动调整。

2.    对象变换时像素对齐网格

PS CS5中，长宽都是奇数或都是偶数时，进行90°变换时都可以对齐像素，当长宽数值分别是奇数和偶数时，再进行顺时针或逆时针90°变换就会使图形模糊， 无法对齐到像素，这时可以先旋转，然后打开网格进行辅助，不要退出自由变换模式，拖动对象，这时边缘就会自动吸附对齐网格，如下图：

图6-变换图形时对齐网格

二、利用次像素让图形更饱满

举个小例子，看看次像素在图形设计中的作用，抛砖引玉。

在界面设计中，经常会绘制下拉菜单等控件上的三角形箭头形状，最常见的做法就是用铅笔工具点象素画出来，如图7-a所示，看上去很清晰，但在分 辨率较小的屏幕上看，会稍显生硬、有锯齿感，影响界面的细腻度；用路径对齐网格绘制箭头，如图7-b所示，解决了锯齿问题，但看上去体量感被削弱了，不够 饱满；图7-c中所示的效果，是对次像素微调后的效果，既消除了锯齿，而且在体量感上不输第一种方案的效果。

图7-三种不同方法绘制的箭头

　　没看出差别？我们将三种方案放在一起对比下，见图8，从左至右依次为图7中的a、b、c方案，我们看到中间的b方案虽然没有了锯齿，但体量上明显小于a、c方案，而c方案同时具备无锯齿、相等的体量感两个优点。

图8-下拉箭头效果对比

　　通过放大图片我们可以看到在次像素上的差别，要达到方案c的方法其实很简单，看看下图放大的效果和路径你就明白了。

图9-使用路径改善后的次像素

　　只要将角点上的路径锚点分别向外移动一点，让原本颜色比较淡的次像素稍微加深就可以了，操作时，放大画布让调节更细微和精确，选中锚点，轻点多次键盘上的方向键来移动即可，这个方法不局限于箭头形状，大家可以开启像素眼去发现更多的应用场景。

总结

　　啰嗦了这么多，希望这些小的点能对大家工作有所帮助和启发。我们总是希望利用现有的资源做更多的事，不断的探索设计 中的更多可能性，关注设计细节的展现，无论是PS CS5还是即将发布的 CS6，每一项功能改进都激动人心，使操作更加得心应手，也帮助设计师能够在更智能的环境中专注于创意表达，提高输出效率，相信 Adobe CS6设计套装在各个方面都不会让人失望，让我们一起期待。

(本文出自Tencent CDC Blog)

iPad 的主页竖屏：

iPad 的主页横屏：

iPad 的 Blog 页竖屏：

iPad 的 Blog 页横屏：

点击iPad 上Safari 的分享菜单上面的 “添加到主屏幕” 就可以在 iPad 的桌面上添加本站的快捷访问图标，添加后有惊喜。

夏日要到了，酷热的天气，灿烂的阳光，想在夏日里获得众人的目光和赞美，快试试小白介绍的几招，一起打造清爽的夏日装，让在一切更加舒服，有活力。
嗯…咳咳。这是说视觉界面上设计的事，无论是web、移动或客户端，要想视觉更加清爽下面的建议都会有帮助的。

1.让布局更有空间感

脱掉！嗯…对的…
要想清爽，就得把身上多余的衣物，一层一层的脱掉！
在一个有限的空间里塞满大量的元素和信息，就算设计再华丽，信息再精彩，焦点还是无法长期停留在该空间。对于信息量丰富的界面，要想视觉清爽，空间感显得有为重要，这包括：主次信息之间的比例，各个信息模块之间的距离，单个模块里信息的间距。

2.使用简单的几何元素

曲线！嗯…也不完全这样理解…
脱掉厚重的衣物，身体的线条自然会显现出来，但想吸引更多的目光，那就得把线条练得好点。
在界面中使用简单几何元素做点缀或分割，有助于视觉焦点迅速寻找主要内容，便于信息的传达。
几何元素在人的思绪中是一种没有滞碍的概念，往往传达出干净有力，目的明确的态度和姿态，这最符合清爽的氛围。

3.留白和采用浅色系的邻近色

夏日，海滩上，鲜艳的色彩的确是夺目的主角。
但作为日常着装，那样的色彩就不耐看了，而简单浅色系则显得干净舒服。
色彩在界面的作用是营造体验氛围，为的是更好的突显内容，尽量减小使用中的干扰，建议太强烈的色彩不适于在以大量信息为主题的常用界面设计中。
适合营造氛围的邻近色特点是，层次丰富、活泼，既保持了统一的优点，却没单调、呆板的缺点。而浅色系的色彩与白色相搭配显得界面单纯、柔和、谐调，却有优雅、微妙的色感。

以上是小白的小小建议，愿你在设计界面时，希望界面清爽的时会有所帮助。

(via:http://uedc.163.com/5394.html)

现在要花这个春节的时间重新思考一下自己走的路子和对待事情的态度。现在的这个主题就是在这段时间的一个表示了。先这样吧。

这次改版是一个新的开始，所有文章需要点击导航栏的 Blog 链接进入才能浏览到了。还有 20%的东西没有完成。那也就等到春节过后再补上了。一切细节我就先保留了，等春节后把余下的20%完善了再透露好了。

使用过 Apple 产品的用户，都或许会注意到其包装和产品上的行小字“Designed by Apple in California”。我们或许会稍微留意下它的用意，然后这注意力可能稍纵即逝，无法深究其真正的含义。

我们都或许能够了解 Apple 是家注重细节的公司，自然它的产品和包装印制上这段话自然有其含义。这篇文章或许可以从设计师角度部分诠释 Apple 此做法的用意。
此篇为转载的译文，原文在： http://37signals.com/svn/posts/2710-designed-by-apple-in-california

– Split –

我曾经在很多场合中提起：“‘Designed by Apple in California’ 这段字，我是见过的所有包装上最为夺目的字符”。我的其中位读者迈克尔问我：

我同意您的看法，我第一眼看见这段字就让我难忘。
…
不过我很好奇，为什么您会相信“这些夺目的字符注
定会出现在不起眼的包装上”。

这句简单的标签出现在 Apple 的产品及其包装上至少已有十年的历史。（其实，我无法明确准确的时间说明 Apple 是从什么时候开始，但我记得在 2000 年的时候，苹果就在其 iPod 的包装上打上这行字了。）

这说明这句短语的历史是多么的悠久，同时对于 Apple 而言是多么的重要。

背景

“Designed by Apple in California” 这段字是多么的显眼。

当你拿到 Apple 产品的时候，打开包装的皮瓣或者内页那一刻，这段字通常会独立一行印在简洁的包装上 — 它太显眼了，你几乎不可能错过它。

然后，你缓缓的翻开包装，继续拿出你梦寐以求的设备 — 这个过程是多么的自然，同时这个体验让你近乎难忘。

情感

Apple 的使命之一是唤起了人们对艺术的感受。Apple 的每件产品，就好比匠人精心制作的作品，被精心包装后安全地送到家门一样。这件产品似乎顷刻间就被赋予了情感，就犹如它是被你所爱的人制造出来一样。

匠人们都会在自己得意的作品上签名。克莱默大师会将他自己的名字篆刻在每把他经手的刀上；佛蒙特设计的家具，在其每个产品不起眼的位置都留下自己的印记。爱德华建议每个设计师将他们设计的产品署名 — 这表明你是精心的造就了该产品，并赋予它最好的品质。

或许，我们能了解 Apple 这行字的用意即为如此。

此外，它标注的不是“Made by Apple in California”，而是被设计（Designed）的。我很难想到还有其公司会将设计（Design）放在如此高的地位。它的每件产品似乎注定是被设计出来而非制造。同时，这也是该公司使命的最好表述。

此时无声胜有声

平面设计领域中有句这样的话：

如果你想让它显眼，那么就把它放大吧！如果你想将其变
得更突出，那么加边框！仍然不够？那么就把他标红。

放大、加边框、标红，这些技巧明显是那些懒惰的设计师常用的伎俩。我们之所以认为这很愚蠢，原因之一就是它过于明显的表达了自己的意图。

话到此，我们或许能 Apple 熟谙这种微妙。Apple 通过突出传达这句话（绝对不会存在任何无视它的机会），来突出产品。这段文字小而优雅，就想是与产品本身浑然天成。我们感觉不到任何的意外和惊讶。

在我们阅读它以后，Apple 不需要任何过多的言语，去复述传达自身产品的品味和价值。因为，此刻用户已经了解。

那么， “Made in China” 呢？

– EOF –

(via:http://ucdchina.com/snap/8891)

PS：那么 “Designed by Warpflare” 呢？

关于成都一名的来历，据《太平环宇记》记载，是借用西周建都的历史经过，取周王迁岐“一年而所居成聚，二年成邑，三年成都”因此得名成都。五代十国时，后蜀皇帝孟昶偏爱芙蓉花，命百姓在城墙上种植芙蓉树，花开 时节，成都“四十里为锦绣”，故成都又被称为芙蓉城，简称“蓉城”。2001年出土的金沙遗址，已经将成都建城历史从公元前311年提前到了公元前611 年，超过了苏州， 成为中国未变遗址最长久的城市。

这个以成都的风景为主题的主题，武侯祠、杜甫草堂、宽窄巷子、锦里，16 张亲自拍摄的城市风景图， 10 张景点水印背景，也不能表达出我对这个城市的喜爱。这个是一个城市系列的主题。第一弹就给了成都。

之前发布过一个简化版。现在发布的是完整功能的版本，这个版本里面内置图片表情支持、主题后台设置选项、文章随机背景、内置 2 个自定义边栏(SideBar)。

内置 4 个配合主题功能的小工具(Widgets)：

评论图片表情：

其他主题细节：

1. 自带主题选项设置;
2. 随机背景;
3. 文章随机背景;
4. 支持 WP3.0 的自定义导航菜单;
5. 自带评论表情支持;
6. 预留广告位;
7. 预留统计代码位置;

想要看 DEMO预览点这里，购买点这里。

all because of you,CD will be better.
成都将会更加美丽,只因我们深爱这座城.

这是一个收费主题。要是不愿意购买的那就不要说别的什么打击的话了。光制作也是很花时间的。当然你有选择等待我的下一个免费主题的权利。

购买链接在左边边栏的顶部。

#2011-01-10 UpDate: City:ChengDu 1.2 更新内容:

• 使用横向多极菜单;
• 可以通过给主题选项设置背景图片显示;
• 添加对语言支持;
• IE6下修复的部分PNG透明问题;
• 添加编辑器的CSS样式支持;
• 部分CSS样式修复;

#2011-06-15 UpDate: City:ChengDu 1.3 更新内容:

• 修正主题自带的挂件的函数的显示问题;
• RSS 的太阳神鸟飞起来了；
• 添加相关文章支持；
• 更新最近评论函数；
• 更新最近访客函数；
• 添加 HTML5 数据存储；
• 使用新的 CSS 重置;
• 替换部分背景图片；

已购买了这个主题的用户请注意查收这个更新包。

这个怎么说呢。这是一个以成都的风景为主题的 WordPress 主题——成都，现在提供简化版下载了。不想提供太多的多功能，只是为了兼容老版本的 WordPress。这个主题会有个收费版的，不过需要 3.0 以上的 WordPress 支持了。

收费版的名字叫 “City Of Hibiscus”。收费版的细节就下次先不透露了。这是一个主题系列里面的第一个。

提醒一下：发布的这个版本和我现在使用的这个版本有不同之处，若需要我这个版本那就请等待收费版了。还有这个主题不支持 IE6。

想要看 DEMO预览点这里，下载在这里：

PS：近期 iStudio 将作最后一次更新。我们要和 iStudio 说再见了。我不会把主题提交到主题目录了。他们太恶心了。

今天收购 Warpflare.com。并把 Warpflare.com 所有的员工收入囊下。

从此Warpflare(曲速耀斑)工作室于今天成立。Warpflare 致力于为企业客户提供专业的网络完整解决方案。我们精通网站设计、实现以及国外主机租赁，保证从前期到后期的无缝衔接。

现在就去瞧瞧

有时css文件里面用到中文字体的时候由于字体编码的关系要使用到中文字体的英文字体名字.

然而有些中文字体的英文名字却不是那么好记. 所以我这里就搜集了一些.

中文名	英文名	Unicode	Unicode 2
Mac OS
华文细黑	STHeiti Light [STXihei]	\534E\6587\7EC6\9ED1	华文细黑
华文黑体	STHeiti	\534E\6587\9ED1\4F53	华文黑体
华文楷体	STKaiti	\534E\6587\6977\4F53	华文楷体
华文宋体	STSong	\534E\6587\5B8B\4F53	华文宋体
华文仿宋	STFangsong	\534E\6587\4EFF\5B8B	华文仿宋
丽黑 Pro	LiHei Pro Medium	\4E3D\9ED1 Pro	丽黑 Pro
丽宋 Pro	LiSong Pro Light	\4E3D\5B8B Pro	丽宋 Pro
标楷体	BiauKai	\6807\6977\4F53	标楷体
苹果丽中黑	Apple LiGothic Medium	\82F9\679C\4E3D\4E2D\9ED1	苹果丽中黑
苹果丽细宋	Apple LiSung Light	\82F9\679C\4E3D\7EC6\5B8B	苹果丽细宋
Windows
新细明体	PMingLiU	\65B0\7EC6\660E\4F53	新细明体
细明体	MingLiU	\7EC6\660E\4F53	细明体
标楷体	DFKai-SB	\6807\6977\4F53	标楷体
黑体	SimHei	\9ED1\4F53	黑体
宋体	SimSun	\5B8B\4F53	宋体
新宋体	NSimSun	\65B0\5B8B\4F53	新宋体
仿宋	FangSong	\4EFF\5B8B	仿宋
楷体	KaiTi	\6977\4F53	楷体
仿宋_GB2312	FangSong_GB2312	\4EFF\5B8B_GB2312	仿宋_GB2312
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312	楷体_GB2312
微软正黑体	Microsoft JhengHei	\5FAE\x8F6F\6B63\9ED1\4F53	微软正黑体
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1	微软雅黑
Office
隶书	LiSu	\96B6\4E66	隶书
幼圆	YouYuan	\5E7C\5706	幼圆
华文细黑	STXihei	\534E\6587\7EC6\9ED1	华文细黑
华文楷体	STKaiti	\534E\6587\6977\4F53	华文楷体
华文宋体	STSong	\534E\6587\5B8B\4F53	华文宋体
华文中宋	STZhongsong	\534E\6587\4E2D\5B8B	华文中宋
华文仿宋	STFangsong	\534E\6587\4EFF\5B8B	华文仿宋
方正舒体	FZShuTi	\65B9\6B63\8212\4F53	方正舒体
方正姚体	FZYaoti	\65B9\6B63\59DA\4F53	方正姚体
华文彩云	STCaiyun	\534E\6587\5F69\4E91	华文彩云
华文琥珀	STHupo	\534E\6587\7425\73C0	华文琥珀
华文隶书	STLiti	\534E\6587\96B6\4E66	华文隶书
华文行楷	STXingkai	\534E\6587\884C\6977	华文行楷
华文新魏	STXinwei	\534E\6587\65B0\9B4F	华文新魏

]]> http://xuui.net/ui-design/english-name-of-chinese-characters-table.html/feed 11 http://xuui.net/ui-design/15-useful-html5-tutorials-and-cheat-sheets.html http://xuui.net/ui-design/15-useful-html5-tutorials-and-cheat-sheets.html#comments Mon, 10 May 2010 10:13:23 +0000 Xu.hel http://xuui.net/?p=1753 了解更多]]> 和以前的 HTML 版本不同，HTML5 带给网页设计师和开发人员更多幻想新事物的能力。使用符合语义结构的特定标记，使得现在的网页更符合语义化的需求。如内建的圆角视觉元素、以及对拖放式交 互的原生支持。尽管 HTML5 并没有完全得到主流浏览器的支持，但有些已经在尝试推进和试验新功能。为了鼓励对 HTML5 进行试验性的应用，也为将来更加丰富的应用做足准备，芒果整理收集了 15+ 有用的 HTML5 教程和参考手册。

教程

利用 HTML5 创建 iPhone 应用程序

使用 HTML5 和 CSS3 组合，编写向后兼容的代码

使用 HTML5 设计和编写超酷的 iPhone 应用程序网站

从零开始编写 HTML5 布局

HTML5 和 CSS3：即将使用的新技术

利用 HTML5 表单大做文章

使用 HTML5 设计博客

触摸未来：使用 HTML5 和 CSS3 创建一个优雅的网站

HTML5 的结构标签

编写基于 HTML5 和 CSS3 的单页面网站模板

如何使所有浏览器正确渲染 HTML5 – 甚至是 IE6

参考手册

HTML5 参考手册

HTML5 视觉参考手册

HTML5 图形参考手册

HTML5 袖珍手册

英文原稿：15 Useful HTML5 Tutorials and Cheat Sheets | Web Designer Ledger
翻译整理：15+ 有用的 HTML5 教程和参考手册 | 芒果