怎么把psd的文件轉(zhuǎn)換成html5

您好！

海淀ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

1）您需要在PS里將這個(gè)PSD格式的文件拼合圖層，壓平為一張單層圖像。存儲(chǔ)為jpg或gif格式。

2）在PS里是不能直接存儲(chǔ)為html格式的，您需要將這個(gè)jpg或gif格式拖到 ImageReady 軟件里

這個(gè)軟件一般是和PS捆綁在一起安裝的，在專業(yè)的處理網(wǎng)頁(yè)格式的軟件，存儲(chǔ)為web類型的

格式即可，例如存儲(chǔ)為html 或 htm

要將PSD圖片轉(zhuǎn)換Html網(wǎng)頁(yè)有哪些步驟？

也不算多么復(fù)雜，屬于前端開(kāi)發(fā)的工作，我就是從事這個(gè)工作的，先設(shè)計(jì)效果圖，然后利用DW或者其它編輯工具寫出xhtml+CSS+js代碼。

需要的技能有PS,xhtml,css,js。

學(xué)東西不要學(xué)的太雜，學(xué)門一精就好，拿高薪很容易。

網(wǎng)頁(yè)制作中如何使用PSD模版

其實(shí)標(biāo)準(zhǔn)的網(wǎng)制作完成的工作實(shí)際是：psd to html，一般情況下，我們會(huì)拿到美工的psd,這時(shí)候不同的人會(huì)有不同的做法：

1.打開(kāi)fireworks將圖片切割導(dǎo)出為html。

2.直接在dreamweaver之類的工具去拖拉布局，導(dǎo)入相關(guān)的圖片,flash資源。

3.先在ps中完成切圖后，在文本編輯器中看著效果圖一步步的制作。

以上是大多被采用的方法，但都不好：

第一種方法最為不好，這樣的代碼根本不具維護(hù)性和可讀性。

第二種方法也不好，代碼難免會(huì)有冗余，做出來(lái)的東西基本需要排查一遍。

第三種方法也不好，因?yàn)槟阈枰葱Ч麍D一點(diǎn)點(diǎn)的拼，也就是說(shuō)寫html標(biāo)簽的時(shí)候，你在不斷的假設(shè)這塊要怎么去顯示。

正確的做法是：

1.拿到psd后，先不要做別的，直接在文本編輯器中將網(wǎng)頁(yè)的框架寫出來(lái)，不要假設(shè)這塊將來(lái)css要去怎么渲染，完全自然化的標(biāo)簽，不加任何的css。

2.寫完之后在各個(gè)瀏覽器運(yùn)行之后確保大體定位都沒(méi)有問(wèn)題。

3.書寫總體css,這里的css只負(fù)責(zé)大塊的定位及樣式。

4.切出需要的圖片資源，在寫好的框架中一點(diǎn)點(diǎn)的去構(gòu)造，不斷的調(diào)試，最終為成品。

5.最后，為自己的代碼添加注釋，在css，html中都要合適的為自己的代碼添加注釋。

要想做出能靈活切換皮膚，讓css主導(dǎo)表現(xiàn)，還有很多要注意的地方，但大體的流程就是這樣的，當(dāng)然我們一開(kāi)始不能直接就做到先寫html，但起碼要有這個(gè)意識(shí)，循序漸進(jìn)。。。

謝謝熱心會(huì)員"linxz"提供實(shí)際經(jīng)驗(yàn)，我貼上來(lái)供大家參考：

PSD出網(wǎng)站從兩個(gè)大點(diǎn)考慮

一、一個(gè)獨(dú)立的頁(yè)面

1、分析這個(gè)頁(yè)面，先在腦袋中或者草稿紙上描繪大概的結(jié)構(gòu)

2、根據(jù)設(shè)計(jì)稿的的情況，分析背景圖的分布、ICO圖的分布等

3、切割相應(yīng)的圖片，導(dǎo)出、合并圖片

4、在編輯器中寫整體結(jié)構(gòu)XHTML代碼，包括頁(yè)面中出現(xiàn)的所有元素的結(jié)構(gòu)

5、編寫CSS樣式中的整體以及模塊代碼

6、細(xì)節(jié)調(diào)整

7、收工，瀏覽器驗(yàn)證是否正確

二、由多個(gè)頁(yè)面組成的小站點(diǎn)或者大站點(diǎn)

1、瀏覽所有設(shè)計(jì)稿，統(tǒng)一規(guī)劃站點(diǎn)模塊、圖片、文件分布

2、開(kāi)始第一點(diǎn)的操作，但規(guī)劃站點(diǎn)的內(nèi)容分布很重要

整體考慮點(diǎn)：

圖片的合并，減少請(qǐng)求量

結(jié)構(gòu)的合理性，語(yǔ)義化

樣式的簡(jiǎn)潔，便于后期維護(hù)

多為后期的維護(hù)以及程序開(kāi)發(fā)著想，如何簡(jiǎn)單實(shí)現(xiàn)效果