怎麼使用PS製作一個網頁|怎麼用ps做網頁設計

你好！

準確的說，ps是製作網頁的其中一個軟件之一，製作網頁有專用的“網頁三劍客”：PS、DW、flash。

想要做網頁的話，你起碼要會前兩個，其中

ps在網頁製作裏面的作用主要就是：劃分切片+圖片處理。

劃分切片：就是將你在ps裏面做好的網頁版面進行合理的劃分，劃分爲一個個小的切片，然後用DW對這些切片進行佈局。

圖片處理：這個很好理解，就是對網頁圖片進行優化+處理，以節省空間和達到你想要的圖片效果。

最終的網頁檔案是在DW這個軟件裏面完成的，單靠ps做不出來一個完整的網頁。

soso問問裏答案：

首先是在Photoshop中製作網頁的框架。網頁中的元素有很多，像Banner條、文字方塊、文字、版權、Logo、廣告等。儘量把這些相對獨立的元素放在不同的圖層中，這樣方便以後的再編輯。

不過圖層一多，就顯得很凌亂，可建立多個圖層組來進行管理。單擊圖層面板右上角的小三角按鈕，從彈出選單中選擇“新建組”，在隨後出現的對話框中爲新建組取一個名稱（如：“網頁頂部”），確定即可。這時圖層面板中多出一個檔案夾圖標，即圖層組。把相關聯的圖層都拖放到同一組中，比如網頁頂部的所有元素，標題、選單、Logo等都放到“網頁頂部”組中。同樣方法可以建立多個組，在組的下面還可以建立子組。

點擊圖層組前面的小三角，就可以像檔案夾一樣展開或摺疊它，這樣圖層面板就顯示乾淨利落得多，要修改某個元素也能很容易找到。對同一組中的所以圖層可以方便地進行統一操作，如整體複製、刪除、隱藏、合併等。

小提示：

★如果你想借鑑某個網頁的設計，不妨把它截成圖片放在最下面的圖層中，再拉出多個參考線劃出網頁的大致版式，再在此基礎之上邊參考邊製作自己的網頁。

從Photoshop到Dreamweaver的轉換

在Photoshop中設計好之後，下面就要用切片工具把它轉換成網頁。有些人在切片之前喜歡合併圖層，其實沒有必要，合不合並圖層對最終生成的網頁沒有多大影響，反而會妨礙以後的編輯修改。

第1步：我們最終需要的，只是Photoshop中製作的圖形和框架。選擇切片工具（快速鍵爲K），把需要的每個圖形獨立切分出來。每切分出一個圖形，在它的左上角會顯示出切片編號。

第2步：在工具箱右擊切片工具，從彈出選單中選擇“切片選擇工具”，用它可以選取、移動切片，並可以調整切片的大小。右擊某個切片還可以刪除或劃分這個切片。

第3步：切分出所有圖片後，執行“檔案→存儲爲Web所用格式”命令，開啟存儲對話框，根據需要設定好圖片的格式、調色板等參數後，點擊右上角“存儲”按鈕調出儲存對話框，選擇HTML網頁格式，使用默認設定，選擇“所有用戶切片”，儲存即可。

第4步：在Dreamweaver中開啟剛纔儲存的網頁，添加文字並進行各種編輯修改就可以了。怎麼樣，簡單吧！注意：Photoshop匯出的實際上就是一個大的表格，所有空白的地方也都會轉換爲圖片填充，在DW中編輯時，直接刪除這些圖片再添加相應的內容即可。

小提示：

★在Photoshop中編輯好圖形後，點擊工具箱最下面的按鈕（快速鍵爲Ctrl+Shift+M），可以轉到ImageReady裏進行編輯，在這裏，切片工具的功能更爲強大，輸出的圖形控制也更豐富。

PS只是圖片處理軟件 如果非要說做網頁的話就是切片工具了 可以按你的構想切成你想要的網頁構架 PhotoShop中圖片的切片工具的使用？ 提到圖片的切片工具可能你並不太熟悉但是切片在網頁中是很常用的一種圖片處理的技術。

你可以在網上衝浪時經常看到整個大的圖片被分塊顯示出來的效果。其實這就是切片的一個典型的應用方面。

切片的應用主要是用來適應網上數據傳輸的特點，大型的圖片傳輸時造成了網頁的的時間延遲。） 我們可以用切片嚮導來繪製切片： 1:view/rulers 用來顯示出標尺，給切片對象定位。

2：分別拖動標尺左右兩邊的十字可以定位兩邊標尺的零點位置 3:view/slice guides 啓動切片嚮導，用來輔助切片的割分。鼠標點擊標尺按住不放，拖動左右標尺完成整個圖片的上下左右的切分。

當然只是用來定位，真正的分割還要用下面的工具。 4：用工具箱中的切片工具，按嚮導的分割線來分開圖片 5：每分割一部分，都會自動的彈出對象監控板 6：在對象監控板中，你需要設定切片匯出的路徑連接URL，命名方法 7：設定匯出的圖象質量也是切片工具的優點所在。

你可以將要求顯示質量不高的切片，要低色素匯出，將重要的部分用高傳輸質量匯出。這樣可以極大的減小整個圖片對象的大小。

8：當然你可以分割中匯出，也可以最後一起匯出，注意這時一定要選種含有切片對象的匯出方式。 9：完成切片的輸出之後，當然就是將切片依次加入到網頁中了。

重新組合切片要用到網頁設計工具中的表格了。 10：怎麼樣！顯示還不錯吧。

網頁中的元素有很多，像Banner條、文字方塊、文字、版權、Logo、廣告等。

儘量把這些相對獨立的元素放在不同的圖層中，這樣方便以後的再編輯。不過圖層一多，就顯得很凌亂，可建立多個圖層組來進行管理。

單擊圖層面板右上角的小三角按鈕，從彈出選單中選擇“新建組”，在隨後出現的對話框中爲新建組取一個名稱（如：“網頁頂部”），確定即可。這時圖層面板中多出一個檔案夾圖標，即圖層組。

把相關聯的圖層都拖放到同一組中，比如網頁頂部的所有元素，標題、選單、Logo等都放到“網頁頂部”組中。同樣方法可以建立多個組，在組的下面還可以建立子組。

點擊圖層組前面的小三角，就可以像檔案夾一樣展開或摺疊它，這樣圖層面板就顯示乾淨利落得多，要修改某個元素也能很容易找到。對同一組中的所以圖層可以方便地進行統一操作，如整體複製、刪除、隱藏、合併等。

小提示：★如果你想借鑑某個網頁的設計，不妨把它截成圖片放在最下面的圖層中，再拉出多個參考線劃出網頁的大致版式，再在此基礎之上邊參考邊製作自己的網頁。從Photoshop到Dreamweaver的轉換在Photoshop中設計好之後，下面就要用切片工具把它轉換成網頁。

有些人在切片之前喜歡合併圖層，其實沒有必要，合不合並圖層對最終生成的網頁沒有多大影響，反而會妨礙以後的編輯修改。第1步：我們最終需要的，只是Photoshop中製作的圖形和框架。

選擇切片工具（快速鍵爲K），把需要的每個圖形獨立切分出來。每切分出一個圖形，在它的左上角會顯示出切片編號。

第2步：在工具箱右擊切片工具，從彈出選單中選擇“切片選擇工具”，用它可以選取、移動切片，並可以調整切片的大小。右擊某個切片還可以刪除或劃分這個切片。

如果是給個人做，怎麼做都無所謂。如果是在公司裏給客戶做。這一步不可少，出了效果圖後，要給客戶看。等客戶確定不再修改時再做網頁，目的就在於防止客戶反覆修改，動佈局！

另外會做網頁效果圖，代表你的設計能力。用dreamweaver直接做的後果是邊想邊做，容易把設計思路搞混了！

據我所知，這樣的教程基本沒有。因爲做網頁效果圖只要基本的操作，有時從別的網頁截一塊下來處理一下，直接用到自己的效果圖上。

一般顯示器分辨率 寬：1024 高： 768 寬減去滾動條的寬度， 一般爲1003-1004 不會有橫拉條 高度 根據頁而定

網頁設計需要的PS操作技術並不是很多，只要掌握基礎就行了。

但是你想要做好一個稿子就不是那麼簡單了。

這當中有一些天賦的因素，但是更多的是學習。

你可以從模仿別人的稿子開始，漸漸的融入自己的東西。

.cn/

這個站素材豐富而且也有酷站收藏。

要做好網頁設計，一定要多看，拼命的看並且吸收裏面的東西，看看高手們是怎麼處理細節的，這樣慢慢自然會有提高。

是否可以解決您的問題？