教學：如何使用 Adobe Photoshop 佈局網頁

有各種各樣的工具可以設計網頁並以完全簡單和功能化的方式工作，而無需輸入或觸摸代碼。它們無數，由應用程序提出（Adobe Dreamweaver中 是一個示例），也可以直接通過在線平台（例如Wix）訪問。但是，對於Web設計人員而言，了解手動過程至關重要。 HTML5和CSS是網站和登陸頁面佈局的基本支柱。

但是，比您預期的更多，您將不得不轉向Indesign或 Adobe公司的Photoshop 來補充您的佈局工作並為他們提供完美的外觀。今天，我們將在這個詳盡的教程中看到如何使用Adobe Photoshop佈局網頁。在第一部分中，我們將繼續使用Photoshop進行開發，儘管在以後的文章中，我們將看到我們如何直接在HTML代碼中直接應用這項工作以使其正常運行。

從設計線框開始

首先，從網頁的佈局和設計開始，非常重要的一點是，我們首先定義基本要素，即基本要素。此結構將作為保存所有內容（文本或多媒體）的支持。通過定義構成頁面的每個部分，我們可以完全準確地對其進行處理，並提供盡可能準確的可視化設計。

非常重要的一點是，如果網站具有 盒裝或全角。裝箱的網頁將在一個小容器內，因此在其周圍將出現一個空格。相反，完整的網絡將佔據用於復制頁面的設備的整個屏幕。在一種模式或另一種模式之間進行選擇僅會回答樣式問題，這還取決於我們正在從事的項目的需求。在本示例中，我們將使用盒裝模式，因此它不會佔用瀏覽器提供的所有空間。

要創建線框，我們要做的第一件事是進入Adobe Photoshop應用程序，並包含我們希望頁面具有的尺寸。在此示例中，我們的頁面將為1280像素寬。但是，大小問題可能會有所不同，具體取決於最終目標或我們要在其上複製頁面的設備。毫無疑問，要使網站設計具有功能性和高效性，必須做到響應並且必須適應市場上的所有設備。但是，在這種情況下，我們將努力創建要在台式計算機上複製的原型。即使這樣，稍後也會討論響應性問題，目前，此示例中使用的是屏幕尺寸的層次結構。請記住，在這種情況下，我們將在Adobe Photoshop中對目標頁面進行佈局，然後將其遷移到HTML5和CSS3。這種小練習的目的是將在Photoshop中創建的設計轉換為可響應用戶移動的可用且交互式的網頁設計。

手機尺寸

iPhone 4和4S：320 x 480

iPhone 5和5S：320 x 568

iPhone 6：375 x 667

iPhone 6+：414 x 736

Nexus 4：384 x 598

Nexus 5：360 x 598

Galaxy S3，S4，S5：360 x 640

HTC One：360 x 640

平板電腦尺寸

iPad所有型號以及iPad Mini：1024 x 768

Galaxy Tab 2和3（7.0英寸）：600 x 1024

Galaxy Tab 2和3（10.1英寸）：800 x 1280

Nexus 7：603 x 966

Nexus 10：800 x 1280

Microsoft Surface W8 RT：768 x 1366

Microsoft Surface W8 Pro：720 x 1280

台式計算機的測量

小屏幕（例如用於上網本）：1024 x 600

中型螢幕：1280 x 720/1280 x 800

大屏幕：寬度大於1400像素，例如1400 x 900或1600 x 1200。

要開始在我們的網絡模型中分配元素並分配節，請務必考慮比例以確保可讀性和旋律效果非常重要。使用在頂部菜單“視圖”中找到的規則和指導選項至關重要。為了按比例準確地工作，最好是從百分比開始。我們將單擊視圖菜單，然後單擊“新指南”選項以選擇部門的形式。在這種情況下，我們將在25％處進行四個垂直分割，並將它們作為參考，以將我們的圖像放置在頁腳中，並將徽標的圖像放置在頁眉中。

有一個代碼來指定將佔用我們每個區域的代碼模型以及他們每個人將擁有的功能。例如，為了指示圖像將要佔據的區域，我們將創建帶有某種十字的矩形。為了表明我們要在特定區域添加視頻，我們將在容器內添加播放符號。在第一個示例中，我們僅處理圖像，在上方的截圖中，您可以看到 logotipo 從我們的網站。

這將是我們的最終結果線框。如我們所見，它被分為一個標題，該標題由圖像組成，在該圖像中將找到徽標，並且將用作首頁的鏈接，並帶有兩個選項卡，一個搜索引擎和搜索框上的四個按鈕。此外，我們已經在正文中添加了一個側邊欄，該側邊欄由分隔條和一系列類別組成，這些類別對將在我們網站上顯示的內容類型進行分類。帶有編號的另一部分包括將在我們的網站上存在的條目，最後是一個列表，其中包含我們網站上最具代表性的元標記。

在內容區域中，將由包含以下內容的部分定義 自我管理的內容，我們將找到文章的內容。在這種情況下，麵包屑或麵包屑（表示我們網站的有機結構，文章標題，元數據，作為文本主體的段落，其中包含圖像。

作為頁腳，我們包含了四個圖像，這些圖像將用作頁面其他區域的鏈接。在這裡，我們可以包括徽標或其他有趣的部分。儘管實際上，該區域將更像 前頁腳，因為頁腳本身將在使用政策，法律聲明和版權方面走得更遠。

定義頁面的基本結構或框架後，我們將進入下一個層次。這將包括我們網站每個區域的正確設計。換句話說，我們將開始使用最終將插入到我們網站中的內容來“填充”每個區域。建議不要在處理線框之前設計這些元素，因為很有可能如果我們以此順序進行操作，則稍後需要修改它們的比例。 我們冒著扭曲圖像的風險 並且必須重新設計每個元素的設計，這將浪費時間或降低質量。

在這種情況下，我們網站的設計將非常簡單。我們將使用 材料設計規範，因為我們將使用Google徽標來舉例說明這種做法。我必須澄清，本教程的目的是說明技術知識，因此在這種情況下，美學效果是無關緊要的。如您所見，我們已經逐漸用我們先前在方案中確定的所有區域填充了空間。但是，我們在最後一分鐘做了一些小的修改。您可能已經註意到，我們已經大大減小了徽標的大小，並且在下部標題區域中包含了一條分隔線，該分隔線與上部菜單完美連接。在這種情況下，我們使用了資源庫中的按鈕和材料。作為設計師，我們可以自己設計（特別是如果我們希望它呈現與品牌形像或徽標所呈現的非常相似的滋補品，則建議使用此選項）。

重要的是，我們要牢記要為這個示例進行佈局，我們將在兩個不同的層次上進行工作。一方面，我們將處理對象，另一方面，將對網站的外觀進行處理。也就是說，一方面是我們網站的框架，另一方面是 該骨架將支持的浮動元素。您會注意到有些區域根本不會浮動，例如我們的側邊欄將佔據的區域，前頁腳或將頁眉與正文分開的分隔條。

結構1、2、3和4將成為該結構的一部分背景網頁，因此實際上我們沒有必要從Adobe Photoshop中進行導出，儘管我們可以做到，但沒有必要。到那個時刻 平面顏色 （平面設計和材料設計的基本功能之一，可以使用CSS樣式表通過代碼完美地應用它們）。但是，必須保存其餘元素，以便以後插入我們的HTML代碼中。在這個小圖中，我們還復制了屬於頁面背景的區域，以便我們對網站的最終外觀有一個清晰的了解。

正如您將認識到的那樣，在Adobe Photoshop中創建此方案的意義是獲得每個元素的實際尺寸，並弄清每個元素的排列和結構。當然，文本內容在該過程的這個階段沒有位置，因為它必須 由我們的代碼編輯器提供。我們還必須指出，在這種實踐中，我們將使用按鈕和靜態元素，儘管通常它們通常是從Bootstrap等框架或直接從Jquery應用的。

一旦創建了構成網頁的每個元素，就可以開始導出它們並將其保存在HTML項目文件夾中的images文件夾中了。習慣於從線框中導出非常重要，因為很有可能需要根據骨架配置修改一些原始元素。（例如，在這種情況下，我們更改了原始按鈕，徽標和組成內容的大部分元素的大小，包括下部區域的圖像）。

重要的是，我們學會獨立保存任何項目，以精確的方式保存它們的尺寸。任何錯誤（無論多麼微小）都會影響網頁中的所有元素。請記住，它們將相互關聯並且必須具有完美的尺寸，以便可以在最終Web中從HTML輸入它們。在這種情況下，我們將需要獨立剪切並保存以下元素：

我們的徽標。
所有按鈕（那些是主菜單的一部分，其餘部分）。
所有圖像。

我們可以通過多種方式做到這一點，也許您會找到對您更有效的替代方法。但是，如果這是您第一次進行這種佈局，則建議您遵循以下提示。

首先，您必須轉到包含我們線框的PSD文件所在的文件夾，並將其複制與要導出的元素一樣多的次數。在這種情況下，我們已經從原始文檔創建了12個副本，並將它們保存在同一文件夾中。接下來，您將重命名每個副本，並為每個副本分配其包含的元素的名稱。我們的12個副本將被重命名：徽標，菜單按鈕1，菜單按鈕2，搜索欄，上按鈕1，上按鈕2，上按鈕3和上按鈕4。其餘四個將重命名為：圖像1，圖像2，圖3和圖4。
完成此操作後，我們將打開帶有徽標名稱的文件。
我們將轉到圖層面板，找到包含徽標的圖層。然後我們按 Ctrl / Cmd 當我們點擊該圖層的縮略圖時這樣，徽標將被自動選擇。
下一步將告訴Photoshop，我們希望它以精確的方式裁剪出該徽標。為此，我們只需要從鍵或命令調用裁剪工具 C.
完成此操作後，我們將單擊“輸入”按鈕以確認切割。
現在，我們將轉到頂部的“文件”菜單，單擊“保存方式”。我們將選擇名稱，在本例中為“ Logo”，我們將分配格式 巴布亞新幾內亞，因為它是網絡上提供最高質量的文件。
我們將對所有副本和元素重複此過程。修剪後，請確保調色板中的其餘各層無形或被淘汰。這樣，我們可以使用透明背景保存每個元素。