从一组图形设计图像创建网站

Question

我已经在网站上工作了一段时间。该网站的功能很好，但图形设计看起来有点废话，所以我们付了图形设计师为我们看一下。他向我们发送了一组图像 - 网站上每页一个 - 带有建议的新设计。它看起来很不错，但我不知道如何处理这些图像...

我是否只是开始搞乱css - 设置颜色，大小等，使它看起来像我给出的设计？或者我应该遵循哪个程序？我应该唠叨那个人有关字体，色调等的更多信息吗？

Answer 1

如果您在photoshop或任何其他图像编辑程序中进行完整的网站设计，通常的步骤是切片图像（http://en.wikipedia.org/wiki/Slicing_(interface_design)）然后通过将切片的图片与html对齐再次将它们放在一起。

当然你也可以用css和html元素重新创建设计，但是根据收到的设计的复杂性，这将是非常困难甚至几乎不可能。

Answer 2

通常，您需要一个HTML设计器来为图形设计创建HTML / CSS，因此向设计师询问它可能是一种选择。他应该能够至少提供一个样式指南，详细说明颜色，字体等。

如果您必须自己动手，有几种工具可以帮助您：

• Firebug：最终的开发人员助手工具
• Pixel Perfect：Firebug的附加组件，可让您将图像叠加到正在开发的网站上。
• IETester：适用于不同IE版本的非常好用且简单的测试工具。
• 屏幕标尺：一种测量图像和站点距离的简单工具。

Answer 3

您有不同的工具可以帮助您选择颜色和字体 自动。您可以要求他向您发送包含所有字体和颜色的photoshop文件 他做了

Answer 4

我建议你将设计分解为按钮，菜单，方框，页眉，页脚等组件。然后，您可以根据设计创建HTML / CSS代码并组装所有组件。我建议您让设计师为您传递颜色值和测量值，以便您可以专注于代码而不是查找这些信息。

Answer 5

正如@Matschie和@Gregory所评论的那样，您最好从他们那里请求原始设计文件，以便可以将这些文件剪切掉以用于HTML / CSS。

平面图像（例如JPEG）应该仅用于预览设计，不应该从中构建。

Answer 6

你可以尝试自己做CSS，或者你可以去那里为你做的很多网站之一。有大量的网站将图像（通常是Photoshop的PSD文件）转换为工作的CSS / HTML。很多这些网站都非常便宜，并且看到你如何支付平面设计师来组合一个漂亮的设计，我建议去其中一个网站并支付它们以获得良好的CSS / HTML。好的CSS / HTML可能会因为跨浏览器问题和类似的东西而变得有点复杂，除非你有很多经验，否则可能需要花费很多时间。

提供此类服务的网站的一些示例是：

psd2html

xhtmlchop

xhtmljunction

如果你只是在PSD上搜索谷歌搜索HTML，你会发现更多。