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相關文章

2 Responses to “Convert Photoshop designs to CSS website” 2反應“轉換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將用它時，在緊急 ： ）


  2. Shaun 肖恩 said on : 說： April 26th, 2008 at 10:41 am 2008年4月26日在上午10時41分

    Hi Aseem -喜aseem -

    I want to thank you for the great website and the great article on psd2cssonline.com .我要感謝你為偉大的網站和偉大的文章psd2cssonline.com 。

    I just wanted to let you know that the max file size has been bumped to 8MB now.我只想讓您知道該檔案大小上限已撞毀，以8 MB的現在。

    And we’re adding new features all the time!我們正在增加新的功能，所有的時間！ Image Roll Overs, text areas, links, zip file download (as well as the old ‘Save As…’ option), auto centered pages and more.形象輥overs ，文字領域，鏈接， zip檔案下載（以及舊'另存為… … '選項） ，汽車為中心的網頁和更多。

    Thanks again for the great website and article.再次感謝偉大的網站和文章。 Keep up the good work!保持了良好的工作！

    – -
    Shaun肖恩
    http://psd2cssonline.com


    Please post your comments/suggestions!請張貼您的意見/建議！