如何通過Photoshop四步打造HTML5網(wǎng)頁？

時間：2023-09-03 13:18:01 | 來源：網(wǎng)站運營

時間：2023-09-03 13:18:01 來源：網(wǎng)站運營

如何通過Photoshop四步打造HTML5網(wǎng)頁？：很多朋友肯定都是事先使用Adobe PhotoShop，Adobe Illustrator 等軟件設計一個網(wǎng)頁的界面的。這么做可以保持最大的自由度并且有充分的空間發(fā)揮，但是設計是設計，實踐就又是另一回事情了。通常把一個網(wǎng)站打造成和想象中的一樣是一件很難的事情，你需要精通CSS，并且你不很難做到一個快速的預覽，從而需要不斷刷新頁面并且調(diào)整相關參數(shù)。但是現(xiàn)在通過Adobe公司推出的最新版Adobe Photoshop CC2017， 你可以直接在PS上面做好網(wǎng)頁設計然后快速實現(xiàn)整個HTML文件的生成。

有兩種方法可以做到，第一種是依靠Extract，這個方法很簡單，上傳PSD到Adobe Creative Cloud的云端就可以，但是要求正版。各位手頭拮據(jù)的個人設計者就很難成功上傳文件，所以在這里不予介紹，敬請諒解。第二種呢就是今天要講的，通過Adobe Photoshop的黑科技：復制CSS。

（第一次見到這個功能，我是十分驚訝的）

現(xiàn)在我就開始切入正題，通過我目前個人正在開發(fā)的一個學校項目為大家講解如何實現(xiàn)通過Adobe Photoshop生成網(wǎng)頁。

第一步：設計好你的網(wǎng)頁

打開Adobe Photoshop CC2017，新建，選擇Web，選擇你需要的格式，新建。這里需要強調(diào)的是，請務必不要使用這個對于PS新手來說最喜歡的東西：柵格化圖層（Rasterize Layer），雖然方便，但是對于CSS代碼來說，柵格化的圖層是不可以讀取出來參數(shù)的。然后請盡量使用分組（Group）來歸類每一個部件。

（請不要噴我的設計謝謝；））

如圖所示，大家設計好自己的網(wǎng)頁后開始進行分組歸類，不要柵格化，除非是背景圖片。另外要注意如果是中文版的PS請務必將所有的圖層改名為英文，CSS不支持中文名的變量（除了C++翻譯器易語言以外應該沒什么語言支持非英文的變量名字吧）。

第二步：復制CSS，接下來在Canvas1或者畫板1（如果寫著畫板1請一定要改成英文）上面右鍵，然后選擇復制CSS，過一會兒你的CSS就復制好啦（除非是像我的一樣有很多部件的，其他的應該都復制得很快的，基本是秒復制）！

第三部：創(chuàng)建CSS列表

打開任意前端編輯器（推薦Sublime編寫js，這里使用DreamWeaver方便進行CSS和Html的調(diào)試），新建CSS文檔，然后按下Ctrl+V，一長串代碼就出來啦！是不是很黑科技呢！

（一般報錯了沒事的，CSS是一種標簽語言，寬容度很高，HTML同理）

第四步：應用CSS

新建一個HTML文檔，然后新建任意部件。拿我的網(wǎng)頁打個比方，我在PS里面設計了一個菜單欄，菜單欄屬于一個Div層（Div相當于HTML里面的圖層），所以我新建一個Div，然后讓class鏈接到我的菜單欄CSS代碼。

<div class = "Rectangle1"><button class = "MenuButtonRec" OnClick = "A()"><button><p class = "HomeButtonText" OnClick = "A()"><button></div>以上的代碼的意思是，我新建了一個Div層，然后連接到了PS里面的菜單欄，接著在里面放了一個按鈕和按鈕上的文字，同樣鏈接給了相應的PS里的部件。通俗地說就是我先畫了一個菜單欄，然后把按鈕和按鈕的字都畫上去。注意這里，最好給一個組的部件都統(tǒng)一新建一個Div放在Div里面，這樣子可以方便管理，個人認為一個好的程序員是非常講究代碼美觀的。

圖片中可以看到運行網(wǎng)頁后的效果。

通過以上四步就可以快速建立一個和想象中差不多的網(wǎng)頁，接下來放上我自己做出來的成品。

（請無視旁邊的畫風突變的下拉框，那個是我從網(wǎng)上找到套上去測試的嘿嘿嘿）

我們可以看到網(wǎng)頁在Chrome里面運行的狀態(tài)十分良好，接下來是PS里面的設計圖。

幾乎是一模一樣的。


好啦教程到這里就結(jié)束了，希望大家喜歡！