原文：http://blog.bingo929.com/a-sleek-high-end-web-design.html

前几天暴风彬彬在译言看到一篇关于如何设计网页的译文，教程以Step By Step的方式详细的讲解了如何从无到有设计一个时尚的网站页面，设计工具使用Photoshop，读者既能学到网页设计的一些理念有能学到一些 Photoshop的网页处理技术。即使是网页设计高手，也能从中领略到当今国外比较流行的Web设计风格及元素。该教程分为设计成效果图和使用 XHTML及CSS制作成网页两部分，以下是设计教程部分。感谢maidoumao的辛苦翻译。
在本教程中，我们使用简洁细瘦的字体，配上优美的背景图片，经过精心排布的空间布局，设计一个高档的网页

随着公司影响力的壮大和产品的不断提升，相关的形象设计要逐步跟得上，需要逐渐提升，所以就招一个应届生美工，算是一块成长。应届生有拼劲、肯学，但也好 高骛远，起点都差不多，如何培养美工就变得至关重要了。总结自己接触和学习设计的一点经验与大家分享，希望得到大家更多的建议。
一、配色
其实对色彩的感觉是设计师应具备的最基本素质，其作品不管是对网页界面、系统界面、还是产品包装等等都有广泛应用。基本的一些理论，什么冷暖色、对比色/ 补色、色彩心理、搭配原则等等，满大街都是，有意者随便搜一两篇看看就行。色彩对于美工设计师来说，更重要的是一种感觉，就像打篮球投篮的手感一样，多 看，多练，这种感觉是可以后天练出来的。Mars刚接触设计时，连坐公交车时也会注意路边某公司、饭店的招牌是如何配色，处处留意生活中色彩搭配的美，关 于色彩截图就更记不清有多少张了。
Mars觉得，设计师对颜色的运用一般有这么几个阶段：
初级阶段：用自己首映感觉最好的1~2种颜色，不考虑其他因素、他人感觉；
过度阶段：开始感觉一两种颜色单调，尽量多尝试不同色彩，该阶段极容易出现没目的的乱搭现象；
成熟阶

转载请注明：

• 译者：Joe
• 译文来源：http://xiebiji.com/2009/09/design_a_beautiful_website/
• 原文来自：Design a Beautiful Website From Scratch

引言
你是否曾经想过设计一个漂亮的网页，但是却不知道怎样入手？说实话，几年前我也是这样。当我浏览网页的时候我看到这么多好看的网页，我就希望自己有技术创作这样的设计作品。
今天我可以这么做了，而且我将教你怎么做这样的设计！从根本上，对于这种设计你需要一点photoshop的操作技能和观察细节的能力。通过以下的教程，我将会指出其中极细微的细节之处，而这些细节讲使你的网页设计漂亮起来。打开photoshop,我们开始啦！
正文
先看效果图

10月9日是国庆中秋黄金周后上班的第一天，当天近8亿人次逛淘宝，即淘宝网每分钟完成43.47万元的交易，创下国内网购单天交易最高纪录。从销售的商品种类来看，当天淘宝网上女装以接近6000万元的交易额成为销售冠军，紧随其后的是化妆品和家居用品。

那么如何把握好作为销售榜首的女装类设计呢？很多UI设计的前辈告诉过我，做用户体验，要把看的人当傻子，意思也就是我们的设计要符合大众思维通俗易懂。而在视觉上，我认为绝不能小觑会员的审美及品味。
———————————————————————————————————————————————
活动一：100%粉嫩小女人
要  求：100%及粉嫩小女人都是在线购物非常吸引眼球，容易引起点击的标题；主题诉求明确，与产品贴合度高。整个活动页面呈现小女人衣柜的感觉

每周的《午间欢乐购》和《周末疯狂购》，已经成为视觉组的固定需求。从开始接触到现在5个月的时间里，思维也和这些小小banner逐渐碰撞出火花。
前期~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

▲初期上手，按照熊猫同学一贯的通用排版去做。始终坚持白底，可以不用抠图，改变丝带的颜色，做做字体变形。

▲组织上下达命令，不能一层不变，需要改变。但是改变在哪里当时还没揣摩透，暂且做些颜色上的尝

【原文：http://www.ucdcom.com/Blog/post/14.html】



在此网页设计教程，您将了解如何创建一个美丽，绿色，时尚的布局在Photoshop。您将了解到流行的设计技术，如建立一个三维带和具有专业外观的颜色gradient效应。



设置Photoshop的文件

1、在Photoshop创建一个新的文件，文件“快捷键（按Ctrl+N），大小为980px的830px。

【转载：www.logosky.net】
要确保字体与图像和谐一致，关键是要找出两者的共同点。
你手头上已经有一张你想要的图片了，而你需要找一种字体与它搭配，你如何选择？
我们会认为文字的作用就是用来阅读，但事实上字体其实也是一种艺术作品，不同的字体——实际上就是不同的图片，能够传达不同的语气及含义。所以我们可以看 到销售的字体一点都不便宜。当文字作为印刷品时，不同的字体传达了活泼、庄重或商业等不同的气息，这些不同是由字体的结构所决定的。
关键的问题就是要如何选择字体，因为只有当图片与字体传达的是同一种“声调”，两者在一起时才会感觉到和谐，并且力量也得到加强。

在本文中，我们将会探讨这一点，我们在本文介绍的 Harry & Sons 公司，其业务是树木护理、修剪等——已

【转载：www.logosky.net】
如何在细小的空间设计出视觉效果吸此人的广告(banner)？
第一步：使用简单的照片
对付一些区域狭窄的空间需要涉及一些特别的要求，第一步，就是采用一张简单但又能传达很多信息的照片。

一般的广告总是采用整张图片加上文字配合，而网页上一个标准的小广告的尺寸是 12 0 × 90 象素，分辨率为 72dpi 。空间确实很小。你如何在这个小地方加进你想要的东西？象上图，难道你想让整个纽约市都塞进这个小空间里？那只会让这些建筑物变成一个个斑点而已。当我们 面对这些小广告的版面时，并不应该只是将整张图片简单缩小——因为空间已经很小，分辨率又很低。而一般的网页上总是充斥着很多混乱的信息，将图片只是简单 地缩小，那些细微的东西完全不会此起人们的注意。所以我们要思

不管是他简单大方的商务网站还是个性十足的品牌网站，他都处理的游刃有余。简单的人物图像后配合形象的黑白图案，会使简单的人物立即丰富起来，产品列表中的图像周边加适当的修饰，不会使产品图片显得呆板。尤其喜欢他黑色风格的页面，配合恰当的纹理图案及色彩光晕效果再加一些小细节的处理，喜欢极了。在网站banner的处理上总是能做到动静结合，为整个页面提高档次。网站颜色处理的简单大方又丰富，激动的心情难以用语言表达。总之，不管是从结构，颜色，细节都是你我学习的目标之作。哈哈。（在这里我找到了个站修改的思路，可以进一步完善下去。）

教程地址：http://www.iconfans.com/thread-4102-1-1.html