查看完整版本: [11-14] 跟我来学网站设计美化 ——网站设计美化必备条件（sean版）

[11-14] 跟我来学网站设计美化 ——网站设计美化必备条件（sean版）

PS前沿：

这里聚集了大量的高手，但是很少有人带动大家来学习交流设计美化网站经验。

很荣幸的成为DEDE管理团队的一员，希望我在这里可以给大家带来不少帮助，

同时我在此谢谢帮助过我的朋友。


作为一名优秀网页设计师，你该具备什么样的条件？ 怎么样才能变成具备这样的条件。

下面我来说下我的积累与经验（PS 说错了不要骂我）就会知道。

--------------------------------------------------------------------------------------------------------------------------
[b]任何优秀的网页设计师提高水平都是 由 认识—分析—学习仿制—综合—原创 这5种步骤[/b]
--------------------------------------------------------------------------------------------------------------------------
[b]1.认识，简单说就是多见。[/b]

我不晓得在做的朋友见过多少站，而真正值的你见的站有那些？

有人说 ： 有个站风格不错，当客网，酷站。我决定要仿制他的模板。

不错，一个好的美化设计可以给你带来不少人气，站点档次也会上升，
但是如果你不准确认识你自己的站，冒然仿制，就达不到相关的效果。
反而做成垃圾站，搞不好会被K点。


真正值的你见的站有那些呢？ 我这么说大家一定会忙这找百度。或到设计路上去看。

我觉得，要想技术提升，中国的网站设计不要看，看网站结构可以看中国的。

毕竟设计是西方传过来的，国外相当饱和。

下面我来分享一点相关的网站，个人搜集的。

你不难发现中国许多网站的元素，配色很多来源国外网站

[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.piepmatzel.de][color=#2f5fa1]www.piepmatzel.de[/color][/url]  这个里面很多经典WEB2.0的站

比如说这个 其中里面的 9rules.com 的标志就被 TOM365电影站  [url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.tom365.com][color=#2f5fa1]www.tom365.com[/color][/url]
做为了 favicon.ico 图形

[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssbeauty.com][color=#2f5fa1]www.cssbeauty.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssdrive.com][color=#2f5fa1]www.cssdrive.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.stylegala.com][color=#2f5fa1]www.stylegala.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssmania.com][color=#2f5fa1]www.cssmania.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssremix.com][color=#2f5fa1]www.cssremix.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.alvit.de%2Fcss-showcase][color=#2f5fa1]www.alvit.de/css-showcase[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssvault.com][color=#2f5fa1]www.cssvault.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.w3csites.com][color=#2f5fa1]www.w3csites.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.bestwebgallery.com][color=#2f5fa1]www.bestwebgallery.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.csselite.com][color=#2f5fa1]www.csselite.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.screenalicious.com][color=#2f5fa1]www.screenalicious.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.unmatchedstyle.com][color=#2f5fa1]www.unmatchedstyle.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.designlinkdatabase.net][color=#2f5fa1]www.designlinkdatabase.net[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.screenfluent.com][color=#2f5fa1]www.screenfluent.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.designsnack.com][color=#2f5fa1]www.designsnack.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssheaven.com][color=#2f5fa1]www.cssheaven.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssimport.com][color=#2f5fa1]www.cssimport.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssglobe.com][color=#2f5fa1]www.cssglobe.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssreboot.com][color=#2f5fa1]www.cssreboot.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.mostinspired.com][color=#2f5fa1]www.mostinspired.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.thebestdesigns.com][color=#2f5fa1]www.thebestdesigns.com[/color][/url]
thesis.veracon.net
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssbloom.com][color=#2f5fa1]www.cssbloom.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.csscollection.com][color=#2f5fa1]www.csscollection.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.csstux.com][color=#2f5fa1]www.csstux.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssbased.com][color=#2f5fa1]www.cssbased.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.css-website.com][color=#2f5fa1]www.css-website.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.designshack.co.uk][color=#2f5fa1]www.designshack.co.uk[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.ceeses.com][color=#2f5fa1]www.ceeses.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fanjo.dekiteharu.jp][color=#2f5fa1]http://anjo.dekiteharu.jp[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssclip.com][color=#2f5fa1]www.cssclip.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.my3w.org][color=#2f5fa1]www.my3w.org[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.csshazard.com][color=#2f5fa1]www.csshazard.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.artnetz.de][color=#2f5fa1]www.artnetz.de[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.css-design-yorkshire.com][color=#2f5fa1]www.css-design-yorkshire.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.css11.com][color=#2f5fa1]www.css11.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssimpress.com][color=#2f5fa1]www.cssimpress.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.e-motionaldesign.com][color=#2f5fa1]www.e-motionaldesign.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssprincess.com][color=#2f5fa1]www.cssprincess.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssgaleri.com][color=#2f5fa1]www.cssgaleri.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssblast.ru][color=#2f5fa1]www.cssblast.ru[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.creative-pakistan.com][color=#2f5fa1]www.creative-pakistan.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.netzfruehling.de][color=#2f5fa1]www.netzfruehling.de[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.najdizajn.com][color=#2f5fa1]www.najdizajn.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.edustyle.net][color=#2f5fa1]www.edustyle.net[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.csssmoothoperator.com][color=#2f5fa1]www.csssmoothoperator.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.coolsitecollection.com][color=#2f5fa1]www.coolsitecollection.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssgalaxy.com][color=#2f5fa1]www.cssgalaxy.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.per.fectio.net][color=#2f5fa1]www.per.fectio.net[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssflavor.com][color=#2f5fa1]www.cssflavor.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.onepixelarmy.com][color=#2f5fa1]www.onepixelarmy.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.piepmatzel.de][color=#2f5fa1]www.piepmatzel.de[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssbrain.hu][color=#2f5fa1]www.cssbrain.hu[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.w3c-compliance.com][color=#2f5fa1]www.w3c-compliance.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.stylegrind.com][color=#2f5fa1]www.stylegrind.com[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.submitcss.com][color=#2f5fa1]www.submitcss.com[/color][/url]
inspirace.dobrestranky.com
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssgallery.ro][color=#2f5fa1]www.cssgallery.ro[/color][/url]
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.cssgreen.com][color=#2f5fa1]www.cssgreen.com[/color][/url]

2007年50个最优秀的CSS网站设计
[url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.webdesignerwall.com%2Ftrends%2Fbest-of-css-design-2007%2F][color=#2f5fa1]http://www.webdesignerwall.com/trends/best-of-css-design-2007/[/color][/url]

当你扩展你的眼见时候，不要惊呆，同样你可以永远同样档次的站。

你需要做的是
--------------------------------------------------------------------------------------------------------------------------
[b]2.分析，简单说就是找这个站的成功点。[/b]

中国美学有句话，何为美，黑白灰，素小艳。

素小艳的意思就 可以分析为俩种，一 素中有艳，二是对比衬托关系。

一个站的亮点如果能被你被你分析，聚集出来，那么你就是很聪明的人。

什么是亮点？列举 [url=http://bbs.dedecms.com/goto.php?url=http%3A%2F%2Fwww.seostudio.co.uk%2F][color=#2f5fa1]http://www.seostudio.co.uk/[/color][/url]  这个站上面什么是 素？ 什么是艳

素指的是 蓝底白字 艳指的就是那4个会变得的图标了。

黑 指深蓝色的部分
白 指白色部分
灰 海蓝部分

有了黑白灰3部分 就能让人感觉站点有层次，有结构。

黑白灰3部分占用的面积决定这你站整体的黑白灰。

有了素小艳可以让你的站更耐看，档次更高。
--------------------------------------------------------------------------------------------------------------------------
[b]3.学习仿制，学习仿制是其中最重要的环节。看看你会不会学习？[/b]

现在网站上教程漫天飞，但是很多人还是到处求人做个LOGO ，结果LOGO 放上去和全站不符合。

或你仿制的东西和别人完全俩个概念。

主要原因 1.你不愿意花费太多时间和精力 2你认为你做不出来 3因为不熟悉所以怕做。

有人说，我不是搞设计的我学这干嘛，其实一个站长是多方面知识都要具备的，抽空多练练，多看看，有针对的学习一定很大进步。

有针对学习：

网页中的美化 主要学习的是三个方面 （ 以后我会给大家出相关的教程）

1.图形绘制，基本用于LOGO或图标，这次可以用 AI 或 CD 来完成，当然PS 钢笔也能做出来但不推荐

2.PS中的渐变，样式等效果，主要用来做界面，按钮等。

3.字体效果制作，用于网站广告和标志中。

怎么里面只有网站而没有真正实际的东西啊？