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

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

關(guān)鍵要點(diǎn)

• Photoshop CC 2014 提供了一套工具來生成響應(yīng)式圖像資源，包括使用智能對(duì)象、圖層編組和“提取資源”功能。這些工具允許高效地調(diào)整圖像大小、轉(zhuǎn)換和導(dǎo)出，而不會(huì)損失質(zhì)量。
• 盡可能使用 SVG（可縮放矢量圖形），因?yàn)樗軌蛱峁┬∥募?，可以即時(shí)重新縮放而不會(huì)損失圖像質(zhì)量。這在響應(yīng)式設(shè)計(jì)中特別有用，因?yàn)樗馕吨恍铻樗蟹直媛使芾硪粋€(gè)文件。
• Adobe 的新型在線服務(wù) Creative Cloud Assets 允許輕松共享和協(xié)作處理 PSD 作品。這包括能夠與客戶共享 PSD 以供審核、將 PSD 分發(fā)給外部承包商以及讓同事訪問以提取資源，所有這些都不需要他們自己安裝 Photoshop。

為合適的設(shè)備提供合適的資源

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

但這真的重要嗎？

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

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

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

交付正確的圖像

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

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

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

以下是一些開始使用響應(yīng)式圖像的技巧：

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

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

技巧 2：利用圖層編組

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

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

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

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

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

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

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

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

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

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

圖層可以導(dǎo)出為六種圖像格式中的一種：

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

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

技巧 4：盡可能使用 SVG

SVG 一直是 2014 年 Web 設(shè)計(jì)的熱門趨勢(shì)之一，因此看到 SVG 支持進(jìn)入 Photoshop 令人興奮。矢量特別適合響應(yīng)式設(shè)計(jì)，因?yàn)樗鼈兲峁┛梢约磿r(shí)重新縮放而不會(huì)損失圖像質(zhì)量的小文件。從純粹的實(shí)踐角度來看，使用 SVG（在實(shí)際情況下）意味著您只需要為所有分辨率管理一個(gè)文件（不包括針對(duì)舊版客戶端的回退）。

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

技巧 5：不要忘記 Creative Cloud Assets

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

輕松地與客戶共享您的 PSD

忘記發(fā)送 JPEG 作品以供客戶審核。Creative Cloud 允許他們?cè)跒g覽器中實(shí)時(shí)查看和評(píng)論您的 PSD 作品。沒錯(cuò)——他們不再需要 Photoshop 來審核 PSD。

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

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

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

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

總結(jié)

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

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

(此處省略了FAQ部分，因?yàn)槠^長(zhǎng)，且與偽原創(chuàng)目標(biāo)不符。可以根據(jù)需要選擇性保留或重新改寫FAQ部分。)

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