提升任何技能都需要大量时间和努力。感觉自己在网页设计技能的进步上陷入困境？试试这个方法
- 找到一个你非常喜欢的网站设计。可以浏览 一个 设计 画廊。
- 打开你喜欢的设计程序，并尝试完全复制它*。截取整个页面的网站截图作为参考，方便快速叠加。
- 在这个复制过程中，会有很多机会让你在设计中加入自己的风格，使其成为你的作品。
- 将最终的设计转换为 HTML/CSS。如果你遇到困难，可以寻求帮助。
- 重复以上步骤。
我听到很多网页设计新手抱怨，他们无法提升自己的设计水平，因为他们没有客户可以为他们制作网站。你不需要客户就可以制作一个网站。我有很多音乐家朋友。我想到他们会把自己关在琴房里，一个星期六花 6 个小时埋头练习乐谱。为什么我们不这样做呢？
*我这里不是在提倡设计剽窃，而是在提倡利用优秀的设计进行学习。就像学习用吉他弹奏一首流行歌曲一样。
很棒的建议！作为一名吉他手，我完全感同身受。当我通过演奏自己喜欢的歌曲学习时，我取得了更大的进步，而不是仅仅试图学习技巧。积极地将两者结合起来，可以带来愉快的学习体验并加速学习进度。
我不知道为什么我没有想到这一点！谢谢，Chris。
Chris，很棒的建议！熟能生巧，我们都知道这一点，但有时候我们就是会忘记。
我喜欢将网站分解，真正理解它们的架构、理念、网格、调色板、潜在受众等等。
通过这样做，你应该能够理解他们的目标和发展方向。这帮助我极大地赶上了标准，并与流畅的设计世界保持一致。
很好的建议，以前我从未想过这样做。原创且有益，非常棒！
抱歉重复评论。
标题中的“Exercise”拼写错误，仅供参考。
哎呀！谢谢提醒。
可能要检查一下拼写——“exercise”
很棒的文章，我一定会付诸实践。谢谢你的建议。
我完全同意。我认为这个方法可以将那些只是因为网页设计是当前“流行”事物而从事网页设计的人与那些能够不断提高并塑造这一领域本身的人区分开来。我喜欢找到那些我认识的人或我尊重的公司/项目的网站，他们需要改造，并为他们做一些免费或低价的服务，仅仅因为我想看到它做得更好。这会带来更多工作，并使工作更有效率。谢谢你的精彩博客！
很棒的帖子，我已经计划这样做一段时间了。
试试看
我同意，很棒的建议。我通常就是这样做的，只是我从几个不同的灵感来源中进行复制......但我最终会在这里和那里改变一些小东西，以至于最终的结果与我复制的内容完全不同！
很棒的建议！
这很像我小时候过圣诞节时收到一个很酷的玩具。我会把玩具拆开，然后重新组装，看看它是如何工作的。我用同样的方法来学习网页设计。我会看到一些我非常喜欢的网站，查看源代码，复制并粘贴到文本编辑器中，将其拆开，然后重新组装。一旦我知道它是如何工作的，我就会尝试自己做。
我在我目前非网页设计的工作中也会这样做，复制触摸屏 GUI 设计。我认为最近的工作只是图形设计，而不是网页设计，这确实帮助我的设计技能提升了。
我经常这样做，以摆脱生疏感。这确实是一种很好的练习，但它没有锻炼到创造力肌肉。
你必须磨练技能，才能创造出美丽的网站，但你也需要能够从自己的想象中做到这一点。
这绝对是我最喜欢的学习方式。我在跟随教程时会融入类似的想法——我的最终产品永远不会与教程完全一样，因为我在制作过程中一直在调整。我发现这教会我更多，因为我必须了解正在发生的事情，才能在我自己的作品中发挥作用。
我的问题不在于我对工具的熟练程度，而在于我是否能够提出美观的设计。我已经阅读过教科书，但似乎有些东西是无法通过这种方式学习的。
我该怎么办？
这很难，因为这真的只是艺术性......我认为艺术性是你无法真正教的东西。A List Apart 和 Jeffrey Zeldman 的其他作品可能会有所帮助，或者也许 Sitepoint 的“美丽网页设计”书籍也会有所帮助。CSSBeauty.com 提供了一些很棒的推荐书籍，你可以查看这些书籍，以及大量鼓舞人心的网站。
我认为这种练习非常适合你。虽然表面上看起来只是复制，但这个过程会激发你的创造力。它会让你用新的方式使用工具。下次当你面对空白画布时，你将拥有创造力的肌肉记忆可以借鉴。
我真的认为你需要从更小的角度去看待设计。不要被自己的设计水平吓倒，不要将你的作品与他人的作品进行比较，而是可以将你之前的作品与你新创作的设计进行比较。这样你就可以看到改进和进步。
是什么让一个网站设计变得美丽？字体、颜色、形状、比例和空间关系......一次处理一个设计的小部分，直到你完善它！
我认为网页设计中最重要的元素是颜色。所以首先要选择一个颜色规则。例如，类似色、单色、三色或互补色
设计不是一蹴而就的，如果你有耐心学习工具，你应该能够理解设计理论和方法
如果一开始你没有成功，那就再试一次。
我知道我一直都在制作我的新企业网站，并且已经经历了 7 次迭代和设计，才最终确定了一些我喜欢的设计。我有一个大约 50 个 CSS 画廊的列表，我会浏览这些画廊寻找灵感。一开始我很担心复制，但随着你深入创作，你的设计会发生很大的变化。这让你可以从一个不是“空白”画布的东西开始。这真的很有帮助，尤其是在你尝试寻找关于新设计的一些新想法时。
我只是坐在那里，花 2-3 个小时浏览网页，记下我发现的吸引人的设计元素、营销元素、号召性用语、图形元素、颜色方案、图案、效果等等。我会尝试快速记下我为什么喜欢它，并看看它是否符合我想要创造的愿景。
然后，我拿着我的速写本，开始思考这个想法如何演变成我可以使用的设计。通常情况下，我会发现有足够多的想法涌现出来，布局和图形元素的想法充满了我的脑海。
不要害怕探索下一个想法。反过来，也不要害怕放弃一个想法。
再补充一些观点
我认为是毕加索还是梵高，会在他的作品上重新创作。所以，本质上，遵循Chris的这个视频教程，并利用你喜欢的网站作为你的画布。
抱歉，我忘记补充了
你也可以使用Gimp，这是一个功能齐全的免费程序，适用于 Mac、Windows 和 Linux（我在使用 Ubuntu）。另外，如果你在使用 Windows，可以试试便携式 Ubuntu。
Josh
感谢你的建议。我知道很多专业人士使用 Photoshop，但我最近刚安装了 GIMP，一直在用它做一些小项目。我很喜欢它，而且它便宜多了！:)
你是来自设计背景，还是更偏向技术/开发背景？从你的博客来看，你似乎是一个程序员。
我读过很多“设计师”的网站和博客，他们都接受过大学教育，学习过网页设计、多媒体设计等，而且他们都很有经验。他们有设计的眼光，也懂得 gfx 软件等领域的复杂技术。
我也看到很多其他人，他们完全有能力编写代码，但最终结果，也就是网站的外观，却常常让人提不起兴趣。
我理解这种感觉，因为我来自软件工程/网络工程背景，工作生涯的前几年都在数据中心度过。我是在业余时间学习了 HTML、CSS 和 Photoshop，通过实践、查看别人的源代码和阅读无数教程，但从来没有在教育期间真正学习过这方面的知识。我母亲是一位受过专业训练的艺术家，在这方面我算得上是幸运儿。我认为我遗传了她的基因（哈哈），这让我对对比度、颜色等方面有了很强的感受力，而很多来自技术背景的人往往对这些东西没有太好的理解。
这需要时间和努力。作为一个程序员，你一定能写出代码，也能理解验证和测试的重要性，而这些正是“创意型人士”可能比较难以掌握的。反过来，他们可能在视觉方面比你更出色。
如果你能成为一个优秀的程序员/开发者，同时也能进行美观实用的设计，那就太棒了。不一定是“样样精通，却样样不精”就是坏事。如果你自己设计了博客模板，那你就不用担心了……看起来很棒。
1) 选择三个你喜欢的网站（最好是三种不同的布局或导航设计），尝试尽可能地重新创建它们，但不要完全复制。
2) 找一本速写本，画出第一个网站的导航，然后画出第二个网站的布局，并结合第一个网站的导航。这样就形成了两个网站的融合。
从这里
3) 勾勒出你自己的三个网站的融合设计。
4) 在 Photoshop 中创建它。
5) 用代码实现它。
6) 获取反馈，然后从头再来。
你会逐渐找到自己的风格。
我已经这样做了很多年了……这可能是我自学速度如此之快的原因。它不仅能激发灵感，还能将你的 Photoshop/Illustrator/Fireworks/HTML 知识推向极限。有了像这样的提供如此多有趣 jQuery 插件的网站，你会感到非常有成就感！
我从事网页设计/开发工作大约一年半了，我发现这样做有助于我更深入地理解网页设计的精髓。有时我仍然会遇到困难，但那正是最有趣的部分。尝试找出正确的做事方法，并复制优秀的网站，这是关键（对我来说）。当我刚开始做这件事的时候，我感觉自己是在欺骗自己，但随着时间的推移，我意识到我并不是在试图重新发明轮子，而是在寻找自己的风格和方法。
看到我不是唯一一个这样的人真是太好了！:)
再次感谢 Chris。如果我们一起坐牢，我会保护你的。当然，不是那种有性暗示的保护。
这是一个很棒的练习！还有什么比试图复制更好的方法来磨练你的 CSS/设计/HTML 技能呢？这就像米开朗基罗和莫奈等伟大艺术家的模仿者一样。其他艺术家学会模仿和复制艺术形式，以创作出具有非凡设计的新作品。
再次感谢你写出这篇文章！我知道我必须经常这样做，才能跟上最新的 CSS 技巧。
我刚开始尝试用 HTML 模板来做这个，我会下载一个我喜欢的模板，尽力复制它，如果遇到困难，我还有模板可以参考。
很棒。
这正是我学习 HTML、CSS、JavaScript 等方法。当时我失业了，想在找工作的同时学习一项新技能。三年半过去了，我仍在研究优秀网站的源代码和样式表，从中汲取经验。
感谢你的见解。我每天都会访问 css-tricks.com，看看有哪些新的文章发布。
Chris，你的建议太好了！……谢谢。
欢迎来到 http://www.LiveBaseballChat.com，并复制这个网站的设计。
我之所以建议你这样做，是因为我们即将举办一项比赛，来“解读”我们的设计，以便将其用于我们即将推出的其他网站。
例如 http://www.LiveSoccerChat.com，http://www.LiveGolfChat.com，wwwLiveFootballChat.com
我们需要保持相同的基本格式和布局，但会使用你的 PSD/CSS 文件，并将其中的聊天引擎/Twitter/Facebook 功能整合到你的设计中。
另外，如果你今晚 7 点到 11 点之间访问我们的网站，你可以观看红袜队痛扁光芒队。
干杯！
Dean Collins
http://www.LiveBaseballChat.com
太棒了，Chris，谢谢你。
好建议。类似地，如果我在浏览网页时遇到了一些很酷或独特的东西，我会打开开发者工具（Firefox 上的 Firebug，Safari 上的 Web Inspector 等），查看一下代码是如何实现的。
完全同意！
我有时也会这样做……
太棒了！我一直建议我一个刚开始做网页设计的朋友这样做。
我还让他观看你的 30 分钟网页设计入门视频。虽然我已经知道你在视频中讲解的内容，但我发现它对任何刚开始学习的人来说都是一个很好的工具。
感谢 Chris。
拆解其他优秀网站是学习 CSS 技巧的绝佳工具。如果某个网站有一些你认为很酷的功能，那就值得花时间去看看它的 HTML 和 CSS 源代码。
除了尝试复制它，还可以花一些时间看看能否改进它。也许你可以解决原始网站的 IE6 问题，或者在保持相同质量的样式的情况下简化代码。
另一个比喻是职业体育：在体育运动中，95% 是练习，5% 是比赛。我们花多少时间练习我们的技能呢？
你在说什么？用吉他演奏你喜欢的歌曲是非法的。有人可能会听到它，然后你就会因未经授权的公开表演而被起诉！
这的确很有道理，我今晚就要试试。因为我已经尝试设计一个网站一个星期了，却毫无进展！感谢 Chris！
我完全赞同这种方法！我知道，即使我试图重新创造那些激发我设计灵感的作品，我自己的风格也会自然而然地产生，与原始设计会有细微的相似之处！非常棒的文章！
好文章。不过，这可能听起来很哲学，什么是“优秀的设计”？一个白底黑字的网站可能是优秀的——这取决于设计理念。所以我认为，这与设计本身无关——因为没有“最好的”和“最差的”设计——它们根本不存在。
例如，我们五年前设计的一个网站，我们当时认为它是史上最优秀的网站，现在看起来可能丑陋不堪。所以设计也是与时代相关的。
但没错，这绝对是一个锻炼和获取新设计方法的绝佳方式。
是的，这是一个很棒的想法！我在学习设计的时候经常这样做。你会找到一个你喜欢的网站，或者它的某些部分，然后就开始尝试重新创建它。
我通常会发现，在复制的过程中，我会走偏，并从这个最初的灵感阶段开始进行新的设计。
这也是我们鼓励 WebCoursesBangkok.com 的学生去做的事情。
这是一个很棒的想法，我不知道为什么我自己没有想到。我想这就是你让这个网站如此成功的理由吧。
这确实是个好主意，但我很少有时间这样做，虽然我认为我真的需要多加练习。
如果你没有客户，就给自己或朋友制作一个网站，或者做任何事情。好吧，重新设计你自己的网站。总之，保持忙碌。
感谢 Chris 和其他评论者，
这对我来说是一个完全的启示。如果我没有实际的现实生活任务，我并不擅长给自己设定学习项目。我也发现自己会创造出相当平淡的设计，但注意到采用现有的想法并注入自己的想法可以真正创造出一些新东西。
我将按照建议进行一些练习，再次感谢。
你知道吗，提升自己是一个持续的过程。我完全同意这篇文章。即使你试图复制某些东西，你也会以自己的方式去做，并且你会变得更有创意：）。
我想说，无论何时你试图模仿某样东西，都要尽力做到完美，不要认为你只是为了好玩而做。
我完全同意！我从事设计和开发只有几年时间，我大部分周末和空闲时间都在玩弄和尝试复制我最喜欢的效果。因此，我的技能正在快速增长，希望有一天人们能够从我的作品中学习。
这恰好是我做的一件事——只是用 QWERTY 键盘，而不是乐器。
:)
我不想用干巴巴的律师语言，但版权怎么办？尤其是在你保存图像的时候。我知道这只是为了训练，但即使是训练，你也可能需要许可。另外，如果你将它作为自己设计的基底，即使它相当不同，也可能存在太多相似之处而无法称之为你自己的。我知道我可能听起来有点太偏执了，但你永远不知道这些日子会发生什么。
嘿，Chris，我已经这样做了好一段时间了。我会截取一个我喜欢的网站的屏幕截图，然后把它带到 PS 中看看我是否可以重新创建它，或者仅仅是创建我喜欢的一个元素。
下一步就是获取该设计并尝试编写代码。拥有原始代码也有助于了解不同的人如何解释设计的编码方式。
至于版权？好吧，我创建/复制的设计从未面世。我通常将它们保存为“酷炫标签效果”或“JS 滑块”之类的名称，并积累设计和想法库。
我认为尊重你正在查看的设计师作品非常重要。
Chris，非常棒的比较，你绝对是正确的。我几乎一生都在弹吉他，练习/复制会让你变得更棒，而且也很有趣。偶尔你会迈出这一步，这是一种很棒的体验。我认为这与激情有关。设计和网页设计也是如此。所以感谢你的建议，也祝你在 CSS 技巧方面取得成功。
这篇文章和一些评论激励了我。感谢你们所有人积极的思维和态度！
通常情况下，如果你只是坐下来从头开始思考设计，你可能会想出一些非常实用的东西，但也许有点平淡……除非你是一个非常有创意的思考者，可以在脑海中想象出非常复杂的设计。
当我拿到一个项目和一些要求时，我更喜欢做的是先想出一个基本的想法，比如布局和颜色等等。然后我就会去任何大型的 CSS 展示/画廊网站，寻找与我的基本想法相似的设计。我也会查看与该网站/项目所属产品/行业相关的网站，看看是否存在特定的趋势。这通常可以让我在屏幕上看到许多类似于我将要创建的网站的“完成”细节，这样我就可以在完成我自己的设计时的最后阶段思考或记住这些细节。
通过不断地查看其他人的作品，并吸收其中有效的东西，然后提取这些东西的本质并将这些想法融入到我自己的网站中，我发现我的作品比我本来可能做出的作品更好。
任何认为自己可以设计出绝对一流且完美的网站，并且不会从审视其他人的作品中获益的人，可能并不像他们认为的那样完美。
这只是我的一点想法/意见/whatever
是的……我同意你对这句话的看法，“创意、学习和改进不需要任何客户……它需要练习”，在设计方面，你的想法值得尝试……
哇，这是一个绝妙的想法。不知道为什么我之前没有想过这样做。我需要练习从 css-tricks 和其他网站（如 nettuts）学习的所有技能，但我总是想不出主意。
截取一个我喜欢网站的快照，然后尝试重新设计它，然后再编码它，这绝对会很有趣，并帮助我练习和学习更多。
绝佳的建议！谢谢！