PSD2XHTML教程

在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是 div,很明显是无法达到语义化标准的。在国外xHTML+CSS(DIV+CSS)也可以叫做PSD2XHTML。

以下是43个PSD to XHTML及CSS教程:

1.将 PSD 源文件转换 XHTML 教程

DIV+CSS教程

2.叫你如何创建水平滚动网站布局

xHTML+CSS教程

3.从PSD到xHTML,按部就班教你创建DIV+CSS布局

DIV+CSS实例教程

4.从零开始创建CSS布局

xHTML+CSS实例

5.从零开始教您创建一个华丽高档的网页-xHTML+CSS教程

感兴趣的话也可以看看这个实例的设计教程,已译成中文
网页设计教程:使用Photoshop设计一个高档时尚的网页
DIV-CSS

6.4个简单的教程教你将PSD制作成CSS HTML

DIV+CSS教程

7.使用Drupal创建Killer乐队网站:6篇系列教程

这是个非常棒的关于使用Illustrator制作页面,Drupal(世界最著名的CMS系统之一)编码,符合标准的xHTML+CSS

完整教程索引:
第一部分:使用Illustrator设计页面
第二部分:使用Illustrator切图
第三部分:写xHTML
第四部分:Drupal主题模板
第五部分:Drupal管理
第六部分:总结和一些附加资源

xHTML+CSS教程

8.教你如何使用CSS创建性感的按钮

DIV+CSS实例教程

9.很酷的水平菜单悬停变大效果

xHTML+CSS实例

10.CSS模板教程

DIV-CSS

11.控制文本渐变效果CSS教程

DIV+CSS教程

12.CSS超大背景教程

xHTML+CSS教程

13.将PSD效果图转换成HTML

DIV+CSS实例教程

14.PSD切图和页面的实现

xHTML+CSS实例

15.模糊背景效果

DIV-CSS

16.使用CSS Sprites(将图片集合在一张图片中) 技术教程

DIV+CSS教程

17.手绘风格CSS导航按钮

xHTML+CSS教程

18.创建类似Crazy Egg价格列表效果的表格列高亮效果

DIV+CSS实例教程

19.CSS菜单教程

xHTML+CSS实例

20.Photoshop教程+切片+CSS编码

这个教程将教你使用Photoshop制作简洁的纵向菜单。

DIV-CSS

21.为网页模版切片并用CSS编码

DIV+CSS教程

22.为你的第一个PSD网页效果图编码教程

xHTML+CSS教程

23.使用简单的操作完成复杂的CSS布局实例

DIV+CSS实例教程

24.使用CSS来让你的页脚固定

xHTML+CSS实例

25.教你如何将PSD转换成xHTML-视频教程

DIV-CSS

26.高级CSS导航实例教程

DIV+CSS教程

27.教程:为你的DIV+CSS布局编码

xHTML+CSS教程

28.教你如何为网页变换样式

DIV+CSS实例教程

29.浮动教程

xHTML+CSS实例

30.CSS切片教程:选择正确的布局

DIV-CSS

31.使用Prototype和Scriptaculous创建简单、智能的手风琴效果

DIV+CSS教程

32.CSS Sprites + 圆角

xHTML+CSS教程

33.简单3步制作圆角布局

DIV+CSS实例教程

34.CSS样式教程

xHTML+CSS实例

35.转换Photoshop效果图

DIV-CSS

36.制作CSS纵向菜单

DIV+CSS教程

37.使用CSS固定页脚背景图

xHTML+CSS教程

38.一个简单的散列布局启蒙教程

DIV+CSS实例教程

39.两列布局CSS教程

xHTML+CSS实例

40.CSS布局技巧:完成100%高度

DIV-CSS

41.附带一个’behavior’文件的纵向CSS菜单

DIV+CSS教程

42.光滑的设计,HTML实例

xHTML+CSS教程

43.DIV+CSS布局教程

DIV+CSS实例教程

如果你能把这些xHTML+CSS(DIV+CSS)实例教程看一遍的话,我相信你一定会拥有扎实的基础来使用符合Web标准的xHTML+CSS实现更加高级的布局。

成功的用户界面的八个特性

当你构建你的用户界面和网站的时候,有各种各样的关于界面设计方法和模式的信息你可以使用, 对常见问题的解决方案和一般可用性的建议。下列专家给出的准则可能会引导你创造一个良好的用户界面, 但是究竟什么才是一个良好的界面? 一个有价值的用户界面应该具有那些特性?
以下八个特性是我认为一个良好的用户界面所必须的:
1.清楚
2.简明
3.熟悉
4.易响应
5.一致
6.吸引力
7.高效
8.宽容
1.  Clear清楚的
清晰度是用户界面设计最重要的元素。事实上,用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。 如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里,他们会困惑和沮丧。

这是什么呢?鼠标移到WordPress的按钮时工具提示会弹出解释其职能。

2. Concise 简明
清晰的用户界面是很好的,但是,您应该谨慎,不要陷入过度明晰。定义和解释很容易被添加,但是你这样做的同时也增大了规模。您的界面规模增加。添加过多的解释,您的用户将不得不花费过多的时间去读它们。
不仅要保持清晰,而且还保持简洁。当你能用一句话解释一项功能的时候就不要用三句话。当你可以用一个单词标记一个项,就不要用两个。 保持简洁可以节省你的用户的宝贵的时间。 同时保持清晰和简明并不容易,需要足够的时间和努力来实现,但其回报是值得的。
在 OS X 的音量控制中使用两个小图标以显示的音量从低到高。

3.  Familiar熟悉
许多设计师努力使自己的界面,直观。 但到底直观的真正意思是什么?直观也就是就是说可以自然地,本能地理解和领会。但是你怎么能做到直观一些?你可通过是它变的熟悉来实现。
熟悉就是, 跟你以前遇到过的东西相似。当你熟悉的东西,你就知道怎样它怎么做-你知道会发生什么事情。 弄清你的用户熟悉的并把它们融合到你的用户界面中。
GoPlan的标签页式界面。 标签很熟悉 , 因为他们模仿文件夹上的标签。 你清楚知道点击标签您将浏览该节和其他地方的标签将继续存在为了进一步导航。

4.  Responsive易响应

易响应意味着两件事。 首先,易响应意味着快速。 如果没有软件在后台,界面应该响应很快。等待加载和缓慢的界面是令人沮丧。 看起来加载的很快, 反正就是界面快速载入(即使内容尚未赶上)改善了用户体验。
易响应也意味着界面提供某种形式的反馈。界面应该反馈给用户,告知他们现在怎么了。 你成功地按下那个按钮吗?你将如何知道?按钮应显示一个被按了的状态反馈, 或许可以把按钮上的文字改成“正在加载… ”并且禁用按钮。 是软件挂了还是内容载入中?用转动的轮子或显示进度栏的方式来保持用户在进程中。
Gmail会显示一个进度栏当您第一次进入您的收件箱。 而不是逐步载入网页时,一旦一切准备就绪整个页面即时显示。

5.  Consistent一致
之前我谈过关于上下文的重要性 ,以及它应如何指导你的设计决定。我认为,适应任何给定的上下文是很聪明,但是,一个界面仍然应保持一定程度的一致性。
一致的界面,使用户能够开发惯用模式-他们会了解不同的按钮,标签,图示和其他界面元素的外观,并识别他们。认识到在不同的情况他们所做的事情不同。他们也将了解特定的东西如何工作,能够从过去的经验中更快的总结知道如何操作新功能。
在Microsoft Office的用户界面是一致的是有原因的。

6.  Attractive吸引力

这可能有一点争议,但我相信一个良好的界面应该有吸引力。 吸引力在某种意义上,是与界面交互变得是愉快。是的,你可以让你的用户界面简单,易于使用,有效率和易反应,它将尽其出色-但如果你可以做额外的一步,使之有吸引力的。那样用户体验会真正令人满意。当你的软件使用起来是令人愉快的,你的客户或工作人员将不仅是简单地使用它-他们会期待着使用它。
当然有许多不同类型的软件和网站,所有的创作针对的不同的市场和用户。什么样看来’好’对任何一个特定的观众都会有所不同。 这就是说,你应该为了你的用户来包装你的界面的的外观和风格。 此外,美感设计应适度使用,并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。
谷歌是众所周知的极简洁的界面 , 他们关注功能重于形式,但他们显然的花费时间美化了 Chrome用户界面元素 , 如按钮和图标 , 使它们看起来正好体现了微妙的梯度和像素超薄突出。
7.  Efficient高效率
用户界面像是车辆,带你去你要到的地方。这些地方是软件应用程序或网站的不同的功能。 一个良好的界面可让您在执行这些功能更快。 现在, ‘有效’听起来像一个相当模糊的属性-如果你把所有其他的事情在这个清单上,当然界面到头来还是需要高效? 差不多,但不完全。
你真正需要做的是使界面能高效的找出用户努力想要实现的,然后让他们可以有条不紊的做到。 您必须确定您的应用程序应该如何工作’ -什么功能它需要有,什么样的目标是你努力努力争取实现? 实现一个界面,可以让人们轻松地完成他们想要做的,而不只是简单的实现对各个功能的访问。
苹果公司已经确认了人们在其iPhone上想要对照片做三个关键的事情,并在照片控制中提供按钮来分别完成他们。

8.  Forgiving宽容

没有人是完美的,当使用你的软件或网站必定有人会犯错误。 如何处理这些错误将成为你的软件的质量一个重要指标。不要惩罚用户-建立一个宽容的界面,纠正问题。
一个宽容的界面可以使你的用户远离代价高昂的错误。例如,如果有人删除了重要的信息,他们可以轻松地重新检索或撤消这一行动? 当有人浏览到损坏或不存在的网页,他们会看到什么?他们会迎接一个加密的错误提示还是得到了一些有用的替代目的地?

错误的删除了电子邮件?Gmail可让您迅速取消上一次的操作。

成为一个顶级设计师的两个基本准则

费话不多说:直接上菜:

原则一:限制你的字体。
你会看到一个好的设计很大一部分看起来非常协调。一个最好的方法是用少量的元素去完成一个看起来非常协调的设计。
你最先选择的字体可能是你想要删掉的,我常常的做法是一个作品剔除2种字体。第一种字体可能会是很有思想力或艺术感,将给你的设计带来第六感,特征或个性。这些字体集合了当时所有心情的片段,这个扭着腰枝的有趣字体像女孩们的舞会,这个蹩脚邪恶的字体是一个摇滚乐队?我将使用这个花哨的字体人为文本的标题,在任何地方它都需要足够大,这个花哨的字体将是这块的重点。你通常很少再用这字体,但它又大得多,所以这就是人们看到的重点内容。
第二种字体要非常普通,读者在整篇当中都不会感觉到它的存在。这种字体需要有很高的易读性,它会占据这篇文本相当大的篇幅,显然,那些大手大脚的艺术字体占据文本的大篇幅的话会非常影响阅读的。
这有一个正确使用字体的设计例子。正如你所看到的,这里只用了两种字体,花哨的艺术字体作为标题出现,内容就是很基本的字体。这样看起来整洁,协调。

这里还有一个失败的例子,这里我用了很多花哨的艺术字体,这样很不协调,分节看起来并不是配合主标题。

在一个设计中有太多的字体是大忌,没有什么事比用8种字体来印他们的传单看起来更糟的了,同样使用艺术字作为正文也更糟。这是一个错误使用字体的例子。

在我让你亲自动手之前的最后一个思路。如果你的艺术字看起来非常时髦有现代感,那正文部分就使用无衬线字体;如果你的艺术字看起来很正规化,那就用衬线字体作为第二字体吧。
PS1:第一次翻译东西,有些地方可能并不一定正确,看懂原文的还是看原文吧。最后感谢我的父母,感谢谷歌,感谢金山,感谢CCTV,感谢所有TV。。。。
PS2:衬线字体与无衬线字体
Serif 或 San Serif?
Serif 是一个字笔画的结尾,例如 M 的起点与终点。Serif 是由罗马刻印字母所发展出来的,用以改良字体的优雅程度与易读性。它们是先用毛笔写在石头上,然后再刻出来的。Serif 会活存到现在,是因为它们十分美丽及古典,而且它们阅读起来比较容易。对于细小的文本字体,非常适合用 Serif 字体,相反地您可用 Sans Serif(Sans 是法文里的“无”),来当标题或是供短篇文章的字体使用。
不同字体的分类
拉丁文字 方块字
衬线字体 (Serif)
笔划粗幼对比明显,阅读时较省目力
Times New Roman
Architect
BalletEngraved
Creedmore
Benjamin
Capshc
新细明体
宋体
标宋
无衬线字体 (Sans Serif)
笔划粗幼平均、对比不太明显
字型较突出,阅读时较费目力
Alberta
ANNSTONE
Garamond
Nimbus Script
黑体

原则二:限制你的色彩
限制使用你的色彩。好象上个准则是让你限制用你的字体,对吗?非常对!我们限制用我们的色彩的原因和我们限制使用字体的原因一样。在我们的设计当中减少色彩的数目将使之变的谐调。基本上,每件东西看起来将很一致,就像一个体育队伍的运动服或者是一个公司的商标那样。—我们想使制服(运动服)整体看上去是一个色彩的。
和选择字体一样,限制使用你的色彩数目只是一个参考指南,不是一条准则。你可以在你的设计中很好的使用彩虹的颜色,那将非常好看。但是一开始,你需要一个使用色彩的策略,并且坚持用这个策略。使之始终贯穿在你的设计中。
对于初学者,让我们来说一下色值吧。一个颜色的色值就是它的亮暗程度。例如一个黄色是非常亮的颜色,紫色就是很暗的颜色。当然一个颜色可以有它的色彩值域。例如,紫色是一个使我们大多数人联想到暗色的颜色,但是紫色也有很亮的紫色。这里有个例子关于一些颜色和它们相关的色值。然后,你可以看到的是一个颜色的色值范围。

所以当我在采用的色彩方案时我会用一条准则:确保在你的色彩方案中有一个色值的范围。在任何设计中你都需要一些淡色和一些深色去形成对比。如果要举例的话,你设计的背景是深色的,你就需要一个淡颜色的文字,图画。这样的话文字,图画就容易被阅览。反过来,如果你有一个淡色的背景,你就需要一个深色的图画,文字或是其它什么的。
我也会代表性的只采用2-5种颜色去完善我的色彩方案。减少选择的数目,那么你就会在你的设计中得到一个好结果。这里有个色彩方案的例子我将它们放在一起。就像你看见的,我采用了一个深色,一个中间调子的颜色和一个淡色。就从右边开始,我为每一个颜色建立了一个色值范围。这些色彩组合就像我的调色板,我会将它们运用到我的设计项目中去。一旦我有了这个调色板,我就会尽全力只用这些颜色。

好了,我们刚才说到了一些色彩采用方面的技巧,像你需要选择多少种颜色,它们的色值应该是多少;那么下一步是什么呢?我将告诉你什么是下一步,也是最难的部分;那就是如何决定这2-5个颜色!我个人认为这是项有时候有点难的活儿。这里有张表,是帮助我采用我的色彩方案的技巧的表:
确定一个冷暖色调的范围。
就是采用暖色调或冷色调。暖色有红,橙,黄,棕色等。冷色是蓝色和紫色。我认为绿色是一个相当中间的颜色。如果你将所有你选用的颜色处于一个色调中,他们将肯定非常和谐。
www.colourlovers.com 网站上汲取灵感
这个精彩的网站全是关于色彩方案。你只需一页页的点击色彩方案。
留意你的周围
色彩方案在你的周围到处都是。看一下食品店的包装,看一下你们当地的星巴克咖啡店的油漆颜色,看一下大自然!如果你看到一些令人愉快的色彩,只要在脑海中作个笔记,看看是否可以复制到你的电脑里去。
留心一些已有的公司商标色彩
我常常运用一些已有的商标色彩,我会看一下他们的logo,色彩方案并且将之成为我最初的想法。然后可能只加上一个或两个颜色。
这里是一个我已经完成的设计,它展示了被限制的色彩方案。

如你所见,紧凑的色彩方案和统一的字体真的使所有的东西都井井有条。
我知道这些课程都很基础……但是这就是设计的基石。所以,它永远不会伤到一个恢复精神的人。