PSD转换为HTML / CSS转换

时间:2012-06-19 07:20:15

标签: html css photoshop

我目前正在获得一个由在Photoshop中工作的人设计的网站,并将为我提供该网站的PSD - 相当多层等...

有没有方法可以将其转换为HTML / CSS,还是必须手动完成?

有些网站似乎提供这项服务,但我不确定他们是否只是将PSD剪切成部分并将其显示为图像而不是HTML / CSS。

也许完全转换是不可能的。

想法? THX

4 个答案:

答案 0 :(得分:2)

最好的方法是手动执行此操作,或者向某人付费以便为您编写HTML。只是削减PSD的网站经常会产生糟糕的,有时甚至是无效的HTML。

通过使用非主要切片图像的布局,您可能会获得更好的结果(更快的加载页面,更好的搜索引擎优化,更好的语义等)。

答案 1 :(得分:0)

许多网站都会完全按照您的指定行事。

搜索PSD对HTML / CSS服务提供商的评论,并比较费率/周转时间/质量。

您还可以使用http://csshat.com等较新的工具,这些工具在很大程度上有所帮助。

答案 2 :(得分:0)

Photoshop可以将布局转换为具有编号ID和类的神奇可靠的修复布局。你不希望这样,因为它是一场噩梦。最好也是唯一的方法是切片布局,适当地命名切片然后导出它们。然后手动编写你的html / css代码。这是每个人都这样做的,所以没有错。当然你的html / css需要很好才能做好,但这就是我们获得报酬的原因。

顺便说一句。使用布局中的大量图像和带有文本的图像是非常糟糕的做法。除了定制营销材料之外,现在几乎没有任何借口。如果你需要一种字体,那么你可以使用Cufon。在许多情况下,可以使用css实现圆角。我最近的一些布局总共使用了5-10kb的图像。

显然你不能指望你作为一个新手那样做,但这就是你应该瞄准的目标。

答案 3 :(得分:0)

您应该手动完成。

有自动工具(12)可以进行转换,但输出代码非常糟糕。之后不要指望能够轻松维护代码。

还有一些网站可以为您编码。他们应该遵循通常的提示&如何做好的诀窍。有些是好的,有些则没有。

或者你可以学习这样做。只需手动编码即可。这并不难,但您之前需要一些基本的HTML,CSS知识。

查看设计/布局/框/等的每个块,然后查看它具有哪些元素,以及如何使用HTML / CSS重新创建它们。如果没有答案。

您也可以找到有关它的教程(3),指南(4)和视频(5)。这是一个非常充斥着这方面的信息。

1)Adobe Muse:http://www.adobe.com/products/muse.html

2)SideGrinder 3:http://www.medialab.com/

3)Google:http://www.google.com/search?q=convert+psd+tutorial

4)Artmov:http://artmov.com/ebooks/how-to-convert-psd-to-html-css

5)YouTube:http://www.youtube.com/results?search_query=convert+psd&oq=convert+psd