Convert Photoshop designs to CSS website转换Photoshop的设计到CSS网站

Posted on April 26, 2008 at 5:13 am张贴于2008年4月26日在上午05时13分

Are you a kickass Photoshop person?你是kickass Photoshop的人吗？ Can you create amazing looking designs using your Photoshop skills?你能创造惊人的研究设计，使用您的Photoshop技能？ If so, you might find yourself creating web site mockups in Photoshop for clients and then passing on the design to web site coders to get the final product in HTML.如果是的话，您可能会发现自己创建的网站mockups在Photoshop中为客户，然后通过对设计到网站编码，以得到最终的产品在HTML 。

If you’re one of the many people who create web sites in Photoshop, you might be interested in a free online service that will let you convert your Photoshop design into a strict XHTML compliant CSS web site !如果您也是其中的许多人制造出来的网站在Photoshop中，您可能有兴趣在一个自由的线上服务，将可让您转换您的Photoshop的设计成为一个严格的兼容CSS的网站 ！

psd2css在线

Trying to understand and code a CSS website can be a difficult and arduous task (thanks to Microsoft and there four versions of IE in the market!).试图理解和代码一个CSS的网站可以是一个困难而艰巨的任务（感谢微软和有四个版本的IE在市场上！ ） 。 It’s much easier, at least for me, to play around in Photoshop and create simple yet cool-looking designs.它的容易得多，至少对我来说，发挥靠近在Photoshop和创建简单，但冷静地看设计。

PSD2CSSOnline psd2cssonline is completely free and allows you to upload files in either Photoshop or GIMP, so if you don’t have a copy of Photoshop, you can use the free open-source photo-editing program, the GIMP.是完全免费的，并可以让您上载档案，无论Photoshop或的gimp ，因此，如果您不具备复制的Photoshop ，你可以使用免费的开放原始码的照片编辑程序，的gimp 。

PSD的到CSS

When creating your web site design, you need to make sure you use layers as this is what PSD2CSSOnline reads to figure out the different parts of a web page.当您建立网站的设计，您需要确保您使用层，因为这是什么psd2cssonline读取出来的不同部分的网页。 The trick is to keep the parts of your page that you want separate in different layers of your .PSD file.诀窍在于把部分您的网页您要分开在不同层次的您。 PSD的文件。

There are a couple of simple guidelines you should follow in order for this process to work.有几个简单的指引，您都应该遵守，以便为这一进程的工作。

  • Don’t make a bunch of layers - If you are an advanced Photoshop user, you might have created many layers that all combine together to make a single object. 不使一批层 -如果你是一个先进的P hotoshop的用户，您有可能，创造了许多层，所有相结合，使一个单一的对象。 For example, your logo might actually be made of 5 to 6 different layers - but the logo is still one object.举例来说，您的标志，实际上可能会作出5至6层的不同-但图案仍然是一个对象。 Do not upload the file with the logo still separated out into the 5 or 6 layers - merge them together into one single “logo” layer.不上传文件与标志仍然分开，到5或6层-他们一起合并成一个单一的“徽标”层。
  • Opacity and Blending Options - You need to rasterize any layer with opacity at anything other than 100%. 不透明和混合选项 -你需要的任何r asterize层与不透明，在任何其他超过1 00％ 。 In Photoshop, you can rasterize a layer by right-clicking on the layer and choosing “ Rasterize Type ” or “ Rasterize Layer “.在Photoshop中，您可以rasterize层上按一下滑鼠右键层，选择“ rasterize型 ”或“ rasterize层 ” 。 In the Gimp, create an empty layer just below the one you want to rasterize and then right click on the new layer and choose “ Merge Down” .在的gimp ，创建一个空层仅低于1您想要rasterize ，然后按一下滑鼠右键，新层并选择“ 合并” 。 This will rasterize the layer and merge it.这将rasterize层和合并。
  • Modify Gimp Layer Sizes - For some reason the Gimp likes to make layers the same size as the image. 修改的gimp层尺寸 -为某种原因的g imp喜欢，使层大小相同的形象。 This makes inefficient as you end up with lots of big image files in your web page.这使得效率低，正如你最终有很多大的图像文件在您的网页。 For any layer in the Gimp where the object is smaller than the whole page (most of your layers), click on the layer, then in the layer menu choose “ Autocrop Layer” .任何层，在那里的gimp的对象是小于整页（您的多数层） ，点击该层，然后在层菜单中选择“ autocrop层” 。
  • 4MB PSD File Size Limit - This is the largest file size that you can upload, but it was just a random number picked by the creator. 4 MB左右的PSD的文件大小限制 -这是世界上最大的文件大小，您可以上传，但它只是一个随机号码挑选出来的创作者。 You can email him and he’ll let increase the limit!您可以发送电子邮件，他会让增加极限！

That’s all you need to keep in mind!这就是所有你需要紧记！ Go ahead and create your web page in Photoshop or GIMP and then upload it to see how it turns out!继续创造您的网页，或在Photoshop的gimp和然后将它上传到看它如何轮流出去！

Hopefully, the look you had created comes out in your final HTML output.我们希望，看看你创造了出来，在最后的HTML输出。 You can also try out a couple of other online services for converting PSD designs to web pages, but they are not free:您也可以尝试走出一对夫妇的其他网上服务，为转换PSD的设计网页，但他们不是免费的：

http://psd2css.com/

http://www.xhtml4u.com/

http://www.psdslicing.com/

http://www.htmlblender.com/

This service is also called PSD slicing, if you want to know the technical term for it.这项服务也被称为PSD的切片，如果你想知道的技术术语。 If you don’t feel like paying people to do this slicing for you and PSD2CSSOnline didn’t work out for your complicated design, you can do the slicing yourself!如果你不觉得付出的人一样，这样做切片为您和psd2cssonline没有工作，为您的复杂的设计，您可以这样做切片自己！

Here are some cool tutorials and guides that you can read on how to design a site in Photoshop and then convert it into HTML:这里有一些很酷的教程和指南，您可以阅读关于如何设计一个网站在Photoshop然后它转换为HTML ：

http://www.sitepoint.com/article/design-website-photoshop

http://www.entheosweb.com/photoshop/layout.asp

While PSD2CSSOnline may not be the best tool for big designers, it’sa great way to get started if you’re not very familiar with CSS and HTML coding.而psd2cssonline未必是最好的工具，大设计师，这是伟大的方式开始，如果您不是很熟悉CSS和HTML编码。 And it’s free, so it’s always worth a shot!而且是免费的，因此它总是值得一开枪！ Enjoy!享受！ Source:资料来源： ToThePC tothepc

Technorati Tags: Technorati标记： , ， , ， , ， , ， , ， , ，

If you enjoyed this post, make sure you 如果您喜欢这个职位，请务必 subscribe to my RSS feed 订阅我的RSS馈送 ! ！

» Filed Under »提交下 Web Site Tips网站提示

Related Posts相关文章

One Response to “Convert Photoshop designs to CSS website” 1回应“转换Photoshop的设计到CSS网站”

  1. Siddharth siddharth said on : 说： April 26th, 2008 at 8:38 am 2008年4月26日在上午8时38分

    Nice thingy尼斯thingy
    Will use it whenever in emergency将用它时，在紧急 ： ）


    Please post your comments/suggestions!请张贴您的意见/建议！