1.2 軟件必備知識

1.2.1 了解Photoshop

? 為何首選Photoshop設計網頁界面

設計網頁界面的工具多樣，如Sketch、Photoshop、Illustrator、InDesign等，還有類似Wix的線上平臺。那么對于網頁設計，到底什么樣的工具更高效、更有優勢呢？筆者推薦Photoshop，那么就讓我們一起來了解為什么這款軟件能脫穎而出。

第1點：與前后端開發人員更好地協作（重中之重）。如圖1-1~圖1-4所示，從軟件界面中可以清晰地看到各種參數。

第2點：不需要編寫代碼即可設計網頁效果和概念圖。

第3點：能夠快速導出網頁所需要的資源和素材。

第4點：適配不同設備的屏幕尺寸，如圖1-5所示。

第5點：方便展示不同的Web改編版本，如圖1-6所示。

第6點：基本的原型準備，如圖1-7所示。

第7點：能夠通過視覺傳達直觀地獲得用戶反饋，找出設計缺陷，展示設計效果。

第8點：能夠更方便地處理網頁所需要的圖片、圖標、特效和字體。

第9點：代表了一種新的工作流程的升級和演變。

? Photoshop CC版本的優勢

有的人比較懶，或者不想接受新事物，不想學習新功能，甚至很多年過去了還在使用老版本的Photoshop，但是每一款軟件升級都會有它的必然趨勢和優勢。作為一名設計師，我們不能將“趨勢”丟于千里之外，軟件趨勢、市場趨勢、設計趨勢、技巧趨勢，這些都是需要我們發現并接受的。使用高版本的Photoshop，不僅僅能夠提高我們的工作質量和效率，還能夠改善我們的思維方式，養成好的設計習慣。下面，我們來看看較高版本Photoshop的一些容易被忽略的技巧。圖1-8所示為Photoshop CC 2017的初始界面。

第1點：支持不同設備分辨率選擇，提高準確性，如圖1-9所示。

第2點：支持字體收藏選項，極大地提高設計效率，如圖1-10所示。

第3點：更加穩定地支持矢量圖svg格式直接導出，如圖1-11所示。

第4點：默認附帶更強大的參考線網格系統，避免出現新版本軟件不支持常用網格插件的問題，如圖1-12所示。

第5點：可以智能識別并匹配圖片字體，如圖1-13所示。

第6點：可以建立多個畫板，簡化設計過程，加強對比，如圖1-14所示。

? 需要熟悉并掌握的Photoshop CC工具和技巧

以下列出了學習本書所必須掌握的Photoshop基本功能和常用的一些工具，就不做截圖介紹了，大家很容易通過其他渠道找到和學習這些基本功能，本書只是點到為止。希望基本功不夠扎實的讀者按照下面列出的內容進一步學習。

· 熟悉Photoshop面板，以及菜單欄、屬性欄、工具欄的位置和名稱。

· 熟練使用形狀工具。

· 熟練使用顏色填充、選區工具。

· 熟練使用鋼筆工具。

· 熟練使用圖層、圖層選項和圖層的混合屬性。

· 熟悉圖層疊加模式。

· 熟練使用蒙版和調節層。

· 學會使用參考線和參考線網格。

· 熟悉Web圖片格式的輸出。

· 熟悉壓縮PNG圖片的方法（Mac：ImageAlpha；Windows：PNGoo）。

· 熟悉文本工具及其屬性，包括字符樣式、段落樣式的使用。

· 熟悉字體屬性面板。

· 熟悉對齊工具的使用方法。

· 熟悉色板的新建和使用。

· 熟悉自定義填充形狀的使用。

· 熟悉基本的畫筆工具的調節和使用。

· 熟悉基本的飽和度、色階的調節。

· 熟悉快速選擇當前圖層的技巧。

· 熟練使用快速切換文本工具大小寫的快捷鍵（【Ctrl+Shift+K】鍵）。

· 熟悉其他常用快捷鍵，學會自定義快捷鍵、自定義工作面板，提高設計效率。

1.2.2 切圖技巧

Dreamweaver一直受開發者青睞，它具有非常強大的功能和擴展性，給前端和后端開發人員提供了很多便利。我們創作設計稿，都需要考慮如何與Dreamweaver協作，如何切圖以供Dreamweaver使用。這部分我們將分別講解Photoshop和Dreamweaver兩個軟件的切圖技巧。

? 使用Photoshop高效切圖

網頁界面，單獨來看它是不具備商業價值的。任何網頁都是需要瀏覽器或其他設備來供用戶瀏覽和使用的，因此UI設計師應該時刻考慮與前端的協作問題，考慮設計是否適合切圖、是否利于開發和擴展、是否適合響應式。

網頁設計發展很迅速，各種各樣的高端技術都可以運用到網頁設計上，那么響應式設計自然是一個最基本的、必須滿足的設計需求。現在無論設計哪種Web界面，都必須考慮不同設備不同分辨率的效果和兼容性，只顧PC的時代已經過去。但是，在項目中為所有圖像創建眾多不同的分辨率版本可能會是一項艱巨的任務。筆者根據自己的經驗，列出了一些PSD文件與Dreamweaver協作的處理方式。

本書中講解Dreamweaver的協作，是希望能夠擴展大家的思維，能夠幫助大家更好地運用Photoshop設計實用的界面，而不單純只是設計一個漂亮的界面。當然，這并不是要求大家一定要會使用Dreamweaver，或者一定要學習編碼。以下列舉的幾個方面，是筆者認為比較高效、準確性高的切圖方式。以前我們可能會使用Photoshop自帶的“切片”工具，但是其實我們需要更有針對性地進行切圖。建議將以下示例中的所有重要數值整理成一個txt或word文檔，以便更好地讓開發者參照。

01 選中當前圖層，單擊鼠標右鍵，選擇【快速導出為PNG】或【導出為】菜單項，單獨導出圖像，常用JPG、PNG、SVG格式，如圖1-15所示。

02 使用【標尺工具】精確測量需要用到的尺寸，記錄數值，如圖1-16所示。

03 使用【吸管工具】取色，并記錄色彩值（必要時應該記錄RGB值），如圖1-17所示。

04 選中當前圖層，單擊鼠標右鍵復制CSS樣式，然后粘貼于文本框中，記錄圖1-18所示的數值，供前端開發人員使用。如果你不太清楚記錄哪些數值，可以直接將代碼記錄下來提供給開發者參照。

? 使用Dreamweaver高效切圖

前面我們使用的是Photoshop軟件來獲取切圖信息，以下我們將使用Dreamweaver來獲取PSD文件的信息。前提是我們需要將PSD文件上傳到CC庫中。由于我國的網速不一定能夠滿足每一個設計師，可能存在上傳錯誤或無法上傳的問題，但是使用Dreamveaver快速讀取PSD信息的方法，還是值得大家學習了解的。

01 從菜單欄的【窗口】中打開Dreamweaver的【Extract】（提取）面板，我們可以看到官方默認的PSD演示，如圖1-19和圖1-20所示。

02 定位到PSD文件的圖層，可以看到詳細的數值信息，如圖1-21所示，這些信息都可提供給前端開發人員使用。

03 上傳PSD文件后即可使用提取功能，如圖1-22所示。

1.2.3 文檔標注技巧

在文件交接過程中，我們通常需要對設計圖進行標注，配合我們的切圖來幫助前端開發人員完成工作。每一個界面設計師都希望成品網站能夠高度還原自己的效果圖，但是往往事實并不是如此。理想很豐滿，現實很骨感，這就要求設計師和開發者有更好的協作能力。

對于標注，如果單純使用Photoshop，效率會比較低，而且很不方便。我們可以使用一些第三方軟件或云平臺幫助設計師進行標注。筆者推薦Assistor PS這款第三方應用，它能夠兼容最新版本（CC2017）的Photoshop，而且效率極高，對于一個熱衷于Photoshop的設計師來說，是最好不過的選擇。Assistor PS擁有多種功能，這里我們只需要掌握它的標注功能即可，其他功能一般是直接使用Photoshop來完成。

01 首先下載并安裝Assistor PS，然后打開Photoshop軟件，如果成功兼容，可以看到操作面板，如圖1-23所示。

02 選中一個或多個要標注的圖層或文件夾，用鼠標左鍵單擊【Size】按鈕，即可標注對象的尺寸，如圖1-24所示。

03 選中要標注的圖層或文件夾，用鼠標左鍵單擊【Spacing】按鈕，即可標注對象到畫布邊緣之間的距離，如圖1-25所示。

04 選中要標注的文字圖層，用鼠標左鍵單擊【Type info】按鈕，即可標注文字的詳細屬性，如圖1-26所示。

這里還介紹一種筆者自己的標注方法——使用燈箱效果來標注圖片，這種標注方法也很簡單，直接使用Photoshop的線條和文字工具即可，如圖1-27所示。它有以下幾個優勢。

· 此方法適合多種人群瀏覽，適合與客戶溝通，適合與開發者協作。

· 不影響原效果圖美觀。

· 可以添加交互文字、說明等，擴展性強。

· 可以用于對比不同版本的文檔標注。

· 配合Assistor PS標注自動生成的圖層，可以更好地標注你的設計。

學習到這里，你已經邁出了重要的一步，雖然第1章更多的是引導，但是你有沒有發現，其實你已經學會了不少Web設計技巧，學會了新的思維方式和工作流程。是不是很令人開心？

基本功扎實了，你還有什么理由不繼續學習？別急，本章還有幾個知識點，對你在學習后面的核心內容的自我定位，以及對網頁設計的目標定位有很大的幫助。前面的內容是基本功預熱，那本章剩下的內容就是思想預熱。