響應式網頁設計的 Photoshop 禮儀

Photoshop Etiquette 推出已經快五年了，它正式成為網絡上的遺物。 幾年之內，網絡上會發生很多事情，而過去的五年比大多數人都更好地說明了這一點。

2011 年，每個人都剛剛開始接觸響應式網頁設計。 傳統的 comp-to-HTML 工作流程才剛剛開始受到批評，從那時起，我們已經看到了無數的替代方案。 樣式瓷磚、樣式原型、視覺清單、元素拼貼、樣式指南，甚至在瀏覽器中進行設計都是適合多設備設計的方法。 從基於頁面的設計轉變為構建設計系統，這確實是一個激動人心的時刻。

關於 SmashingMag 的進一步閱讀：

• 在 Photoshop 中為 Retina 設計
• Photoshop 中的高級動畫
• Photoshop 視網膜資產工作流程
• 響應式圖像斷點生成器

嘗試使響應式工作流程更高效的工具也出現了爆炸式增長。 Webflow 和 Macaw 等應用程序使斷點可視化對於代碼厭惡者來說是易於理解的。 許多設計師已經從 Photoshop 作為他們的主力轉向 Sketch、Affinity Designer 或類似產品。 其他人則採用 Keynote 等應用程序進行原型設計。

“禮儀”仍然重要嗎？

有了我們可能熟悉的繁重 Photoshopping 的替代品，我們是否仍然需要禮儀是公平的。 就本文而言，我們將禮儀定義為以有組織、清晰和可識別的方式傳輸文件。 響應式設計通常帶有很多移動部分，來自@2x 圖像、串聯的 CSS 文件等等。 為了發佈網站似乎還有更多工作要做，如果我們想要盈利，那麼高效無疑是重中之重。

通常被掩蓋為效率、組織和溝通不暢是急於交付項目的產物。 隨著 Photoshop 在我們的工作流程中扮演不同的角色，圖層和導出的文件很容易成為偷工減料的目標。 事實仍然存在：任何值得做的事情都值得做好。

如果我們想節省時間，我們需要提前投入一些資金來保持條理清晰。 效率低下是從同事那裡繼承文件並花費寶貴的時間試圖找出從哪裡開始，因為它沒有明確標記。 它必須修復已經導出的圖像。 在最壞的情況下，它首先無法找到您需要的文件。

Photoshop 禮儀有什麼新變化？

位於紐約州錫拉丘茲的設計工作室 Adjacent 為 Photoshop Etiquette 重新塗上了一層油漆。 對於那些剛接觸這個概念的人來說，Photoshop 禮儀是一個最佳實踐指南，它通過網頁設計的清晰性來提高效率。 雖然是為 Photoshop 設計的，但其中許多原則適用於 Sketch 和類似的基於圖層的設計工具。

該指南分為以下幾個部分：

• 文件組織
• 層結構
• 資產導出
• 類型執行
• 效果應用
• 質量檢查

熟悉該網站的人會看到許多熟悉的指南，例如“命名您的圖層”和“準確命名文件”等典型技巧，每一個都試圖擺脫“圖層複製副本 5”和“客戶- final-v3.psd'，分別。 如果您深入挖掘，您會發現各種指南附帶的大量響應資源，以及針對多種設備進行設計的一些技巧。

1. 整合你的 PSD

如果您要為多個頁面製作多個合成，Photoshop 現在有可以幫助您堅持單個文檔的畫板。 這有助於消除關於哪個 PSD 是正確PSD 的混淆。

2. 協同工作

通過添加 Creative Cloud Libraries 和 Linked Smart Objects，設計師可以非常輕鬆地共享資源。 例如，如果您在 Photoshop 中創建圖案或組件指南，則一位設計師可能正在處理一個組件，而另一位設計師同時處理另一個組件。 這些組件可以在庫中共享，或者作為被拉入主 PSD 的鏈接智能對象。

3. 不要為設備設計

這可以說是有爭議的，但如果響應式設計是關於擁抱所有設備，也許我們不應該使用流行的 Apple 設備預設作為 Photoshop 中的文檔大小。 相反，讓您的設計因為佈局壓力而決定斷點，無論它落在哪裡。 例外情況是，如果您正在設計特定於設備或平台的應用程序，那麼定位此類預設會很有幫助。

4. 非破壞性

隨著對 SVG 的實施和支持的不斷增加，設計師必須在 Photoshop 中維持矢量資產而不是將它們展平。 Photoshop 現在允許您保存 SVG，為我們提供了一個無損像素的理由。

5.注意屏幕分辨率

說到 SVG，它確實已成為一種很好的方法來服務於可以適應任何大小且不會失去保真度的資產。 擁有 Retina 資產工作流程，無論是 SVG 還是 @2x/@3x 圖像，都已成為響應式從業者工作流程的一部分。

6.壓縮

性能是一個有價值的事業，不僅對開發人員，對設計師也是如此。 我經常合理化，如果我想在我的項目中包含重型網絡字體及其 Open Type 功能，我需要通過積極壓縮我的圖像來彌補差異，以保持在性能預算之內。 TinyPNG 等第三方工具使圖像壓縮變得輕而易舉。

隨著我們的網頁設計工作流程和 Photoshop 的使用不斷變化，網站也將如此。 雖然它包含以 Photoshop 為中心的工作流程，但對於少用 Photoshop 的工作流程也有一些提示。 該指南僅主張，如果以及何時使用 Photoshop，請盡可能清楚地傳達您的意圖。

社區推動

Photoshop Etiquette 的主要關注點之一是成長，體現在更多的指導方針、更多的資源和更多的視角。 該網站添加了一項功能，可以更輕鬆地提交新指南以供審核，多年來，數百名設計師和開發人員通過在 Twitter 上跟踪我或尋找電子郵件地址來做到這一點。

在谷歌翻譯不准確之後，社區志願者也公開呼籲翻譯。

很高興看到 Photoshop Etiquette 如何引起如此多組織和個人的共鳴。 它如何幫助您和您的團隊？