高效利用Photoshop CC 2014創(chuàng)建響應式圖片資源

本文由Adobe贊助。感謝您對SitePoint的支持！

關(guān)鍵要點

• Photoshop CC 2014 提供了一套工具來生成響應式圖像資源，包括使用智能對象、圖層編組和“提取資源”功能。這些工具允許高效地調(diào)整圖像大小、轉(zhuǎn)換和導出，而不會損失質(zhì)量。
• 盡可能使用 SVG（可縮放矢量圖形），因為它能夠提供小文件，可以即時重新縮放而不會損失圖像質(zhì)量。這在響應式設計中特別有用，因為它意味著只需為所有分辨率管理一個文件。
• Adobe 的新型在線服務 Creative Cloud Assets 允許輕松共享和協(xié)作處理 PSD 作品。這包括能夠與客戶共享 PSD 以供審核、將 PSD 分發(fā)給外部承包商以及讓同事訪問以提取資源，所有這些都不需要他們自己安裝 Photoshop。

為合適的設備提供合適的資源

五年前，網(wǎng)絡是一個更可預測的地方，不是嗎？作為 Web 開發(fā)人員，我們可以合理地預期 Web 瀏覽器的寬度不小于 640 像素，不超過 1240 像素——就好像我們的“互聯(lián)網(wǎng)高速公路”只通行轎車一樣。我們目前的現(xiàn)實情況卻大相徑庭。如今，移動用戶通常占我們流量的一半以上。事實是，在 2014 年，“我們的高速公路”上的摩托車和轎車以及卡車一樣多。那么，為什么我們?nèi)匀粚⑾嗤摹凹彝コ叽纭眻D像加載到所有這些截然不同的設備上呢？

但這真的重要嗎？

上個月，Tammy Everts 發(fā)布了一些關(guān)于網(wǎng)站性能對用戶行為影響的令人警醒的數(shù)據(jù)。其中包括：

1. 緩慢的網(wǎng)頁每年會導致超過 30 億美元的銷售損失
2. 44% 的購物者將緩慢的性能解釋為“出現(xiàn)錯誤”
3. 交易過程中延遲 2 秒 = 87% 的購物車放棄率

Tammy 的數(shù)據(jù)告訴我們，向小型設備發(fā)送緩慢的、家庭尺寸的圖像不僅是不禮貌的——實際上還會讓我們損失客戶和金錢。通過根據(jù)每個設備的限制調(diào)整圖像，我們可以更快地交付頁面，同時節(jié)省帶寬成本——對每個人來說都是雙贏的。

交付正確的圖像

已經(jīng)有一些成熟的方法可以將自適應圖像內(nèi)容交付到設備。目前最好的選擇是：

• adaptive-images.com：Matt Wilcox 的解決方案是許多開發(fā)人員當前最喜歡的方案。它是與設備無關(guān)的，并且是移動優(yōu)先的，盡管它通常需要一些 Apache 和 PHP 設置知識。
• Squeezr.it：Squeezr 的靈感很大程度上來自 adaptive-images，但更傾向于使用客戶端策略來確定和響應斷點。

不用擔心：這些都是極好的解決方案，但我們今天不會關(guān)注它們。相反，我想看看問題的另一部分：圖像資源。我們?nèi)绾紊伤羞@些不同的圖像資源？Adobe 對這個問題進行了大量的思考，這在 Photoshop CC 2014 中得到了體現(xiàn)。它提供了一套工具——有些是新的，有些是舊的——旨在提供幫助。

以下是一些開始使用響應式圖像的技巧：

技巧 1：將所有圖像嵌入為智能對象

智能對象并不是什么新鮮事物——它們自 2005 年以來就存在于 Photoshop 中——但它們已成為響應式設計中的核心工具。即使在我們對它們應用了破壞性轉(zhuǎn)換之后，智能對象也會始終保留與其原始圖像狀態(tài)的引用鏈接。例如，在大多數(shù)情況下，多次重新縮放圖像會在每次迭代時降低圖像質(zhì)量。但是，智能對象會將每個新的轉(zhuǎn)換應用于原始圖像狀態(tài)，而不會損失圖像質(zhì)量。這使得將您的所有高分辨率圖像資源（頭像、背景、照片等）轉(zhuǎn)換為智能對象幾乎成為一種必然的選擇，允許您調(diào)整大小、旋轉(zhuǎn)、轉(zhuǎn)換和重新定位它們而無需擔心。將任何圖層轉(zhuǎn)換為智能對象就像右鍵單擊它并選擇“轉(zhuǎn)換為智能對象”一樣簡單。

技巧 2：利用圖層編組

在響應式設計的時代，“布局”已成為“布局”。我們需要一種方法來管理相同頁面元素在兩個、三個或更多位置和大小中的位置。

這就是“圖層編組”的設計目的。將每個新的“圖層編組”視為在特定時間點圖層面板的“快照”。然后，您可以隨時單擊圖層編組面板中的單個按鈕返回該快照狀態(tài)。

在實踐中，這通常意味著構(gòu)建移動布局（移動優(yōu)先），然后將其捕獲為新的圖層編組。然后，您可以開始為平板電腦重新設計布局，并再次將其捕獲到另一個圖層編組中。

圖層編組面板允許您單擊即可立即在任何這些狀態(tài)之間切換。圖層編組減少了圖層面板中的重復，并簡化了整個項目文件。

技巧 3：忘記“存儲為 Web...”——使用“提取資源”

我必須承認，我一直很喜歡 Fireworks 的圖像導出面板。Photoshop 將 Image Ready 作為單獨的應用程序，以及它自己的內(nèi)置“存儲為 Web”功能，但對我來說，兩者都不如 Fireworks 簡單、強大或快速。

Photoshop CC 2014 采用了一種全新的、改進的圖像導出方法——新的“提取資源”功能。讓我們仔細看看。

“提取資源”面板將定位您在圖層面板中選擇的任何圖層。理論上，這可以是單個圖層、所有圖層或兩者之間的任何組合。您可以從兩個地方啟動此新面板：

1. 通過右鍵單擊任何圖層/圖層并選擇“提取資源”
2. 或從“文件”菜單中選擇“提取資源”

讓我們來看看新的“提取資源”面板。

圖層可以導出為六種圖像格式中的一種：

1. PNG8
2. PNG24
3. PNG32
4. JPG
5. GIF
6. SVG（是的，稍后會詳細介紹）

您還可以選擇同時生成多達八種不同分辨率的圖像——范圍從 25% 到 400%。Photoshop 還使您可以輕松地自動為每個文件名添加前綴并導出到合理的文件夾名稱。您甚至可以將其設置為在您更新原始文檔時自動重新生成整個文件集。不難看出這可以節(jié)省多少時間。請注意，如果您對當前的工作流程感到滿意，則仍然可以使用經(jīng)典的“存儲為 Web”選項。但是，我懷疑大多數(shù)人都會看到新功能的強大功能和靈活性。

技巧 4：盡可能使用 SVG

SVG 一直是 2014 年 Web 設計的熱門趨勢之一，因此看到 SVG 支持進入 Photoshop 令人興奮。矢量特別適合響應式設計，因為它們提供可以即時重新縮放而不會損失圖像質(zhì)量的小文件。從純粹的實踐角度來看，使用 SVG（在實際情況下）意味著您只需要為所有分辨率管理一個文件（不包括針對舊版客戶端的回退）。

盡管 Photoshop 允許您將任何圖層/圖層導出為 SVG，但基于像素的圖像元素不太可能提供良好的結(jié)果。任何基于路徑的圖形（包括徽標、圖標、蒙版和其他形狀）都可能是 SVG 導出的理想候選對象。

技巧 5：不要忘記 Creative Cloud Assets

使用 PSD 的新附加好處之一是 Adobe 的新型在線服務。將您的 PSD 作品同步到 Creative Cloud 可以解鎖一系列方便的技巧。我在上一篇文章中更詳細地介紹了這一點，但要點是：

輕松地與客戶共享您的 PSD

忘記發(fā)送 JPEG 作品以供客戶審核。Creative Cloud 允許他們在瀏覽器中實時查看和評論您的 PSD 作品。沒錯——他們不再需要 Photoshop 來審核 PSD。

將 PSD 分發(fā)給外部承包商

外部承包商可以直接使用最新版本的資源，直接使用瀏覽器導出資源。

為同事提供提取資源的訪問權(quán)限

您現(xiàn)在有了一種簡單的方法可以與您的團隊共享版本管理的 PSD。他們甚至可以從您的 PSD 中提取 CSS、圖像和其他資源，而無需安裝他們自己的 Photoshop。這項服務可供任何擁有免費 Adobe 帳戶的人使用。

總結(jié)

生物多樣性是一件好事！我們的瀏覽器生態(tài)系統(tǒng)——手機、平板電腦、筆記本電腦、臺式機，甚至電視——豐富多樣，并且在未來幾年只會更加多樣化。這使得我們的工作既更難也更有趣。響應式 Web 設計教會我們，“頁面”實際上已成為“頁面系列”——父頁面、母頁面和一些子頁面。出于同樣的原因，“圖像”也已成為“圖像系列”。Photoshop CC 2014 現(xiàn)在提供了一種相對輕松快捷的工作流程來生成這些“圖像系列”。試試看。

Photoshop 和 CSS 中響應式圖像資源的常見問題解答 (FAQ)

(此處省略了FAQ部分，因為篇幅過長，且與偽原創(chuàng)目標不符?？梢愿鶕?jù)需要選擇性保留或重新改寫FAQ部分。)

以上是使用Photoshop CC 2014生成響應式圖像資產(chǎn)的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！