整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
年來(lái)，隨著無(wú)線互聯(lián)網(wǎng)、智能手機(jī)和各種社交APP的興起，廣大用戶對(duì)圖片處理的需求越來(lái)越大，而在圖片處理領(lǐng)域，Adobe的公司Photoshop軟件是絕對(duì)的王者，堪稱是行業(yè)的引領(lǐng)者。
但是，Adobe的Photoshop軟件也有它的槽點(diǎn)，那就是過(guò)于“專業(yè)”，不僅對(duì)電腦硬件配置要求高，其學(xué)習(xí)和使用成本也高，令很多普通用戶望而卻步。
某些時(shí)候用戶也不需要那么強(qiáng)大、復(fù)雜的功能，只需要對(duì)圖片進(jìn)行輕度處理，這個(gè)時(shí)候，用戶往往會(huì)去選擇使用一些第三方的圖片處理軟件，比如美圖秀秀等等。
近些年，Adobe已經(jīng)意識(shí)到這個(gè)問(wèn)題，并且在致力于Photoshop輕量化方面做出了一些有益的嘗試，近期Adobe在這方面又有新的進(jìn)展，將推出PS網(wǎng)頁(yè)版。
使用網(wǎng)頁(yè)版的Photoshop，用戶需要訪問(wèn) Adob?e Creative Cloud。雖然評(píng)論和注釋等功能以前已經(jīng)可用，可進(jìn)行編輯，如操作圖層、選擇區(qū)域和應(yīng)用蒙版等基本操作，當(dāng)然，其功能肯定無(wú)法比安裝版相比。
據(jù)悉，WebAssembly及其 C++工具鏈Emscripten是支持Photoshop推出網(wǎng)頁(yè)版的兩項(xiàng)關(guān)鍵底層技術(shù)。
WebAssembly 是一種可移植的二進(jìn)制指令集，主流瀏覽器均提供支持，使用 C++ 編寫的應(yīng)用程序（例如 Photoshop）可以直接移植到 Web 上，而無(wú)需使用客戶端的JavaScript 代碼進(jìn)行重寫，后者是難度極高而繁瑣的過(guò)程。
而Emscripten是一個(gè)功能齊全的工具鏈，可將C++代碼編譯為WebAssembly，并且提供了一個(gè)轉(zhuǎn)換層，可以將 POSIX API 調(diào)用轉(zhuǎn)換為 Web API調(diào)用，甚至支持將OpenGL 轉(zhuǎn)換為 WebGL運(yùn)行。
有了這兩項(xiàng)關(guān)鍵的底層技術(shù)支持，Adob??e可以不必完全從頭開發(fā)，可利用現(xiàn)有的大部分Photoshop 代碼庫(kù)，推出網(wǎng)頁(yè)版的難度大大降低。
目前，網(wǎng)頁(yè)版的PS 只能在谷歌Chrome和微軟的Edge瀏覽器中使用， 某些基于Chromium 內(nèi)核的瀏覽器也有可能可正常使用，但未經(jīng)嚴(yán)格驗(yàn)證，據(jù)悉，后續(xù)也加會(huì)加入對(duì)Firefox瀏覽器的支持，但并未給出明確時(shí)間。
當(dāng)然，這些都是Adob??e方面的一面之詞，其實(shí)際體驗(yàn)究竟如何，還需要接受廣大用戶檢驗(yàn)。
載說(shuō)明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載
通過(guò)WebAssembly + Emscripten、Web Components + Lit、Service Workers + Workbox以及對(duì)新的Web API的支持，Chrome和Adobe之間的合作使得將Photoshop桌面應(yīng)用程序引入Web成為了一項(xiàng)重大的里程碑。現(xiàn)在，您可以在瀏覽器上使用高度復(fù)雜和圖形密集的軟件，只需訪問(wèn)photoshop.adobe.com。這一成就得益于Adobe工程師多年來(lái)的不懈努力，以及與Chrome等瀏覽器供應(yīng)商緊密合作，共同推動(dòng)了Web技術(shù)的發(fā)展。
多年來(lái)，Photoshop一直是圖像編輯和平面設(shè)計(jì)的頂級(jí)工具，為創(chuàng)意工作者在Windows和macOS上提供了無(wú)限的創(chuàng)作可能性。然而，如今我們有機(jī)會(huì)讓它擺脫桌面的束縛，打開嶄新的大門。
在互聯(lián)網(wǎng)的幫助下，我們可以實(shí)現(xiàn)隨時(shí)隨地、輕松編輯和協(xié)作的愿景。用戶只需打開瀏覽器，就可以立即開始編輯，不再需要繁瑣的軟件安裝。而且，他們可以在不同的設(shè)備之間毫不費(fèi)力地切換。
連接性是關(guān)鍵，它讓我們能夠分享工作流程。現(xiàn)在，Photoshop文檔可以通過(guò)簡(jiǎn)單的URL鏈接進(jìn)行訪問(wèn)，而不再埋藏在復(fù)雜的文件系統(tǒng)中。這使創(chuàng)作者可以輕松地與合作者共享他們的作品。
最令人興奮的是，這種新方式也跨越了平臺(tái)的邊界。通過(guò)網(wǎng)絡(luò)運(yùn)行，我們可以讓Photoshop適應(yīng)多種操作系統(tǒng)，讓更多的用戶能夠輕松訪問(wèn)它。
然而，要實(shí)現(xiàn)這一愿景，我們需要克服重大的技術(shù)挑戰(zhàn)，重新思考如何讓像Photoshop這樣強(qiáng)大的應(yīng)用程序在互聯(lián)網(wǎng)上運(yùn)行。
但是實(shí)現(xiàn)這一愿景面臨著重大的技術(shù)挑戰(zhàn)，需要重新思考像Photoshop這樣強(qiáng)大的應(yīng)用程序如何在網(wǎng)絡(luò)上運(yùn)行。
新的Web功能釋放了Photoshop的潛力
近年來(lái)，出現(xiàn)了一些能夠通過(guò)標(biāo)準(zhǔn)化和實(shí)施來(lái)實(shí)現(xiàn)類似于Photoshop的應(yīng)用程序的Web平臺(tái)功能。Adobe工程師創(chuàng)新地充分利用了幾個(gè)關(guān)鍵的下一代API：
在Photoshop中，我們經(jīng)常需要讀寫可能非常大的PSD文件。這要求對(duì)本地文件系統(tǒng)進(jìn)行高效的訪問(wèn)。新的Origin私有文件系統(tǒng)API（OPFS）為我們提供了一個(gè)快速的、特定于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();要實(shí)現(xiàn)絕對(duì)最快的同步操作，Web Workers可以發(fā)揮關(guān)鍵作用。
這個(gè)本地高性能文件系統(tǒng)對(duì)于在瀏覽器中實(shí)現(xiàn)復(fù)雜的Photoshop文件工作流程至關(guān)重要。它為我們提供了在瀏覽器中高效處理文件的關(guān)鍵支持。
WebAssembly在JavaScript中的重新實(shí)現(xiàn)已成為Photoshop計(jì)算密集型圖形處理的關(guān)鍵組成部分。Adobe借助Emscripten編譯器，將現(xiàn)有的C/C++代碼庫(kù)移植到WebAssembly模塊中。
以下是幾個(gè)WebAssembly的重要功能：
// 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);sRGB的色彩范圍在很多情況下受限，與更廣泛的P3色域相比顯得相形見絀，但長(zhǎng)期以來(lái)在網(wǎng)絡(luò)上一直是唯一的選擇。
然而，現(xiàn)在Photoshop正在利用新的color()功能和Canvas API來(lái)釋放P3色域的全部潛力，以實(shí)現(xiàn)更準(zhǔn)確的顏色呈現(xiàn)。這意味著我們可以在Web上展現(xiàn)更豐富和更生動(dòng)的色彩，使視覺體驗(yàn)更加引人入勝。
color: color(display-p3 1 0.5 0)Photoshop是Adobe更廣泛的創(chuàng)意云生態(tài)系統(tǒng)的一部分。利用基于Lit的標(biāo)準(zhǔn)化Web組件策略，實(shí)現(xiàn)了應(yīng)用程序之間的界面一致性。
Photoshop的用戶界面元素源自Adobe的Spectrum Web Components庫(kù)，這個(gè)庫(kù)實(shí)現(xiàn)了Adobe的設(shè)計(jì)系統(tǒng)。Spectrum Web Components具有以下特點(diǎn)：
此外，整個(gè)Photoshop應(yīng)用程序都是使用基于Lit的Web組件構(gòu)建的。Lit的模板和虛擬DOM差異比較使得UI更新更加高效。Web組件的封裝性也使得在需要時(shí)輕松集成其他團(tuán)隊(duì)的React代碼成為可能。
總的來(lái)說(shuō)，Web組件的瀏覽器原生自定義元素結(jié)合Lit的性能，為Adobe構(gòu)建Photoshop復(fù)雜的用戶界面提供了所需的靈活性，同時(shí)保持了高效性。
盡管新的Web功能為基礎(chǔ)提供了支持，但像Photoshop這樣的強(qiáng)大桌面應(yīng)用程序仍然需要大量的追蹤和性能優(yōu)化工作，以實(shí)現(xiàn)在線一流的體驗(yàn)。這包括對(duì)性能瓶頸的深入分析，對(duì)資源的有效管理，以及對(duì)用戶界面的細(xì)致調(diào)整，以確保用戶獲得最佳的在線使用體驗(yàn)。這個(gè)過(guò)程需要不斷的努力和改進(jìn)，以確保Photoshop在Web上能夠保持其卓越的性能和功能。
Service Workers是一項(xiàng)重要的Web技術(shù)，允許Web應(yīng)用程序在初始訪問(wèn)后將其各種資產(chǎn)、代碼和其他資源本地緩存，從而實(shí)現(xiàn)更快的加載時(shí)間。雖然這并不能使應(yīng)用程序完全離線可用，但Photoshop已經(jīng)充分利用了Service Workers來(lái)緩存其WebAssembly模塊、腳本以及其他關(guān)鍵資產(chǎn)。這意味著用戶在訪問(wèn)時(shí)可以更快地加載Photoshop，并且在以后的訪問(wèn)中可以更快速地訪問(wèn)緩存的內(nèi)容，提升了應(yīng)用程序的整體性能和響應(yīng)速度。這是一個(gè)重要的優(yōu)化步驟，有助于改善用戶體驗(yàn)。
Chrome DevTools 應(yīng)用面板 > 緩存存儲(chǔ)顯示了 Photoshop 為 Web 預(yù)緩存的不同類型資源。在這里，我們可以看到一些被代碼拆分的 JavaScript 塊，它們被本地緩存，從而實(shí)現(xiàn)了非常快速的后續(xù)加載。
這種緩存機(jī)制極大地提高了加載性能。在第一次訪問(wèn)后，后續(xù)的加載通常非常快（M1 MacBook）。
這種緩存機(jī)制極大地提高了加載性能。在第一次訪問(wèn)之后，通常可以體驗(yàn)到非常快速的加載速度（尤其是在M1 MacBook上）。
Adobe使用Workbox庫(kù)更輕松地將Service Worker緩存集成到他們的構(gòu)建過(guò)程中，這使得整個(gè)緩存策略的實(shí)施更為便捷，確保了在Web上提供快速和流暢的Photoshop體驗(yàn)。這是一個(gè)非常重要的技術(shù)，有助于提升Web應(yīng)用程序的性能和響應(yīng)速度。
V8緩存資源的優(yōu)化V8緩存資源的優(yōu)化
V8引擎在資源從Service Worker緩存中返回時(shí)采取了一些優(yōu)化措施，以提高性能：
這些優(yōu)化功能對(duì)于Photoshop大量緩存的Wasm模塊非常有幫助，使得這些模塊能夠以更快的速度加載和執(zhí)行，提升了整個(gè)應(yīng)用程序的性能。
由于V8代碼緩存的部分幫助，Photoshop網(wǎng)絡(luò)加載關(guān)鍵視圖的后續(xù)加載速度更快。
Photoshop的代碼庫(kù)需要多個(gè)大型的WebAssembly模塊，其中一些超過(guò)80MB。V8引擎和Chrome中的流式編譯支持可以高效處理這些龐大的模塊。
此外，當(dāng)首次從服務(wù)工作者請(qǐng)求WebAssembly模塊時(shí)，V8引擎會(huì)生成并存儲(chǔ)一個(gè)經(jīng)過(guò)優(yōu)化的版本到緩存中，這對(duì)于Photoshop這樣龐大的代碼庫(kù)至關(guān)重要。這一優(yōu)化措施確保了第一次訪問(wèn)時(shí)的性能表現(xiàn)，同時(shí)減少了后續(xù)訪問(wèn)時(shí)的加載時(shí)間，提高了Photoshop Web版的整體性能和響應(yīng)速度。
在Photoshop中，許多核心圖像處理操作，例如像素轉(zhuǎn)換，通過(guò)多線程的并行執(zhí)行可以大大提高速度。WebAssembly的線程支持使得能夠充分利用多核設(shè)備進(jìn)行計(jì)算密集型的圖形任務(wù)。
這一技術(shù)使得Photoshop能夠在WebAssembly上采用與桌面端相同的多線程方法，以處理性能關(guān)鍵的圖像處理功能。這不僅提高了性能，還允許更快速的圖像處理和更流暢的用戶體驗(yàn)。這是Web版Photoshop實(shí)現(xiàn)卓越性能的關(guān)鍵因素之一。
在開發(fā)過(guò)程中，強(qiáng)大的WebAssembly調(diào)試支持對(duì)于診斷和解決性能瓶頸至關(guān)重要。
Chrome DevTools具有出色的功能，可以對(duì)WebAssembly代碼進(jìn)行性能分析、設(shè)置斷點(diǎn)，并檢查豐富的變量，與JavaScript的調(diào)試能力相似。這使開發(fā)人員能夠更輕松地分析和優(yōu)化WebAssembly代碼，以確保其在Web上的執(zhí)行效率和性能達(dá)到最佳水平。這些調(diào)試工具是提高Web版Photoshop性能和可維護(hù)性的重要資源。
最近的Photoshop網(wǎng)絡(luò)版本引入了基于TensorFlow.js的人工智能功能。這個(gè)重要的改進(jìn)允許模型在用戶設(shè)備上本地運(yùn)行，而不是依賴云端計(jì)算，從而提高了隱私、降低了延遲并減少了成本。
TensorFlow.js是由Google開發(fā)的開源機(jī)器學(xué)習(xí)庫(kù)，旨在為JavaScript開發(fā)人員提供一個(gè)在瀏覽器中運(yùn)行的客戶端解決方案。它是Web機(jī)器學(xué)習(xí)的最成熟選擇之一，支持全面的WebGL和WebAssembly后端操作符，未來(lái)還計(jì)劃提供WebGPU后端選項(xiàng)，以進(jìn)一步提高性能，適應(yīng)新的Web標(biāo)準(zhǔn)發(fā)展。
這項(xiàng)改進(jìn)的主要功能之一是使用機(jī)器學(xué)習(xí)技術(shù)自動(dòng)提取圖像中的主要前景對(duì)象，這極大地加快了復(fù)雜選擇的速度。這一集成進(jìn)一步提升了Photoshop Web版的功能，使其更加強(qiáng)大和高效。
我有一幅日落的插圖，我想把它改成夜晚的場(chǎng)景。我使用了“選擇主題”和人工智能提示來(lái)嘗試選擇最有趣的區(qū)域進(jìn)行更新。
Photoshop能夠根據(jù)我的AI提示生成一幅更新的插圖
以及幾種不同的風(fēng)格的插圖。
該模型已從TensorFlow轉(zhuǎn)換為TensorFlow.js，以實(shí)現(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 maskAdobe和Google的合作非常重要，他們共同開發(fā)了一個(gè)用于Emscripten的代理API，以解決Photoshop的WebAssembly代碼與TensorFlow.js之間的同步問(wèn)題。這個(gè)API允許兩個(gè)框架之間的無(wú)縫集成。
此外，Google團(tuán)隊(duì)通過(guò)優(yōu)化TensorFlow.js的硬件執(zhí)行性能，利用了多種后端支持（包括WebGL、WebAssembly和Web GPU），使機(jī)器學(xué)習(xí)模型的性能提升了30%至200%。特別是對(duì)于大型模型，這一優(yōu)化效果更為顯著，使得在瀏覽器中實(shí)現(xiàn)接近實(shí)時(shí)性能成為可能。這對(duì)于提高Web版Photoshop的性能和功能是一項(xiàng)重大的技術(shù)進(jìn)步，為用戶提供更快速和更強(qiáng)大的工具。
重點(diǎn)模型進(jìn)行了優(yōu)化，特別關(guān)注了性能關(guān)鍵操作，例如 Conv2D。這使得Photoshop可以根據(jù)性能需求選擇在用戶設(shè)備上本地運(yùn)行模型，還是在云端進(jìn)行運(yùn)算。
如果您希望了解有關(guān)TensorFlow.js在Photoshop中的更多詳細(xì)信息，請(qǐng)查閱相關(guān)文章和文檔。這些信息將提供有關(guān)如何實(shí)現(xiàn)這些優(yōu)化、性能改進(jìn)以及Photoshop的Web版本中的機(jī)器學(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ā)展代表著一個(gè)巨大的里程碑，但僅僅觸及了潛在可能性的表面。
未來(lái)，Photoshop將繼續(xù)擴(kuò)展其在Web上的功能，隨著瀏覽器供應(yīng)商不斷演進(jìn)Web標(biāo)準(zhǔn)和性能，它將通過(guò)漸進(jìn)增強(qiáng)的方式在線提供更多功能。而Photoshop只是開始。Adobe計(jì)劃積極構(gòu)建其完整的創(chuàng)意云套件，以在瀏覽器中解鎖更多復(fù)雜的設(shè)計(jì)應(yīng)用程序。
Adobe和瀏覽器工程師之間的合作將持續(xù)推動(dòng)Web作為一個(gè)強(qiáng)大的平臺(tái)，通過(guò)推進(jìn)標(biāo)準(zhǔn)和性能改進(jìn)，為更具野心的應(yīng)用程序提供支持。未來(lái)將充滿令人興奮的機(jī)遇和創(chuàng)新，我們可以期待看到更多出色的Web應(yīng)用程序和創(chuàng)意工具涌現(xiàn)出來(lái)。這將是一個(gè)創(chuàng)意和技術(shù)蓬勃發(fā)展的時(shí)代！
Photoshop Web版目前已經(jīng)可以在以下瀏覽器版本中運(yùn)行：
并且Adobe正在積極努力彌合對(duì)Safari瀏覽器的支持差距。您可以立即在photoshop.adobe.com上嘗試這一版本。未來(lái)的創(chuàng)意和設(shè)計(jì)已經(jīng)觸手可及，它們將在網(wǎng)絡(luò)上綻放新的可能性，就在您的指尖！
由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識(shí)，歡迎關(guān)注我，您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。
在網(wǎng)頁(yè)開發(fā)過(guò)程中，Web前端處于網(wǎng)頁(yè)設(shè)計(jì)師的下游，在工作上，他們往往需要緊密的協(xié)作。這篇學(xué)習(xí)日記所講到的PS技能，則源于他們的工作交集部分。無(wú)論你是網(wǎng)頁(yè)設(shè)計(jì)師、還是Web前端工程師，只要你能教會(huì)對(duì)方以下這些PS技能，你們將能一起快樂的玩耍，友誼值瞬間Up、Up。
從日常的工作中，@酷coo豆 就總結(jié)出來(lái)了，以下四個(gè)最常用的PS技能，它們分別是：
1、常規(guī)切圖
2、生成圖片資源
3、生成CSS代碼
4、批量壓縮圖片
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
△視頻演示：切圖、生成圖片、復(fù)制CSS樣式
在WEB前端開發(fā)過(guò)程中，一些專題頁(yè)面中，時(shí)常會(huì)包含有大量的案例圖片需要展示，比如：圖集、相冊(cè)、新聞配圖等。直接從相機(jī)或手機(jī)得到的圖片，其分辨率大小不一、體積巨大，在這樣的情況下，我們往往需要對(duì)這些圖片進(jìn)行壓縮處理。
搓下面鏈接，解鎖PS新技能：
PS批處理教程——讓電腦幫你工作，解放你的雙手！
△視頻演示：用PS批量壓縮處理圖片
除了像上述視頻中展示的那樣，可以用PS批量處理壓縮圖片，我們還可以借鑒到：給圖片批量添加水印、批量調(diào)色、裁剪圖片等。總之在工作過(guò)程中，有大量簡(jiǎn)單、重復(fù)，類似流水線生產(chǎn)的操作時(shí)，你都可以考慮用Photoshop的批處理功能，來(lái)提升工作效率。
PS人像調(diào)色
ok，以上就是@酷coo豆 整理的“Web前端必備PS技能”的全部?jī)?nèi)容，更多系統(tǒng)全面的網(wǎng)頁(yè)設(shè)計(jì)教程推薦，歡迎訪問(wèn)平面設(shè)計(jì)學(xué)習(xí)日記網(wǎng)。
—
0基礎(chǔ)，網(wǎng)頁(yè)設(shè)計(jì)學(xué)習(xí)路徑：http://www.xxriji.cn/career/7.html
推薦網(wǎng)頁(yè)設(shè)計(jì)教程：http://t.cn/RcxBPkx
如果覺得文章所有幫助，歡迎大家轉(zhuǎn)載分享，最后感謝你的閱讀。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
