我们还需要切割psd文件吗？

    昨天一个朋友的一句话引起了我的关注，“我在试着学习如何切片”。这是再平常不过的一句话了，我很明白他要表达的意思，但是总感觉这句话的某个地方有点不对。

    朋友看到了我满脸的犹豫，于是问我：“我们还在用切片这种东西吗？”  问的好！  对于初学者而言，术语不仅仅是枯燥的术语，还应该暗示出学习和认识新技能的方法。高级开发者在解释一些概念的时候尽量通俗一些，这是很有帮助的。今天，我们讨论将一个psd文件转换成一个web页面，然后探究一下web设计中的一些问题。

    英文原文http://designshack.net/articles/css/do-we-still-slice-psds/

样本文件

    我们并不是要现场教你将psd转换成html/css，只是讨论如何做以及为什么这样做的方法，这样你就能清楚当今的设计师们用到哪些典型的方法。

    这篇文章中我需要一个psd文件，因此我引用了GraphicsFuel.com 网站的 Creative Studio Minimal PSD.

什么是切片

    什么是切片呢？简单的说来，切片就是将你的Photoshop文件分割成很多部分，然后用html和css组织起来完成一个网页。说得更专业点，切片可能还会用到ps中的一些工具和技巧，比如切片工具，将你想要的一部分用矩形选框选中，然后分离出单独的图片。

为什么要切片

    ps中的切片工具仅仅是为了方便工作，但不是必须的。很多设计师其实从来没有用过切片，但同样很出色。注：这点有别于国内，在国内你要是不会切片那么你就会被看作不懂网页设计的人，其实很多具有创造性的设计师，用到的工具往往是很有限的，他们喜欢自己摸索替代性的东西，因为他们不想自己只懂技能而没有创造才华。

    切片的作用在于使你从一张图片获取素材更容易些，省去了你自己一张一张保存的麻烦，不管是从短期的初始工作还是长期的版本修订方面来说，都是有益处的。

    虽然切片本身也是一个痛苦的过程，但是我必须承认，能够精准巧妙的切割一个psd文件是一件很美的事情。这里我举一个从一张图片上切割几张图片的例子。没有切片工具的话，我只能重复着采集一张保存一张的工作。

    当你切完之后，你只需保存一下就能将这些切片保存成标准格式的独立图片。这确实省去了不少的时间，尤其是你的原始素材是一张图片的时候。

    如果你仍然不是很明白切片工具或者你始终觉得切片本省简直就是浪费时间，你可以去看看我们的文章：How to Make Slicing Suck Less: Tips and Tricks for Slicing a PSD

那篇文章中，我解释了切片的整个过程以及各种工具的用法，里面有很多能够使你切得更好的建议。

为什么说切片是过时的技能

    你现在知道什么是切片了。来谈谈这些年来切片这个工作是如何变得不再是那么回事的。

    有那么一段时间，没有人会用css。甚至css已经开始流行了，很多设计师还只是用css作有限的工作（都在用table吧）。结果是当每次想要得到一种特殊的字体或者是简单的渐变、阴影、圆角这些效果的时候，我们不得不引进一张图片才能在浏览器中实现这些效果。正是因为这些限制，切片就显得如此的重要，当给你一个网页的原型图，你小心翼翼的将图片切割成细小的部分，然后你很可能再用table将他们放在html中。这是不是很难以接受，尤其是当那个时候的网速慢到难以加载你的图片的时候。

css打败了图片

    随着css的升温，一种新的趋势浮现出来：最少化图片设计（Imageless Design）。如果几年以前你经常逛一些关于设计的博客类网站，你可以看到很多类似这样的标题：“无需图片打造一个花哨的按钮”。到了今天，你仍然可以看到类似的标题，告诉我们css是多么的无与伦比。

    没有css那些难以置信的特性，这样的潮流是不可能出现的。突然之间你可以做圆角了，设置背景乐，添加阴影了，创建渐变了，而这些都只是几行代码的事情。现在的设计师们一般都有一个共同的目标，那就是在我们的网页中尽量少用图片。最少化图片设计并不是绝对必须遵循的（因为你总是需要那么一点图片），但确实是一种追求的方向。设计越来越人性化。

Imageless设计的优缺点

    但是css设计网页的趋势也是潮起潮落，褒贬不一的。css的优点是调整样式方便，比如你想改变一些背景色，你只需找到那么几行代码然后更改就是了，而且css只需要很短的加载时间。但是css也有其缺点，在图片为主的设计中我们只是头疼png的事情，然而在css中，让人烦心的事情就多了，最突出的莫过于浏览器支持的问题，像ie这样的浏览器简直就是怪胎。

    所以你需要记住这一点：以用户为中心，如果用图片达到的效果更好，那就用图片。

结论

    基于上面的一些讨论，我们回到标题：到底网页设计师还用不用切片？

    对于大部分人来说，当我们看到一个Photoshop文件需要转换成网页的时候，我们更多的是想代码的事情。就像黑客帝国中Neo环顾周围的世界，发现以前习以为常的世界背后隐藏着一行行代码。同样，网页设计师看到的不是一个又一个的图层，而是div和css这些东西。我宁愿花时间重新实现和图片一样的效果，而不是去切图片。

    新手在读我这篇文章的时候很自然的会问我，“难道这种方法就没有一点重复的地方吗？”首先，你在Photoshop或者Fireworks等美术工具中设计出网页的原型图，然后你开始浏览器中用代码重构先前的设计，而不是用图片。

    答案是肯定的，我鼓励你直接将设计过程放到浏览器中。以编码开始，同时以编码结束，只有当你确实需要一个图片的时候才ps，所以重复的工作基本不存在。

    我基本是这样做的，这样你个整个工作流程更流畅。但不幸的是，用这种方法不是那么容易创造出你的最好作品，因为你的大脑不能在编码的同时保持着对整个设计效果的把握。Sarah Parmenter在文章中提到了这个问题，她说她无法直接在浏览器下设计。这揭示出了一个道理，即时Photoshop不是设计出动态交互网站的好方法，但比起直接写css和html来，它能够激发出更多的设计灵感。

    这篇文章给一个简单的问题作了过长的解释（也许还是没解释清楚，不好意思）。但是，这两种设计的优与劣，取与舍，其实困扰着很多人。不管是新手还是专家：设计一个网站的最好方法是什么？设计与编码应该完全独立开来，还是二者有机结合？我们应该先设计出原型图然后用代码实现出来，还是有更好的方法？Fireworks是解决我们困惑的方案么，还是永远没有答案？我想听听你们的心声。你们的工作流程是怎样的，如何开始，如何结束？你们用什么工具，理想中的工具是什么样的？