PhotoshopWeb：Web圖像的輸出設(shè)置，簡單

PhotoshopWeb：Web圖像的輸出設(shè)置，簡單且實用，進(jìn)來學(xué)習(xí)吧

eb圖像的輸出設(shè)置

在Photoshop中，優(yōu)化Web圖像后，在“存儲為Web所有格式”對話框中，點擊“優(yōu)化”擴展按鈕，在展開的下拉菜單中選擇“編輯輸出設(shè)置”命令。如圖所示：

打開“編輯輸出設(shè)置”對話框，在對話框中可以控制如何設(shè)置HTML文件的格式、如何命名文件和切片，以及在存儲優(yōu)化圖像時如何處理背景圖像。如圖所示：

增加內(nèi)容：Web圖像可以是位圖，也可以使矢量圖。位圖的格式如GIF、JPEG、PNG等都與分辨率有關(guān)，這就意味著位圖圖像的尺寸隨著顯示器分辨率的不同而發(fā)生著變化，圖像的品質(zhì)也可能會發(fā)生變化。矢量圖格式SVG、SWF與分辨率沒有關(guān)系，大家可以對圖像進(jìn)行放大或者是縮小，并且不會降低圖像的品質(zhì)。矢量格式也可以包含柵格數(shù)據(jù)，可以使用“存儲問Web所用格式”命令將圖像導(dǎo)出為SVG和SWF格式。

建議大家集合之前小編分享的內(nèi)容一起來學(xué)習(xí)Photoshop，在操作過程中遇到問題可在留言區(qū)進(jìn)行留言，小編會盡快進(jìn)行回復(fù)。

單擊上方的關(guān)注按鈕關(guān)注小編，一起來學(xué)習(xí)PS吧！

載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

通過WebAssembly + Emscripten、Web Components + Lit、Service Workers + Workbox以及對新的Web API的支持，Chrome和Adobe之間的合作使得將Photoshop桌面應(yīng)用程序引入Web成為了一項重大的里程碑。現(xiàn)在，您可以在瀏覽器上使用高度復(fù)雜和圖形密集的軟件，只需訪問photoshop.adobe.com。這一成就得益于Adobe工程師多年來的不懈努力，以及與Chrome等瀏覽器供應(yīng)商緊密合作，共同推動了Web技術(shù)的發(fā)展。

愿景：在瀏覽器中使用Photoshop

多年來，Photoshop一直是圖像編輯和平面設(shè)計的頂級工具，為創(chuàng)意工作者在Windows和macOS上提供了無限的創(chuàng)作可能性。然而，如今我們有機會讓它擺脫桌面的束縛，打開嶄新的大門。

在互聯(lián)網(wǎng)的幫助下，我們可以實現(xiàn)隨時隨地、輕松編輯和協(xié)作的愿景。用戶只需打開瀏覽器，就可以立即開始編輯，不再需要繁瑣的軟件安裝。而且，他們可以在不同的設(shè)備之間毫不費力地切換。

連接性是關(guān)鍵，它讓我們能夠分享工作流程。現(xiàn)在，Photoshop文檔可以通過簡單的URL鏈接進(jìn)行訪問，而不再埋藏在復(fù)雜的文件系統(tǒng)中。這使創(chuàng)作者可以輕松地與合作者共享他們的作品。

最令人興奮的是，這種新方式也跨越了平臺的邊界。通過網(wǎng)絡(luò)運行，我們可以讓Photoshop適應(yīng)多種操作系統(tǒng)，讓更多的用戶能夠輕松訪問它。

然而，要實現(xiàn)這一愿景，我們需要克服重大的技術(shù)挑戰(zhàn)，重新思考如何讓像Photoshop這樣強大的應(yīng)用程序在互聯(lián)網(wǎng)上運行。

但是實現(xiàn)這一愿景面臨著重大的技術(shù)挑戰(zhàn)，需要重新思考像Photoshop這樣強大的應(yīng)用程序如何在網(wǎng)絡(luò)上運行。

新的Web功能釋放了Photoshop的潛力

近年來，出現(xiàn)了一些能夠通過標(biāo)準(zhǔn)化和實施來實現(xiàn)類似于Photoshop的應(yīng)用程序的Web平臺功能。Adobe工程師創(chuàng)新地充分利用了幾個關(guān)鍵的下一代API：

高性能本地文件訪問與源私有文件系統(tǒng)（OPFS技術(shù)）

在Photoshop中，我們經(jīng)常需要讀寫可能非常大的PSD文件。這要求對本地文件系統(tǒng)進(jìn)行高效的訪問。新的Origin私有文件系統(tǒng)API（OPFS）為我們提供了一個快速的、特定于Origin的虛擬文件系統(tǒng)，使我們能夠更輕松地處理這些文件。

const opfsRoot=await navigator.storage.getDirectory();

OPFS 可以快速創(chuàng)建、讀取、寫入和刪除文件。例如：

// Create file
const file=await opfsRoot.getFileHandle('image.psd', {create: true}); 

// Get read/write handle 
const handle=await file.createSyncAccessHandle();

// Write contents  
handle.write(buffer); 

// Read contents
handle.read(buffer);

// Delete file
await file.remove();

要實現(xiàn)絕對最快的同步操作，Web Workers可以發(fā)揮關(guān)鍵作用。

這個本地高性能文件系統(tǒng)對于在瀏覽器中實現(xiàn)復(fù)雜的Photoshop文件工作流程至關(guān)重要。它為我們提供了在瀏覽器中高效處理文件的關(guān)鍵支持。

釋放WebAssembly的力量

WebAssembly在JavaScript中的重新實現(xiàn)已成為Photoshop計算密集型圖形處理的關(guān)鍵組成部分。Adobe借助Emscripten編譯器，將現(xiàn)有的C/C++代碼庫移植到WebAssembly模塊中。

以下是幾個WebAssembly的重要功能：

線程（Threads） - Photoshop使用工作線程來并行執(zhí)行任務(wù)，如處理圖像塊。

// Thread function
void* tileProcessor(void* data) {
  // Process image tile data 
  return NULL;
}

// Start worker threads 
pthread_t thread1, thread2;
pthread_create(&thread1, NULL, tileProcessor, NULL);
pthread_create(&thread2, NULL, tileProcessor, NULL);

// Wait for threads to finish
pthread_join(thread1, NULL);
pthread_join(thread2, NULL);

SIMD - SIMD向量指令加速了像素處理和濾波。
異常處理（Exception handling）- C++異常在Photoshop的代碼庫中廣泛使用，因此在WebAssembly中的支持非常重要。
流式實例化（Streaming instantiation） - Photoshop的80MB+的WASM模塊需要進(jìn)行流式編譯，以提高性能和效率。
調(diào)試 - 在Chrome的DevTools中提供的WebAssembly調(diào)試支持對于開發(fā)和調(diào)試非常有價值。

利用廣色域P3

sRGB的色彩范圍在很多情況下受限，與更廣泛的P3色域相比顯得相形見絀，但長期以來在網(wǎng)絡(luò)上一直是唯一的選擇。

然而，現(xiàn)在Photoshop正在利用新的color()功能和Canvas API來釋放P3色域的全部潛力，以實現(xiàn)更準(zhǔn)確的顏色呈現(xiàn)。這意味著我們可以在Web上展現(xiàn)更豐富和更生動的色彩，使視覺體驗更加引人入勝。

color: color(display-p3 1 0.5 0)

UI靈活性與Web組件

Photoshop是Adobe更廣泛的創(chuàng)意云生態(tài)系統(tǒng)的一部分。利用基于Lit的標(biāo)準(zhǔn)化Web組件策略，實現(xiàn)了應(yīng)用程序之間的界面一致性。

Photoshop的用戶界面元素源自Adobe的Spectrum Web Components庫，這個庫實現(xiàn)了Adobe的設(shè)計系統(tǒng)。Spectrum Web Components具有以下特點：

默認(rèn)支持無障礙訪問 - 在開發(fā)過程中考慮了各種現(xiàn)有和新興瀏覽器規(guī)范，以支持輔助技術(shù)，使應(yīng)用更加包容和易于訪問。
輕量級 - 使用LitElement實現(xiàn)，以確保最小的性能開銷，使界面快速響應(yīng)。
基于標(biāo)準(zhǔn) - 基于Web組件標(biāo)準(zhǔn)構(gòu)建，包括自定義元素和Shadow DOM，以確保與現(xiàn)代瀏覽器的兼容性。
無框架偏好 - 由于瀏覽器級別的支持，這些組件可以與任何前端框架一起使用，增加了靈活性。

此外，整個Photoshop應(yīng)用程序都是使用基于Lit的Web組件構(gòu)建的。Lit的模板和虛擬DOM差異比較使得UI更新更加高效。Web組件的封裝性也使得在需要時輕松集成其他團隊的React代碼成為可能。

總的來說，Web組件的瀏覽器原生自定義元素結(jié)合Lit的性能，為Adobe構(gòu)建Photoshop復(fù)雜的用戶界面提供了所需的靈活性，同時保持了高效性。

優(yōu)化Photoshop在瀏覽器中的性能

盡管新的Web功能為基礎(chǔ)提供了支持，但像Photoshop這樣的強大桌面應(yīng)用程序仍然需要大量的追蹤和性能優(yōu)化工作，以實現(xiàn)在線一流的體驗。這包括對性能瓶頸的深入分析，對資源的有效管理，以及對用戶界面的細(xì)致調(diào)整，以確保用戶獲得最佳的在線使用體驗。這個過程需要不斷的努力和改進(jìn)，以確保Photoshop在Web上能夠保持其卓越的性能和功能。

使用Service Workers緩存資源和代碼

Service Workers是一項重要的Web技術(shù)，允許Web應(yīng)用程序在初始訪問后將其各種資產(chǎn)、代碼和其他資源本地緩存，從而實現(xiàn)更快的加載時間。雖然這并不能使應(yīng)用程序完全離線可用，但Photoshop已經(jīng)充分利用了Service Workers來緩存其WebAssembly模塊、腳本以及其他關(guān)鍵資產(chǎn)。這意味著用戶在訪問時可以更快地加載Photoshop，并且在以后的訪問中可以更快速地訪問緩存的內(nèi)容，提升了應(yīng)用程序的整體性能和響應(yīng)速度。這是一個重要的優(yōu)化步驟，有助于改善用戶體驗。

Chrome DevTools 應(yīng)用面板 > 緩存存儲顯示了 Photoshop 為 Web 預(yù)緩存的不同類型資源。在這里，我們可以看到一些被代碼拆分的 JavaScript 塊，它們被本地緩存，從而實現(xiàn)了非常快速的后續(xù)加載。

這種緩存機制極大地提高了加載性能。在第一次訪問后，后續(xù)的加載通常非常快（M1 MacBook）。

這種緩存機制極大地提高了加載性能。在第一次訪問之后，通常可以體驗到非常快速的加載速度（尤其是在M1 MacBook上）。

Adobe使用Workbox庫更輕松地將Service Worker緩存集成到他們的構(gòu)建過程中，這使得整個緩存策略的實施更為便捷，確保了在Web上提供快速和流暢的Photoshop體驗。這是一個非常重要的技術(shù)，有助于提升Web應(yīng)用程序的性能和響應(yīng)速度。

V8緩存資源的優(yōu)化V8緩存資源的優(yōu)化

V8引擎在資源從Service Worker緩存中返回時采取了一些優(yōu)化措施，以提高性能：

在安裝階段緩存的資源會被急切地編譯，以確保代碼的一致性和快速性能，這意味著在第一次訪問時資源已經(jīng)準(zhǔn)備好，可以立即使用。
通過緩存API緩存的資源進(jìn)行了優(yōu)化，以在第二次加載時更快地提供，相比傳統(tǒng)的緩存方式，性能更出色。
V8引擎根據(jù)緩存和更積極地編譯來檢測資源的重要性，以確保關(guān)鍵資源能夠得到更高效的處理。

這些優(yōu)化功能對于Photoshop大量緩存的Wasm模塊非常有幫助，使得這些模塊能夠以更快的速度加載和執(zhí)行，提升了整個應(yīng)用程序的性能。

由于V8代碼緩存的部分幫助，Photoshop網(wǎng)絡(luò)加載關(guān)鍵視圖的后續(xù)加載速度更快。

流式傳輸和緩存大型WebAssembly模塊

Photoshop的代碼庫需要多個大型的WebAssembly模塊，其中一些超過80MB。V8引擎和Chrome中的流式編譯支持可以高效處理這些龐大的模塊。

此外，當(dāng)首次從服務(wù)工作者請求WebAssembly模塊時，V8引擎會生成并存儲一個經(jīng)過優(yōu)化的版本到緩存中，這對于Photoshop這樣龐大的代碼庫至關(guān)重要。這一優(yōu)化措施確保了第一次訪問時的性能表現(xiàn)，同時減少了后續(xù)訪問時的加載時間，提高了Photoshop Web版的整體性能和響應(yīng)速度。

多線程用于并行圖形操作

在Photoshop中，許多核心圖像處理操作，例如像素轉(zhuǎn)換，通過多線程的并行執(zhí)行可以大大提高速度。WebAssembly的線程支持使得能夠充分利用多核設(shè)備進(jìn)行計算密集型的圖形任務(wù)。

這一技術(shù)使得Photoshop能夠在WebAssembly上采用與桌面端相同的多線程方法，以處理性能關(guān)鍵的圖像處理功能。這不僅提高了性能，還允許更快速的圖像處理和更流暢的用戶體驗。這是Web版Photoshop實現(xiàn)卓越性能的關(guān)鍵因素之一。

優(yōu)化WebAssembly的調(diào)試

在開發(fā)過程中，強大的WebAssembly調(diào)試支持對于診斷和解決性能瓶頸至關(guān)重要。

Chrome DevTools具有出色的功能，可以對WebAssembly代碼進(jìn)行性能分析、設(shè)置斷點，并檢查豐富的變量，與JavaScript的調(diào)試能力相似。這使開發(fā)人員能夠更輕松地分析和優(yōu)化WebAssembly代碼，以確保其在Web上的執(zhí)行效率和性能達(dá)到最佳水平。這些調(diào)試工具是提高Web版Photoshop性能和可維護性的重要資源。

將On-Device Machine Learning與TensorFlow.js集成

最近的Photoshop網(wǎng)絡(luò)版本引入了基于TensorFlow.js的人工智能功能。這個重要的改進(jìn)允許模型在用戶設(shè)備上本地運行，而不是依賴云端計算，從而提高了隱私、降低了延遲并減少了成本。

TensorFlow.js是由Google開發(fā)的開源機器學(xué)習(xí)庫，旨在為JavaScript開發(fā)人員提供一個在瀏覽器中運行的客戶端解決方案。它是Web機器學(xué)習(xí)的最成熟選擇之一，支持全面的WebGL和WebAssembly后端操作符，未來還計劃提供WebGPU后端選項，以進(jìn)一步提高性能，適應(yīng)新的Web標(biāo)準(zhǔn)發(fā)展。

這項改進(jìn)的主要功能之一是使用機器學(xué)習(xí)技術(shù)自動提取圖像中的主要前景對象，這極大地加快了復(fù)雜選擇的速度。這一集成進(jìn)一步提升了Photoshop Web版的功能，使其更加強大和高效。

我有一幅日落的插圖，我想把它改成夜晚的場景。我使用了“選擇主題”和人工智能提示來嘗試選擇最有趣的區(qū)域進(jìn)行更新。

Photoshop能夠根據(jù)我的AI提示生成一幅更新的插圖

以及幾種不同的風(fēng)格的插圖。

該模型已從TensorFlow轉(zhuǎn)換為TensorFlow.js，以實現(xiàn)本地執(zhí)行。

// Load Select Subject model
const model=await tf.loadGraphModel('select_subject.json');

// Run inference on image tensor  
const {mask, background}=model.execute(imgTensor);

// Refine selection from mask

Adobe和Google的合作非常重要，他們共同開發(fā)了一個用于Emscripten的代理API，以解決Photoshop的WebAssembly代碼與TensorFlow.js之間的同步問題。這個API允許兩個框架之間的無縫集成。

此外，Google團隊通過優(yōu)化TensorFlow.js的硬件執(zhí)行性能，利用了多種后端支持（包括WebGL、WebAssembly和Web GPU），使機器學(xué)習(xí)模型的性能提升了30%至200%。特別是對于大型模型，這一優(yōu)化效果更為顯著，使得在瀏覽器中實現(xiàn)接近實時性能成為可能。這對于提高Web版Photoshop的性能和功能是一項重大的技術(shù)進(jìn)步，為用戶提供更快速和更強大的工具。

重點模型進(jìn)行了優(yōu)化，特別關(guān)注了性能關(guān)鍵操作，例如 Conv2D。這使得Photoshop可以根據(jù)性能需求選擇在用戶設(shè)備上本地運行模型，還是在云端進(jìn)行運算。

如果您希望了解有關(guān)TensorFlow.js在Photoshop中的更多詳細(xì)信息，請查閱相關(guān)文章和文檔。這些信息將提供有關(guān)如何實現(xiàn)這些優(yōu)化、性能改進(jìn)以及Photoshop的Web版本中的機器學(xué)習(xí)功能的更多背景和技術(shù)細(xì)節(jié)。

https://blog.tensorflow.org/2023/03/how-adobe-used-web-ml-with-tensorflowjs-to-enhance-photoshop-for-web.html

Photoshop的未來在Web上的發(fā)展

Photoshop在Web上的發(fā)展代表著一個巨大的里程碑，但僅僅觸及了潛在可能性的表面。

未來，Photoshop將繼續(xù)擴展其在Web上的功能，隨著瀏覽器供應(yīng)商不斷演進(jìn)Web標(biāo)準(zhǔn)和性能，它將通過漸進(jìn)增強的方式在線提供更多功能。而Photoshop只是開始。Adobe計劃積極構(gòu)建其完整的創(chuàng)意云套件，以在瀏覽器中解鎖更多復(fù)雜的設(shè)計應(yīng)用程序。

Adobe和瀏覽器工程師之間的合作將持續(xù)推動Web作為一個強大的平臺，通過推進(jìn)標(biāo)準(zhǔn)和性能改進(jìn)，為更具野心的應(yīng)用程序提供支持。未來將充滿令人興奮的機遇和創(chuàng)新，我們可以期待看到更多出色的Web應(yīng)用程序和創(chuàng)意工具涌現(xiàn)出來。這將是一個創(chuàng)意和技術(shù)蓬勃發(fā)展的時代！

嘗試在瀏覽器上使用Photoshop web 版

Photoshop Web版目前已經(jīng)可以在以下瀏覽器版本中運行：

Chrome 102+
Edge 102+
Firefox 111+

并且Adobe正在積極努力彌合對Safari瀏覽器的支持差距。您可以立即在photoshop.adobe.com上嘗試這一版本。未來的創(chuàng)意和設(shè)計已經(jīng)觸手可及，它們將在網(wǎng)絡(luò)上綻放新的可能性，就在您的指尖！

由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請別忘了點贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時，如果您想獲取更多前端技術(shù)的知識，歡迎關(guān)注我，您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容，敬請期待。

語

在網(wǎng)頁開發(fā)過程中，Web前端處于網(wǎng)頁設(shè)計師的下游，在工作上，他們往往需要緊密的協(xié)作。這篇學(xué)習(xí)日記所講到的PS技能，則源于他們的工作交集部分。無論你是網(wǎng)頁設(shè)計師、還是Web前端工程師，只要你能教會對方以下這些PS技能，你們將能一起快樂的玩耍，友誼值瞬間Up、Up。

從日常的工作中，@酷coo豆就總結(jié)出來了，以下四個最常用的PS技能，它們分別是：

1、常規(guī)切圖

2、生成圖片資源

3、生成CSS代碼

4、批量壓縮圖片

一、前面三種PS操作演示

△視頻演示：切圖、生成圖片、復(fù)制CSS樣式

二、PS批量壓縮圖片

在WEB前端開發(fā)過程中，一些專題頁面中，時常會包含有大量的案例圖片需要展示，比如：圖集、相冊、新聞配圖等。直接從相機或手機得到的圖片，其分辨率大小不一、體積巨大，在這樣的情況下，我們往往需要對這些圖片進(jìn)行壓縮處理。

搓下面鏈接，解鎖PS新技能：

PS批處理教程——讓電腦幫你工作，解放你的雙手！

△視頻演示：用PS批量壓縮處理圖片

三、批處理的其他用處

除了像上述視頻中展示的那樣，可以用PS批量處理壓縮圖片，我們還可以借鑒到：給圖片批量添加水印、批量調(diào)色、裁剪圖片等。總之在工作過程中，有大量簡單、重復(fù)，類似流水線生產(chǎn)的操作時，你都可以考慮用Photoshop的批處理功能，來提升工作效率。

PS人像調(diào)色

ok，以上就是@酷coo豆整理的“Web前端必備PS技能”的全部內(nèi)容，更多系統(tǒng)全面的網(wǎng)頁設(shè)計教程推薦，歡迎訪問平面設(shè)計學(xué)習(xí)日記網(wǎng)。

—

0基礎(chǔ)，網(wǎng)頁設(shè)計學(xué)習(xí)路徑：http://www.xxriji.cn/career/7.html

推薦網(wǎng)頁設(shè)計教程：http://t.cn/RcxBPkx

如果覺得文章所有幫助，歡迎大家轉(zhuǎn)載分享，最后感謝你的閱讀。

在線咨詢

上一篇：Rust 1.80.0 版本發(fā)布，新增 LazyCe
下一篇：H5 網(wǎng)頁跳轉(zhuǎn)企微智能客服方式是什么？

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商